首页 > 其他分享> > tabale,form等标签使用知识点补充
tabale,form等标签使用知识点补充

2021-09-27 22:00:35 作者：互联网
<body>
<!--列表知识点补充：自定义列表，一般用于底部导航-->
  <dl>
    <dt>这是标题</dt>
    <dd>01</dd>
    <dd>02</dd>
    <dd>03</dd>
  </dl>
<!--表格知识点补充，写一个完整的表格-->
<!--cellspaceing 单元格间距(理解为margin)  cellpadding 单元格边距（理解为padding）  单元格看成div-->
  <table border="1" cellspacing="0" cellpadding="0">
<!--    表格标签包裹最外围，然后分 3份结构 和表格 大标题-->
    <caption>我是大标题，无法被合并，脱离表格结构</caption>
    <thead>
<!--    表格头部-->
    <tr>
<!--      可多行，多个tr，但是表格头部 一般 只有一行-->
      <th>我是第一列的小标题</th>
      <th>我是第二列的小标题</th>
      <td>我是第三列，没有小标题加粗字体</td>
<!--      th等同于td，只是多个加粗-->
    </tr>
    </thead>
    <tbody>
<!--    表格主体-->
    <tr>
      <td>小红</td>
      <td rowspan="2" colspan="2">100</td>
<!--      合并单元格后需要删除被合并的单元格，rowspan 上下合并  colspan  左右合并-->
<!--      <td>女</td>-->
    </tr>
    <tr>
      <td>小明</td>
<!--      <td>55</td>-->
<!--      <td>男</td>-->
    </tr>
    <tr>
      <td>小张</td>
      <th>99</th>
<!--      此处故意用了小标题加粗-->
      <td>男</td>
    </tr>
    </tbody>
    <tfoot>
<!--    表格底部-->
    <tr>
      <td>总结</td>
      <td>啥都不是</td>
      <td>啥都不是</td>
    </tr>
    </tfoot>
  </table>

<!--input知识点-->
  <form action="">
    <p>用户名：
      <input type="text" placeholder="用户名/邮箱">
    </p>
    <p>
      密码：
      <input type="password">
    </p>
    <p>
      性别：
      <input type="radio" name="sex" value="男" checked>男
      <input type="radio" name="sex" value="女">女
    </p>
    <p>
      爱好：
      <input type="checkbox" name="like" value="学习">学习
      <input type="checkbox" name="like" value="熬夜">熬夜
      <input type="checkbox" name="like" value="看电视">看电视
      <input type="checkbox" name="like" value="唱歌">唱歌
    </p>
    <input type="file" multiple>
    <p>
      <input type="reset" value="重置">
      <input type="submit" value="提交按钮">
      <input type="button" value="一个朴实无华的按钮">
    </p>
    <select name="学历" id="">
      <option value="大专" selected>大专</option>
      <option value="本科">本科</option>
      <option value="研究生">研究生</option>
      <option value="博士">博士</option>
    </select>
    <p>
      备注：
    </p>
    <textarea name="extra" id="" cols="30" rows="10"></textarea>
  </form>
<!--label使用
  单独使用没啥大用，用于绑定控件，获取焦点什么的，比如一个多选框，点框框才能选中，加label后，点文字也可以选中
-->
  <label>
    <input type="checkbox" value="label">label
  </label>

  <input type="checkbox" id="label2">
  <label for="label2">label2</label>

<!--html5新增语义标签：
  太多，之前字体strong那些也算，header,nav,footer,aside,section,article,canvas....
  字符实体：
  空格  &nbsp > &gt < &lt
-->
</body>
标签：知识点,小标题,form,tabale,--,label,选中,字体,标题
来源： https://www.cnblogs.com/kaixinhaozai/p/15345490.html