html5语义化学习

什么是语义化

简单来说html5语义化就是html文档内容结构更清晰，标签间的结构层次更加明显，更有利于开发者阅读和编写代码，便于机器解析.

如下图结构

结构化好处

• 直接看html5代码更加清晰，带来了开发和维护的高效性
• 方便其他设备解析以意义的方式来渲染网页
• 更好的用户体验
  如<figcaption>描述图片标题 title alt属性提供描述信息和图片替换信息

语义化实例

• 
  
• <form>标签
  

示例

<form>
 <fieldset> <!--表单信息分割-->
   <legend>省份信息</legend> <!--fieldset元素标题-->
   <label for="area1">湖北省</label> <!--对应input-->
   <input type="text" name="areasize" id="area1"/>
 </fieldset>
</form>

效果

• 
  
• <table>标签的使用
  

示例

<table border="1">
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

效果