HTML基础-李南江

一、HTML基本概念

1.什么是浏览器

2.什么是服务器

3.访问网页原理

4.什么是URL

5.什么是HTTP协议

6.其它知识储备

二、认识HTML

1.什么是HTML

2.HTML的作用

3.HTML发展史

4.网页的固定格式

5.网页的基本结构

6.HTML标签分类

7.DTD文档声明

8.HTML和XHTML、HTML5区别

9.htm 和 .html扩展名区别

三、基础标签

1.开发工具(工欲善其事必先利其器)

2.基础标签

四、列表标签

1.无序列表（unordered list）

2.有序列表（ordered list）

3.定义列表（definition list）

五、表格标签

1.表格标签

2.表格中的属性

3.表格中的其它标签

4.表格的结构

5.单元格的合并

六、表单标签

1.表单标签（form）

2.input标签

3.数据列表（datalist option）

4.多行文本框（文本域）

5.下拉列表（select option）

七、多媒体标签

1. video 标签

2. audio 标签

3. 详情和概要标签

4. marquee 标签

5. HTML中被废弃的标签

6. HTML 实体

一、HTML基本概念

1.什么是浏览器

浏览器是安装在电脑里面的一个软件，能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。就好比QQ一样都是安装在电脑里面的一个软件，只不过功能不同而已

浏览器的两大功能：

(1).将网页渲染出来给用户查看

(2).能够让用户通过浏览器与网页交互

常见的主流浏览器：

浏览器的内核：

不同的浏览器有不同的浏览器内核，浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现

IE内核 Trident
谷歌内核 WebKit / Blink
火狐内核 Gecko
Safarri内核 WebKit
欧朋内核 Presto

前期上课以谷歌浏览器为主，后面将专门详细介绍浏览器兼容问题

2.什么是服务器

服务器也是电脑，只不过是比我们的电脑配置更高的电脑，并且24小时不断电，不关机的计算机
服务器是专门用于存储数据电脑，访问者可以访问服务器获得服务器上存储的资源
服务器一旦关机，访问者就无法访问

3.访问网页原理

(1).浏览器请求数据的原理

我们是如何通过浏览器查看网页上的内容的？

1.打开IE缓存文件夹

C:\Users\Jonathan_Lee\AppData\Local\Microsoft\Windows\Temporary Internet Files
Jonathan_Lee为个人电脑用户名名称

2.清空该文件夹

3.用IE打开网页

4.发现文件夹下多了很多文件（.html、.css、.js、.png等），仔细观察不难发现其实这些文件都是被访问网页上的内容

5.结论

访问网页时是有真实的、物理的文件传输的
网页不是一个文件，而是一堆文件组成的
我们之所以平常感觉第二次访问比第一次访问快的原因就是，第一次访问时已经将所有文件缓存到了本地

(2).浏览器请求数据的过程

1.按下回车时浏览器根据输入的URL地址发送请求报文
2.服务器接收到请求报文，会对请求报文进行处理
3.服务器将处理完的结果通过响应报文返回给浏览器
4.浏览器解析服务器返回的结果，将结果显示出来

请求过程验证：

1.利用chome浏览器打开一个网页
2.打开开发人员工具（快捷键：F12）
3.打开Network查看请求报文和响应报文
- 3.1请求报文
- 一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分

3.2响应报文
一个HTTP响应报文由响应行、响应头、响应体组成

4.什么是URL

1.我们在浏览器的地址栏中输入的地址其实就是URL
2.URL格式
- 127.0.0.1/index.html （浏览器会自动补全http:和：80）
- http://127.0.0.1/index.html （浏览器会自动补全：80）
- http://127.0.0.1:80/index.html （完整格式）
- 协议类型://ip地址:端口号/资源路径/资源名称
3.URL拆分
- 网络协议类型： http://
- 服务器IP地址： 127.0.0.1
- 服务器端口号： :80
- 资源路径：网页在服务器上的路径
- 资源名称： index.html
4.URL拆分后每一部分的作用
4.1服务器IP地址和服务器端口号的作用
- 告诉浏览器要去什么地方才能找到对应的服务器，也就是告诉浏览器服务器的详细地址
- 服务器IP地址相当于现实生活中的地址；例如：广州市天河区棠安苑
- 服务器端口号相当于现实生活中的门牌号码；例如： 9栋909室
- 那么如果将地址和门牌号码结合在一起，就是我的详细地址

4.2资源名称
- 资源名称就是需要访问的文件名称

4.3资源名称的作用
- 告诉服务器我需要获取哪一个文件

5.补充

URL全称Uniform Resource Locator(统一资源定位符)，互联网上的每一个资源都有一个唯一的URL地址
由于IP地址全都是数字，没有任何的含义，比较难以记忆。所以在访问网页时最常见的不是IP地址而是“域名”（一串有含义的字母OR数字）
好比 http://www.baidu.com AND http://111.13.100.92:80/

5.什么是HTTP协议

1.HTTP是Hypertext Transfer Protocol的缩写, 超文本传输协议
2.什么是协议?
- 在现实生活中有很多的协议, 例如租房协议/买卖协议/离婚协议
- 无论是什么协议他们都是一个共同点, 就是用来规范/约束某一类事物
3.沟通问题?
- 沟通最常见的问题就是语言不通, 例如中国人和美国人沟通, 一个人说中文, 一个人说英文, 如果两个人都不懂中文或者英文, 那么就会出现沟通问题
- 如果要想解决沟通
- 文件, 是不是需要先拟定规定, 两个人都说中文, 或者两个人都说英文, 或者请一个既懂中文又懂英文的翻译
4.HTTP协议是用来规范/约束哪一类事物?
- 浏览器访问网页其实就是去服务器请求数据, 所以浏览器需要和服务器沟通, 所以也会存在沟通问题
- HTTP协议就相当于我们让两个人都说中文或者都说英文一样, 就是提前规范两个人之间如何沟通, 也就是规范/约束浏览器和服务器之间如何沟通

6.其它知识储备

在Windows系统中如何查看文件的扩展名
- 默认情况下Windows系统是不显示文件的扩展名的, 但是作为一个开发者而言, 查看文件的扩展名是我们的必备技能
- win10: 随便打开一个文件夹-->点击查看-->将文件扩展名的选项勾选上

电脑上的一个文件是可以"同时"被多个软件打开的, 不同的软件打开可能会有不同的效果
- 例如: 同一个index.html文件可以被多个浏览器和记事本一起打开
- 例如: .html文件通过浏览器打开不可以编辑, 通过记事本打开可以编辑
什么是纯文本文件?
- 我们Windows电脑上有一款默认安装好的软件叫做记事本. 这款软件就是专门用来打开纯文本文件的, 所以只要能够被记事本打开, 并且能够正常显示的文件都是纯文本文件
- .html的文件可以被记事本打开, 并且能够正常显示,所以.html文件是一个纯文本文件

参考链接：https://www.jianshu.com/p/f6da3875834b

二、认识HTML

1.什么是HTML

HTML其实是HyperText Markup Language的缩写, 超文本标记语言

2.HTML的作用

1.首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名为.html, 然后再利用浏览器打开

郑伊健郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。[1] 1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》获得十大中文金曲奖。1996年至1997年连续两次获得”台湾十大偶像”奖。

2.打开之后发现显示的格式不对, 不对的原因是因为在纯文本文件中所有文字都是同级别的, 浏览器不知道哪些文字代表什么意思. 也就是浏览器不知道哪些文字是标题, 哪些文字是段落...., 所以导致了显示的格式不正确

3.正是因为如此, 所以HTML应用而生. HTML就只有一个作用, 它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.
- 这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的
- 所以正是因为HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"

<h1>郑伊健</h1><p>郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。[1] </p><p>1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》获得十大中文金曲奖。1996年至1997年连续两次获得”台湾十大偶像”奖。</p>

注意事项
- 虽然我们利用H1标签描述一段文本之后, 这段文本在浏览器中显示出来会被放大和加粗, 看上去我们是利用HTML的标签修改了被描述的那段文本的样式. 但是一定要记住, HTML只有一个作用, 它是专门用来给文本添加语义的, 而不是用来修改文本的样式的
H1标签它的作用是什么?
- 错误: H1标签可以用来修改文字的大小, 并且还可以将文字加粗
- 正确: H1标签的作用是用来告诉浏览器, 哪些文字是标题. 也就是H1标签是专门用于给指定的文字添加标题语义的

3.HTML发展史

IETF简介：

IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是"互联网工程任务组"；
IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等；

W3C简介：

W3C是英文World Wide Web Consortium的缩写，翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织；
W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee；
W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的；

4.网页的固定格式

1.编写网页和写信一样都有一套规范和要求, 这套规范和要求中规定了写信的固定格式
2.写信基本结构

敬爱的江哥:您好!正文正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文正文正文正文正文正文正文正文此致
敬礼!你的朋友 伊健2066年6月6日

3.编写网页的步骤
3.1.新建一个文本文档
3.2.利用记事本打开
3.3.编写THML代码
3.4.保存并且修改纯文本文档的扩展名为.html
3.5.利用浏览器打开编写好的文件
4.网页基本结构

<html><head><title></title></head><body></body>
</html>

5.通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签；

5.网页的基本结构

(1).html标签

作用
- 用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档
注意点
- 其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

(2).head标签

作用
- 用于给网站添加一些配置信息
- 例如
  - 指定网站的标题 / 指定网站的小图片
  - 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
  - 外挂一些外部的css/js文件
  - 添加一些浏览器适配相关的内容
注意点
- 一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到

(3).title标签

网页的固定格式作用
- 专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题
注意点
- title标签必须写在head标签里面

(4).body标签

作用
- 专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
注意点
- 虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中
- 一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

(5).meta标签

1.为什么会有乱码现象?
- 因为我们在编写网页的时候没有指定字符集

2.如何解决乱码现象?
- 在head标签中添加 <meta charset="GBK" />, 指定字符集
3.什么是字符集?
- 字符集就是字符的集合, 也就是很多字符堆在一起. 其实字符集很像我们古代的"活字印刷术", 在活字印刷术中就是将很多刻有汉字的小章放到一个盒子中, 然后需要印刷文字的时候再去盒子中取这个小章出来用, 正是因为如此, 所以导致了乱码问题
- 假设北方人和南方人都拥有装满小章的盒子, 但是南方人和北方人在盒子中存储小章的顺序不太一样, 那么这个时候如果北方人和南方人都需要去取"李"字, 在南方人记忆中李字在第6个盒子的第6行的第6列中(666), 在北方人的记忆中李字在第8个盒子的第8行的第8列中(888). 那么此时如果让一个南方人去北方人的盒子中取"李"字的小章, 必然找不到,, 所以就导致了乱码问题
- 这个地方北方人的存储小章的盒子和南方人存储小章的盒子就对应网页中指定的字符集, 在网页中我们常见的字符集有两个GBK/UTF-8, GBK就对应北方人存储的盒子, UTF-8就对应南方人存储的盒子
- 所以在网页中指定字符集的意义就在于告诉浏览器我用的是哪个盒子, 你应该如何去查找才能找到对应的正确的内容

4.GBK(GB2312)和UTF-8区别
- GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文
  - 体积比较小
- UTF-8里面存储的世界上所有的文字
- 体积比较大
5.那么在企业开发中我们应该使用GBK(GB2312)还是UTF-8呢?
- 如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快
- 如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8
- 懒人推荐: 不管三七二十一，一律写UTF-8即可
6.注意点
- 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
- 所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

总结：

标签	解释
html	告诉浏览器我是一个HTML文档
head	给网站添加一些配置信息，比如：指定网站的标题 / 指定网站的小图片
title	指定网站的标题
meta	指定字符集
body	显示给用户查看的内容（文字 / 图片 / 音频 / 视频）

6.HTML标签分类

标签分类：

单标签：只有开始标签没有结束标签, 也就是由一个<>组成的

<meta charset="UTF-8" />

双标签：有开始标签和结束标签, 也就是由一个<>和一个</>组成的

<html>
</html>

标签关系分类：

并列关系(兄弟/平级)

<head>
</head>
<body>
</body>

嵌套关系(父子/上下级)

<head><meta charset="UTF-8" /><title>百度一下,你就知道123</title>
</head>

7.DTD文档声明

什么是DTD文档声明?
- 由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的. 浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染我们的网页；
DTD文档声明格式

<!DOCTYPE html>

注意事项
- <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前
- <!DOCTYPE> 声明不是 HTML 标签
- <!DOCTYPE> 声明没有结束标签
- <!DOCTYPE> 声明对大小写不敏感
- 这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制
  - 不写也能运行
  - H5网页里面用H4也能运行
HTML5之前有2大种规范，每种规范中又有3小种规范

大规范	小规范
HTML	Strict (严格的)
HTML	Transitional(过度的,普通的,宽松的)
HTML	Frameset(带有框架的页面)
XHTML	Strict (严格的)
XHTML	Transitional(过度的,普通的,宽松的)
XHTML	Frameset(带有框架的页面)

HTML的DTD文档声明和XHTML的DTD文档声明有何区别?
- XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等, 而HTML会更加松散没有这么严格

Strict表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些标签不能使用
- 例如font标签/u标签等
- font标签可以修改一个文本的字号、颜色、字体,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而font标签是用于修改样式的,所以在Strict中是不能使用font标签
- u标签可以给一个文本加上下划线,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u标签是用于添加下划线是样式.所以在Strict中是不能使用u标签
Transitional表示普通的, 这种模式是没有一些别的要求
- 例如可以使用font标签、u标签等
- 但是在企业开发中不会使用这些标签,因为这违背了HTML的本质, 而是将这些标签作为css的钩子使用
Frameset表示框架, 在框架的页面使用
- 后面学到框架/NodeJS 再做详细了解
常见的DOCTYPE有如下几种

HTML4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5:
<!DOCTYPE html>

有这么多规范我们学习过程中到底使用哪一种比较合适呢?
- 无论是HTML还是XHTML,过去企业级开发中用的比较多的大部分都是Transitional类型的文档声明
- 但是HTML5的时代已经到来,以上6中规范仅仅作为了解, 以后都用HTML5类型的文档声明, HTML5向下兼容(求此刻WC3心里阴影面积)
- 目前国内一线网站都更新到了HTML5的文档声明, 所以后续授课也是全程使用HTML5的文档声明
  - www.baidu.com (B)
  - www.taobao.com (A)
  - www.qq.com (T)
  - www.sohu.com(大奇葩)

8.HTML和XHTML、HTML5区别

在HTML的早期发展中，大部分标准都是所谓的retro-spec，即先有实现后有标准。在这种情况下，HTML标准不是很规范，浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面
html语言本身有一些缺陷（例如：内容和形式不能分离；标签单一；数据不能复用等等），随着xml的兴起人们希望xml来弥补html的不足，但是目前有成千上万的网页都是用html编写的，所以完全使用xml来替代html还为时过早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是实现从html向xml的过度
为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增加任何新的标签，只是按照XML的要求来规范HTML，并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查，如果页面有HTML错误，就要显示错误信息。但是由于已有的web页面中已经有了大量的错误，很多开发者拒绝使用新的MIME type。W3C不得已，在XHTML 1.0的标准之后增加了一个附录C，允许开发者使用XHTML语法来写页面，同时使用旧的MIME type，application/html，来分发页面
W3C随后在XHTML 1.1中取消了附录C，即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用
有了XHTML的教训，W3C在制定下一代HTML标准时（HTML5），就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性，但是它最重要的一个特性是，不会break已有的网页。你可以将任何已有的网页的第一行改成<!DOCTYPE html>，它就成也一个HTML5页面，并且可以照样在浏览器里正常的展示。
总结
- HTML语法非常宽松容错性强;
- XHTML更为严格，它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;
- HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

9.htm 和 .html扩展名区别

DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
所以htm是为了兼容过去的DOS命名格式存在的

三、基础标签

1.开发工具（工欲善其事必先利其器）

为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用每天编写很多没有意义的重复代码, 提升大家的开发效率今后的课程中我们统一采用最高级高发工具来编写网页

(1).常见的前端开发工具

记事本: 提示功能较差
editplus/nodepad++: 提示功能较差
Dreamwaver: 更偏向设计
Sublime: 轻量级,自带功能不太全, 但是插件十分丰富
WebStorm: 重量级, 自带功能全面
其它ide(zend studio、netbean等)
为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 今后的课程中我们统一采用最牛逼最高级的高发工具WebStorm

(2).WebStorm安装和使用

参看文章链接：https://www.jianshu.com/p/cc669b19f09f

下载安装与激活：

1.百度搜索 webstorm2019 下载
2.下载激活码激活：http://idea.medeming.com/jets/

WebStorm常见快捷键：

如何在WebStorm中利用快捷键创建一个新的.html的文件
- 同时按下键盘上的Ctrl + Alt + Insert
如何在WebStorm中让光标移动到当前行的末尾
- 按下键盘上的End键即可
如何在WebStorm中让光标移动到当前行的最前面
- 按下键盘上的Home键即可
如何在WebStorm中让光标在多行中闪烁
- 按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可
如何在WebStorm中快速的复制光标所在的那一行
- 按下键盘上的Ctrl + D
如何在WebStorm中快速的删除光标所在的那一行
- 按下键盘上的Ctrl + X
如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签
- 按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可

2.基础标签

(1). H系列标签（H1~H6）

作用
- 用于给文本添加标题语义
格式
- <h1> </h1>
注意点
- H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
- H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
- 被H系列标签包裹的内容会独占一行
- 在H系列的标签中, H1最大, H6最小
- 在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)

(2). P 标签（Paragraph）

作用
- 告诉浏览器哪些文字是一个段落
格式:
- <p> </p>
注意点:
- 在浏览器中会单独占一行

(3). Hr 标签（Horizontal Rule）

作用
- 在浏览器上显示一条分割线
格式
- <hr />
注意点
- 在浏览器中会单独占一行
- 通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
- 由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做

(4). HTML注释（Annotation）

什么是注释?
- 注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思
- 注释可以用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流
为什么要使用注释?
- 适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的
格式

<!--  被注释的内容  -->

注意点
- 被注释的内容不会在浏览器中显示, 注释是写给我们自己看的
- 注释不能嵌套使用

<!--<!--被注释的内容-->-->

快捷键： ctrl + /

(5). img 标签（image）

作用：在网页上插入一张图片
格式
- <img src="图片路径" />
img标签的属性
- 写在标签中K="V"这种格式的文本我们称之为标签属性

属性名称	作用
src(source)	告诉浏览器需要`插入`的图片路径, 以便于浏览器到该路径下找到需要插入的图片
alt(alternate)	规定图像的替代文本, `只有`在src指定的路径下`找不到图片`,才会显示alt指定的文本
title	悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
height	设置图片显示的高度
width	设置图片显示的宽度

注意点
- img标签添加的图片默认不是占一整行空间
- 如果想让图片等比拉伸, 只写高度或者宽度即可

相对路径和绝对路径

图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径
绝对路径
- 从电脑的具体盘符开始寻找我们需要的资源
- <img src="F/lnj/girl.png" />
- 以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片
相对路径
- 一个文件相对于另外一个文件的位置寻找我们需要的资源（每次都从.html文件所在的文件夹开始查找）
- <img src="lnj/girl.png" />
- 假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片
为什么没人使用绝对路径?
- 可以移植性太差.
什么是可移植性?
- 可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行
为什么绝对路径可移植性差?
- 假如我编写的html文件放在我电脑的 F:/lnj 目录下, html文件中用到的图片放在F:/lnj/images目录下, 我给src指定的绝对路为F:/lnj/images/girl.png. 那么将来我将整个lnj文件夹拷贝给你, 如果你将lnj文件夹放在非F盘下, 那么将无法显示图片
- 例如你存放在C盘根目录, 那么图片的绝对路径会变为C:/lnj/images/girl.png, 而src会去F盘找, 所以不会显示
- 你只有将lnj文件夹存放在F盘根目录下时图片才会正常运行, 这就叫做可移植性不好
为什么相对路径可移植性好?
- 同上, 如果src指定的路径为images/girl.png, 那么无论你拷贝到那个盘, 哪个文件夹. 系统都只会在当前文件夹中的images下去查找图片, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示
相对路径几种查找方式
- 同级
  - 同级就是图片和.html文件存储在同一个文件夹中
  - 直接编写, 例如: girl.png
  - 加上./ 编写, 例如./girl.png
  - ./代表当前目录, ./girl.png代表在当前目录下查找
- 下级
  - 下级就是存储图片的文件夹与.html文件在同一个文件夹中
  - 直接编写, 例如abc/girl.png
  - 加上./ 编写, 例如./abc/girl.png
  - 相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
- 上级
  - 上级就是存储图片的位置与存储代码的文件夹在同一个文件夹中
  - ../代表访问上级目录
  - 假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
  - 因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png

注意事项
- 相对路径不会出现这种格式aaa/../bbb/girl.png
- 虽然可以显示, 但是企业开发中千万不要这么写

(6). br 标签（Break）

作用：让内容换行
格式
- <br/>
注意点
- br 的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做

(7). a 标签（anchor）

作用：用于从一个页面链接/跳转到另一个页面
格式
- <a href="http://www.it666.com"> 江哥博客 </a>
注意事项
- a标签可以让文字可跳转，也可以让图片可跳转
- 在a标签之间一定要写上文字/图片, 如果没有, 那么在页面上找不到这个标签
- a标签必须有href属性，否则它不知道要跳转到什么地方
- a标签的href不仅可以指定一个网络地址，还可以指定到一个本地地址
- a标签也叫做超级链接或超链接
a标签的属性

属性名称	作用
href（hypertext reference）	指定跳转的目标地址
target	告诉浏览器是否保留原始界面， _blank保留，_self不保留，即是否使用新的窗口打开
title	悬停文本（介绍这个链接, 只有在鼠标移动到超链接上时才会显示）

base标签和a标签结合使用
- 如果每个a标签都想在新页面中打开，那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
- 格式： <base target="_blank" />
注意事项
- base 必须嵌套在 head标签里面
- 如果a标签上指定了target，base标签中也指定了target，那么会按照a标签上指定的来执行

a标签其它用法
- 假链接（本质是跳转到当前页面）
  - 格式<a href="#">江哥博客</a>
  - 格式<a href="javascript:">江哥博客</a>
- 锚点链接（跳转到当前页面指定位置）
  - 格式
    - 第一步：在页面的指定位置给任意标签添加一个id属性，例如 <p id="location">这个是目标</p>
    - 第二步：<a href="#location">跳转到指定位置</a>
- 跳转到 指定页面的指定位置
  - 格式
  - 第一步：在01-锚点链接.html页面的指定位置给任意标签添加一个id属性，例如 <p id="location">这个是目标</p>
  - 第二步：<a href="01-锚点链接.html#location">跳转到指定位置</a>
- 下载(极力不推荐使用)
  - 例如<a href="girl.zip">下载福利资源<a/>

标签	解释
h1 ~ h6	标题
p	段落
hr	水平分割线
img	图片
br	换行
a	链接
<!-- -->	注释

四、列表标签

1.无序列表（unordered list）

作用：给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后
格式：
- 英文是 list item, 翻译为列表项（ ul li ）

    <h4>选择居住城市(CN)</h4><ul><li>北京</li><li>上海</li><li>广州</li><li>铁岭</li></ul>

ul应用场景：

导航条
商品列表
新闻列表

注意事项
- 这里指的无序是指对于主体来说内容没有先后之分, 例如主题是"选择居住城市(CN)"北京上海都是中国的城市, 无论谁放在前面它都还是中国的城市的. 如果标题改为"中国雾霾排行", 那么就必须有严格的排名,北京必须写在前面
- 浏览器会给无序列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
  - 其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种
  - 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了
- ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面
- 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
- 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签
- 快捷写法： ul>li*3

<ul><li>好吃的<ul><li>牛奶</li><li>面包</li></ul></li><li>日用的<ul><li>毛巾</li><li>牙膏</li></ul></li>
</ul>

2.有序列表（ordered list）

作用：给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分（ ol li ）
格式

    <h4>中国房价排行</h4><ol><li>北京</li><li>上海</li><li>广州</li><li>铁岭</li></ol>

ol应用场景
- xxx排行榜
- 其实ol应用场景并不多, 因为能用ol做的用ul都能做
注意事项
- ol和ul就是语义不一样，怎么使用都是一样的以及注意点都一样
- 其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号
- 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了

3.定义列表（definition list）

作用：给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述（ dl dt dd ）
格式
- dt 英文 definition title, 翻译为定义标题
- dd 英文 definition description, 翻译为定义描述信息

    <dl><dt>北京</dt><dd>国家的首都, 看升国旗的地方</dd><dt>上海</dt><dd>魔都, 遍地是黄金的地方</dd></dl>

dl 应用场景
- 网站底部相关信息
- 但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl

注意事项
- dl是一个组标签, 一定是一起出现的, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面
- 由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
- dd和dt和li标签一样是容器标签, 里面可以添加任意标签
- 定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
- 定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl
- 建议一个dt 对应一个dd
- 快捷写法：dl>dt+dd*3

总结：

标签	解释
ul li	无序列表
ol li	有序列表
dl dt dd	定义列表

五、表格标签

1.表格标签

在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表
- http://2004.sina.com.cn
作用：以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式
格式
- table 定义表格
- tr 定义行
- td 定义单元格

<!--先定义一个表格, 然后通过tr告诉浏览器这个表格中一共有多少行, 然后再通过td告诉浏览器这一行中一共有多少个元素(一共有多少列)-->
<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr>
</table>

2.表格中的属性

border：默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
width：默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
height：默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度

cellspacing：外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
cellpadding：内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距

align：规定表格相对周围元素的水平对齐方式, 它的取值有center、left、right
- 给table设置align属性, 是让表格在浏览器中居左/居右/居中
- 给tr设置align属性, 是让当前行中所有内容居左/居右/居中
- 给td设置align属性,是让当前单元格中所有内容居左/居右/居中
- 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
- 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

valign：规定表格相对周围元素的垂直对齐方式, 它的取值有center、left、right
- 给table设置valign属性, 无效
- 给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
- 给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
- 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐

bgcolor：规定表格的背景颜色
- 给table设置bgcolor属性, 是给整个表格设置背景颜色
- 给tr设置bgcolor属性, 是给当前行设置背景颜色
- 给td设置bgcolor属性, 是给当前单元格设置背景颜色
- 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义

总结：

表格属性	解释
border	给表格指定边框宽度
width	指定表格的宽度
height	指定表格的高度
cellspacing	外边距
cellpadding	内边距
align	设置水平对齐方式，它的取值有center、left、right
valign	设置垂直对齐方式，它的取值有center、left、right
bgcolor	设置表格的背景颜色，用于制作细线表格

3.表格中的其它标签

表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th
th 标签：给每一列 设置标题, 单元格中的内容会自动加粗，居中
caption 标签：给整个表格设置标题
- 一定要嵌套在talbe标签内部才有效

<table bgcolor="black" cellspacing="1px" width="800px" align="center"><caption><h2>今日小说排行榜</h2></caption><tr bgcolor="#a9a9a9"><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr><tr bgcolor="white" align="center"><td>1</td><td align="left">暴走大事件</td><td><img src="data:images/up.jpg"></td><td>623557</td><td>4088311</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr>
</table>

4.表格的结构

thead标：用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小
tbody标签：一般用来存放页面中的主体数据, 如果不写会自动加上
tfoot标签：用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现

在开发中一般不写，因为浏览器会自动生成的，表格的结构了解即可

<table><caption>表格的标题</caption><thead><tr><th>每一列的标题</th></tr></thead><tbody><tr><td>数据</td></tr></tbody><tfoot><tr><td>尾页数据</td></tr></tfoot>
</table>

表格结构的意义主要是用于SEO, 便于搜索引擎指定哪部分的内容是需要抓取的重要内容, 一般情况下搜索引擎会优先抓取tbody中的内容
由于有一部分浏览器对talbe的这种结构支持不是很好, 所以在企业开发中一般都不用严格的按照这种结构来编写

5.单元格的合并

5.1.水平方向上的单元格合并

可以给td标签添加一个colspan属性，来指定把某一个单元格当做多个单元格来看待（水平方向）
例如： <td colspan="2"> </td> 把当前单元格当做两个单元格来看待

5.2.垂直方向上的单元格合并

可以给td标签添加一个rowspan属性，来指定把某一个单元格当做多个单元格来看待（垂直方向）
例如： <td rowspan="2"> </td> 把当前单元格当做两个单元格来看待

注意点同上

总结：

标签	含义
table	表格
tr	定义行
td	定义单元格
th	设置表格每一列的标题
caption	设置整个表格的标题

六、表单标签

1.表单标签（form）

作用：用于收集用户信息, 让用户填写、选择相关信息
格式

<form>所有的表单内容，都要写在form标签里面
</form>

注意事项
- 所有的表单内容，都要写在form标签里面
- form标签中有两个比较重要的属性action和method, 但就现目前大家的知识储备而言暂时无法理解, 所以放到后面的课程中讲解

2.input标签

如果说td是表格最核心的标签, 那么input就是表单最核心的标签. nput标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同
明文输入框
- 作用：用户可以在输入框内输入内容
- 账号: <input type="text"/>
暗文输入框
- 作用：用户可以在输入框内输入内容
- 密码: <input type="password"/>
给输入框设置默认值
- 账号: <input type="text" value="123"/>
- 密码: <input type="password" value="123"/>
规定输入字段中的字符的最大长度
- 账号: <input type="text" name="fullname" maxlength="8" />

单选框（radio）
- 作用：用户只能从众多选项中选择其中一个
- 单选按钮，天生是不互斥的，如果想互斥，必须要有相同的name属性

<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖

多选框（checkbox）
- 作用：用户只能从众多选项中选择多个
- 复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

<input type="checkbox" name="aihao"/> 篮球
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 棒球

给单选、多选设置默认值（checked）
- 指定radio和checkbox默认值, 前提是同一组内容必须设置相同name属性

    <input type="radio" name="xingbie" checked="checked"/> 男<input type="radio" name="xingbie" /> 女<input type="radio" name="xingbie" /> 妖<input type="checkbox" name="aihao" checked="checked"/> 篮球
<input type="checkbox" name="aihao" checked="checked"/> 足球
<input type="checkbox" name="aihao"/> 棒球

label 标签
- 作用：label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性
- 注意事项
  - 表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了
  - 所有表单元素都可以通过label绑定

<!--给文本框添加绑定-->
<label for="account">账号:</label>
<input type="text" id="account" /><!--给单选框添加绑定-->
<input type="radio" name="sex" id="man" /> <label for="man">男</label><!--给多选框添加绑定-->
<input type="checkbox" id="basketball" />
<label for="basketball">篮球</label>

按钮
- 作用：定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
- <input type="button" value="点我丫" />
图片按钮
- 作用：定义图像形式的提交按钮
- <input type="image" src="lnj.jpg" />
重置按钮
- 作用：定义重置按钮。重置按钮会清除表单中的所有数据
- <input type="reset" />
- 注意事项
  - 这个按钮不需要写value自动就有“重置”文字
  - reset只对form表单中表单项有效果
提交按钮
- 作用：定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面
- <input type="submit" />
- 注意事项
  - 这个按钮不需要写value自动就有“提交”文字
  - 要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性
  - 默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输(学到Ajax再理解)

隐藏域
- 作用：定义隐藏的输入字段
- <input type="hidden">
- 暂时不用掌握, 在Ajax中对数据的CRUD操作有非常大的作用
取色器
- <input type="color">
- HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解

日期选择器
- <input type="date">
- HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解

3.数据列表（datalist option）

作用：给输入框绑定待选项
了解即可
格式

<datalist><option>待选项内容</option>
</datalist>

如何给输入框绑定待选列表
- 搞一个输入框
- 搞一个datalist列表
- 给datalist列表标签添加一个id
- 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

请输入你的车型: <input type="text" list="cars"><datalist id="cars"><option>奔驰</option><option>宝马</option><option>奥迪</option><option>路虎</option><option>宾利</option>
</datalist>

4.多行文本框（文本域）

作用： textarea 标签用于在表单中定义多行的文本输入控件
- cols属性：表示columns“列”, 规定文本区内的可见宽度
- rows属性：表示rows“行”, 规定文本区内的可见行数
格式

<textarea cols="30" rows="10">默认</textarea>

注意点
- 可以通过cols和rows来指定输入框的宽度和高度，虽然指定了行数与列数，但还是可以无限往下输入
- 默认情况下输入框是可以手动拉伸的

        <!--禁止手动拉伸--><style type="text/css">textarea{resize: none;}</style>

5.下拉列表（select option）

作用： select 标签和ul、ol、dl一样，都是组标签，用于创建表单中的待选列表, 可以从选择某一个带选项
格式

选择籍贯:
<select><option>北京</option><option>河北</option><option>河南</option><option>山东</option><option>山西</option><option>湖北</option><option>贵州</option>
</select>

给下拉列表设置默认值
- 和radio、checkbox一样select也可以设置默认值, 通过selected属性设置

<select><option>北京</option><option>河北</option><option>河南</option><option>山东</option><option>山西</option><option>湖北</option><option selected="selected">贵州</option>
</select>

给下拉列表添加分组（optgroup ）

<select><optgroup label="北京市"><option>海淀区</option><option>昌平区</option><option>朝阳区</option></optgroup><optgroup label="广州市"><option>天河区</option><option>白云区</option></optgroup><option selected="selected">贵州</option>
</select>

总结1：

标签	解释
form	表单
input	input 控件
label	`不会向用户呈现任何特殊效果，它`为鼠标用户改进了可用性。
datalist option	数据列表
textarea	文本域（多行文本框）
select option （optgroup）	下拉列表

总结2：

input 控件 type 属性	解释
`text`	明文输入
`password`	暗文输入
radio	单选框
checkbox	多选框（复选框）
`button`	普通按钮
`image`	图片按钮
`reset`	重置按钮
`submit`	提交按钮
`hidden`	隐藏域
`color`	取色器
`date`	日期选择器

七、多媒体标签

1. video 标签

作用：播放视频
格式1

<video src="">
</video>

video标签的属性
- src：告诉video标签需要播放的视频地址
- autoplay：告诉video标签是否需要自动播放视频
- controls：告诉video标签是否需要显示控制条
- poster：告诉video标签视频没有播放之前显示的占位图片
- loop：告诉video标签循环播放视频. 一般用于做广告视频
- preload：告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
- muted：告诉video标签视频静音
- width/height：和img标签中的一模一样

格式2

<video><source src="" type=""></source><source src="" type=""></source>
</video>

第二种格式存在的意义
- 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
- ideo标签的第二种格式存在的意义就是为了解决浏览器适配问题. video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
注意点
- 当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
- 在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

video标签属性	解释
src	设置视频地址
autoplay	是否需要自动播放视频
controls	是否需要显示控制条
poster	设置没有播放之前显示的占位图片
loop	循环播放视频，一般用于做广告视频
preload	预加载视频，但是需要注意preload和autoplay相冲，如果设置了autoplay属性，那么preload属性就会失效
muted	视频静音
width	视频的宽度
height	视频的高度

2. audio 标签

作用：播放音频
格式

<audio src="">
</audio><audio><source src="" type="">
</audio>

注意点
- audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样. 只不过有3个属性不能用, height/width/poster

3. 详情和概要标签

作用：利用summary标签来描述概要信息, 利用details标签来描述详情信息
默认情况下是折叠展示, 想看见详情必须点击
格式

<details><summary>概要信息</summary>详情信息
</details>

4. marquee 标签

作用：跑马灯效果
格式

<marquee>内容</marquee>

属性
- direction：设置滚动方向 left / right / up / down
- scrollamount：设置滚动速度, 值越大就越快
- loop：设置滚动次数, 默认是-1, 也就是无限滚动
- behavior：设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
注意点
- marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好

总结：

标签	解释
video	播放视频
audio	播放音频
details summary	详情和概要
marquee	跑马灯效果

5. HTML中被废弃的标签

-- 由于HTML现在只负责语义而不负责样式.但是HTML一开始有一部分标签连样式也包揽了, 所以这部分标签都被废弃了
- b、u、i、s
- 以上标签自己带有样式, 有浓厚的样式作用, 今后一般都只作为CSS钩子使用
- 原则：不到万不得已,切记不要使用如上标签. 大家可以到BAT的网站查看源代码, 几乎看不到以上标签

b（Bold作用：将文本字体加粗
- 格式：<b>将文本字体加粗</b>
u（Underlined）作用：为文本添加下划线
- 格式：<u>为文本添加下划线</u>
i（Italic）作用：显示斜体文本效果
- 格式：<i>显示斜体文本效果</i>
s（Strikethrough）作用：为文本添加删除线
- 格式：<s>为文本添加删除线</s>
为了弥补 b、u、i、s标签的不足, W3C又推出了一组新的标签, 这些标签在显示上看似和buis没什么区别, 但是在语义上却有重大区别
- strong 作用：着重内容
  - 格式：<strong>着重内容</strong>
- ins（Inserted）作用：新插入的文本
  - 格式：<ins>新插入的文本</ins>
- em（Emphasized）作用：强调内容
  - 格式：<em>强调内容</em>
- del（Deleted）作用：已删除的文本
  - 格式：<del>已删除的文本</del>

总结：

标签	等价标签	解释
b	strong	加粗
u	ins	添加下划线
i	em	斜体
s	del	添加删除线

6. HTML 实体

我们想在页面上输出<h1>这些字符，但是HTML认为这是一个标签, 所以如果需要输出一些特殊的字符需要通过字符实体来实现
lt 是英语 less than 小于的意思, <可以在页面上输出一个小于符号
gt 是英语 greater than 大于的意思, >可以在页面上输出一个大于符号
html 中对空格，缩进，换行不敏感，如果同时出现多个空格缩进或者执行，页面只会把它们当作一个空格来解析。所以想要在html中输出空格必须使用   来实现, 一个就代表一个空格
- html对中文空格敏感, 也就是说可以显示中文空格, 但是不推荐这样使用
- 是英语non-breaking spacing, 翻译为不打断空格的意思

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

参考简书：https://www.jianshu.com/u/4312c933b9db