HTML5新增标签

转载

前端代码女神 2021-07-07 10:33:42

html5是最新的html标准，拥有新的语义、图形以及多媒体元素，简化web应用程序，专为丰富的web内容而设计的，简称“H5”。简单来说就是增加了一些更直观的标签，H5相比html4.0精简了很多。

HTML新增标签

1. 结构标签：主要用来对页面结构进行划分，页面结构划分为顶部、导航、内容(页眉、区块)、页脚等。

header：一般网页头部信息/标题。
nav：导航条部分内容。
section：独立内容区块，一般内容区。
article：特殊独立区块，表示页眉中核心内容。
aside：标签内容之外，与标签内容相关的辅助信息。
figure：独立单元，如有图文混合模块。
hgroup：头部信息/标题相关信息。
footer：底部信息。

代码示例：

<header>
  顶部信息
</header>
<nav>
    导航信息
</nav>
<div>
    <section>
        <hgroup>标题相关</hgroup>
        <article>图文混合内容</article>
        <footer>底部信息</footer>
    </section>
    <aside>
        侧边栏
    </aside>
</div>
<footer>
底部
</footer>

代码运行结果如下：

2. 表单标签

表单中元素input还记得吗？H5新增表单标签主要针对input的type属性值，具体属性值描述如下：

search：搜索框。应用非常广泛，与text的区别是有值的时候会有清空按钮。
email：邮箱地址，自动校验。
url：http地址，自动校验。
number：必须输入数值，通过min、max属性可以设置最小最大值。
range：必须输入一定范围内的数值。
color：颜色选择器。
日期选择器：date：选取年月日。month：选取年月。week：选择周和年。time：选取时间。datetime：选取时间、年月日。示例：<input type="number" min="0" max="3">

3. 媒体标签