HTML5新增元素

新增元素

结构元素

HTML5新增的主要结构元素有6个：header、nav、article、aside、section、footer

header元素

在HTML5中，header元素一般用于3个地方：页面头部、文章头部和区块元素。

• 当header元素用于页面头部时，header元素一般用于包含网站名称、页面LOGO、顶部导航、介绍信息等。
• 当header元素用于文章头部时，header元素一般用于包含文章标题、meta信息。meta信息一般指作者、点赞数、评论数等。
• 当header元素用于区块头部时，header元素一般用于只包含区块的标题内容。

nav元素

在HTML5中，nav元素一般用于3个地方：顶部导航、侧栏导航和分页导航。

当用于顶部导航时，nav元素可以放到header元素内部，也可以放到header元素外部。具体放在里面还是外面，取决于实际开发需求。

article元素

在HTML5中，article元素一般只会用于一个地方：文章内容部分。

可以把article看成一个独立的部分，它内部可以包含标题以及其他部分。

注意：在严格意义上，每一个article元素内部都应该有一个header元素。

aside元素

在HTML5中，aside元素一般用于表示跟周围区域相关的内容。

section元素

在HTML5中，section元素一般用于某一个需要标题内容的区块。

页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。

如果页面某个区块不需要标题，直接使用div元素即可，否则建议使用section元素。

在HTML5中，article、aside元素是比section元素更具语义化的元素，可以看成是特殊的seciton元素。

注意：

1. article里面可以有多个section。
2. section强调的是分段或分块，如果你想将一块内容分成几段的时候，可以使用section元素。
3. article比seciton更强调独立性，一块内容如果比较独立、比较完整，应该使用article元素。

footer元素

在HTML5中，footer元素一般用于两个地方：一个是“页面底部”，另一个是“文章底部”。

当用于页面底部时，footer元素一般包含友情链接、版权声明、备案信息等。

当用于文章底部时，也就是放在article元素内部时，footer元素一般包含“上一篇/下一篇导航”“文章分类”“发布信息”等。

表单元素

HTML5在HTML4.01的基础上，对表单进行了以下两个方向的扩展。

• 新增input元素类型
• 新增其他表单元素

新增input元素类型

在HTML5中，大量地增加了input元素的种类——input元素的type属性新增了大量属性值：

属性值	说明
email	邮件类型
tel	电话号码
url	URL类型

属性值	说明
range	取数字（滑块方式）
number	取数字（微调方式）
color	取颜色

属性值	说明
date	取日期（如2018-11-11）
time	取时间（如08:04)
month	取月份
week	取周数

验证型

email

注意：**必须是submit按钮才会进行email验证，使用其他按钮（如button按钮）则不会。**这是因为email类型的文本框采用了浏览器内置的验证机制，而浏览器内置的验证机制必须使用submit按钮才会触发。

tel

注意：tel类型文本框并不具备完整的验证功能，如果想要验证效果，则需要结合pattern属性来实现。

url

注意：url类型文本框并不具备完整的验证功能，如果想要验证效果，则需要结合pattern属性来实现。

取值型

range

设置不同的value值，滑块也会出现在对应数值的位置。

number

number类型和range类型功能非常相似，都是获取一个范围内的数字。不过两者的外观不同，其中number类型使用的是“微调按钮”，而range类型使用的是“滑块”。

color

可通过直接使用浏览器自带的取色工具来获取颜色值。color类型元素不仅可以选择颜色，还可以将常用的颜色值添加到自定义颜色栏中，以便再次使用，非常方便。

date

当我们点击date类型元素时，浏览器会弹出自带的日历工具，以方便直接选取日期。value属性用于设置日期初始值，格式必须如“2018-05-20”。

time

可通过直接使用浏览器自带的工具来获取时间（时、分）。

month

可通过直接使用浏览器自带的工具来获取“月数”。value属性用于设置月份初始值，格式必须如“2018-08”。

week

可通过直接使用浏览器自带的工具来获取“周数”。value属性用于设置初始值，格式必须如“2018-W08”。其中W是week的缩写。

新增其他表单元素

HTML5还新增了3个表单元素：output、datalist、keygen。

output元素

在HTML5中，可以使用output元素来定义表单元素的输出结果或计算结果。

output是一个行内元素，只不过它比span更具有语义化。output元素一般放在form元素内部，并且配合其他表单元素来使用。

datalist元素

在HTML5中，可以使用datalist元素来为文本框提供一个可选的列表。

如果想要把datalist绑定某个文本框，需要设置该文本框的list属性值等于datalist的id值。

keygen元素

在HTML5中，可以使用keygen元素来生成页面的密钥。它在各大浏览器中的兼容性很差，仅作了解。

其他新增元素

HTML5还增加了大量语义化元素，其中最重要的有以下6个：

• address
• time
• progress
• meter
• figure和figcaption
• fieldset和legend

address元素

在HTML5中，可以使用更具语义化的address元素来为“整个页面”或者“某一个article元素”添加地址信息（电子邮件或真实地址）。

time元素

在HTML5中，可以使用更具语义化的time元素来显示页面中的日期时间信息。

其中datetime属性取值是一个时间，可以省略不写。datetime属性中的时间是提供给搜索引擎看的，而time标签内的时间是提供给用户看的，两者内容可以一样也可以不一样。time元素与datetime属性的关系，有点类似于img元素与alt元素的关系。

progress元素

在HTML5中，可以使用progress元素以进度条的形式来显示某一个任务的完成度。

对于progress元素来说，它只有max值而没有min值：任何进度条的最小值都是0，因此progress元素默认最小值也是0。此外，max和value必须是0或正数，并且max值必须大于等于value值。

meter元素

在HTML5中，可以使用进度条的形式来显示数据所占的比例。

meter元素和progress元素非常相似，都是以进度条形式来显示数据比例。不过，两者在语义上有很大的区别：

• meter元素一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据。
• progress元素一般用于显示动态数据比例。所谓的动态数据，指的是会不断改变的数据。

figure和figcaption元素

figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcation这两个元素来实现，从而使得页面的语义更加良好。

fieldset和legend元素

在HTML5中，可以使用fieldset元素来给表单元素进行分组。其中，legend元素用于定义某一组表单的标题。

他们的作用一是可以增强表单的语义，二是可以定义field元素的disabled属性来禁用整个组中的表单元素。

ruby元素和rt元素

ruby标签包裹需要注音的文字，rt标签负责写注音，rt标签写在ruby标签的里面。

<ruby>
	<span>魑魅魍魉</span>
	<rt>chī mèi wǎng liǎng</rt>
</ruby>

改良后的元素

a元素

HTML5为a元素新增了3个属性：

属性	说明
download	定义可被下载的目标（如文件、图片等）
media	定义被链接文档为何种媒介/设备优化的
type	定义被链接文档的MIME类型

其中download属性用于为文件取一个新的文件名。如果download属性值省略，则表示使用旧的文件名。

ol元素

HTML5为ol元素新增了一个reversed属性，用于设置列表顺序为降序显示。

small元素

在HTML5中，我们可以使用更具语义化的small元素来表示“小字印刷体”的文字。small元素一般用于网站底部的免责声明、版权声明等。

script元素

HTML5为script元素新增了两个属性：defer和async。这两个属性的作用都是加快页面的加载速度，两者区别如下：

• defer属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件不会立即执行，而是等到整个HTML文档加载完成才会执行。
• async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成。

defer和async都是异步加载的，两者区别在于，异步加载外部JavaScript文件完成后何时执行。从上面也可以看出，defer属性更符合大多数开发场景对脚本加载执行的要求。

HTML5兼容性处理

• 添加元信息，让浏览器处于最优渲染模式。

  <!--设置IE总是使用最新的文档模式进行渲染-->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
  <meta name="renderer" content="webkit">

• 使用html5shiv让低版本浏览器认识H5的语义化标签

  <!--[if lt ie 9]>
  <script src="../sources/js/html5shiv.js"></script>
  <![endif]-->

• 扩展

  • lt小于
  • lte小于
  • gt大于
  • gte大于等于
  • !逻辑非

<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE8以上可见<![endif]—>
<!--[if lt IE 8]>仅IE8以下可见<![endif]—>
<!--[if gte IE 8]>IE8及以上可见<![endif]—>
<!--[if lte IE 8]>IE8及以下可见<![endif]—>
<!--[if !IE 8]>非IE8的IE可见<![endif]-->