持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

列表标签

无序列表和有序列表

    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

上述代码表示了三种列表标签的写法。其中，无序列表和有序列表的列表项li标签都要被包裹在ul（无序列表标签）或者ol（有序列表标签）中。无序列表和有序列表的浏览器效果如图:

自定义列表

    
    <dl>自定义列表
        <dt>列表主题</dt>
        <dd>列表内容</dd>
    </dl>

如上述代码所示，dl标签表示自定义列表，dt标签表示列表主题，dd标签表示列表内容。自定义列表的浏览器效果如图所示:

表格标签

  <table border="1" width="300" height="200">
    <!-- border是表框宽度，width是表格宽度，height是表格高度 -->
    <caption>学生成绩单</caption>
    <thead>
      <tr>
        <th>姓名</th>
        <!-- th是表格小标题，会加粗 -->
        <th>成绩</th>
        <th>评语</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>哥哥</td>
        <td rowspan="2">100分</td>
        <!-- rowspan是垂直合并，只保留最上面的 -->
        <td>哥哥真帅气</td>
      </tr>

      <tr>
        <td>姐姐</td>
        <td>姐姐真漂亮</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>总结</td>
        <td colspan="2">郎才女貌</td>
        <!-- colspan是水平合并，只保留最左边的 -->
      </tr>
    </tfoot>

  </table>

表格标签（table）用于写出一个表格。其中，border属性指定表框（表格最外层）宽度，width指定表格宽度，height指定表格高度，默认单位是px（像素）。

caption标签被table标签包裹，作用是指定表格的标题。
thead、tbody、tfoot标签用于规划整个表格的行列属性。(thead 表格的头 tbody 表格的身体 tfoot 表格的脚)

表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从头到脚”显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。

tr标签代表表格的一行，th标签在tr标签中代表表格的小标题，td标签代表表格的每一项。

td标签的rowspan和colspan两个属性，分别代表垂直合并（只保留最上面的）和水平合并（只保留最左边的）两个效果。

最后演示一下上面代码的浏览器效果。

表单标签

首先介绍一下input标签。

<input type="text" placeholder="文本框">
<input type="password" placeholder="密码框">
<input type="radio" name="" checked="">
<input type="checkbox">
<input type="file" multiple>
<input type="button">

input标签是表单标签。type属性决定了input标签在浏览器上的效果。
type=text时，input标签是普通的文本框，placeholder属性用于提示文本框内提示的内容；
type=password时，input标签是密码框（隐藏字符），placeholder属性功能同上；
type=radio时，input标签是单选框，name属性用于分组，同一组单选框只能有一个被选中；checked属性用于决定input标签是否被选中；
type=checked时，input标签是多选框，属性及属性功能都与单选框相同；
type=file时，input标签是文件选择框，用于上传文件，multiple属性决定input标签可以上传多个文件；
上述代码浏览器效果如图所示:（此处为了样式美观，把input标签设置了块显示模式，input标签是行内标签，块显示模式和行内标签的概念请移步本人的其他文章）

type=button时，input标签是普通按钮，需要配合javascript使用；
type=reset时，input标签是重置按钮。
type=submit时，input标签是提交按钮，与button标签效果相同，属性通用；
button标签是按钮标签，type=submit时，button标签是提交按钮，不同的是，button标签是双标签（上文的基础标签都是双标签，本文的列表标签，表格标签也都是双标签），双标签更适合包裹其他内容。此处的代码浏览器效果演示已放在form标签的代码演示中。

form标签

  <form action="">
    <input type="submit">
    <button type="submit"></button>
    <input type="reset">
  </form>

form标签用于为用户输入创建 HTML 表单， 表单用于向服务器传输数据。action 属性规定当提交表单时，向何处发送表单数据。
上述代码的浏览器效果如图所示：

label标签

  <form>
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
  </form>

label标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。label标签的 for 属性应当与相关元素的 id 属性相同。
例如上述代码，点击label元素所处的位置，会直接选中id相同元素的input标签。

select标签

  <select>
    <option>1</option>
    <option selected>2</option>
  </select>

select标签功能是下拉表单，option是表单内容,selected功能是默认选中。

textarea标签

     <textarea cols="30" rows="10"></textarea>

textarea标签文本域标签。cols设置宽度，rows设置高度。
label、select、textarea标签的浏览器效果如下图所示：

感谢支持！