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以上都可以兼容。