标签

更加语义化标签(开发者可以更加优雅，浏览器也可以更好的理解)

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

在有一些低版本的浏览器中，h5标签不兼容，会被认为是div，并不会影响我们的功能。也可以在script中新加一行代码document.createElement("header"),但是用了多少标签，就要写多少行的document.createElement("")，于是有一个第三方的插件 html5shiv.js

使用方法：

注意：在页面中调用Html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

应用程序标签

DataList

progress

属性

链接关系描述

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

rel还出现在其他地方，

link本身不会请求文件，而是rel="stylesheet"才会请求文件

目前国内不流行

结构数据标记

    
        
     
      主人
     
        
     
      小狗一
     
        
     
      小狗二
     
    
    

可以方便搜索引擎重点抓取

很高级，但是只有google支持

ARIA

无障碍富互联网应用程序

请输入您的名字

为什么上面一定要label for呢？

是为了搜索引擎的理解

自定义属性

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

上面的代码用setattribue方法来定义了自定义属性，然后用getattribute又获取到了自定义属性。js也针对自定义属性出了新的api,也就是dataset['string'],使用这个api可以代替getAttribute的方法：

oli.addEventListener("click",function(){    console.log(this.dataset["name"]);})

智能表单

新的表单类型

但是尽量不要在pc端使用，用户体验较差，不能自定义样式。主要适配在移动端。

虚拟键盘适配

上面的代码在pc端上没有用处，主要是用在移动端可以根据不同的input的type来唤出不同的键盘。

虽然input type="email"看似可以验证表单，但是真是太弱了，只是验证有没有@，真的要验证的话，还是要自己写正则表达式

页面多媒体

音频

但是默认的播放器太丑了，我们一般是自己写一个button，然后为这个button添加一个事件：

视频

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

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

以下是多媒体的属性;

[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]

字幕

兼容性不是很好，现在还没有人用

canvas

1. 2d
2. 3d

svg

优势：体积小，质量高，效果好，可控程度高。