一.更加语义化标签(开发者可以更加优雅，浏览器也可以更好的理解)
搜索引擎检索，为什么会检索标题，不会检索“简介” ? 这是因为结构的不同。但是结构每个人的class命名习惯都会不一样，无法做到规范，于是不如出新的标签。
在有一些低版本的浏览器中，h5标签不兼容，会被认为是div，并不会影响我们的功能。也可以在 script 中新加一行代码 document.createElement(“header”) ,但是用了多少标签，就要写多少行的 document.createElement(“”) ，于是有一个第三方的插件 html5shiv.js
使用方法：
<!–[if lt IE 9]>
<script type=”text/javascript” src=”http://www.ijquery.cn/js/html5shiv.js”></script>
<![endif]–>
注意：在页面中调用Html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。
二.应用程序标签
DataList
progress
属性
三.链接关系描述
链接到的地方和当前文档的关系是什么
<a href=”01-sementic-tags.html” rel=”pre”></a>
<a href=”02-application-tags.html” rel=”next”></a>
rel还出现在其他地方，
<link rel=”stylesheet” href=”css.css”>
link本身不会请求文件，而是rel=”stylesheet”才会请求文件
四.结构数据标记
<div itemscope itemtype=”www.baidu.com”>
<div itemprop=”主人”>主人</div>
<div itemprop=”小狗”>小狗一</div>
<div itemprop=”小狗”>小狗二</div>
</div>
五.ARIA,无障碍富互联网应用程序
<label for=”myinput”>请输入您的名字</label>
<input type=”text” id=”myinput”>
为什么上面一定要label for呢？
是为了搜索引擎的理解
六.自定义属性
也就是 data-* 之类的属性，他们没有功能性，只是为了保存dom节点的强相关的数据。
<ul id=”list”></ul>
<div id=”info”></div>
<script>
var data={
01:{
name:”张三”,
age:18
},
02:{
name:”李四”,
age:19
},
03:{
name:”王五”,
age:20
}
};
for (var X in data) {
var item=data[X];
var oli=document.createElement(“li”);
var olist=document.getElementById(“list”);
oli.appendChild(document.createTextNode(item.name));
olist.appendChild(oli);
oli.setAttribute(“data-name”,item.name);
oli.setAttribute(“data-age”,item.age );
oli.addEventListener(“click”, function () {
var name=this.getAttribute(“data-name”);
var age=this.getAttribute(“data-age”);
alert(age+name)
})
}
</script>
上面的代码用 setattribue 方法来定义了自定义属性，然后用getattribute又获取到了自定义属性。js也针对自定义属性出了新的api,也就是 dataset[‘string’] ,使用这个api可以代替 getAttribute 的方法：
oli.addEventListener(“click”,function(){
console.log(this.dataset[“name”]);
})
七.智能表单,新的表单类型
<input type=”date”>
<input type=”color”>
<input type=”range”>
但是尽量不要在pc端使用，用户体验较差，不能自定义样式。主要适配在移动端。
虚拟键盘适配
<input type=”text” name=”txt_text” id=”txt_text”>
<input type=”number” name=”txt_number” id=”txt_number”>
<input type=”email” name=”txt_email” id=”txt_email”>
<input type=”tel” name=”txt_tel” id=”txt_tel”>
<input type=”url” name=”txt_url” id=”txt_url”>
上面的代码在pc端上没有用处，主要是用在移动端可以根据不同的input的 type 来唤出不同的键盘。
虽然 input type=”email” 看似可以验证表单，但是真是太弱了，只是验证有没有 @ ，真的要验证的话，还是要自己写正则表达式
八.页面多媒体,音频
<audio src=”A Moment of Reflection.mp3″ controls=”controls”></audio>
但是默认的播放器太丑了，我们一般是自己写一个button，然后为这个button添加一个事件：
<script>
var btn=document.getElementById(“btn”);
var btn1=document.getElementById(“btn1”);
var audio=document.getElementsByTagName(“audio”)[0];
btn.addEventListener(“click”, function () {
audio.play();
})
btn1.addEventListener(“click”,function (argument) {
audio.pause();
})
</script>
九.视频
<video src=”A Moment of Reflection.mp4″ controls=”controls”></video>
但是我们一般不是这样用的，因为视频有版权，有些浏览器只能支持一两个，我们一般是source：
<video controls=”controls”>
<source src=”itxm.net.web.mp4″>
<source src=”itxm.net.web.ogg”>
<p>您的浏览器不支持</p>
</video>
还有一个插件，是可以帮我们做兼容的，是http://html5media.info/的组件，ie7以上都可以兼容。
以下是多媒体的属性;
[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]
十.字幕
缺点:兼容性不是很好，现在还没有人用
canvas的2d和3d
优势：体积小，质量高，效果好，可控程度高。
转载请注明来源网站:blog.ytso.com谢谢！
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/14961.html