html5--新增的标签及input类型

一、html的新特性

1.新的语义元素：比如<header>,<footer>,<article>,<section>

2.新的表单控件，比如数字、日期、时间、日历和谱块

3.全国大的图像支持（比如<canvas>和<svg>）

4.强大的多媒体支持（比如<video>和<audio>）

5.强大的api,比如用本地存储取代cookie

二、新增标签

1.header 定义section或page的页眉（页面顶部，文档的头部区域）（项目中最顶部的地方）

2.nav  定义一个导航链接（相当于是导航栏模块）

3.aside定义页面内容之外的内容（侧边栏）

4.footer 定义section或page的页脚（页面底部）

5.article  定义文章

6.section 定义文档中的一块区域

下边是html5和前版本的对比。

三、新增的输入类型(老浏览器不支持会默认为text)

1.email:直接用的时候和输入框差不多，但是当我们在form中使用的时候，在提交的时候，如果在email框中的个是不是一个邮箱地址的话会提示错误（可以用来校验，在后边可以通过正则表达式进行校验）

   <form action="">
    email:<input type="email">
    <input type="submit">
   </form>

 2.url:与email类似，也是在form种提交时会校验输入框的内容是不是一个网址（包含协议头）

   <form action="">
      url: <input type="url">
    <input type="submit">

 3.color（相当于是一个调色卡）

   color:<input type="color">

 4.date  日期

   date:<input type="date">

 5.time 输入时间

   time: <input type="time">

 6.range 进度条（有一个属性 step指定每次滑动的步长）

   range: <input type="range" step="10">

 7.search 搜索框（输入框可以输入内容，右边有清空键）

   search: <input type="search">

 8.number 数字框（具有加一减一 可以指定最大最小值 以及增加及减少的数值（step） 当输入的不是有效值的时候会先变为有效值）

   number <input type="number" max="15" min="-11" step="2">

 9.tel（在手机端自动唤起小键盘 maxlength输入最大长度）

10.file (提交文件的输入框)（accept属性用来限制我们选中文件的类型 例子：image/png(选中image图片类型但是必须是png格式)）

11.输入框：datalist..option（需要和数额u狂进行绑定）（用来数据提示）

       <input type="text" list="list1">
        <datalist id="list1">
            <option value="1111"></option>
            <option value="1122"></option>
            <option value="1133"></option>
            <option value="1123"></option>
            <option value="12222"></option>
            <option value="33333"></option>
        </datalist>

当有同名的时候在option中添加属性label进行区别（但是并不会作为值填入输入框）