THML结构语义化之table/form

以table/form标签语义化，做为博客首贴

应用场景1-table表格

 1 <table>
 2      <caption>
 3           <thead>
 4                <th colspan="4">水果价格表</th>
 5           </thead>
 6      <tbody>
 7           <tr>
 8                <th></th>
 9                <th>中国</th>
10                <th>美国</th>
11                <th>意大利</th>
12           <tr>
13           <tr>
14                <th>苹果</th>
15                <td>8</td>
16                <td>12</td>
17                <td>10</td>
18           <tr>
19      </tbody>
20      <tfoot>
21           <tr>
22                <th>桃子</th>
23                <td>6</td>
24                <td>10</td>
25                <td>8</td>
26           <tr>
27      </tfoor>
28 </table>

应用场景2-form表单

 1 <form>
 2 <fieldset>
 3         <legend>基本信息</legend>
 4         <p>
 5             <label for="name" >姓名：</label>
 6             <input id="name" type="text" value="姓啥名啥" />
 7         </p>
 8         <p>
 9             <label for="sexs">性别：</label>
10             <label><input type="radio" name="sex" id="sexs" />男</label>
11             <label><input type="radio" name="sex" />女</label>
12         </p>
13         <p>
14             <label for="likes">爱好：</label>
15             <label><input type="checkbox" name="like" id="likes" />户外旅行</label>
16             <label><input type="checkbox" name="like" />读书</label>
17             <label><input type="checkbox" name="like" />滑雪</label>
18         </p>
19         <p>
20             <input type="submit" value="提交" />
21         </p>
22     </fieldset>
23 </form>

桃花岛