(逆战班)HTML5新语义化标签
html5中多了很多新的语义化标签,他们和div类似,但是可以让人们更加理解结构,还可以针对特殊人群如盲人使用的屏幕阅读器,这些语义化标签相比传统标签更加友好。
下面列举一些新的语义化标签。
header :页眉
一般用在结构的头部。
footer:页脚
一般用在结构的尾部。
main:主体
结构的主体部分
注:上述三个标签在一个页面中只能出现一次。
hgroup:标题组合
标题组合可以写在里面
例:
<hgroup>
<h1>大标题</h1>
<h2>小标题</h2>
</hgroup>
nav:导航
页面中的导航通常用到
例:
<nav>
<ul>
<li> </li>
<li> </li>
</ul>
</nav>
article:独立的内容
应用场景如:
论坛帖子
报纸文章
博客条目
用户评论
aside:辅助信息的内容
比如侧边栏等
section:区域
和div的功能和语义是一样的
figure:描述图像或视频
figcaption: 描述图像或视频的标题部分
上述两个标签可以合在一起用
例
<figure>
<img src="./1.jpg" alt=" ">
<figcaption>
<h3>标题<h3>
<p>描述文字<p>
</figcation>
<figure>
datalist:选项列表
<datalist id="elem">
<option value="a"></option>
<option value="ab"></option>
</datalist>
details / summary :文档细节 /文档标题
<details>
<summary>HTML</summary>
<p>超文本标记语言</p>
</details>
progress /meter :定义进度条 /定义度量范围
<progress min="0" max="100" value="50"></progress>
<meter min="0" max="100" value="80" low="30" high="70"></meter>
time :定义时间
<p今天是<time>3月3日</time></p>
<p今天是<time title="2月14日">情人节</time></p>
音频与视频
<audio> </audio>:音频,双标签
controls:显示控件
loop:循环播放
autoplay:自动播放,考虑到用户体验的问题,现在各大浏览器现在已经禁止
muted:静音
注:音频和视频的默认控件是隐藏的
注:如果想做出和qq音乐一样的效果,audio标签+隐藏控件(默认的,控件的样式用html+css模拟)+JavaScript 来实现交互功能。
<video></video>:视频
autoplay+muted:可以自动播放
object:cover :可以让视频把容器铺满
注:默认情况下,视频是不能进行拉伸的,必须成比列。
为了支持多个设备文件的兼容问题,可以添加source 标签。