HTML5新特性

HTML5新特性
//广义的HTML5包括HTML5+CSS3+JavaScript

ps:这些新特性都存在兼容性问题，基本都是IE9以上版本才支持

HTML5新增的语义化标签：
这些语义化标准主要是针对搜索引擎的，这些新标签页面中可以使用多次，在IE9中，需要把这些元素转换为块级元素

<header>
定义了文档的头部区域，在一个文档中可以定义多个
元素。它是块元素

<header>
   <p>这是文档的头部</p>
</header>

2.<footer>
定义文档页脚，它不只是页面的最底部，在文档中也可以定义多个。

3.<article>
定义页面独立的内容区域，标签定义的内容本身必须是有意义且必须独立于文档的其他部分，可用在的地方：博客文章，新闻，评论等。

<article>
    <h2>五一劳动节</h2>
    <div>
        今天是五一劳动节
    </div>
</article>

4.<aside>
定义页面的侧边栏内容

<aside>
  <ul>
    <li>腾讯</li>
    <li>阿里</li>
    <li>百度</li>
  </ul>
</aside>

5.<time>
定义时间或日期，time标签中的datetime属性定义的时间不会被显示，但可能被其他应用使用

今天是我生日

9.<nav>
定义导航栏

<nav>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.360.com">360</a>
<nav>

11.<section>
section一般有两个作用，1.定义文档中的节，和div类似。2.定义文章，这时一般带有标题

<section>
  <h1></h1>
  <p></p>
</section>

12.<video>
定义视频，属性src引入资源，controls视频的控制控件

<video src="" controls="controls">你的浏览器不支持video标签</video>

以防用户浏览的视频不支持某些格式的视频，可以为用户多准备些格式的视频,目前支持的视频格式video/ogg，video/mp4，video/webm其他格式需要转换（尽量使用mp4）

<video width="320 height="240" controls>
  <source src="" type="video/ogg">
  <source src="" type="video/mp4">
  <source src="" type="video/webm">
  //你的浏览器不支持video标签
</video>

video常用属性：（可以给视频标签加 muted属性来静音播放视频）

<video controls="controls" width="500px" height="500px" loop autoplay  poster="img.jpg">
    <source src="video.mp4" type="video/mp4"/>
   	<source src="video.ogg" type="video/ogg"/>
</video>

 13.<audio>
该标签可定义声音，及其他的音频文件
目前音频可用类型audio/ogg，audio/mpeg

<audio src="" controls="controls">你的浏览器不支持audio标签</audio>

<video controls="controls">
  <source src="xx.ogg" type="audio/ogg">
  <source src="xx.mp3" type="audio/mpeg">
  //你的浏览器不支持audio标签
</video>

常见属性：
autoplay：自动播放
controls: 显示音频的控制界面
loop： 循环播放

14.<datalist>
提示可能的值，datalist及其选项不会被显示出来，它仅仅是合法输入值的列表使用input元素的list属性来邦定datalist，下面选项使用option定义
 

<input type="text" list="cars">
  <datalist id="cars">
      <option value="宝马"></option>
      <option value="奔驰"></option>
      <option value="奥迪"></option>
  </datalist>

15.新增的input类型

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

16.新增的表单属性
autofocus：在打开页面时使元素自动获取焦点 //input,button,select,textarea

placeholder:提示文本，在用户输入时进行提示 // input,textarea

required：表明该元素是必填项，当提交表单的时候会自动验证该元素的内容是否不为空 //input,textarea

max/min/step：限制值的输入范围，以及值的变化程度。上面的新增number元素有介绍。 //input

autocomplete：使form元素或者input元素拥有自动完成功能，既记录用户之前输入的值，关闭为off，默认为on

mulitiple ： 可以多选文件提交