HTML5新增标签

2021-09-28 10:07:44 浏览数 (1)

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

HTML新增标签

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

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

<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. 媒体标签

  • video:视频
  • audio:音频
  • embed:嵌入内容,包括各种媒体,flash,图片等。

4. 其他功能标签

  • progress:进度条。<progress max="100" min="1" value="20"></progress>
  • datalist:文本域下拉提示。
  • detail:展开菜单。
  • mark:标注。
  • time:数据标签,给搜索引擎使用,主要日期标签。
  • canvas:使用js进行图像绘制。
  • ruby:对某些内容进行注释。
  • command:按钮。

0 人点赞