一、列表
在HTML（超文本标记语言）中，列表是用来组织和展示一系列相关数据或项目的结构。它们通过特定的HTML标签来创建，使得信息能够以清晰、有条理的方式呈现给用户。HTML提供了三种主要类型的列表：无序列表（Unordered Lists）、有序列表（Ordered Lists）和描述列表（Description Lists或Definition Lists）。
1.无序列表
无序列表是一个没有特定顺序的列表项的集合。在无序列表中，各个列表项之间属于并列关系，没有先后顺序之分，它们通常以一个项目符号（如小黑点、空心圆点或实心方块等）来标记。
标签：由两个标签组成，容器级标签 ul 和 li 。
ul : 使用<ul>标签来创建无序列表。
li : 使用<li>标签来定义列表中的每一项。
代码：
<ul>
<li>蔬菜：青菜，芹菜，生菜</li>
<li>水果：苹果，香蕉，西瓜</li>
<li>饮料：可乐，雪碧，橙汁</li>
</ul>
效果：
2.有序列表
有序列表使用数字或字母等可以表示顺序的符号来排列列表项。与无序列表不同，有序列表中的项目是有顺序的。
标签：由两个标签组成，容器级标签 ol 和 li 。
ol ： 使用<ol>标签来创建有序列表。
li : 使用<li>标签来定义列表中的每一项。
代码:
<ol>
<li>先买蔬菜</li>
<li>再买水果</li>
<li>最后还有饮料</li>
</ol>
效果：
3.描述列表
描述列表是一种用于展示一系列术语及其对应描述的列表类型。它通常用于定义术语、概念或提供详细的说明。
标签：由三个标签组成，dl，dt，dd 。
dl : 使用<dl>标签来创建描述列表，定义一个列表结构。
dt : 使用<dt>标签来定义术语或主题，表现一个列表的主题。
dd : 使用<dd>标签来定义描述，表示解释和说明前面的主题。
代码：
<dl>
<dt>HTML</dt>
<dd>超文本标记语言（HyperText Markup Language），用于创建网页结构。</dd>
<dt>CSS</dt>
<dd>层叠样式表（Cascading Style Sheets），用于描述网页的外观和格式。</dd>
<dt>JavaScript</dt>
<dd>一种用于创建动态网页内容的脚本语言，能够增强网页的交互性和用户体验。</dd>
</dl>
效果：
4.嵌套列表
嵌套列表指的是在一个列表项下还可以包含另一个列表（无论是有序列表还是无序列表），从而形成多级列表结构。
实现方式：在<li>标签内部再嵌套一个<ul>或<ol>标签来创建嵌套列表。
代码：
<h2>购物清单</h2>
<ul>
<li>食物
<ul>
<li>蔬菜
<ul>
<li>青菜</li>
<li>芹菜</li>
<li>生菜</li>
</ul>
</li>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
</li>
</ul>
</li>
<li>饮品
<ul>
<li>饮料
<li>可乐</li>
<li>雪碧</li>
<li>橙汁</li>
</li>
</ul>
</li>
</ul>
效果：
5.自定义列表样式
通过组合使用HTML标签和CSS样式来创建具有特定结构和样式的列表，即修改列表项（<li>）和列表标记（通常是项目符号或数字）的默认外观以满足特定的设计需求。
实现方式：可以使用<div>、<span>等标签来创建自定义列表的结构，并通过CSS来设置样式。
二、表格
HTML表格是用于在网页上展示结构化数据的一种元素。它们由行（<tr>）、列（由单元格组成，分为表头单元格<th>和普通单元格<td>）以及包含这些行和列的表格容器（<table>）组成。
1.基本结构
代码：
<table border="1" style="border-collapse:collapse">
<tr>
<td>(1 ， 1 )</td>
<td>(1 ， 2 )</td>
<td>(1 ， 3) </td>
</tr>
<tr>
<td>(2 ， 1 )</td>
<td>(2 ， 2 )</td>
<td>(2 ， 3 )</td>
</tr>
<tr>
<td>(3 ， 1 )</td>
<td>(3 ， 2 )</td>
<td>(3 ， 3 )</td>
</tr>
</table>
效果：
2.属性
表格及其组成部分可以拥有多种属性来定义其外观和行为：
1. border：设置表格边框的宽度（以像素为单位）。
4. colspan（用于<td>或<th>）：使单元格跨越多列。
5. rowspan（用于<td>或<th>）：使单元格跨越多行。
三、表单
1.表单的创建
表单通过<form>标签来创建。<form>标签中可以包含多个属性，用于定义表单的行为和样式。
1.action属性：指定表单数据的目标URL，即数据将被发送到哪个URL进行后续处理。
2.method属性：定义表单数据的提交方式。常用的有GET和POST，
GET方法会将表单数据附加到action指定的URL后面，以查询字符串的形式发送。这种方法适用于非敏感数据，因为数据会在URL中可见。
POST方法会将表单数据作为HTTP请求的主体发送，适用于需要发送大量数据或敏感信息（如密码）的情况。
3.enctype属性：指定表单数据的编码类型， 常用的编码类型有
application/x-www-form-urlencoded：这是默认的编码类型，表单数据被编码为键值对。 multipart/form-data：用于文件上传，允许表单包含文件类型输入。
4.name属性：指定表单的名称，用于在JavaScript等代码中进行引用。
5.target属性：指定表单数据的提交目标，常用的有_blank（在新窗口中打开）、_self（在当前窗口中打开）等。
2.输入框
使用<input type="text">创建，允许用户输入一行文本。
代码：
用户名: <input type="text" placeholder="请输入用户名">
效果：
3.密码框
使用<input type="password">创建，输入的内容会以保密形式（如星号或圆点）显示。
代码：
密码: <input type="password" placeholder="请输入密码">
效果：
4.单选框
使用<input type="radio">创建，允许用户从多个选项中选择一个。
代码：
性别:
<input type="radio" name="people"> 男
<input type="radio" name="people"> 女
效果：
5.复选框
使用<input type="checkbox">创建，允许用户从多个选项中选择一个或多个。
代码：
爱好：
<input type="checkbox" name="hobbies" value="sports"> 运动
<input type="checkbox" name="hobbies" value="reading"> 阅读
<input type="checkbox" name="hobbies" value="traveling"> 旅行
效果：
6.文本域
使用<textarea>标签创建，允许用户输入多行文本。
代码：
自我介绍:<br>
<textarea rows="4" cols="50" placeholder="请输入自我介绍"></textarea>
效果：
7.下拉菜单
使用<select>和<option>标签创建，允许用户从预定义的选项中选择一个。
代码：
选择国家:
<select>
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select>
效果：
8.提交按钮
使用<input type="submit">创建，用于提交表单数据。
代码：
<input type="file" name="fileUpload"><br><br>
<input type="submit" value="提交">
效果：
9.重置按钮
使用<input type="reset">创建，用于重置表单中的所有字段到初始值。
代码：
<input type="file" name="fileUpload"><br><br>
<input type="reset" value="重置">
效果：
10.整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义列表样式示例</title>
</head>
<body>
<form action="/submit-form" method="post" enctype="multipart/form-data" name="myForm" target="_blank">
用户名: <input type="text" placeholder="请输入用户名">
<br><br>
密码: <input type="password" placeholder="请输入密码">
<br><br>
性别:
<input type="radio" name="people"> 男
<input type="radio" name="people"> 女
<br><br>
爱好：
<input type="checkbox" name="hobbies" value="sports"> 运动
<input type="checkbox" name="hobbies" value="reading"> 阅读
<input type="checkbox" name="hobbies" value="traveling"> 旅行
<br><br>
自我介绍:<br>
<textarea rows="4" cols="50" placeholder="请输入自我介绍"></textarea>
<br><br>
选择国家:
<select>
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select>
<br><br>
<input type="file" name="fileUpload"><br><br>
<input type="submit" value="提交">
<br><br>
<input type="file" name="fileUpload"><br><br>
<input type="reset" value="重置">
</form>
</body>
</html>
效果：
