HTML5-新增语义化标签

所谓语义化就是一看就知道是做什么的。以前布局只有div,span,ul,li等，div，span对于搜索引擎来说是不具有语义的。

• 说明

  新增的布局类标签，更加具有语义性：

  <div class='header'></div>
  <div class='nav'></div>
  <div class='content'></div>
  <div class='footer'></div>
  

  新增的语义化标签:

  w3c 手册中文官网 : http://w3school.com.cn/

  <header>头部标签：定义文档的页眉</header>
  <nav>导航标签：定义导航链接的部分</nav>
  <article>内容标签：标签规定独立的自包含内容</article>
  <section>块级标签：定义文档中的节、区段</section>
  <aside>侧边栏标签：定义其所处内容之外的内容</aside>
  <footer>底部标签：定义文档或节的页脚</footer>
  

• datalist 定义下拉列表，请与 input 元素配合使用该元素

  <input type="text" value="输入水果名称" list="star"/> <!--  input里面用 list -->
  <datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->
      <option>Apple</option>
      <option>Banana</option>
      <option>Orange</option>
      <option>Grape</option>   
      <option>Pear</option>  
  </datalist>
  

• fieldset 定义围绕表单中元素的边框，可将表单内的相关元素分组，打包 legend 搭配使用

  <fieldset>
      <legend>用户登录</legend>
      用户名: <input type="text"><br /><br />
      密　码: <input type="password">
  </fieldset>