列表标签是 HTML 中用于展示 "一系列相关内容" 的标签，具有结构清晰、排版整齐的特点，广泛用于导航栏、菜单、步骤说明、底部说明等场景。HTML 列表分为三类：无序列表（<ul>）、有序列表（<ol>）、自定义列表（<dl>），每类都有特定的使用场景。
**中可嵌套任意列表（包括自身类型），实现 "多级菜单""分类清单" 等复杂结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表嵌套示例</title>
<style>
body {
padding: 20px;
font-size: 16px;
}
ul ul {
list-style-type: circle; /* 子列表用空心圆点 */
margin-left: 20px;
}
</style>
</head>
<body>
<h2>前端技术栈（列表嵌套）</h2>
<ul>
<li>HTML
<ul>
<li>基础标签</li>
<li>进阶标签（表格、表单）</li>
<li>HTML5新特性</li>
</ul>
</li>
<li>CSS
<ul>
<li>基础样式</li>
<li>选择器</li>
<li>Flex/Grid布局</li>
<li>响应式设计</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>基础语法</li>
<li>DOM操作</li>
<li>异步编程</li>
<li>框架（Vue/React）</li>
</ul>
</li>
</ul>
</body>
</html>
运行效果如下所示：
（2）样式修改（CSS）
列表的默认样式（圆点、序号、缩进）可通过 CSS 灵活修改：
/* 去掉列表默认标记 */
ul, ol {
list-style: none;
}
/* 自定义无序列表标记（用图片） */
ul.custom {
list-style-image: url("icon.png");
}
/* 自定义有序列表序号颜色 */
ol {
color: #ff6700;
}
/* 调整列表缩进 */
ul, ol {
padding-left: 30px;
}
（3）注意事项
- 语义化选择：无序列表用于 "无顺序内容"，有序列表用于 "有顺序内容"，自定义列表用于 "标题 + 说明"，避免混用；
- 避免非法嵌套 ：
<ul>/<ol>中仅能放<li>，<dl>中仅能放<dt>/<dd>，否则会导致布局错乱；
- 性能优化：多级列表嵌套不宜过深，否则会影响页面渲染性能和用户体验。
表单是 HTML 中用于收集用户输入信息 的核心组件，是网页与用户交互的关键（如登录、注册、搜索、问卷、简历填写）。一个完整的表单由 "表单域（<form>）" 和 "表单控件（输入框、按钮、下拉框等）" 组成，支持数据提交到服务器。
1. 表单的核心结构
表单的核心标签关系如下：
- ：表单域容器，所有表单控件都需嵌套在其中，用于定义数据提交的目标和方式；
- 表单控件 ：用户输入或选择的组件，如
<input>（单行输入框、按钮等）、<select>（下拉框）、<textarea>（多行文本域）、<label>（关联标签）。
| 属性 |
作用 |
取值 |
说明 |
action |
指定表单数据提交的目标地址 |
相对路径（如submit.html）或绝对路径（如https://example.com/submit） |
未指定时，提交到当前页面 |
method |
指定数据提交方式 |
get（默认）或post |
get：数据拼接在 URL 中（适用于少量、非敏感数据）；post：数据在请求体中（适用于大量、敏感数据） |
name |
表单名称 |
自定义字符串 |
用于区分多个表单（如页面中有登录和注册两个表单） |
基础表单结构代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单基础结构</title>
<style>
body {
padding: 20px;
font-size: 16px;
}
form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
}
.form-group {
margin: 15px 0;
}
</style>
</head>
<body>
<h2 style="text-align: center;">简单登录表单</h2>
<!-- 表单域：数据提交到login.html，使用post方式 -->
<form action="login.html" method="post" name="loginForm">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<input type="submit" value="登录">
<input type="reset" value="重置">
</div>
</form>
</body>
</html>
运行效果如下：
2. 核心表单控件详解
**是表单中最常用的控件，通过type**属性切换不同功能，支持文本输入、密码输入、单选、复选、按钮等，核心属性如下：
type：控件类型（必选）；name：控件名称（用于服务器接收数据，单选 / 复选需相同name实现分组）；value：默认值或提交值；id：唯一标识（用于与<label>关联）；required：标记为必填项（HTML5 新增，未填写则阻止提交）；checked：默认选中（仅用于单选 / 复选）；maxlength：输入最大长度（仅用于文本 / 密码框）。
常用type取值及用法：
type值 |
控件类型 |
用途 |
代码示例 |
text |
单行文本框 |
输入用户名、手机号等普通文本 |
<input type="text" name="username" placeholder="请输入用户名"> |
password |
密码框 |
输入密码（输入内容隐藏为圆点） |
<input type="password" name="password" placeholder="请输入密码"> |
radio |
单选框 |
二选一或多选一（如性别） |
<input type="radio" name="sex" value="male" checked> 男 |
checkbox |
复选框 |
多选（如爱好、技能） |
<input type="checkbox" name="hobby" value="reading"> 阅读 |
submit |
提交按钮 |
提交表单数据 |
<input type="submit" value="提交表单"> |
reset |
重置按钮 |
清空表单所有输入 |
<input type="reset" value="重置"> |
button |
普通按钮 |
触发自定义事件（需配合 JS） |
<input type="button" value="点击提示" onclick="alert('hello')"> |
file |
文件选择框 |
上传文件（如简历、头像） |
<input type="file" name="resume"> |
email |
邮箱输入框 |
验证输入格式为邮箱（HTML5 新增） |
<input type="email" name="email" required> |
tel |
电话输入框 |
移动端唤起拨号键盘（HTML5 新增） |
<input type="tel" name="phone" placeholder="请输入手机号"> |
date |
日期选择框 |
弹出日期选择器（HTML5 新增） |
<input type="date" name="birthday"> |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>input控件实战</title>
<style>
body {
padding: 20px;
font-size: 16px;
line-height: 2;
}
.form-demo {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
}
.form-item {
margin: 20px 0;
}
</style>
</head>
<body>
<div class="form-demo">
<h2>input控件大全</h2>
<!-- 1. 文本框 + 密码框 -->
<div class="form-item">
<label for="uname">用户名：</label>
<input type="text" id="uname" name="username" placeholder="请输入用户名" maxlength="20" required>
</div>
<div class="form-item">
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password" placeholder="请输入6-16位密码" required>
</div>
<!-- 2. 单选框（性别） -->
<div class="form-item">
<span>性别：</span>
<input type="radio" id="male" name="sex" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="sex" value="female">
<label for="female">女</label>
</div>
<!-- 3. 复选框（爱好） -->
<div class="form-item">
<span>爱好：</span>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">阅读</label>
<input type="checkbox" id="hobby2" name="hobby" value="coding">
<label for="hobby2">编程</label>
<input type="checkbox" id="hobby3" name="hobby" value="travel">
<label for="hobby3">旅行</label>
<input type="checkbox" id="hobby4" name="hobby" value="sports">
<label for="hobby4">运动</label>
</div>
<!-- 4. HTML5新增控件 -->
<div class="form-item">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱" required>
</div>
<div class="form-item">
<label for="phone">手机号：</label>
<input type="tel" id="phone" name="phone" placeholder="请输入手机号">
</div>
<div class="form-item">
<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday">
</div>
<!-- 5. 文件上传 -->
<div class="form-item">
<label for="avatar">上传头像：</label>
<input type="file" id="avatar" name="avatar" accept="image/*"> <!-- 仅允许上传图片 -->
</div>
<!-- 6. 按钮 -->
<div class="form-item">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="点击提示" onclick="alert('表单填写完成！')">
</div>
</div>
</body>
</html>
运行效果如下：
（2）<label>标签：提升用户体验的 "关联神器"
**
核心用法：
- 方式 1：
<label>的for属性与控件的id属性值相同；
- 方式 2：将控件嵌套在
<label>内部（无需for和id）。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>label标签用法</title>
<style>
body {
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<h2>label标签关联示例</h2>
<!-- 方式1：for + id 关联 -->
<div style="margin: 20px 0;">
<label for="agree">我已阅读并同意用户协议</label>
<input type="checkbox" id="agree" name="agree">
</div>
<!-- 方式2：控件嵌套在label内部 -->
<div style="margin: 20px 0;">
<label>
<input type="radio" name="pay" value="wechat" checked> 微信支付
</label>
<label style="margin-left: 20px;">
<input type="radio" name="pay" value="alipay"> 支付宝支付
</label>
</div>
</body>
</html>
运行效果如下：
（3）<select>标签：下拉选择框
**
核心语法：
<select name="province">
<option value="">--请选择省份--</option> <!-- 默认提示选项 -->
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou" selected>广州</option> <!-- 默认选中 -->
</select>
运行效果如下：
关键属性：
- **
- **
- **
multiple：允许多选（添加在<select>中，按住 Ctrl 键选择）。
实战案例（出生日期选择）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>select下拉框实战</title>
<style>
body {
padding: 20px;
font-size: 16px;
}
.birth-select {
margin: 20px 0;
}
select {
padding: 5px;
font-size: 16px;
margin: 0 5px;
}
</style>
</head>
<body>
<h2>出生日期选择</h2>
<div class="birth-select">
<label>出生日期：</label>
<!-- 年份选择 -->
<select name="year">
<option value="">--请选择年份--</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
<!-- 月份选择 -->
<select name="month">
<option value="">--请选择月份--</option>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<!-- 省略4-11月 -->
<option value="12">12月</option>
</select>
<!-- 日期选择 -->
<select name="day">
<option value="">--请选择日期--</option>
<option value="1">1日</option>
<option value="2">2日</option>
<!-- 省略3-30日 -->
<option value="31">31日</option>
</select>
</div>
<!-- 多选示例 -->
<div>
<label>选择擅长的技术（按住Ctrl可多选）：</label>
<select name="skill" multiple size="4"> <!-- size：显示4个选项高度 -->
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="vue">Vue</option>
<option value="react">React</option>
<option value="node">Node.js</option>
</select>
</div>
</body>
</html>
运行效果：
（4）<textarea>标签：多行文本域
**
