HTML列表,表格和表单

列表

在 HTML 中，列表（List）是常见的一种布局方式。列表分为两种类型：有序列表（Ordered List）和无序列表（Unordered List）。

无序列表

无序列表（Unordered List）在 HTML 中以 ul 标签表示，每个列表项以 li 标签表示。以下是一个简单的无序列表示例：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

ul 标签只能包含 li 标签, li 标签可以包含文本或其他元素。

有序列表

有序列表（Ordered List）在 HTML 中以 ol 标签表示，每个列表项以 li 标签表示。以下是一个简单的有序列表的表示例：

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

和无序列表一样，ol 标签只能包含 li 标签, li 标签可以包含文本或其他元素。

定义列表

定义列表（Definition List）在 HTML 中以 dl 标签表示，每个定义项以 dt 标签表示，每个定义描述以 dd 标签表示。以下是一个简单的定义列表的表示例：

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
    <dt>Term 3</dt>
    <dd>Definition 3</dd>
</dl>

dl 标签只能包含 dt 和 dd 标签，dt 标签表示定义项，dd 标签表示定义描述。dt 和 dd 标签可以包含文本或其他元素。它的显示效果如下所示：

Term 1
    Definition 1
Term 2
    Definition 2
Term 3
    Definition 3

这是默认的样式，一般我们都是通过 CSS 来控制它们的样式。

表格

表格（Table）在 HTML 中以 table 标签表示，每个单元格以 td 标签表示。以下是一个简单的表格的表示例：

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>

需要注意的是，如果没有设置 table 标签的 border 属性，表格将不会显示边框。

• tr 标签表示行，有多少个tr标签就有多少行。
• td 标签表示单元格，每个单元格包含的内容。
• th 标签表示表头，表头单元格。

一般而言，除了这三个标签之外，还有 thead、tbody、tfoot 标签，它们分别表示表头、主体和尾部。是为了增强可读性和可维护性，同时也有助于样式控制和数据处理。

如果在表格中没有设置 thead, tbody, tfoot 标签，在浏览器中检查的时候，会发现浏览器会自动添加 tbody 标签，导致从浏览器复制的 Xpath 和 实际的不一致。

单元格合并

在 HTML 表格中，单元格合并是通过 colspan 和 rowspan 属性实现的。在合并单元格的时候，是以单元格左上角的单元格为基准进行合并的。跨行合并的时候，添加属性rowspan，跨列合并的时候，添加属性colspan。例如：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td colspan="2">Cell 2</td>
        <!-- <td>Cell 3</td> -->
    </tr>
    <tr >
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</table>

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td rowspan="2">Cell 2</td>
        <td>Cell 3</td>
    </tr>
    <tr >
        <td>Cell 1</td>
        <!-- <td>Cell 2</td> -->
        <td>Cell 3</td>
    </tr>
</table>

表单

input标签(单标签)

在 HTML 表单中，input 标签用于创建各种类型的输入字段，如文本框、密码框、单选按钮、复选框等。以下是一个简单的 input 标签的表示例：

<input type="text" name="username" placeholder="请输入用户名">
<br>
<input type="password" name="password" placeholder="请输入密码">
<br>
<input type="submit" value="提交">

input 标签的 type 属性表示输入字段的类型，如 text、password、radio、checkbox 等。name 属性表示输入字段的名称，用于在表单提交时获取输入的值。placeholder 属性表示输入字段的提示信息，当输入框为空时显示。value 属性表示输入字段的默认值。

type 属性不同，input 标签的显示效果和功能也是不同的。因此 input 标签是我们用来和用户交互最常用的标签。

单选框

单选框（Radio Button）在 HTML 表单中以 input 标签表示，type 属性值为 radio。以下是一个简单的单选框的表示例：

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

实现单选框的效果，需要使用 name 属性来指定同一个 name，这样用户只能选择其中一个。如果需要默认选中某个单选框，可以使用 checked 属性。例如：

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female" checked> Female

复选框

复选框（Checkbox）在 HTML 表单中以 input 标签表示，type 属性值为 checkbox。以下是一个简单的复选框的表示例：

<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="swimming"> Swimming
<input type="checkbox" name="hobby" value="coding"> Coding

复选框的效果，需要使用 name 属性来指定同一个 name，这样用户可以同时选择多个复选框。如果需要默认选中某个复选框，可以使用 checked 属性。

文件上传

文件上传（File Upload）在 HTML 表单中以 input 标签表示，type 属性值为 file。以下是一个简单的文件上传的表示例：

<input type="file" name="file">

这样就可以上传单个文件了。如果需要上传多个文件，可以使用 multiple 属性。

下拉列表

下拉列表（Dropdown List）在 HTML 表单中以 select 标签表示，option 标签表示选项。以下是一个简单的下拉列表的表示例：

<select name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="canada">加拿大</option>
    <option value="australia">澳大利亚</option>
    <option value="france">法国</option>
</select>

value 属性表示选项的值，当用户选择该选项时，表单提交时，该选项的值会被提交到服务器。如果需要默认选中某个选项，可以使用 selected 属性。

文本域

文本域（Textarea）在 HTML 表单中以 textarea 标签表示。以下是一个简单的文本域的表示例：

<textarea>请输入您的留言...</textarea>

label标签

label标签用于为表单元素提供说明，label标签的for属性与input标签的id属性关联，这样点击label标签时，就会选中对应的input标签。以下是一个简单的label标签的表示例：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<input type="submit" value="提交">

这样，当我们点击用户名或者密码的label标签时，就会选中对应的输入框。

按钮标签

按钮（Button）在 HTML 表单中以 button 标签表示。以下是一个简单的按钮的表示例：

<button type="button">按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>

type 属性表示按钮的类型，type 属性值为 button、submit、reset。

type 属性默认值为 button，表示普通按钮；type 属性值为 submit，表示提交按钮，点击按钮时，表单数据会被提交到服务器；type 属性值为 reset，表示重置按钮，点击按钮时，表单数据会被重置。

form标签

form标签用于定义一个 HTML 表单，form标签的action属性表示表单提交的目标地址，method属性表示表单提交的方式，method属性值为get、post。action属性是后端的url链接。以下是一个简单的form标签的表示例：

<form action="submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

实体标签

实体标签（Entity Tags）是用于在 HTML 中显示特殊字符的标签，这是为了避免浏览器将特殊字符解释为 HTML 标签。以下是常见的实体标签表：

实体标签	描述	符号
&lt;	小于号	<
&gt;	大于号	>
&amp;	与号	&
&quot;	双引号	'
'	单引号	"
&nbsp;	不换行空格

实体标签除了在 HTML 中显示特殊字符外，还可以用来避免 XSS 攻击。