HTML5标签

Posted 2021-11-30 baibaiguaiguai

一. 语义化标签

1. 使用语义化标签的原因/优点

根据内容的结构化使用语义化标签，能够使开发者更好的阅读和理解以及浏览器爬虫与搜索引擎解析。

2. 新标签

新block标签：header,footer,main,aside,article,section,nav,hgroup （主要8个）。
新表单标签，calendar、date、time、email、url、search 
媒介标签： video 和 audio 
绘画标签： canvas 

3.详细语义（兼容性好的标签）www

header:页眉（网页（部分区域）的头部 顶部 导航区域等等）;
footer:页脚（网页（部分区域）的底部|版权区域等等）;
section 标签定义网页中的区域（部分）；
article 内容是引用其他地方的；
aside 跟 article 是一起使用；是辅助 article 区域的内容;
nav 导航链接部分;
hgroup 给标题分组，不能就一个标题;
figure 对多个元素进行组合。通常与figcaption联合使用;
4.新表单标签

新增 date、time、email、url、search 等类型

具体地址: http://www.w3school.com.cn/html5/att_input_type.asp

5.video标签

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
controls：设置或返回音频/视频是否显示控件（比如播放/暂停等）
autoplay：视频在就绪后马上播放
muted：设置值后，，音频会初始化为静音
poster：一个海波帧的url,用于用于在视频或者调帧之前展示
webkit-playsinline=”true” playsinline=”true” 视频初始化播放是否全屏播放