目录
一、概述
对于之前的一些标题标签，段落标签，文本格式话标签还有问题的可以看上一篇博文，链接为HTML基础（一），这次我们多的不聊，我们来聊一下html中列表、表格和表单的使用，以及一些关于它们的属性。
二、列表
在HTML中，列表（List）是一种非常重要的元素，用于组织和展示一系列的项目或数据。列表可以帮助用户更清晰地理解和浏览网页上的内容。接下来我们一起看一下列表的使用。
1、列表的分类
列表共有三类，分别为有序列表、无序列表和自定义列表，分别用<ol>、<ul>、<dl>定义标识。
2、列表的使用
（1）有序列表
在HTML中，有序列表（Ordered List）的主要作用是呈现一组具有顺序性的项目列表。每个列表项通常前面都有一个默认的序号（如数字或字母）来标记，以体现项目之间的顺序关系。
<ol type="0" start="3" reversed>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ol>运行结果：
（2）有序列表中的属性
type:用于标识列表序号类型
start:用于标识开始的序号
reversed:其效果为使列表序号倒序显示在页面上
以上就是有序列表的结构和属性，接下来我们来看一下无序列表。
（1）无序列表
在HTML中，无序列表（Unordered List）的主要作用是呈现一组没有特定顺序的项目列表。每个项目通常前面会有一个默认的实心圆点或小方块来标记，以区分不同的列表项1。
<ul type="square">
<li>无序列表一</li>
<li>无序列表二</li>
<li>无序列表三</li>
</ul>运行结果：
（2）无序列表的属性
type：用来更改文字前的列表图案
属性值：
disc：可以使列表图案改变为实心圆
注意：无需列表的图案默认为实心圆
square：可以使列表图案改变为实心方块
circle：可以使列表图案改变为空心圆
无序列表说完了，接下来就是最后一个自定义列表了。
（1）自定义列表
在HTML中，自定义列表（通常通过<dl>, <dt>, 和 <dd> 元素来实现）的主要作用是提供一个结构化的方式来显示项和它们的描述或定义。
<dl>
<dt>定义项</dt>
<dd>描述项</dd>
<dd>描述项</dd>
<dd>描述项</dd>
<dd>描述项</dd>
</dl>运行结果：
使用<dl>来定义自定义列表，<dt>来标识定义项，<dd>来标识描述项。
以上就是三种列表的结构和属性的介绍，接下来我们就来说一下表格。
三、表格
HTML表格在网页设计中扮演着重要的角色，用于组织和展示数据。下面是关于html中表格的一些描述。
1、表格的结构
<table border="1px" cellspacing="0" cellpadding="0" align="center" width="500px" height="200px">
<thead>
<tr bgcolor="#888888">
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td width="150px" align="center">20247801</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="center">
<td>20247802</td>
<td>李四</td>
<td>女</td>
</tr>
<tr align="center">
<td>20247803</td>
<td>王五</td>
<td>男</td>
</tr>
<tr align="center">
<td>20247804</td>
<td>赵六</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td colspan="3">班级内共计4人</td>
</tr>
</tfoot>
</table>运行结果：
2、属性
（1）表格的标签属性：
border:边框
width:宽度
height:高度
间距属性：cellspacing="0"
边距属性：cellpadding="20px"
边框颜色：bordercolor="red"
背景色：bgcolor="#f90"
水平对齐方式：align
背景图片： background="图片路劲"
<table border="1px" width="500px" height="150px" cellspacing="0" cellpadding="20px"
bordercolor="red" bgcolor="#f90" align="center">
<tr>
<td>01</td>
<td>王某某</td>
<td>21</td>
</tr>
<tr>
<td>02</td>
<td>张某某</td>
<td>22</td>
</tr>
<tr>
<td>03</td>
<td>代某某</td>
<td>23</td>
</tr>
</table>
运行结果：
（2）行标签属性：
bgcolor:行标签背景颜色属性
align:行标签水平对齐方式（left左||center中||right右）
valign：行标签垂直对齐方式（top上||middle中||bottom下）
<table border="1px" width="500px" height="150px" cellspacing="0" cellpadding="20px" bordercolor="pink"
bgcolor="#f90" align="center">
<tr bgcolor="red" align="center" valign="middle">
<td>01</td>
<td>王某某</td>
<td>21</td>
</tr>
<tr bgcolor="green" align="center" valign="middle">
<td>02</td>
<td>张某某</td>
<td>22</td>
</tr>
<tr bgcolor="blue" align="center" valign="middle">
<td>03</td>
<td>代某某</td>
<td>23</td>
</tr>
</table>运行结果
（3）单元格标签属性：
width：宽度
height：高度
bgcolor:背景颜色
background:背景图片
插入图片：img
align:行标签水平对齐方式（left左||center中||right右）
valign：行标签垂直对齐方式（top上||middle中||bottom下）
合并单元格属性：
横向合并：colspan="合并单元格的数量"
纵向合并rowspan="合并单元格的数量"
<table border="1px" width="500px" height="150px" cellspacing="0" cellpadding="20px" bordercolor="pink"
bgcolor="#f90" align="center">
<tr>
<td rowspan="3"><img src="./../img/头像.jpg"></td>
<td rowspan="2">01</td>
<td colspan="2">王某某</td>
<!-- <td>21</td> -->
</tr>
<tr>
<td>张某某</td>
<td>22</td>
</tr>
<tr>
<td>02</td>
<td>代某某</td>
<td>23</td>
</tr>
</table>
四、表单
HTML表单是网页上用于收集用户输入的一种方式。它们可以包含各种不同类型的字段，如文本框、复选框、单选按钮、下拉列表等，以便用户输入或选择数据。一旦用户填写完表单并提交，数据通常会被发送到服务器进行处理。
1、form表单结构
<form action="提交表单的路径">
<input type="">
</form>在HTML中，<input> 标签的 type 属性用于定义输入字段的类型。下面是一些常见的 type 属性值：
2、type属性值
text：单行文本输入字段。
<input type="text" name="username">
password：密码输入字段。
输入的内容会被遮盖显示（通常是显示为点或星号）
<input type="password" name="pwd">
submit：提交按钮。
当点击此按钮时，会提交表单
<input type="submit" value="Submit">
reset：重置按钮。
当点击此按钮时，表单的所有输入字段会被重置为初始值
<input type="reset" value="Reset">
button：可点击的按钮。
默认情况下，点击此按钮不会提交表单，但可以通过JavaScript为其添加功能
<input type="button" value="Click Me" onclick="alert('Hello!')">
radio：单选按钮。
用户可以从一组选项中选择一个。
<input type="radio" id="option1" name="options" value="option1">
<label for="option1">Option 1</label><br>
<input type="radio" id="option2" name="options" value="option2">
<label for="option2">Option 2</label>
checkbox：复选框。
用户可以选择多个选项
html
<input type="checkbox" id="option1" name="options" value="option1">
<label for="option1">Option 1</label><br>
<input type="checkbox" id="option2" name="options" value="option2">
<label for="option2">Option 2</label>
file：文件上传字段。
允许用户选择一个或多个文件，然后提交到服务器
<input type="file" name="myfile">
hidden：隐藏输入字段。
此字段对用户不可见，但可以在表单提交时携带固定的数据并发送数据。
<input type="hidden" name="token" value="some_token_value">
image：图像形式的提交按钮。
点击图像时，会提交表单
<input type="image" src="submit.png" alt="Submit">
color：颜色选择器。允许用户从调色板中选择颜色。
<input type="color" name="favoriteColor">
date、datetime-local、month、time、week：这些类型提供了不同的日期和时间选择器，方便用户输入日期和时间。
除了上述常见的 type 值，HTML5 还引入了一些其他类型，如 email、number、range、search、tel 和 url，它们提供了更具体和有用的输入验证和格式化功能。
3、下拉列表标签
球类运动:
<select name="ball" id="ball">
<option value="basketball" selected>篮球</option>
<option value="football">足球</option>
<option value="pingpang">乒乓球</option>
<option value="yumaoqiu">羽毛球</option>
</select>4、type属性中按钮属性值
<!-- 按钮 -->
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="button" value="普通按钮">五、总结
此文章描述了html的列表，表格，表单，等基础的html实现，后续还会有其他的基础知识持续更新，本文章如果有侵权现象，请立即告知作者，谢谢
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
