HTML5增加了一些新的标签,有助于开发人员定义重要的内容,可以给站点带来更多的媒体元素(视频和音频)。当涉及到网站的抓取和索引时,对于SEO很友好。不过,IE9以下的版本不支持这些新特性,所以我们要采取一些方案来解决这些兼容性的问题。一、新增标签
1、结构标签
header
footer
main
aside侧边栏
nav导航
article定义文章 写在section里
section
details
summary
dialog
2、文本标签
mark
time
meter表示度量,温度啦,电量啦,属性有 max min low high value optimum
progress表示进度,完成了多少。属性有max value
wbr单词内换行
ruby写汉语拼音和rt一起用
rt
3、图像标签
figure 文章插图
figcaption 文章的标题
canvas画布
4、列表标签(兼容性差,省)
5、多媒体标签
video视频 属性有controls/autoplay/muted/loop/poster/preloadheight/src
audio音乐 属性有controls/autoplay/muted/loop/preload/src
source单标签 属性有type/src source写在video或者audio里
代码:
<video src="movie01.mp4" width="800" controls preload="" loop muted poster="movie01.jpg"></video><audio src="music.mp3" controls=""></audio>or<video controls><source src="movie.webm" type="video/webm"><source src="movie.ogg" type="video/ogg"></video>
6、表单标签datalist定义下拉提示keygen加密
output输出
二、H5智能表单
1、 input新增type值
email 匹配邮箱地址
url 必须输入url地址(http://)
number
range
tel
search
color
date
month
week
time
datatime-local
2、form元素新增属性
autocomplete 自动完成,自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
novalidate 不进行验证
3、表单控件新增属性
required 必填项目,不输入不能提交
placeholder
pattern
autofocus自动获取焦点
三、全局新增属性
contenteditable规定元素内容是否可编辑
contextmenu规定元素的上下文菜单
data用于存储页面或应用程序的私有定制数据
draggable规定元素是否可拖动
dropzone规定在拖动被拖动数据时是否进行复制移动或者链接
hidden隐藏
spellcheck规定是否对元素进行拼写和语法检查
translate规定是否应该翻译元素内容
四、HTML5兼容性解决方案
1、使用js代码让IE9以下浏览器识别HTML5标签
2、开启IE的兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
3、壳浏览器 优先使用 webkit内核
<meta name="renderer" content="webkit">
目前先写这些兼容性解决方案,后续再加