THML结构语义化之table/form

时间:2021-05-02 21:58:00

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

应用场景1-table表格

 <table>
<caption>
<thead>
<th colspan="4">水果价格表</th>
</thead>
<tbody>
<tr>
<th></th>
<th>中国</th>
<th>美国</th>
<th>意大利</th>
<tr>
<tr>
<th>苹果</th>
<td>8</td>
<td>12</td>
<td>10</td>
<tr>
</tbody>
<tfoot>
<tr>
<th>桃子</th>
<td>6</td>
<td>10</td>
<td>8</td>
<tr>
</tfoor>
</table>

应用场景2-form表单

 <form>
<fieldset>
<legend>基本信息</legend>
<p>
<label for="name" >姓名:</label>
<input id="name" type="text" value="姓啥名啥" />
</p>
<p>
<label for="sexs">性别:</label>
<label><input type="radio" name="sex" id="sexs" />男</label>
<label><input type="radio" name="sex" />女</label>
</p>
<p>
<label for="likes">爱好:</label>
<label><input type="checkbox" name="like" id="likes" />户外旅行</label>
<label><input type="checkbox" name="like" />读书</label>
<label><input type="checkbox" name="like" />滑雪</label>
</p>
<p>
<input type="submit" value="提交" />
</p>
</fieldset>
</form>