zoukankan      html  css  js  c++  java
  • 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>
    桃花岛
  • 相关阅读:
    寒假 学习进度七
    寒假学习进度
    寒假学习进度五
    寒假学习进度四
    寒假学习进度三
    寒假学习进度二
    Spark实验五
    半篇论文笔记
    REPL
    Scala基本语法及操作、程序控制结构
  • 原文地址:https://www.cnblogs.com/chenlily/p/5446070.html
Copyright © 2011-2022 走看看