一. 语义化标签
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” 视频初始化播放是否全屏播放
注意: MP4要 h264格式才可以。否则没有画面。
二. 兼容性
新标签不兼容 ie6/7/8
HTML5浏览器兼容性解决方案
1:创建js+css
<header>
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('article');
document.createElement('aside');
document.createElement('main');
document.createElement('section');
document.createElement('nav');
document.createElement('hgroup');
<script>
<style>
header,footer,main.aside,article,section,nav,hgroup{
display:block;
}
</style>
</header>
2:html5shiv
<!-- if lt IE 9 -->
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script> //或者下载下来
<!-- endif -->
3 : respond.js
作用:使ie9及以下兼容@media与ie6兼容max-width;
- 需要启动本地服务器(localhost),不能使用普通本地的url地址(file://开头);
- 需要外部引入CSS文件,将CSS样式书写在style中是无效的;
- 由于respond插件是查找CSS文件,再进行处理,所以respond文件一定要放置在CSS文件的后面
- 另外,虽然把respond放置在head里还是在body后面都能够实现,但是建议放置在head中;
- 最好不要为CSS设置utf-8的编码,使用默认;
<!-- if lt IE 9 -->
<script src="https://cdn.bootcss.com/response.js/0.10.0/response.js"></script>
<!-- 或者下载下来 -->
<!-- endif -->