今天看视频学习的第一个知识是HTML中的块元素<div>和行内元素<span>。

 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <meta name="Generator" content="EditPlus®">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>Document</title>

   <style type = "text/css">/*使用层叠样式*/

     div,p{/*给所有div和p元素加样式*/

         border : 1px solid red;    /*添加红色边框*/}

     P{background-color:#99ff66}

     span{border : 1px solid blue;background-color:#00ffff}

   </style>

  </head>

  <body>

   <div>正是雁群排成“人”字，一行行南归时候。月光皎洁浸人，洒满这西边独倚的亭楼。</div>

   <p>正是雁群排成“人”字，一行行南归时候。月光皎洁浸人，洒满这西边独倚的亭楼。</p>

   <span>正是雁群排成“人”字，一行行南归时候。月光皎洁浸人，洒满这西边独倚的亭楼。</span>

   <span>正是雁群排成“人”字，一行行南归时候。月光皎洁浸人，洒满这西边独倚的亭楼。</span>

  </body>

 </html>

总结：

　　

<div>没什么意义用的很多的划块工具，一般要与CSS配合使用；
  div是个块元素；
 
  <span>没什么意义用的很多的划块；与CSS配合使用；
  span是行内元素；
 
  块元素：一般是单独占一行，不管内容多少总是占一行
  如:<div>、<p>

行内元素：不会单独占一行，多个行内元素会排在同一行
  如:<span>、<font>

结论：一般是快元素嵌套行内元素；

=============================================================================================

第二个知识点是关于有序列表<ul>和无序列表<ol>

 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <meta name="Generator" content="EditPlus®">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>Document</title>

  </head>

  <body>

    <h3>一剪梅·红藕香残玉簟秋</h3>

    <ul type = "disc">

         <li type = "circle">红藕香残玉簟秋。轻解罗裳，独上兰舟。</li>

         <li type = "square">云中谁寄锦书来，雁字回时，月满西楼。</li>

         <li>花自飘零水自流。一种相思，两处闲愁。</li>

         <li>此情无计可消除，才下眉头，却上心头。</li>

    </ul>

    <h4>一剪梅·红藕香残玉簟秋</h4>

    <ol>

         <li>红藕香残玉簟秋。轻解罗裳，独上兰舟。</li>

         <li>云中谁寄锦书来，雁字回时，月满西楼。</li>

         <li>花自飘零水自流。一种相思，两处闲愁。</li>

         <li>此情无计可消除，才下眉头，却上心头。</li>

    </ol>

  </body>

 </html>

ul 无序列表
<ul>或<li>的常用属性：
 Type：项目符号的类型；取值：disc(黑点)，circle(空心圆),square(方块);默认为disc；
 它们属于块元素；

ol 有序列表
<ol>或<li>的常用属性：
 Type: 编号类型; 取值：1,a,A,i,I；
 Start: 从第几个开始；

================================================================================================

第三个知识点关于特殊字符标签

 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <meta name="Generator" content="EditPlus®">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>Document</title>

  </head>

  <body>

     <p>&nbsp;&nbsp;&nbsp;&nbsp正是雁群排成“人”字，一行行南归时候。月光皎洁浸人，洒满这西边独倚的亭楼。</p><br>

     <p>2&lt;3</p><br>

     <p>3&gt;2</p><br>

     <p>&amp;</p><br>

     <p>&yen;</p><br>

     <p>&times;</p><br>

     <p>&dicide;<p>

  </body>

 </html>

空格：&nbsp; 代表一个半角空格;
<(小于号): &lt;
>(大于号)：&gt;
&: &amp;
¥：&yen;
*: &times；
÷：&dicide；

================================================================================================

第四个就是图文混排的效果主要是在图片标签<img>中添加align属性，取左或右任意一属性

================================================================================================

第五个是滚动字幕效果，marquee

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

  <a href = "http://www.baidu.com">百度</a>

  <marquee>默认~</marquee>

  <marquee direction = "up" bgcolor = "red" width = 20xp>向上</marquee>

  <marquee direction = "down">向下</marquee>

  <marquee direction = "left">向左</marquee>

  <marquee direction = "right">向右</marquee>

 </body>

</html>

murquee语法
 <marquee>...</marquee>
 <marquee>属性
  Direction:滚动方向； 取值：up,down,left,right;
  Width: 滚动宽度；
  Height：滚动高度；
  bgColor: 滚动背景颜色；
  scrollAmount: 滚动速度（步长值）；
  scrollDelay: 两步之间的停留时间；
  loop:循环滚动的次数；

===========================================================================================

第六个的是超链接

 <html>

 <head>

     <title>超链接</title>

     <meta http-equiv = "content-type" content = "text/html;charset = utf-8">

 <head>

 <body>

     <a href = "http://www.baidu.com">百度</a>

 </body>

 </html>

常用属性：
 href：目标文件地址的URL，该URL是相对地址，也可以是绝对地址；
 target：目标文件的显示窗口
  _blank:在新窗口中打开目标文件
  _self:在当前窗口打开目标文件，相当替换；
  _parent:在父级窗口中打开目标文件；
  _top:在最顶级窗口打开目标文件；
 其中_parent和_top常用于框架网页中；
 name:定义锚点链接的名称;

绝对地址URL：
  1、远程的绝对地址
   访问远程的文件，总是以域名、主机名开头。
  2、本地的绝对地址

HTML第二天学习笔记的更多相关文章

  1. Docker技术入门与实战 第二版-学习笔记-10-Docker Machine 项目-2-driver

    1>使用的driver 1〉generic 使用带有SSH的现有VM/主机创建机器. 如果你使用的是机器不直接支持的provider,或者希望导入现有主机以允许Docker Machine进行管 ...

  2. Docker技术入门与实战 第二版-学习笔记-8-网络功能network-3-容器访问控制和自定义网桥

    1)容器访问控制 容器的访问控制,主要通过 Linux 上的 iptables防火墙来进行管理和实现. iptables是 Linux 上默认的防火墙软件,在大部分发行版中都自带. 容器访问外部网络 ...

  3. 《Linux内核分析》第二周学习笔记

    <Linux内核分析>第二周学习笔记 操作系统是如何工作的 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/ ...

  4. Linux内核分析第二周学习笔记

    linux内核分析第二周学习笔记 标签(空格分隔): 20135328陈都 陈都 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.co ...

  5. AS开发实战第二章学习笔记——其他

    第二章学习笔记(1.19-1.22)像素Android支持的像素单位主要有px(像素).in(英寸).mm(毫米).pt(磅,1/72英寸).dp(与设备无关的显示单位).dip(就是dp).sp(用 ...

  6. #Spring实战第二章学习笔记————装配Bean

    Spring实战第二章学习笔记----装配Bean 创建应用对象之间协作关系的行为通常称为装配(wiring).这也是依赖注入(DI)的本质. Spring配置的可选方案 当描述bean如何被装配时, ...

  7. Python核心编程第三版第二章学习笔记

    第二章 网络编程 1.学习笔记 2.课后习题 答案是按照自己理解和查阅资料来的,不保证正确性.如由错误欢迎指出,谢谢 1. 套接字:A network socket is an endpoint of ...

  8. 20165326 java第二周学习笔记

    学习笔记 一.理论学习 基本数据类型与数组 标识符的第一个字符不能是数字:标识符不能为关键字. 基本数据类型多数与c语言相同.重点如下: 1.逻辑类型boolean赋值true/false 2.浮点数 ...

  9. Java学习第二周学习笔记

    20145307<Java程序设计>第二周学习总结 教材学习内容总结 Java语言中的很多基本语法都和C语言类似,以下Java中的基本语法 标识符 标识符是程序中自定义的一些名称. 由26 ...

  10. 《Linux内核设计与实现》课本第一章&第二章学习笔记

    <Linux内核设计与实现>课本学习笔记 By20135203齐岳 一.Linux内核简介 Unix内核的特点 Unix很简洁,所提供的系统调用都有很明确的设计目的. Unix中一切皆文件 ...

随机推荐

  1. SpringMVC注解@initbinder解决类型转换问题

    在使用SpringMVC的时候,经常会遇到表单中的日期字符串和JavaBean的Date类型的转换,而SpringMVC默认不支持这个格式的转换,所以需要手动配置,自定义数据的绑定才能解决这个问题.在 ...

  2. 【转】ios开发之AppDelegate

    创建应用程序之后之后,默认有AppDelegate.h文件与AppDelegate.m文件.   AppDelegate为何物?  AppDelegate为整个应用的一个代理,提供程序启动.退出等类似 ...

  3. Xcode各版本官方下载及百度云盘下载, Mac和IOS及Xcode版本历史.

    官方下载, 用开发者账户登录,建议用Safari浏览器下载. 官方下载地址: https://developer.apple.com/xcode/downloads/ 百度云盘下载地址: http:/ ...

  4. windows7操作系统64位安装ArcSDE10.1和Oracle11g

    安装环境如下: Oracle11g R2 64位服务端Oracle11g R2 32位客户端(管理员,第二项)ArcSDE10.1 for Oracle11g SDE数据库可由其它机器安装Arcata ...

  5. Servlet中response.sendRedirect()跳转时不能设置target的解决办法

    一般使用Struts2的拦截器(或者是filter)验证是否登录的时候,如果用户没有登录则会跳转到登录的页面.这时候一般可以在拦截器或者filter中用response.sendRedirect(). ...

  6. 性能测试之Windows常见性能计数器

    性能计数器(counter)是描述服务器或操作系统性能的一些数据指标.计数器在性能测试中发挥着“监控和分析”的关键作用,尤其是在分析系统的可扩展性.进行性能瓶颈的定位时,对计数器的取值的分析非常关键. ...

  7. GitHub使用教程及常见错误解决

    1.下载Git并安装 Git for Windows Git-1.8.4-preview20130916.exe 按照默认步骤完成安装 2.设置SSH建立计算机与Github的链接 2.1 点击 开始 ...

  8. 浅谈AndroidManifest.xml与R.java及各个目录的作用

    在开发Android项目中,AndroidManifest.xml与R.java是自动生成的.但是对于测试来说,非常重要.经过师父的点拨,我对AndroidManifest.xml与R.java有了更 ...

  9. .NET异步编程初识async与await

    这是两个关键字,用于异步编程.我们传统的异步编程方式一般是Thread.ThreadPool.BeginXXX.EndXXX等等.把调用.回调分开来,代码的逻辑是有跳跃的,于是会导致思路不是很清晰的问 ...

  10. BITED程序员语言学习心得之：C#语言基础

    一.HelloWorld 我们先来看看最简单的C#代码——HelloWorld: using System; using System.Collections.Generic; using Syste ...