HTML5多了点啥？

更加语义化的标签

搜索引擎检索，为什么会检索标题，不会检索‘简介’？ 这是由于结构的不同，但是结构每个人的class命名习惯都会不一样，无法做到规范，于是不如出新的标签

在有少量低版本的浏览器中。h5标签不兼容，会被认为是div，并不会影响我们的功能

链接关系形容

链接到的地方和当前文档的关系是什么

<a href="http://xxx.com" rel="pre"></a><a href="http://xxx.com" 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>

自己设置属性

也就是data-*之类的属性，它们没有功能性，只为了保存dom节点的强相关数据

<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"]);});

音频

    <audio src="xxxx.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="xxx.mp4" controls="controls"></video>

但是我们一般不是这样用的，由于视频有版权，有些浏览器只能支持一两个，我们一般是source：

<video controls="controls"><source src="下午03-网页多媒体.web.mp4"><source src="下午03-网页多媒体.web.ogg"><p>您的浏览器不支持</p></video>

还有一个插件，是可以帮我们做兼容的，是https://html5media.info/的组件，ie7以上都可以兼容。