H5中新增的标签,video和audio以及一些表单的特殊属性的用法

H5新特性

HTML5增加一些新的标签，表单，以及视频音频的相关用法，对前端程序员来说是非常友好的。那么聊聊这些新增特性的微重点用法以及特性吧。

新增的标签：

在之前咱们开发用的最多的就是盒子模型，不管是头部，正文，还是尾部模块咱们用的都是div，给他设置不同的类名或者id名字进行设计布局的，这样布局其实对浏览器来说是不友好的，因此H5新增了header(头部),nav（导航）,artical（正文）,section（正文中的部分模块）,aside（侧边栏）以及footer（网页最下方）部分，这种方式布局，更加清晰，看一眼就知道这是属于哪个模块，不仅对游览器友好，也省去了咱们给div起名字的时间，两全其美。如下图：

video标签

HTML5新增的video是用于游览器播放视频的，这个标签的用法我先放到下面。

<video>
        <source src="sourse/m.mp4" type="video/mp4">
        <source src="sourse/m.ogg" type="video/ogg">
        您的浏览器版本太低，不支持这个视频的格式
</video>

先聊一聊怎么使用，以及中间的细节，当你在你的开发软件上写上video的时候他会自动生成以下代码<video src=""></video> 那为什么不直接在video的src中添加视频路径呢？原因是为了考虑浏览器的兼容问题，有些浏览器的版本比较低，使用这种方式添加文件，无疑只能添加一种格式，有些浏览器可能不支持，因此我们使用上面多行的形式来设计最合适。

有哪些重要的属性呢？

1. control属性用于控制视频的播放，设置以后页面上会显示一个播放按钮。
2. autoplay属性，用于自动播放视频，设置以后浏览器页面加载完成这个视频就会自动播放，但是谷歌把自动播放给禁用了，那就不能用了么？其实也有解决方法，只要给视频添加一个静音的属性就可以实现自动播放啦，静音属性是muted=“muted”;
3. loop是循环播放属性，可以用这个属性设置播放的次loop=“3”;或者设置一直重复播放loop=“loop”;
4. 还有一个重要的属性poster，这个属性是用于用户那边网络不好的情况下，用图片代替视频。也就是poster=“图片的路径”;这个也蛮重要的哦~

audio音频
这个的用法与video属性相似，在这儿就不细说了，聊聊异同点吧，audio他不能通过moted静音来实现自动播放，以及他不能呢使用poster用图片代替音频加载不出来的效果。

表单：

H5表单多了许多的类型，像search搜索，Tel电话，color颜色，email邮箱，URL路径，time时间，date日期，week周类型以及number数字类型

那么使用这些类型后的特点是什么呢？有啥区别？
使用以上类型以后，比如你的表单的类型是number那么这个类型中就输入不了文字，只能输入汉字，再比如表单类型为tel那么这个表单就必须输入11位数的电话号码；综上所述这些新的类型就是用于限制，也更加专业。

聊聊这些新增表单的一些属性

1. autoforce 浏览器加载完成以后，鼠标光标自动聚焦到这里。（常用于搜索框）
2. placeholder 这个属性是给文本一个默认值，这个值是虚拟的，如果你在这个文本中输入了其他文字，这些默认文字就会自动消失，比之前我们用过的value好用。我们都知道如果使用value，你想改变文本中的值那就得先把默认值删除，而placeholder就省去了这个步骤。
3. autocomplate 这个值是用于保留你输入并且成功提交以后文本的记录，当你提交以后，再回到这个文本框，点击以后，就会显示你曾经输入过的记录，但是这个对用户来讲是泄露隐私的表现，因此我们常常把他关掉，浏览器的默认值是autocomplate=“true”;我们改成autocomplate=“false”；就行啦
4. required 如果给某标签设置了这个属性那么这个属性就是必填项，不填写就无法提交。
5. multiple 这个是与表单中文件域连用的，使用这个属性可以让上传文件时，同时上传多个文件。非常好用。