HTML5(表单自动验证 语义化标签 ...)

一：语义标签
 
  1：区块标签

      <article>文章标签</article>
      <header>页面标题</header>
      <nav>主导航</nav>
      <aside>侧边栏</aside>
      <section>主题性内容分组</section>  //通常包含一个头部
      <footer>页脚</footer>

   2：内容分组标签

      <main>主内容区</main>
      <figure> //放置图像的标签，比如相册
         <img src="#">
         <figcaption>图像名字</figcaption>  //放置图像标题
      </figure>


    3：文本级标签

      <time datetime="2015-5-39">放置时间或日期</time>
      <i>在html5中表示一个技术用语</i>
      <b>在html5中表示关键字、商品名称等</b>
      <em>表示重要的</em>
      <strong>表示紧迫性，紧急性</strong>


二：视频/音频标签

    1：视频标签

      <video controls //显示一组播放组件>
          <source src="1.mp4">
          <source src="1.webm">
          <source src="1.ogv">
          <p>浏览器自动适配视频文件类型，以正常播放</p>
      </video>

      上面代码很耗时间，为了解决浏览器快速识别音频/视频文件，修改如下：

      <video controls>

          //type属性提示浏览器文件是那种类型，codecs属性提示浏览器用那种解码或编码器进行解码
          <source src="1.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
          <source src="1.webm" type="video/ogg; codecs="vp8,vorbis"'>
          <source src="1.ogv" type="video/ogg; codecs="theora,vorbis"'>
          <p>浏览器自动适配视频文件类型，以正常播放</p>

      </video>

      autoplay  是否自动播放
      preload(none,metadata,auto)
      muted  是否静音播放
      loop  循环播放

    2：音频标签
      <audio src="1.mp3" controls></audio>
三：html5表单
    1：input新增type类型
      type="search"; pc端会自动出现删除小叉号，移动端小键盘则会出现搜索按钮。
      type="email";  浏览器会自动出现email用到的特殊字符。（eg：@ .）
      type="url";    浏览器会自动出现url用到的特殊字符。  （eg：.com  www）
      type="tel"     浏览器会自动切换至数字键盘。
      type="number"  浏览器会自动切换至数字键盘。
      type="range"   浏览器会出现一个滑动条，选择一个范围数值
      type="date"    浏览器会自动出现一个日期选择插件以便选择日期
      type="moth"    选择某一个月份
      type="week"    选择某一个星期
      type="time"    选择一个时间
      type="datetime-local"   选择一个日期或时间（北京时间） //与datetime相差8个小时
      type="datetime"  选择一个日期或时间（世界标准时间）
      type="color"    选择一种颜色
    2：新增表单元素
      1：datalist作用：实现当用户输入一个字母时，浏览器会自动检索匹配的所有元素。代码如下：
      <input type="text" list="browsers">
      <datalist id="browsers">
          <option value="chrom">
          <option value="firefox">
          <option value="Ie">
          <option value="opera">
          <option value="safari">
      </datalist>
      2：keygen作用：用于浏览器发送数据的安全检测。
      3：output作用：用于显示脚本元素
     3：表单验证
       （1）输入类型验证
          type="number",type="Eameil",type="url".这些属性会自动验证是否符合邮箱、url的规范，如果不符合，则不能提交。
          <input type="text" required>  //required 控制所填写内容不能为空，如果为空则不让提交. 且用于所有input标签中（公用标签）
          <input type="password" minlength="5"  maxlength="12"> //minlength和maxlength表示密码在一定字符数，最小为5位，最大为12位。（公用标签）
          <input type="number"  min="5"  max="10" >   //控制用户输入的数值最小为多少，最大为多少。（公用标签）
          <input type="number"  min="10"  max="100"  step="10">  //step为步长值，就是用户每点击一次按钮，则会在输入数值的基础上加10.
      4：正则表达式验证
         正则表达式写在pattern属性中。eg：<input type="text" pattern="[0-4]{3}">   （公用标签）
四：为了避免html5表单验证与javascript的验证发生冲突，我们要禁用html5表单验证。代码如下：
    方法一：
    <form action="#" method="post"  novalidate>   //novalidate 表示禁用html5表单验证
      <!-- Code -->
    </form>
    方法二：
     <form action="#" method="post" >
         <!-- Code -->
         <input type="submit"  formnovalidate>    //在提交按钮中添加formnovalidate也可以禁止html5表单验证
     </form>
    5：新增表单属性二
      <input type="text" placeholder="123456">  //placeholder的值为文本框的默认值，当用户输入时自动隐藏。
      <input type="text"  autofocus>  //页面加载自动获取焦点，一个页面只能有一个autofocus，如果有多个，只有autofocus有效。
      <form  action="1.html" method="get"  autocomplete="on">
         <!-- Code -->  
         //autocomplete参数有on和off，作用是否记录输入记录。（公用标签）
      </form>
      <input  type="email"  multiple> //可以使单选变成多选，按atrl即可
   <form  action="" method=""  id="f"></form>
   <input type="text" name="aaa"  form="f">  //form属性可以把不是form里面的内容提交到服务器
    <form>
    <input type="submit" 
    formaction="1.html"   //formaction级别大于action
            formmethod="post"     //formmethod级别大于method
    formtarget="_blank"  
    formenctype="提交编码方式">  //formtarget级别大于target
    </form>
五：html5新增的全局属性
  accesskey作用是给超链接设置快捷键，无需用鼠标去点击。eg:

  <a href="#" accesskey="b">sdjfks</a>

  tabindex作用是改变按tab键时，改变焦点顺序。eg：
  <a href="#"  tabindex="3"></a>  //默认是0  现在变成3
  dir作用是使文本正序还是反序排列。eg：
  <bdo dir="rtl">aaaaabbbbb</bdo>  
  <p dir="ltr">aaaaabbbbb</p>
  lang作用是帮助搜索引擎确认语言、检查语法。eg：
  <html lang="en"></html>
  translate 在页面载入时是否被翻译。eg：
  <p translate="yes">I LOVE YOU</p>
  <p translate="no">I LOVE YOU</p>
  contenteditable 定义当前元素的内容是否可以编辑。
  spellcheck 自动检查单词是否正确   eg：
  <p contenteditable="true"  spellcheck="true">I love  you</p>
  hidden 隐藏一个元素。eg：
  <p hidden>I Love you</p>