html5的一些基本新语义

之前我们常用的是html4，html5其实只是在他的基础上加了一些东西，在html4中用过很多语义标签，我们一般都是这样写页面的：

但在html5里面，我们会使用一些新语义标签来写页面，这样会使页面看上去更简洁，在html5中上面的转换成：

但是它的兼容性有点问题的，在IE的低版本中是不支持的，这时候我们就要自己创建这个新语义标签，创建标签我们一般实在js中创建的，所以用这儿我们要加个判断，来决定是不是可以使用：

第一行和最后一行不是注释语，他们就是用来判断浏览器版本。

这里表单有许多新的type属性，像选择颜色，日期，等等，我们都是用js来创建的，现在html5中只要一句代码就可以解决这些：

其中form是新语义表单的意思，fieldset是一个框的意思

这里只要像上面这样写，就可以直接选择颜色，日期等等：

 

这里有一些属性的效果在电脑浏览器上是看不出的，我们要换到手机上才可以看。

使用表单注册时候，一般要用到一些自定义验证：

Required添加到input后，在input提交时会进行非空验证，

Pattern是通过设置正则来进行内容的刷选，在里面直接写正则就可以了，不需要写//.

SetCustomValidity是自定义验证失败后提示的信息，所有它一般跟oninvalid一起使用，

给哪个注册oninva lid事件，验证失败后就会给哪个提示内容。

Placeholder添加在input标签中是提示信息：

Autofocus是自动获取焦点的意思，

Autocomplete就是你提交过一次后会自动记住的，你下次输入时只要输入前面几个就会跳出来提示的意思，但用这个必须要要跟name属性连起来一起用：

 

就是你点击文字“请输入你的爱好”，文本框会自动获取焦点。

H5中我们有多媒体标签，有video，audio分别是视频和声音标签。他们用法是一样

其中src中导入的是路径，loop是循环播放的意思，controls是控制界面的意思，poster是设置视频封面时的封面的路径，加了poster，那就不能使用autoplay自动播放了。在里面设置的宽，高，不是视频的宽，高，而是video的宽，高，你改变video的宽高后，视频还是会按照它自己的宽高比例来改变大小。用这种导入视频还有一个缺点，所以大部分网站不用，直接右击就可以直接下载，一般盈利网站都不用的。

H5中还介绍了一种获取dom元素的方法，它支持基本上所有的jquery选择器，使用这种不需要导入jq，他的用法是：

 

这种切换之前我们用js来做，要写好多代码，而h5,有更简单的方法：

 

然后给每个input注册事件：

这里我们只用了五行代码就搞定了，如果用js做的话，会很麻烦。

ClassList属性为我们提供了操作class，有增加，移除，切换功能：