HTML5中新增的语义化标签主要有:
header —>定义当前页面的表头
footer —>定义页面的页脚
main —>页面主体
注:header footer main 语义化标签在一个页面中只能出现一次
hgroup —>标题组合,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来
nav —>导航,在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等)
article —>显示一个独立的文章内容,如论坛帖子,网站新闻,报纸文章 ,博客条目,用户评论等
aside —> 辅助信息的内容
section —> 区域 , 跟div的功能以及语义是一样的,可以用于广告,成组的链接,侧边栏等
figure —> 描述图像或视频
figcaption —> 描述图像或视频的标题部分
figure和figcaption一般一起使用,例如
<figure>
<figcaption>这是一张图片</figcaption>
<img src="pic.jpg" alt“ ” >
</figure>
datalist —> 选项列表
涉及到的语法:list id value …
<input type="text" list="elems">
<datalist id="elems">
<option value="a"></option>
<option value="ab"></option>
<option value="abc"></option>
<option value="abcd"></option>
<option value="apple"></option>
<option value="around"></option>
</datalist>
details / summary —> 文档细节 / 文档标题
相关语法:open属性
<details open>
<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>
mark —>带有记号的文本
音频与视频
autio:音频 双标签
controls 显示控件
loop:循环播放
autoplay:自动播放( 很多浏览器已经禁止这个功能,因为考虑到用户体验的问题)
muted:静音
video:视频 双标签
object-fit:cover 可以让视频覆盖整个父容器
注:音频和视频的默认控件是隐藏的
如果想做出和QQ音乐一样的效果:audio标签+隐藏控件(默认的,控件的样式用过HTML+CSS)+Java Script来实现交互功能
在视频中,可以通过autoplay + muted可以在静音的情况下播放
为了能够支持多个备选文件的兼容支持,可以配合source标签
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
新的input控件
email:电子邮件地址输入框
url:网址输入框
number:数值输入框
range:滑动条
data / month / week:日期控件
search:搜索框(跟普通框多一个关闭按钮)
color:颜色控件
tel:电话号码输入框( 跟普通框的区别,在移动端会调动手机的键盘)
time:时间控件