html5中新增加的内容

一、html5中新增加的语义化标签

header、footer、article、figure...这些标签不兼容ie6-8低版本，兼容处理：html5.min.js；

<!--条件注释：针对IE处理，大小写或者其它语法必须严格按照下面写法-->
<!--[if lt IE 9]>
<script src="html5.min.js"></script>
<![endif]-->

修改或者删除了一些标签：strong、small（附属细则）、hr...修改指的是改变了标签的语义化：font、center这些标签建议不用（删除）；

新增一些标记标签：mark（标记）、time（时间）、progress（进度）...

<details open>
    <summary>我的笔记</summary>
    <!--标记的本质上允许我们在单击标签时显示和隐藏内容。-->
</details>

<input type="text" id="search" list="searchList">
<datalist id="searchList">
    <option>哈哈是谁</option>
    <option>哈哈要干嘛</option>
    <option>哈哈在哪里</option>
</datalist>

二、针对于传统的表单元素进行升级

传统的表单元素：form、laber、textarea、select、button...

input（text、password、radio、checkbox、file、submit、reset、button）

针对于传统的升级：给input新增加一些类型（search、email、number、tell、range、color、date）

升级：给表单元素新增加属性placeholder（给表单元素设置提示信息）

升级：提供了新的下拉框方式

----------------------------------------------------------------------------------------------------------------------------------

给input设置新的类型作用：

1.当用户输入的时候，可以根据设置的类型，调取出最符合用户输入的键盘（比如类型设置为：number'，调取出来的就是数字键盘...）

2.提供了css和js新的验证方式（我们一半常用的还是正则验证）

css验证：

#userEmail:valid {

   		/*验证成功:浏览器内置验证机制验证结果是成功*/
    		background: white;
	     }
	     #userEmail:invalid {
   		 /*验证失败*/
  		  background: lightpink;
	     }

js内置验证：

userEmail.onkeydown = userEmail.onkeyup = function () {
    //=>this.checkValidity()：根据浏览器内置的验证机制，获取成功还是失败(TRUE/FALSE)
    if (!this.checkValidity()) {
        this.style.backgroundColor = 'lightpink';
        return;
    }
    this.style.backgroundColor = 'white';
};

正则验证：

移动端事件中一班都没有：keydown/keyup（移动端是虚拟键盘），我们使用input事件代替即可；

userEmail.οninput=function...

自己编写正则验证（项目中最常用）：userEmail.onkeydown = userEmail.onkeyup = function (){}

三、新媒体解决方案：audio音频、video视频

四、新增canvas绘图：canvas是一个标签，我们可以基于js，把它作为一个画布，绘制出想要的图形或者动画

Echarts：图标插件，它是基于canvas实现

五、新增一些API（主要是供js使用的）

webstorage：localStorage、seessionStorage 本地存储解决方案

web socket：新的客户端和服务器端通信方案

获取地理位置或者重力感应等API

...