html5新特性

---

一、新增语义化标签

所谓语义化标签，我自己的理解是看到标签我就能明白这是什么意思。

<!--header:网页的头部，作为一个网页内容快的标题-->
 <header></header> 
 <!--nav:导航栏部分，定于整个页面的主要导航部分-->
 <nav></nav> 
 <!--section：网页的一个内容区块，相当于一个大的div--> 
 <section></section>
 <!--aside：侧边栏，可以是相关链接或者资料--> 
 <aside></aside> 
 <!--artical：区块内的一个独立区域，定义自成一体独立的内容--> 
 <artical></artical> 
 <!--footer:网页的尾部，可以是作者，版权信息，附录等等--> 
 <footer></footer>

二、新增的多媒体标签

新增的多媒体标签：就是不再使用flash和其他浏览器插件就能播放音频

1.音频标签audio

语法如下：

<audio src="文件地址“ controls="controls"></audio>

属性：autoplay | controls | loop
autoplay ：自动播放
controls：给用户提供播放控件
loop：循环播放

小编提示：浏览器都统一支持MP3格式，尽量采用MP3格式

若考虑兼容性的问题，就采取下面的格式：

<audio controls>
 <source src="house.ogg" type="audio/ogg">
 <source src="house.mp3" type="audio/mpeg">
      您的浏览器不支持 audio 元素。
</audio>

2.视频标签video

语法如下：

<video src="文件地址" controls="controls" muted="muted"></video>

属性：autoplay | controls | loop | poster
autoplay=”autoplay “; 自动播放，但是谷歌播放要和muted=“muted”同时用，
controls 向用户显示播放控件，不同的浏览器展示的样式不同
loop=”loop“无限循环播放
poster=“图片路径”; 当视频加载不出来的时候，显示图片加载，和预加载

小编提示：虽然支持的视频格式有MP4、WebM、Ogg，尽量放MP4。
若考虑兼容性的问题，就采取下面的格式：

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  您的浏览器暂不支持<video>标签播放视频
</video>

三、 input表单类型

以下是总结的几种新增类型：

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search	搜索框
type=“color”	生成一个颜色选择表单

举例：
邮箱表单：

<form action="#" method="post">
      <ul>
            <li>邮箱:<input type="email"></li>
            <li><input type="submit" value="提交"></li>
      </ul>
</form>

浏览器展示页面：

当输入正确时，按提交按钮表单是不会提示出错的，但是输入的邮箱不是正确的格式时就会报错

四、新增的表单属性

属性	说明
required	值是required 表示拥有该属性内容不能为空
placeholder	提示文本 表单的提示信息
autofocus	值：autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	值：off/on 如果off则表示输入到表单里的信息不记录，on就是记录
multiple	值：multiple 可以多选文件提交

修改placeholder里面的颜色：

input：：placeholder{ color:pink;}

---