java web基础
·
#java #javaweb #html #javascript #dom #xml #dom4j #css
文章目录
- B/S 软件开发架构简述
- 前端
- 后端
- 数据库
- 一、HTML
- 1.1 官方文档
- 1.2 网页的组成
- 二、HTML 介绍
- 2.1 HTML 运行方式
- 2.2 HTML 基本结构
- 2.2.2 注意事项和细节
- 三、html 的标签/元素-说明
- 3.1 html 标签注意事项和细节
- 3.2 font 字体标签
- 3.3 字符实体
- 3.3.1 字符实体一览表
- 3.4 标题标签
- 3.5 超链接标签
- 3.6 无序列表 ul/li
- 3.7 图像标签(img)
- 3.8 表格(table)标签
- 3.8.1 表格标签-跨行跨列表格代码
- ★3.9 form(表单)标签介绍
- 3.9.1 GET and POST请求的特点是：
- 3.9.2 input 标签/元素
- 3.9.3 select/option/textarea 标签
- 3.9.1 表单综合练习
- 3.9.5 表单格式化代码
- 3.9.6 表单提交注意事项
- 3.10 块级与内联标签 div、p/span
- 3.10.1 块级标签（`<div>`、`<p>`）
- 3.10.2 内联标签（`<span>`）
- 3.11HTML 课后实战
- 3.11.1 员工表格（含 CSS 样式）
- 3.11.2 课程表（跨行跨列）
- CSS
- 一、官方文档
- 1.1 为什么需要 CSS
- 二、CSS 快速入门
- 2.1 第一个 CSS 案例
- 2.1.1 传统 HTML 方式（无 CSS）
- 2.1.2 CSS 方式（内部样式表）
- 三、CSS 语法规则
- 3.1 语法结构
- 3.1.1 核心组成说明
- 3.2 语法注意事项
- 四、CSS 常用样式
- 4.1 字体样式（控制文本外观）
- 4.1.1 核心属性
- 4.1.2 示例代码
- 4.2 边框样式（控制元素边框）
- 4.2.1 核心属性
- 4.2.2 示例代码
- 4.3 尺寸样式（控制元素宽高）
- 4.3.1 核心属性
- 4.3.2 示例代码
- 4.4 背景样式（控制元素背景）
- 4.4.1 核心属性
- 4.4.2 示例代码
- 4.5 文本对齐与居中
- 4.5.1 核心属性
- 4.5.2 示例代码（元素居中 + 文本居中）
- 4.6 超链接样式（去除下划线）
- 4.6.1 示例代码
- 4.7 表格样式（细线表格）
- 4.7.1 示例代码
- 4.8 列表样式（去除默认修饰）
- 4.8.1 示例代码
- 五、CSS 三种使用方式
- 5.1 方式 1：行内样式（内联样式）
- 5.1.1 示例代码
- 5.1.2 优缺点
- 5.2 方式 2：内部样式表（嵌入样式）
- 5.2.1 示例代码
- 5.2.2 优缺点
- 5.3 方式 3：外部样式表（链接样式）
- 5.3.1 步骤 1：创建外部 CSS 文件（`test.css`）
- 5.3.2 步骤 2：在 HTML 中引入外部 CSS
- 5.3.3 优缺点
- 5.4 三种方式的优先级
- 六、CSS 选择器
- 6.1 元素选择器（标签选择器）
- 6.1.1 示例代码
- 6.2 ID 选择器
- 6.2.1 示例代码
- 6.2.2 注意事项
- 6.3 类选择器（Class 选择器）
- 6.3.1 示例代码
- 6.3.2 注意事项
- 6.4 组合选择器
- 6.4.1 示例代码
- 6.5 伪类选择器
- 6.5.1代码
- 6.5.2 注意事项
- 6.6 选择器优先级
- 6.6.1 示例代码（优先级验证）
- 6.6.2 优先级计算规则
- JavaScript
- 一、官方文档
- 二、核心作用
- 2.1 JS 核心特点
- 三、JavaScript 快速入门
- 3.1 JS 的两种使用方式
- 3.1.1 方式 1：在 HTML 中嵌入 `script` 标签写 JS 代码
- 3.1.2 方式 2：引入外部 JS 文件
- 3.2 两种方式注意事项
- 3.3 查看 JS 错误
- 四、JavaScript 核心语法
- 4.1 变量
- 4.1.1 变量定义与赋值
- 4.1.2 变量命名规则
- 4.2 数据类型
- 4.2.1 基本数据类型
- 4.2.2 特殊值说明
- 4.3 运算符
- 4.3.1 算术运算符
- 4.3.2 赋值运算符
- 4.3.3 关系运算符
- 4.3.4 逻辑运算符
- 4.3.5 条件运算符（三元运算符）
- 4.4 数组
- 4.4.1 数组定义（4 种方式）
- 4.4.2 数组遍历
- 4.5 函数
- 4.5.1 方式 1：用 `function` 关键字定义
- 4.5.2 方式 2：将函数赋值给变量
- 4.5.3 函数注意事项——“重载”与arguments
- 4.6 自定义对象
- 4.6.1 方式 1：用 `new Object()` 创建
- 4.6.2 方式 2：用 `{}` 字面量创建（推荐）
- 五、JavaScript 事件
- 5.1 事件核心概念
- 5.2 事件一览表
- 5.2.1 事件注册的两种方式
- 5.3 常用事件与示例
- 5.3.1 `onload` 页面加载完成事件
- 5.3.2 `onclick` 单击事件
- 5.3.3 `onblur` 失去焦点事件
- 5.3.4 `onchange` 内容改变事件
- 5.3.5 `onsubmit` 表单提交事件
- 六、DOM操作（文档对象模型）
- 6.1 官方文档
- 6.2 基本介绍
- 6.3 HTML DOM （文档对象模型）
- 6.4 DOM 核心概念
- 6.5 DOM 操作示例
- 6.5.1 通过 ID 获取元素并修改
- 6.5.2 应用实例 -复选框全选 / 全不选 / 反选
- 6.5.3 应用实例 -图片切换（动态修改 `src` 属性）
- 6.5.4 应用实例-动态创建元素（`createElement`）
- 6.6 HTML DOM 节点
- 6.6.1 节点属性和方法一览
- 6.6.2 节点常用方法
- 6.6.3 节点常用属性
- 6.6.3.1 应用实例_得到对应的节点
- 6.6.4 乌龟吃鸡游戏
- XML
- 一、官方文档
- 二、XML 的应用场景
- 三、XML 快速入门
- 3.1 需求实现：存储学生信息
- 3.1.1 步骤 1：创建 XML 文件（`students.xml`）
- 3.1.2 步骤 2：XML 文件规范验证
- 四、XML 语法详解
- 4.1 文档结构组成
- 4.2 转义字符
- 4.3 格式正规的 XML 文档（小结）
- 五、XML 解析技术
- 5.1 解析技术对比
- 六、DOM4J解析技术
- 6.1 参考文档
- 6.2 DOM4J 环境准备
- 6.3 DOM4J 核心 API
- 6.4 获得 Document 对象的方式有三种
- ★☆6.5 document 对象的底层结构——>dubug
- 6.6 DOM4J 应用实例（操作`students.xml`）
- 6.6.1 读取 XML（查询学生信息）
- 6.6.2 新增 XML 节点（添加学生）
- 6.6.3 修改 XML 节点（更新学生年龄）
- 6.6.4 删除 XML 节点（删除学生）
- 6.7 课后：XML 转 Java 对象
- 七、XML 注意事项
B/S 软件开发架构简述
![[Pasted image 20250926182155.png]]
- B/S框架，意思是前端(Browser 浏览器)和服务器端(Server)组成的系统的框架结构。
- B/S架构也可理解为web架构，包含前端、后端、数据库三大组成部分。
前端
- 前端开发技术工具包括三要素：HTML、CSS 和 JavaScript，还有很多高级的前端框架，如bootstrap、jquery，VUE 等。
后端
- 后端开发技术工具主要有：Net、JAVA、PHP, Go 等
数据库
- 主流的三种关系型数据库：Mysql、SQLserver、Oracle ，还有 Nosql 非关系型数据库：Redis、Mogodb 等。韩顺平 Java 工程师
一、HTML
1.1 官方文档
- 地址: https://www.w3school.com.cn/html/index.asp
1.2 网页的组成
8.png]]
二、HTML 介绍
- HTML（HyperText Mark-up Language）即超文本标签语言(可以展示的内容类型很多)
- HTML 文本是由 HTML 标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等
- HTML 的结构包括头部（Head）、主体（Body） 两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
2.1 HTML 运行方式
- 本地运行
![[Pasted image
.png]]浏览器使用情况分布:http://tongji.baidu.com/data/
- 远程访问
![[Pasted image
.png]]
2.2 HTML 基本结构
<!--__文档类型说明注释__-->
<!DOCTYPEhtml>
<!--__使用语言的地区__en__表示英国美国__en-US-->
<htmllang="en">
<head>
</head>
<body>
</body>
<html>
.png]]
2.2.2 注意事项和细节
- HTML 文件==不需要编译==，直接由浏览器进行解析执行
- 可以选择的浏览器，是你电脑安装有的浏览器, 如果没有安装这个浏览器，会报错
- 在线文档 : https://www.w3school.com.cn韩顺平
三、html 的标签/元素-说明
- HTML 标签用两个尖括号”<>”括起来
- HTML 标签一般是双标签，如
<b>和</b>前一个标签是起始标签, 后一个标签为结束标签 - 两个标签之间的文本是 html 元素的内容
- 某些标签称为"单标签",因为它只需单独使用就能完整地表达意思,如
<br/><hr/> - HTML 元素指的是从开始标签到结束标签的所有代码。
3.1 html 标签注意事项和细节
- 命名规范 xx.yy.html,xx-yy.html xx_yy.html 根据公司规范要求即可)
- 标签不能交叉嵌套
- 标签必须正确关闭
- 注释不能嵌套
- html 语法不严谨。有时候标签不闭合，属性值不带””也不报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签使用细节</title>
</head>
<body>
<!--标签不能交叉嵌套-->
<!--<div><span>tom</div></span> 错误用法-->
<div><span>tom</span></div>
<!--标签必须正确关闭-->
<span>jack</span>
<!--注释不能嵌套 -->
<!--html 语法不严谨。有时候标签不闭合，属性值不带””也不报错-->
<font color="red">张飞</font>
<font color=blue>关羽</font>
</body>
</html>
3.2 font 字体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font 标签</title>
</head>
<!-- 字体标签
font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
(1)color 属性修改颜色
(2)face 属性修改字体
(3)size 属性修改文本大小
-->
<body>
<font size="40px" face="微软雅黑" color="red">北京</font>
</body>
</html>
3.3 字符实体
- 在网页上显示一些特殊的符号，称为字符实体(也叫符号实体)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符实体</title>
</head>
</head>
<body>
<!-- 特殊字符 应用实例：
< : <
> : >
空格 :
-->
<!-- 把<hr>变成文本 显示在页面上-->
<hr/>
</body>
</html>
3.3.1 字符实体一览表
.png]]
.png]]
3.4 标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--
h1 - h6 都是标题标签 h1 : 最大 h6 : 最小
align: 属性是对齐属性
left: 左对齐(默认)
center :居中
right : 右对齐
-->
</body>
<h1>标签 1</h1>
<h2>标签 2</h2>
<h3 align="center">标签 3</h3>
<h4>标签 4</h4>
<h5>标签 5</h5>
<h6 align="right">标签 6</h6>
</body>
</html>
3.5 超链接标签
- 超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<!--
a 标签是 超链接
href 属性设置连接的地址韩顺平 Java 工程师
target 属性设置哪个目标进行跳转
_self : 表示当前页面(默认值)
_blank : 表示打开新页面来进行跳转
-->
<a href="http://www.sohu.com">搜狐</a><br/>
<a href="http://www.sohu.com" target="_blank">搜狐 2</a><br/>
<a href="mailto:tom@sohu.com">联系管理员</a>
</body>
</html>
3.6 无序列表 ul/li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ul li 标签</title>
</head>
<body>
<!--
ul : 表示无序列表
li : 列表项
type 属性：指定列表项前的符号
-->
<h1>五虎将</h1>
<ul type="circle">
<li>jack</li>
<li>tom</li>
<li>smith</li>
<li>mary</li>
<li>milan</li>
</ul>
</body>
</html>
3.7 图像标签(img)
- img 标签可以在 html 页面上显示图片
- 绝对路径: 正确格式是: `http://IP 地址:port/工程名/资源路径
- 错误格式是:
盘符:/目录/文件名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>韩顺平 Java 工程师
<body>
<!--
应用实例：使用 img 标签显示一张美女的照片。
img: 标签是图片标签,用来显示图片
src: 属性可以设置图片的路径
width: 属性设置图片的宽度
height: 属性设置图片的高度
border: 属性设置图片边框大小
alt: 属性设置当指定路径找不到图片时,用来代替显示的文本内容
在 web 中路径分为相对路径和绝对路径两种
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名
相对路径:
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
绝对路径: 正确格式是: http://IP 地址:port/工程名/资源路径
错误格式是: 盘符:/目录/文件名
-->
<!-- 如果只是指定 width 或者 height 浏览器会按比例显示，不会变形 -->
<img src="x.png" width="300" border="1" alt="美女找不到"/><hr/>
<img src="../1.png" width="300" border="1" alt="美女找不到"/><hr/>
<img src="../aaa/1.png" width="100" border="1" alt="美女找不到"/><hr/>
<!-- 如果同时指定 width height 自己要计算，否则图像会变形 -->
<img src="../aaa/1.png" width="200" height="80" alt="美女找不到"/><hr />
</body>
</html>
3.8 表格(table)标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!-- 说明：
table： 标签是表格标签
border： 设置表格标签
width： 设置表格宽度
height： 设置表格高度
align： 设置表格相对于页面的对齐方式
cellspacing： 设置单元格间距
tr ：是行标签
th ：是表头标签
td ：是单元格标签
align： 设置单元格文本对齐方式
b ：是加粗标签
px:表示像素
-->
<table width="500" border="6" align="center">
<h1 align="center">表格标签的使用</h1>
<tr>
<th>名字</th>
<th>住址</th>
<th>邮件</th>
</tr>
<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>
</body>
</html>
3.8.1 表格标签-跨行跨列表格代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格(跨行跨列)</title>
</head>
<body>
<!--
column 列
合并列 : colspan="列数"
合并行 : rowspan="行数"
cellspacing : 指定单元格间的空隙大小 :0 表示没有空隙
bordercolor: 指定表格边框的演示
border: 表格边框
width： 表格的宽度
思路:
1. 先把整个表格的完整的行和列，展示出来 5*3
2. 在使用合并的技术，来处理
3. 如果是 16 进制的颜色，前面#
-->
<table border="1" height="250" bordercolor="#E87EFA" cellspacing="0" width="500">
<tr>
<!--合并了 3 列-->
<td align="center" colspan="3">第 1 行第 1 列</td>
</tr>
<tr>
<!-- 合并行，跨行 row 行-->
<td rowspan="2">第 2 行第 1 列</td>
<td>第 2 行第 2 列</td>
<td>第 2 行第 3 列</td>
</tr>
<tr>
<td>第 3 行第 2 列</td>
<td>第 3 行第 3 列</td>
</tr>
<tr>
<!--合并行，跨行 row 行-->
<td rowspan="2">第 4 行第 1 列</td>
<td>第 4 行第 2 列</td>
<td>第 4 行第 3 列</td>
</tr>
<tr>
<td> 第 5 行 第 2 列 <img src="imgs/2.png" width="100"></td>
<td>第 5 行第 3 列</td>
</tr>
</table>
</body>
</html>
★3.9 form(表单)标签介绍
- url 表示定位一个 web 资源的路径,
- method 主要有两种
get ,post - 小技巧: 为了个汉字对齐，输入全角的空格即可
- method 不写默认是 get
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单登录</title>
</head>
<body>
<!--
1. form 表示表单
2. action: 提交到哪个页面
3. method： 提交方式 ,常用 get 和 post
4. input type=text 输入框
5. input type=password 密码框
6. input type=submit 提交按钮
7. input type=reset 重置按钮
8. input type=reset 重置按钮
-->
<h1>登录系统</h1>
<form action="ok.html" method="get">
用户名:<input type="text" name="username"><br/>
密 码:<input type="password" name="username"><br/>
<input type="submit" value=" 登 录 ">
<input type="reset" value="重新填写">
</form>
</body>
</html>
3.9.1 GET and POST请求的特点是：
- 浏览器地址栏中的地址是：
action 属性[+?+请求参数]- 请求参数的格式是：
name=value&name=value像http://localhost:63342/html/ok.htmlusername=jack&pwd1=111&pwd2=11&sport=lq&sport=sq&gender=- 不安全
- 它有==数据长度的限制==(不同的浏览器规定不一样，一般 2k)
- POST 请求的特点是：
- 浏览器地址栏中只有 action 属性值, 提交的数据是携带在 http 请求中, 不会展示在地址栏
- 相对于 GET 请求要安全
- 理论上没有数据长度的限制
3.9.2 input 标签/元素
.png]]
3.9.3 select/option/textarea 标签
.png]]
3.9.1 表单综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单综合案例</title>
</head>
<body>
<!--
form 标签就是表单
input type=text : 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组
checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域
当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项
selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
一定一定使用 form 标签将 input 元素包起来
一定一定要给 input 元素设置 name 属性，否则，数据提交不到服务器
注意：checkbox 是复选框，如果希望是同一组 保证 name 属性一致
注意：在 checkbox select radio 提交数据的时候是 value 属性的值
-->
<form>
用户注册信息<br/>
用户名称: <input type="text" name="username"><br/>
用户密码: <input type="password" name="pwd1"><br/>
确认密码: <input type="password" name="pwd2"><br/>
选择你喜欢的运动项目:
<input type="checkbox" name="sport" value="lq">篮球<br/>
<input type="checkbox" name="sport" value="zq" checked>足球<br/>
<input type="checkbox" name="sport" value="sq" checked>手球<br/>
请选择性别 :
<input type="radio" name="gender" value="male">男<br/>
<input type="radio" name="gender" value="female">女<br/>
请选择城市:
<select name="city">
<option>--选择--</option>
<option value="cd">成都</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select><br/>
自我介绍:
<textarea rows="6" cols="20"></textarea><br/>
选择你的文件(头像)<input type="file" name="myfile"><br/>
<input type="submit" value="提交"/> <input type="reset" value="重置"/>
</form>
</body>
</html>
3.9.5 表单格式化代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单格式化</title>
</head>
<body>
<form>
<h1 align="center">用户注册信息</h1>
<table align="center">
<tr>
<td>用户名称: </td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>用户密码: </td>
<td><input type="password" name="pwd1"></td>
</tr>
<tr>
<td>确认密码: </td>
<td><input type="password" name="pwd2"></td>
</tr>
<tr>
<td>选择你喜欢的运动项目:</td>
<td>
<input type="checkbox" name="sport" value="lq">篮球
<input type="checkbox" name="sport" value="zq" checked>足球
<input type="checkbox" name="sport" value="sq" checked>手球
</td>
</tr>
<tr>
<td>请选择性别:</td>
<td>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td>请选择城市:</td>
<td>
<select name="city">
<option>--选择--</option>
<option value="cd">成都</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍:</td>
<td><textarea rows="6" cols="20" name="intro"></textarea></td>
</tr>
<tr>
<td>选择你的头像:</td>
<td><input type="file" name="myfile"></td>
</tr>
<tr>
<td><input type="submit" value="提交"/></td>
<td><input type="reset" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>
3.9.6 表单提交注意事项
- action 属性设置提交的服务器地址/资源
- method 属性设置提交的方式 GET(默认值)或 POST
- 表单提交的时候，数据没有发送给服务器的三种情况：
- 表单某个==元素项(比如 text,password)没有 name 属性值==
- 单选、复选（下拉列表中的 option 标签）都需要==添加 value 属性==，以便发送给服务器
- 表单项不在提交的 form 标签中
3.10 块级与内联标签 div、p/span
3.10.1 块级标签（<div>、<p>）
<div>：分割文档为独立部分，内容==自动换行==（块级元素），不需要写
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div 标签</title>
</head>
<body>
hello,world <!-- 无换行 -->
<div style="color: blue"> <!-- 自动换行 -->
<h3>这是 div 内的标题</h3>
<a href="https://www.baidu.com">跳转百度</a>
</div>
</body>
</html>
<p>：定义段落，自动在前后添加空白（块级元素）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
hello,world
<p>段落1（自动添加空白）</p>
<p>段落2（自动添加空白）</p>
</body>
</html>
3.10.2 内联标签（<span>）
- 功能：无默认样式，不自动换行（内联元素），通常用于单独控制部分文本样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span 标签</title>
</head>
<body>
<!-- span 不换行，仅修改“10”的样式 -->
您的购物车有<span style="color: red; font-size: 40px">10</span>个商品
</body>
</html>
3.11HTML 课后实战
3.11.1 员工表格（含 CSS 样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工信息</title>
<!-- CSS 样式：表格边框、背景色、文本居中 -->
<style type="text/css">
table, tr, td {
border: 2px solid blue;
border-collapse: collapse; /* 合并边框 */
}
table {
background-color: #CCCCCC; /* 灰色背景 */
text-align: center; /* 文本居中 */
width: 800px; /* 表格宽度 */
}
</style>
</head>
<body>
<div align="center">
<h1>雇员薪资信息</h1>
<table>
<!-- 表头 -->
<tr>
<th>员工ID</th>
<th>姓名</th>
<th>部门</th>
<th>职位</th>
<th>薪资</th>
<th>入职日期</th>
</tr>
<!-- 数据行1 -->
<tr>
<td>1001</td>
<td>张三</td>
<td>技术部</td>
<td>Java工程师</td>
<td>15000</td>
<td>2023-01-10</td>
</tr>
<!-- 数据行2 -->
<tr>
<td>1002</td>
<td>李四</td>
<td>产品部</td>
<td>产品经理</td>
<td>18000</td>
<td>2023-02-15</td>
</tr>
<!-- 数据行3 -->
<tr>
<td>1003</td>
<td>王五</td>
<td>测试部</td>
<td>测试工程师</td>
<td>12000</td>
<td>2023-03-20</td>
</tr>
</table>
</div>
</body>
</html>
3.11.2 课程表（跨行跨列）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课表安排</title>
<style type="text/css">
table, tr, td {
border: 1px solid blue;
text-align: center; /* 文本居中 */
}
table {
border: 2px solid blue; /* 外框粗边框 */
width: 800px;
}
</style>
</head>
<body>
<div align="center">
<h1>课表安排（周一至周五）</h1>
<table>
<!-- 第1行：合并5列 -->
<tr>
<td>时间段</td>
<td colspan="5">周一至周五</td>
<td colspan="2">周末</td>
</tr>
<!-- 第2行：列标题 -->
<tr>
<td>节次</td>
<td>周一</td>
<td>周二</td>
<td>周三</td>
<td>周四</td>
<td>周五</td>
<td>周六</td>
<td>周日</td>
</tr>
<!-- 第3行：第1列合并4行（上午） -->
<tr>
<td rowspan="4">上午</td>
<td>JavaWeb</td>
<td>MySQL</td>
<td>JavaWeb</td>
<td>MySQL</td>
<td>JavaWeb</td>
<td>休息</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>JavaWeb</td>
<td>MySQL</td>
<td>JavaWeb</td>
<td>MySQL</td>
<td>JavaWeb</td>
<td>休息</td>
</tr>
<tr>
<td>Spring</td>
<td>SpringMVC</td>
<td>Spring</td>
<td>SpringMVC</td>
<td>Spring</td>
<td>休息</td>
</tr>
<tr>
<td>Spring</td>
<td>SpringMVC</td>
<td>Spring</td>
<td>SpringMVC</td>
<td>Spring</td>
<td>休息</td>
</tr>
<!-- 第7行：第1列合并2行（下午） -->
<tr>
<td rowspan="2">下午</td>
<td>MyBatis</td>
<td>SpringBoot</td>
<td>MyBatis</td>
<td>SpringBoot</td>
<td>MyBatis</td>
<td>休息</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>MyBatis</td>
<td>SpringBoot</td>
<td>MyBatis</td>
<td>SpringBoot</td>
<td>MyBatis</td>
<td>休息</td>
</tr>
</table>
</div>
</body>
</html>
CSS
一、官方文档
- 地址: https://www.w3school.com.cn/css/index.asp
1.1 为什么需要 CSS
- 在没有 CSS 之前，修改 HTML 元素样式需为每个标签单独定义样式属性（如
<div bgcolor="red" font-size="20px">），存在以下问题：
- 代码冗余：相同样式需重复编写，增加开发工作量；
- 可读性差：HTML 内容与样式混杂，难以快速定位结构；
- 维护成本高：修改样式需逐个修改标签，易遗漏。
- 使用 CSS 将 HTML 页面的 内容与样式分离提高 web 开发的工作效率(解耦
- CSS 通过 “选择器 + 样式声明” 的方式，可批量控制多个 HTML 元素的样式，从根本上解决上述问题。
二、CSS 快速入门
2.1 第一个 CSS 案例
需求：用 CSS 统一控制多个 <div> 元素的宽度、高度和背景色，对比传统 HTML 样式属性与 CSS 的差异。
2.1.1 传统 HTML 方式（无 CSS）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无 CSS 的样式控制</title>
</head>
<body>
<!-- 每个 div 需单独定义样式，代码冗余 -->
<div bgcolor="gold" width="200" height="100">hello, 北京</div>
<br>
<div bgcolor="gold" width="200" height="100">hello, 上海</div>
<br>
<div bgcolor="gold" width="200" height="100">hello, 天津</div>
</body>
</html>
2.1.2 CSS 方式（内部样式表）
/* 注释内容 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 快速入门</title>
<!-- 1. 在 head 中通过 <style> 标签定义 CSS 样式 -->
<style type="text/css">
/* CSS 注释：快捷键 Ctrl+/ */
/* 选择器：div 表示控制所有 <div> 标签 */
div {
/* 样式声明：属性名: 属性值; 多个声明用分号分隔，最后一条分号可省略（推荐保留） */
width: 200px; /* 宽度：200 像素 */
height: 100px; /* 高度：100 像素 */
background-color: gold; /* 背景色：金色 */
}
</style>
</head>
<body>
<!-- 2. HTML 标签无需单独定义样式，自动应用 CSS 规则 -->
<div>hello, 北京</div>
<br>
<div>hello, 上海</div>
<br>
<div>hello, 天津</div>
<br>
<div>hello, 深圳</div>
</body>
</html>
三、CSS 语法规则
3.1 语法结构
CSS 语法由 “选择器” 和 “声明块” 两部分组成，格式如下：
css
选择器 {
/*声明*/
属性名1: 属性值1; /* 声明1：控制元素的某个样式 */
属性名2: 属性值2; /* 声明2：多个声明用分号分隔 */
/* ... 更多声明 ... */
}
3.1.1 核心组成说明
| 组成部分 | 作用 | 示例 |
|---|---|---|
| 选择器 | 指定要控制的 HTML 元素（如 div 控制所有 ==**<div>，#id **==控制指定 ID 元素） | div、.class、#header |
| 声明块 | 包含一个或多个样式声明，用 {} 包裹 | { color: red; font-size: 16px; } |
| 样式声明 | 由 “属性名” 和 “属性值” 组成，用冒号 : 连接 | background-color: blue |
3.2 语法注意事项
- 注释规则：仅支持
/* 注释内容 */（单行 / 多行均可），不支持//（// 会被解析为样式的一部分，导致错误）。 - 分号要求：多个声明之间必须用分号
;分隔，最后一条声明的分号可省略（推荐保留，避免后续添加声明时遗漏）。 - 空格无关：选择器与
{之间、属性名与:之间可加空格，不影响解析（如div { width : 200px; }合法）。 - 大小写不敏感：CSS 属性名和值（除字符串外）不区分大小写（如
Color: Red与color: red效果一致），但推荐统一小写（符合开发规范）。
四、CSS 常用样式
4.1 字体样式（控制文本外观）
4.1.1 核心属性
| 属性名 | 作用 | 取值示例 |
|---|---|---|
color | 文本颜色 | red、#ff0000、rgb(255,0,0)，三种写法 |
font-size | 字体大小 | 16px（像素，推荐）、1.2em（相对单位） |
font-weight | 字体粗细 | normal（正常）、bold（加粗）、700（数值，700=bold） |
font-family | 字体类型 | 宋体、微软雅黑、Arial |
font-style | 字体风格 | normal（正常）、italic（斜体） |
4.1.2 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式示例</title>
<style type="text/css">
.title {
color: #ff7d44; /* 十六进制颜色（推荐，兼容性好） */
font-size: 24px; /* 标题字体大小 */
font-weight: bold; /* 加粗 */
font-family: "微软雅黑", Arial, sans-serif; /* 优先使用微软雅黑，无则用 Arial */
}
.content {
color: rgb(100, 100, 100); /* RGB 颜色（红、绿、蓝，0-255） */
font-size: 16px;
font-style: italic; /* 斜体 */
}
</style>
</head>
<body>
<h1 class="title">韩顺平教育</h1>
<p class="content">专注 Java 开发教学，让学习更高效！</p>
</body>
</html>
4.2 边框样式（控制元素边框）
4.2.1 核心属性
| 属性名 | 作用 | 取值示例 |
|---|---|---|
border | 简写属性，同时控制边框宽度、样式、颜色 | 1px solid red（宽度 1px，实线，红色） |
border-width | 边框宽度 | 1px、2px |
border-style | 边框样式 | solid（实线）、dashed（虚线）、dotted（点线） |
border-color | 边框颜色 | red、#00ff00 |
border-top | 单独控制上边框 | 2px dashed blue |
4.2.2 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框样式示例</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
/* 简写：边框宽度 1px，虚线，蓝色 */
border: 1px dashed blue;
/* 单独控制下边框：2px 实线，红色 */
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>
4.3 尺寸样式（控制元素宽高）
4.3.1 核心属性
| 属性名 | 作用 | 取值示例 |
|---|---|---|
width | 元素宽度 | 200px（固定像素）、50%（相对于父元素宽度的 50%） |
height | 元素高度 | 100px、30% |
4.3.2 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>尺寸样式示例</title>
<style type="text/css">
.box1 {
width: 200px; /* 固定宽度 200px */
height: 100px; /* 固定高度 100px */
background-color: gold;
border: 1px solid #000;
}
.box2 {
width: 50%; /* 宽度为父元素（body）的 50% */
height: 80px;
background-color: lightblue;
border: 1px solid #000;
margin-top: 10px; /* 与上一个元素的间距 */
}
</style>
</head>
<body>
<div class="box1">固定尺寸</div>
<div class="box2">相对尺寸（50% 宽度）</div>
</body>
</html>
4.4 背景样式（控制元素背景）
4.4.1 核心属性
| 属性名 | 作用 | 取值示例 |
|---|---|---|
background-color | 背景颜色 | gold、#ff7d44、rgb(255,215,0) |
background-image | 背景图片 | url("bg.jpg")（图片路径） |
background-repeat | 背景图片重复方式 | no-repeat（不重复）、repeat-x（水平重复） |
background-position | 背景图片位置 | center（居中）、left top（左上） |
4.4.2 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景样式示例</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
border: 1px solid #000;
/* 背景颜色（图片加载失败时显示） */
background-color: #f5f5f5;
/* 背景图片：url(图片路径) */
background-image: url("img/bg.jpg");
/* 背景图片不重复 */
background-repeat: no-repeat;
/* 背景图片居中显示 */
background-position: center;
}
</style>
</head>
<body>
<div>背景图片示例</div>
</body>
</html>
4.5 文本对齐与居中
4.5.1 核心属性
| 属性名 | 作用 | 取值示例 |
|---|---|---|
text-align | 文本在元素内的水平对齐方式 | left（左对齐）、center（居中）、right（右对齐） |
margin | 元素的外边距，用于控制元素在页面中的居中 | margin-left: auto; margin-right: auto（水平居中） |
4.5.2 示例代码（元素居中 + 文本居中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对齐与居中示例</title>
<style type="text/css">
.box {
width: 300px;
height: 150px;
background-color: aliceblue;
border: 1px solid blue;
/* 1. 元素水平居中：左右外边距设为 auto */
margin-left: auto;
margin-right: auto;
/* 2. 文本在元素内居中：text-align: center */
text-align: center;
/* 3. 文本垂直居中：通过 line-height 等于 height 实现（单行文本） */
line-height: 150px; /* 与 height 一致，文本垂直居中 */
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">元素居中 + 文本居中</div>
</body>
</html>
4.6 超链接样式（去除下划线）
超链接（<a>）默认带有下划线，可通过 text-decoration 属性去除。
4.6.1 示例代码
- 伪类选择器[[#6.5 伪类选择器]]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接样式示例</title>
<style type="text/css">
/* 控制所有 <a> 标签，去除下划线 */
a {
text-decoration: none; /* none：去除下划线；underline：添加下划线（默认） */
color: #0066cc; /* 超链接默认颜色（未访问） */
}
/* 鼠标悬浮时的样式（伪类选择器，后续讲解） */
a:hover {
color: #ff6600; /* 鼠标悬浮时颜色变为橙色 */
text-decoration: underline; /* 悬浮时显示下划线 */
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点击跳转到百度</a>
</body>
</html>
4.7 表格样式（细线表格）
表格默认边框较粗且有间距，通过 border-collapse 合并边框，实现 “细线表格” 效果。
4.7.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>细线表格示例</title>
<style type="text/css">
/* 组合选择器：同时控制 table、tr、td 元素 */
table, tr, td {
border: 1px solid black; /* 所有边框设为 1px 实线 */
border-collapse: collapse; /* 合并边框（关键：去除边框间距） */
text-align: center; /* 文本居中 */
}
table {
width: 300px; /* 表格宽度 */
margin: 0 auto; /* 表格水平居中 */
}
td {
padding: 5px; /* 单元格内边距（文本与边框的间距） */
}
</style>
</head>
<body>
<table>
<tr>
<td align="center" colspan="3">星期一菜谱</td>
</tr>
<tr>
<td rowspan="2">素菜</td>
<td>青草茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小葱豆腐</td>
<td>炒白菜</td>
</tr>
<tr>
<td rowspan="2">荤菜</td>
<td>油闷大虾</td>
<td>海参鱼翅</td>
</tr>
<tr>
<td>红烧肉</td>
<td>烤全羊</td>
</tr>
</table>
</body>
</html>
4.8 列表样式（去除默认修饰）
无序列表（<ul>）默认带有项目符号（圆点），可通过 list-style 去除。
4.8.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表去修饰示例</title>
<style type="text/css">
ul {
/* list-style: none 去除默认项目符号 */
list-style: none;
/* 去除默认内边距（部分浏览器会默认添加 padding-left） */
padding-left: 0;
}
li {
margin: 5px 0; /* 列表项之间的垂直间距 */
}
</style>
</head>
<body>
<ul>
<li>三国演义</li>
<li>红楼梦</li>
<li>西游记</li>
<li>水浒传</li>
</ul>
</body>
</html>
五、CSS 三种使用方式
CSS 有==三种==引入方式，分别适用于不同场景，核心区别在于 “样式的作用范围” 和 “代码复用性”。
5.1 方式 1：行内样式（内联样式）
- 直接==在 HTML 标签的
style属性中定义样式==，仅作用于当前标签，无复用性，不推荐大量使用。
5.1.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内样式示例</title>
</head>
<body>
<!-- style 属性中直接写 CSS 样式，用分号分隔 -->
<div style="width: 200px; height: 100px; background-color: gold; border: 1px solid black;">
行内样式（仅作用于当前 div）
</div>
<br>
<!-- 另一个 div 需重新定义样式，代码冗余 -->
<div style="width: 200px; height: 100px; background-color: gold; border: 1px solid black;">
行内样式（重复编写）
</div>
</body>
</html>
5.1.2 优缺点
- 优点：快速生效，无需额外文件；
- 缺点：样式与 HTML 耦合，代码冗余，维护困难；
- 适用场景：临时调试样式或单个元素的特殊样式。
5.2 方式 2：内部样式表（嵌入样式）
- 在 HTML 的
<head>标签内通过<style>标签定义 CSS，作用于当前 HTML 文件，支持复用（同一文件内的多个元素）。
5.2.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<!-- 内部样式表：作用于当前 HTML 文件 -->
<style type="text/css">
div {
width: 200px;
height: 100px;
background-color: gold;
border: 1px solid black;
margin: 10px 0;
}
span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div>内部样式表（复用 div 样式）</div>
<div>内部样式表（无需重复编写）</div>
<span>内部样式表控制的 span 标签</span>
</body>
</html>
5.2.2 优缺点
- 优点：样式与 HTML 分离（同一文件内），支持复用，维护方便；
- 缺点：样式仅作用于当前文件，无法跨页面复用；
- 适用场景：单个 HTML 文件的样式定义（如简单页面、组件 demo）。
5.3 方式 3：外部样式表（链接样式）
将 CSS 代码单独编写在 .css 文件中，通过 <link> 标签引入 HTML，支持跨页面复用，是企业开发的首选方式。
5.3.1 步骤 1：创建外部 CSS 文件（test.css）
/* test.css：外部 CSS 文件，可被多个 HTML 引用 */
div {
width: 200px;
height: 100px;
background-color: beige; /* 米色背景 */
border: 1px solid #666;
margin: 10px 0;
}
span {
border: 3px solid red; /* span 标签边框 */
padding: 2px 5px; /* 内边距 */
}
5.3.2 步骤 2：在 HTML 中引入外部 CSS
rel（relationship 的缩写）用于定义当前文档与被链接资源之间的关系类型rel="stylesheet"用于告诉浏览器，当前链接的资源是一个样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<!-- link 标签：引入外部 CSS 文件 -->
<link rel="stylesheet" href="test.css">
<!-- href：CSS 文件路径（相对路径/绝对路径均可） -->
</head>
<body>
<div>外部 CSS 控制的 div</div>
<div>外部 CSS 复用样式</div>
<span>外部 CSS 控制的 span</span>
</body>
</html>
5.3.3 优缺点
- 优点：样式与 HTML 完全分离，支持多页面复用，维护效率高（修改 CSS 文件，所有引用页面同步更新）；
- 缺点：需额外加载 CSS 文件（可通过浏览器缓存优化）；
- 适用场景：多页面的 Web 项目（如网站、管理系统）。
5.4 三种方式的优先级
当同一元素被多种 CSS 方式控制时，优先级规则为：行内样式 > 内部样式表 / 外部样式表 > 浏览器默认样式
- 内部样式表与外部样式表优先级相同，若选择器相同，后定义的样式会覆盖先定义的样式；
- 若选择器不同，遵循 “选择器优先级” 规则[[#6.5 选择器优先级]]]。
六、CSS 选择器
选择器是 CSS 的核心，用于精准定位需要控制的 HTML 元素，不同选择器对应不同的匹配规则和优先级。
6.1 元素选择器（标签选择器）
匹配 HTML 中所有指定标签名的元素，如 div 匹配所有 <div>，p 匹配所有 <p>。
6.1.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器示例</title>
<style type="text/css">
/* 元素选择器：匹配所有 <h1> 标签 */
h1 {
color: gold;
text-align: center;
}
/* 元素选择器：匹配所有 <p> 标签 */
p {
color: #666;
font-size: 14px;
line-height: 1.5; /* 行高：1.5 倍字体大小，提升可读性 */
}
</style>
</head>
<body>
<h1>tt</h1>
<p>专注 Java 开发教学，覆盖 Java 基础、JavaWeb、框架等全体系课程。</p>
<p>让每个学员都能掌握企业级开发技能，实现职业突破。</p>
</body>
</html>
6.2 ID 选择器
匹配 HTML 中 id 属性值为指定值的单个元素（id 全局唯一，不能重复）
语法：#id值。
6.2.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID 选择器示例</title>
<style type="text/css">
/* ID 选择器：匹配 id="title" 的元素（唯一） */
#title {
color: gold;
text-align: center;
}
/* ID 选择器：匹配 id="content" 的元素（唯一） */
#content {
width: 500px;
margin: 0 auto;
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #eee;
}
</style>
</head>
<body>
<h1 id="title">tt</h1>
<div id="content">
专注 Java 开发教学，让学习更高效！
</div>
</body>
</html>
6.2.2 注意事项
id值必须全局唯一，同一 HTML 中不能有两个相同id的元素；id命名规则：不能以数字开头，可包含字母、数字、下划线、短横线（如#user-name、#user123）。
6.3 类选择器（Class 选择器）
匹配 HTML 中 class 属性值为指定值的多个元素（class 可重复，支持多个元素复用）
语法：.class值。
6.3.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器示例</title>
<style type="text/css">
/* 类选择器：匹配所有 class="highlight" 的元素 */
.highlight {
color: red;
font-weight: bold;
}
/* 类选择器：匹配所有 class="box" 的元素 */
.box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin: 10px;
display: inline-block; /* 横向排列 */
}
</style>
</head>
<body>
<p>这是 <span class="highlight">重点内容</span>，需要突出显示。</p>
<p>这是另一段 <span class="highlight">重点内容</span>。</p>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
</body>
</html>
6.3.2 注意事项
class值可重复，多个元素可使用同一class；- 一个元素可同时拥有多个
class（用空格分隔，如<div class="box highlight">），同时应用多个类的样式； class命名规则与id一致，推荐语义化命名（如highlight、box、nav）。
6.4 组合选择器
将多个选择器组合，共享同一组样式声明，减少代码冗余
语法：选择器1, 选择器2, 选择器3 { ... }。
6.4.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器示例</title>
<style type="text/css">
/* 组合选择器：同时控制 .box 类、#title ID、p 元素 */
.box, #title, p {
border: 2px solid red;
padding: 10px;
margin: 5px 0;
}
#title {
color: red;
text-align: center;
}
.box {
background-color: #f9f9f9;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1 id="title">组合选择器示例</h1>
<div class="box">类选择器元素</div>
<p>元素选择器元素</p>
</body>
</html>
6.5 伪类选择器
伪类选择器用于选择元素的特定状态或位置，不直接匹配元素本身，而是==基于元素的动态状态、位置关系或文档结构==来筛选元素。伪类以 : 开头。
| 类别 | 伪类选择器 | 作用说明 | 代码示例 |
|---|---|---|---|
| 动态状态伪类 | :hover | 鼠标悬停在元素上时应用样式 | a:hover { color: #ff4500; text-decoration: underline; } |
:active | 元素被激活（如鼠标点击、触摸按压时）应用样式 | button:active { background: #45a049; transform: translateY(2px); } | |
:focus | 元素获得焦点（如输入框被选中、键盘 Tab 切换选中）时应用样式 | input:focus { border: 2px solid #2196F3; outline: none; } | |
:link | 匹配未访问过的链接元素（仅用于 <a> 标签） | a:link { color: #2196F3; text-decoration: none; } | |
:visited | 匹配已访问过的链接元素（仅用于 <a> 标签，受隐私限制，样式支持有限） | a:visited { color: #9C27B0; } | |
| 结构伪类 | :first-child | 匹配父元素的第一个子元素（需确保该元素是父元素的首个子节点） | ul li:first-child { font-weight: bold; color: #333; } |
:last-child | 匹配父元素的最后一个子元素 | ul li:last-child { border-bottom: 1px solid #eee; } | |
:nth-child(n) | 匹配父元素的第 n 个子元素（n 可填数字、odd/even 或公式如 2n+1） | table tr:nth-child(even) { background: #f8f9fa; } | |
:first-of-type | 匹配父元素中同类型元素的第一个（不考虑其他类型子元素） | article p:first-of-type { font-size: 1.1em; } | |
:last-of-type | 匹配父元素中同类型元素的最后一个 | article p:last-of-type { margin-bottom: 24px; } | |
:only-child | 匹配父元素中唯一的子元素（父元素仅包含该一个子节点） | div p:only-child { color: #27ae60; font-style: italic; } | |
| 表单相关伪类 | :checked | 匹配被选中的表单元素（如单选框 radio、复选框 checkbox） | input:checked + label { color: #2196F3; font-weight: bold; } |
:disabled | 匹配处于禁用状态的表单元素（disabled 属性生效） | input:disabled { background: #e9ecef; cursor: not-allowed; } | |
:enabled | 匹配处于启用状态的表单元素（默认状态，无 disabled 属性） | button:enabled { background: #007bff; cursor: pointer; } | |
:required | 匹配设置了 required 属性的表单元素（必填项） | input:required { border-left: 3px solid #dc3545; } | |
:optional | 匹配未设置 required 属性的表单元素（可选项） | input:optional { border-left: 3px solid #6c757d; } | |
| 其他常用伪类 | :empty | 匹配没有子元素的元素（包括无文本内容，仅空白符也不匹配） | div:empty { height: 100px; background: #f8f9fa; border: 1px dashed #dee2e6; } |
:not(selector) | 否定伪类，匹配不满足括号内选择器的元素 | p:not(.highlight) { color: #6c757d; } | |
:root | 匹配文档的根元素（HTML 中即 <html> 标签），常用于定义全局 CSS 变量 | :root { --primary: #007bff; } body { color: var(--primary); } |
6.5.1代码
/* 定义全局变量 */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size-base: 16px;
}
/* 使用变量 */
body {
color: var(--secondary-color);
font-size: var(--font-size-base);
}
.button-primary {
background-color:
var(--primary-color); }
伪类可以与其他选择器组合使用
/* 列表中第一个项的 hover 状态 */
ul li:first-child:hover {
background-color: #e3f2fd;
}
/* 已访问链接的 hover 状态 */
a:visited:hover {
color: #7b1fa2; text-decoration: underline;
}
6.5.2 注意事项
- 伪类顺序很重要，尤其是链接相关伪类，建议顺序：
:link→:visited→:hover→:active - 部分伪类有兼容性限制，使用前可查询 Can I use 网站确认
- 伪类可以链式使用，但要注意浏览器支持情况
6.6 选择器优先级
当多个选择器同时控制同一元素时，优先级规则决定最终生效的样式：行内样式（style 属性） > ID 选择器（#id） > 类选择器（.class）/伪类选择器 > 元素选择器（标签）
6.6.1 示例代码（优先级验证）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器优先级示例</title>
<style type="text/css">
/* 元素选择器：优先级 1 */
div {
color: blue;
font-size: 16px;
}
/* 类选择器：优先级 10 */
.text {
color: green;
}
/* ID 选择器：优先级 100 */
#content {
color: red;
}
</style>
</head>
<body>
<!-- 行内样式：优先级 1000，最终生效 -->
<div id="content" class="text" style="color: purple; font-size: 20px;">
优先级：行内样式 > ID 选择器 > 类选择器 > 元素选择器
</div>
</body>
</html>
6.6.2 优先级计算规则
- 优先级用 “权重值” 表示：元素选择器（1）、类选择器（10）、ID 选择器（100）、行内样式（1000）；
- 多个选择器组合时，权重值相加（如
div.text权重为 1+10=11）； - 权重值高的样式覆盖权重值低的样式；若权重值相同，后定义的样式覆盖先定义的样式。
JavaScript
一、官方文档
- 地址: https://www.w3school.com.cn/js/index.asp
- 离线文档:
![[W3School离线手册(2017.03.11版).chm]]
二、核心作用
- JavaScript（简称 JS）是浏览器端脚本语言，用于实现网页动态交互，核心能力包括：
- 改变 HTML 内容与属性（如动态修改文本、图片路径）；
- 控制 HTML 样式（CSS）；
- 实现表单数据验证（如判断用户名是否为空）；
- 响应浏览器事件（如点击、鼠标悬浮）。
2.1 JS 核心特点
- 解释型执行：无需编译，浏览器逐行解析执行，与 C/C++ 等编译型语言区别显著。
- 基于对象：可创建自定义对象，也可使用浏览器内置对象（如
document、window）。 - 弱类型：变量数据类型无需声明，运行中可动态改变（如
var a = 10; a = "hello";合法）。 - 跨平台：只要浏览器支持 JS 解析（如 Chrome、Firefox），即可运行，与操作系统无关。
三、JavaScript 快速入门
3.1 JS 的两种使用方式
3.1.1 方式 1：在 HTML 中嵌入 script 标签写 JS 代码
script标签可放在<head>或<body>中，执行顺序与标签位置一致（推荐放<head>，通过window.onload确保 DOM 加载完成后执行）。type="text/javascript"可以不写，但是建议写上
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌入 script 标签</title>
<script type="text/javascript">
// 1. 放在 head 中的 JS 代码
// 等待页面完全加载后执行（避免操作未渲染的 DOM）
window.onload = function () {
// 弹出警告框
alert("head 中的 JS 执行了");
};
</script>
</head>
<body>
<h1>JS 入门示例</h1>
<script type="text/javascript">
// 2. 放在 body 中的 JS 代码（页面渲染到此处时执行）
console.log("body 中的 JS 执行了"); // 控制台输出（F12 打开控制台查看）
</script>
</body>
</html>
3.1.2 方式 2：引入外部 JS 文件
- 将 JS 代码单独写在
.js文件中，通过script标签的src属性引入，便于代码复用与维护。
步骤 1：创建外部 JS 文件（test.js）
// test.js 内容
alert("我是外部 JS 文件中的代码");
console.log("外部 JS 加载成功");
步骤 2：在 HTML 中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入外部 JS 文件</title>
<!-- 引入外部 JS 文件，src 为文件路径（相对/绝对路径均可） -->
<script type="text/javascript" src="./test.js"></script>
<!-- 注意：引入外部 JS 的 script 标签内不能再写 JS 代码，需单独写新标签 -->
<script type="text/javascript">
console.log("引入外部 JS 后，继续执行内部代码");
</script>
</head>
<body>
</body>
</html>
3.2 两种方式注意事项
- 两种方式不能混用：不会报错，但是==只有前面引入的 js 生效==
- 引入外部 JS 的
script标签内写代码会失效，需单独创建新script标签。 - 路径问题：
src路径需正确（相对路径：./表示当前目录，../表示上一级目录；绝对路径：http://xxx.com/test.js）。
3.3 查看 JS 错误
调试 JS 时，需通过浏览器控制台查看错误信息：
- Chrome 浏览器：F12/
shift+ctrl+i→ 切换到「Console」面板。 - Firefox 浏览器：F12/
shift+ctrl+i→ 切换到「控制台」面板。 - 常见错误：语法错误（如少写分号）、引用错误（如变量未定义）、类型错误（如调用非函数对象）。
四、JavaScript 核心语法
4.1 变量
4.1.1 变量定义与赋值
- 用 ==
var关键字==定义变量（ES6 新增let/const，文档中以var为主），无需指定数据类型。 - 变量未赋值时，默认值为
undefined；未定义直接使用会报错（ReferenceError）。
示例代码： - 省略 var 定义变量（不推荐，会成为全局变量）
<script type="text/javascript">
// 1. 定义变量并赋值
var name = "韩顺平"; // 字符串
var age = 20; // 数字
var isStudent = true; // 布尔值
// 2. 定义变量不赋值（默认 undefined）
var address;
console.log("address = " + address); // 输出：address = undefined
// 3. 弱类型特性：变量类型可动态改变
var age = 20;
age = "21"; // 数字 → 字符串
console.log("age 类型：" + typeof age); // 输出：string（typeof 用于判断变量类型）
// 4. 省略 var 定义变量（不推荐，会成为全局变量）
job = "Java 工程师";
console.log("job = " + job);
</script>
4.1.2 变量命名规则
- 由字母、数字、下划线（
_）、美元符号（$）组成，不能以数字开头。 - 区分大小写（
name与Name是不同变量）。 - 不能使用 JS 关键字（如
var、function、if）。 - 推荐命名风格：小驼峰式（如
userName）。
4.2 数据类型
JS 有 5 种基本数据类型和 1 种特殊类型，通过 typeof 函数可判断变量类型。
4.2.1 基本数据类型
| 数据类型 | 说明 | 示例 |
|---|---|---|
number | 数字（整数、小数、NaN） | var a = 10;var b = 3.14; |
string | 字符串（单引号 / 双引号包裹） | var s = "hello";var s2 = 'JS'; |
boolean | 布尔值（true/false） | var flag = true; |
undefined | 变量未赋值或未定义 | var x;console.log(x); |
null | 空值（表示变量指向空对象） | var obj = null; |
4.2.2 特殊值说明
- NaN：
Not a Number，非数字
10 * "abc"结果为NaN）
typeof NaN结果为number。
- null vs undefined：
null表示 “空对象”，undefined表示 “未定义”；
null == undefined为true（值相等）
null === undefined为false（类型不同）。
- String 字符串 可以双引号括起来，也可以单引号括起来
示例代码：
<script type="text/javascript">
// 1. NaN 示例
var result = 10 * "abc";
console.log("result = " + result); // 输出：NaN
console.log("result 类型：" + typeof result); // 输出：number
// 2. null 示例
var obj = null;
console.log("obj = " + obj); // 输出：null
console.log("obj == undefined：" + (obj == undefined)); // 输出：true
console.log("obj === undefined：" + (obj === undefined)); // 输出：false
</script>
4.3 运算符
4.3.1 算术运算符
.png]]
包括 +、-、*、/、%（取余）、++（自增）、--（自减），注意：
+可用于字符串拼接（如"age: " + 20结果为"age: 20"）。
4.3.2 赋值运算符
.png]]
包括 =、+=、-=、*=、/=、%=，用于简化赋值操作。
示例代码：
4.3.3 关系运算符
.png]]
用于比较两个值，返回布尔值（true/false），核心注意 == 与 === 的区别：
==：仅比较值是否相等（会自动类型转换，如10 == "10"为true）。- =
====：严格比较（==值和类型==都相等，如10 === "10"为false）。
示例代码：
<script type="text/javascript">
var num1 = 10;
var num2 = "10";
console.log(num1 == num2); // true（值相等，类型自动转换）
console.log(num1 === num2); // false（类型不同：number vs string）
console.log(num1 != num2); // false（值相等）
console.log(num1 !== num2); // true（类型不同）
console.log(5 > 3); // true
console.log(5 >= 5); // true
</script>
4.3.4 逻辑运算符
![[Pasted image 20251001101423.png]]
- 包括
&&（与）、||（或）、!（非） - 遵循 “短路逻辑”，且==所有变量均可视为布尔值==（
0、null、undefined、""、NaN视为false，其余视为true）。
示例代码：
<script type="text/javascript">
// 1. 逻辑与（&&）：全为 true 才返回 true，短路特性（前假后不执行）
var a = 0, b = 5;
var res1 = a && b; // a 为 false，短路，res1 = 0（返回第一个假值）
console.log("res1 = " + res1); // 0
// 2. 逻辑或（||）：有一个 true 就返回 true，短路特性（前真后不执行）
var res2 = a || b; // a 为 false，执行后一个，res2 = 5（返回第一个真值）
console.log("res2 = " + res2); // 5
// 3. 逻辑非（!）：取反
var flag = true;
console.log("!flag = " + !flag); // false
console.log("!!a = " + !!a); // false（双重非：将变量转为布尔值）
</script>
4.3.5 条件运算符（三元运算符）
语法：条件 ? 表达式1 : 表达式2，条件为 true 执行表达式 1，否则执行表达式 2。
示例代码：
<script type="text/javascript">
var score = 85;
var result = score >= 60 ? "及格" : "不及格";
console.log("成绩结果：" + result); // 及格
// 嵌套使用
var level = score >= 90 ? "优秀" : (score >= 70 ? "良好" : "及格");
console.log("成绩等级：" + level); // 良好
</script>
4.4 数组
JS 数组可==存储任意类型数据==，长度动态变化，无需指定大小。
4.4.1 数组定义（4 种方式）
示例代码：
<script type="text/javascript">
// 方式1：直接初始化（最常用）
var cars1 = ["Audi", "BMW", "Volvo"];
console.log("cars1[1] = " + cars1[1]); // BMW（索引从 0 开始）
// 方式2：先定义空数组，再赋值
var cars2 = [];
cars2[0] = "奥迪";
cars2[1] = "宝马";
cars2[2] = "奔驰";
console.log("cars2 长度：" + cars2.length); // 3
// 方式3：用 new Array() 初始化（参数为元素）
var cars3 = new Array("Audi", "BMW", "Volvo");
console.log("cars3[0] = " + cars3[0]); // Audi
// 方式4：用 new Array() 定义空数组，再赋值
var cars4 = new Array();
cars4[0] = "法拉利";
cars4[8] = "红旗"; // 跳过索引 1-7，未赋值的元素为 undefined
console.log("cars4[3] = " + cars4[3]); // undefined
console.log("cars4 长度：" + cars4.length); // 9（长度为最大索引+1）
</script>
4.4.2 数组遍历
通过 for 循环遍历数组元素，利用 length 属性获取数组长度。
示例代码：
<script type="text/javascript">
var arr = ["苹果", "香蕉", "橘子", 100, true]; // 混合类型数组
// 遍历数组
for (var i = 0; i < arr.length; i++) {
console.log("arr[" + i + "] = " + arr[i] + "，类型：" + typeof arr[i]);
}
/* 输出：
arr[0] = 苹果，类型：string
arr[1] = 香蕉，类型：string
arr[2] = 橘子，类型：string
arr[3] = 100，类型：number
arr[4] = true，类型：boolean
*/
</script>
4.5 函数
- 函数是可重复执行的代码块，用于封装逻辑，JS 函数定义有 2 种方式。
- 如果要执行函数，有两种方式 1.主动调用 hi(); 2. 通过事件去触发该函数
4.5.1 方式 1：用 function 关键字定义
语法：
function 函数名(参数1, 参数2, ...) {
// 函数体
return 返回值; // 可选，无返回值则默认返回 undefined
}
示例代码：
- 得调用才能启动函数
- 形参不需要指定类型, 数据类型是由实参决定
<script type="text/javascript">
// 1. 无参数、无返回值函数
function sayHi() {
alert("Hi，韩顺平教育");
}
sayHi(); // 调用函数
// 2. 有参数、无返回值函数（参数无需指定类型）
function sayHello(name) {
console.log("Hello，" + name);
}
sayHello("张三"); // Hello，张三
sayHello(); // Hello，undefined（参数未传时默认 undefined）
// 3. 有参数、有返回值函数
function add(n1, n2) {
return n1 + n2; // 返回两数之和
}
var sum = add(10, 20);
console.log("10 + 20 = " + sum); // 30
// 4. 函数作为参数传递（JS 函数是一等公民）！！！！！！！！！！！！！！！！！！！
function calculate(n1, n2, func) {
return func(n1, n2);
}
var result = calculate(5, 3, add); // 调用 add 函数
console.log("5 + 3 = " + result); // 8
</script>
4.5.2 方式 2：将函数赋值给变量
语法：var 变量名 = function(参数) { 函数体 };，本质是匿名函数赋值给变量。
示例代码：
<script type="text/javascript">
// 1. 定义匿名函数并赋值给变量
var f1 = function(n1, n2) {
return n1 * n2;
};
var product = f1(4, 5);
console.log("4 * 5 = " + product); // 20
// 2. 变量可指向其他函数
//套娃，就是f2指向function
var f2 = multiply; // operation 指向 multiply 函数
console.log("3 * 6 = " + f2(3, 6)); // 18
// 3. 立即执行函数（定义后立即调用）
(function(a, b) {
console.log("a + b = " + (a + b));
})(2, 3); // 输出：5
</script>
4.5.3 函数注意事项——“重载”与arguments
- 重载特性：JS 无真正重载，同名函数会覆盖前一个（如定义
f1()后再定义f1(name)，调用f1()会执行后者，name为undefined）。 - 隐形参数
arguments：函数内部可通过arguments获取所有实参（类似数组，无forEach等方法），适用于参数个数不确定的场景。 - 隐形参数特别像 java 的可变参数一样。 public void fun( int … args )，跟 java 的可变参数一样。操作类似数组
示例代码（arguments 使用）：
- 如果形参个数大于了实参个数，则该形参的值为 undefined
- 在传入实参的时候，仍然按照顺序匹配，如果没有匹配上，也无所谓，仍然会把所有的实参赋给 arguments
<script type="text/javascript">
// 计算任意个数的和
function sumAll() {
var total = 0;
// arguments 遍历所有实参
for (var i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log("1+2+3 = " + sumAll(1, 2, 3)); // 6
console.log("4+5 = " + sumAll(4, 5)); // 9
</script>
4.6 自定义对象
JS 可通过 2 种方式创建自定义对象，用于封装相关属性与方法。
4.6.1 方式 1：用 new Object() 创建
var 对象名 = new Object(); // 对象实例（空对象）
对象名.属性名 = 值; // 定义一个属性
对象名.函数名 = function(){} // 定义一个函数
对象名.属性
对象名.函数名();
示例代码：
- 如果没有定义属性，直接使用，就会出现变量提升， 显示
undefined this指向当前对象
<script type="text/javascript">
// 1. 创建空对象
var person = new Object();
// 2. 添加属性
person.name = "张三";
person.age = 25;
person.gender = "男";
// 3. 添加方法
person.sayInfo = function() {
// this 指向当前对象
console.log("姓名：" + this.name + "，年龄：" + this.age);
};
// 4. 访问属性与方法
console.log("person 姓名：" + person.name); // 张三
person.sayInfo(); // 姓名：张三，年龄：25
// 5. 访问未定义的属性（返回 undefined）
console.log("person 地址：" + person.address); // undefined
</script>
4.6.2 方式 2：用 {} 字面量创建（推荐）
语法更简洁，直接在 {} 中定义属性与方法，属性间用逗号分隔。
//定义
var 对象名 = {
属性名：值, // 定义属性
属性名：值, // 定义属性 , 注意有,号
函数名：function(){} // 定义函数
};
//访问
对象名.属性
对象名.函数名();
示例代码：
<script type="text/javascript">
var student = {
// 属性：key: value 格式
name: "李四",
age: 20,
score: 90, //逗号分隔
// 方法
getGrade: function() {
if (this.score >= 90) {
return "优秀";
} else if (this.score >= 80) {
return "良好";
} else {
return "及格";
}
}, //逗号分隔!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// 方法简写（ES6 语法，文档中兼容写法）
showInfo: function() {
console.log("姓名：" + this.name + "，等级：" + this.getGrade());
}
};
// 外部访问
console.log("李四等级：" + student.getGrade()); // 优秀
student.showInfo(); // 姓名：李四，等级：优秀
</script>
五、JavaScript 事件
- 事件是浏览器与用户的交互响应（如点击、输入），需通过 “事件注册” 绑定函数，分为==静态注册与动态注册==。
- 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
5.1 事件核心概念
- 事件源：触发事件的元素（如按钮、输入框）。
- 事件类型：事件的种类（如
onclick点击、onblur失去焦点）。 - 事件处理函数：事件触发后执行的 JS 函数。
- 事件注册（绑定）：将事件类型与处理函数关联到事件源的过程。
5.2 事件一览表
JavaScript 事件一览表
.png]]
.png]]
5.2.1 事件注册的两种方式
- 静态注册：直接在HTML 标签中通过事件属性绑定函数（如
onclick="func()"）。 - 动态注册：通过==JS 代码获取 DOM 对象，再绑定事件==（如
btn.onclick = function() {}），推荐使用（代码与 HTML 分离）。
5.3 常用事件与示例
5.3.1 onload 页面加载完成事件
- 页面（DOM、图片等资源）完全加载后触发，常用于确保 JS 操作 DOM 时元素已存在。
- 动态注册为什么要引用在window.onload里面：要事件与函数绑定；
- 什么时机：在页面加载完毕后；
示例代码（动态注册）： -
- 在 js 中，将页面窗口 映射成 window dom 对象
-
- window 对象有很多的函数和属性，可以使用
-
- window.onload 表示页面被加载完毕
-
- 后面的 function (){} 表示==加载完毕后==，要执行的函数/代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 事件</title>
<script type="text/javascript">
// 动态注册 onload 事件（页面加载完成后执行）
window.onload = function() {
alert("页面加载完成！");
// 此处可安全操作 DOM
var h1 = document.getElementById("title");
//innerText 输出id=title的内容
console.log("标题文本：" + h1.innerText); // 输出：JS 事件示例
};
</script>
</head>
<body>
<h1 id="title">JS 事件示例</h1>
</body>
</html>
5.3.2 onclick 单击事件
鼠标点击元素时触发，常用于按钮、链接等元素。
示例代码（静态 + 动态注册）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick 事件</title>
<script type="text/javascript">
// 1. 静态注册所需函数
function sayOK() {
alert("静态注册：点击了 sayOK 按钮");
}
// 2. 动态注册（页面加载完成后绑定）
window.onload = function() {
// 获取按钮 DOM 对象
var btnHi = document.getElementById("btnHi");
// 绑定 onclick 事件
btnHi.onclick = function() {
alert("动态注册：点击了 sayHi 按钮");
};
};
</script>
</head>
<body>
<!-- 静态注册 onclick 事件 -->！！！！！！！！！！！！
<button onclick="sayOK()">sayOK 按钮</button>
<!-- 动态注册 onclick 事件（通过 id 定位） -->
<button id="btnHi">sayHi 按钮</button>
</body>
</html>
5.3.3 onblur 失去焦点事件
元素失去焦点时触发（如输入框输入完成后点击其他区域），常用于表单验证。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblur 事件</title>
<script type="text/javascript">
// 1. 静态注册：输入框失去焦点后转为大写
function toUpperCase() {
var input = document.getElementById("fname1");
input.value = input.value.toUpperCase(); // 转为大写
}
// 2. 动态注册
window.onload = function() {
var input2 = document.getElementById("fname2");
input2.onblur = function() {
input2.value = input2.value.toUpperCase();
};
};
</script>
</head>
<body>
输入英文（静态注册）：<input type="text" id="fname1" onblur="toUpperCase()"><br>
输入英文（动态注册）：<input type="text" id="fname2"><br>
</body>
</html>
5.3.4 onchange 内容改变事件
元素内容改变且失去焦点时触发（如下拉列表选择项改变、输入框内容修改）。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange 事件</title>
<script type="text/javascript">
// 1. 静态注册：下拉列表内容改变触发
function showChange() {
alert("工资范围改变了！");
}
// 2. 动态注册
window.onload = function() {
var selGirl = document.getElementById("selGirl");
selGirl.onchange = function() {
alert("选择的女友改变了！");
};
};
</script>
</head>
<body>
工资范围（静态注册）：
<select onchange="showChange()">
<option>--选择--</option>
<option>10k 以下</option>
<option>10k-30k</option>
<option>30k 以上</option>
</select><br>
选择女友（动态注册）：
<select id="selGirl">
<option>--选择--</option>
<option>艳红</option>
<option>春桃</option>
<option>春花</option>
</select>
</body>
</html>
5.3.5 onsubmit 表单提交事件
表单提交时触发，常用于表单数据验证（返回 false 可阻止表单提交）。
示例代码：
需求: 如果用户名或密码为空，不能提交表单
- 静态注册 onsubmit：注意要加 return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit 事件</title>
<script type="text/javascript">
// 1. 静态注册：验证表单
function checkForm() {
var username = document.getElementById("username");
var pwd = document.getElementById("pwd");
// 判断用户名或密码是否为空
if (username.value === "" || pwd.value === "") {
alert("用户名和密码不能为空！");
return false; // 阻止表单提交
}
return true; // 允许表单提交
}
// 2. 动态注册
window.onload = function() {
var form2 = document.getElementById("form2");
form2.onsubmit = function() {
// 简化验证：直接获取表单内的元素（通过 name 属性）！！！！！！！！！！
if (form2.username.value === "" || form2.pwd.value === "") {
alert("用户名和密码不能为空！");
return false;
}
return true;
};
};
</script>
</head>
<body>
<!-- 静态注册 onsubmit：注意要加 return -->！！！！！！！！！
<form action="ok.html" onsubmit="return checkForm()">
用户名：<input type="text" id="username" name="username"><br>
密码：<input type="password" id="pwd" name="pwd"><br>
<input type="submit" value="注册">
</form>
<!-- 动态注册 onsubmit -->
<form action="ok.html" id="form2">
用户名：<input type="text" name="username"><br>
密码：<input type="password" name="pwd"><br>
<input type="submit" value="注册">
</form>
</body>
</html>
六、DOM操作（文档对象模型）
6.1 官方文档
- 地址: https://www.w3school.com.cn/js/js_htmldom.asp
6.2 基本介绍
- DOM 全称是 Document Object Model 文档对象模型
- 将 HTML 文档转为对象树，JS 通过 DOM API 操作 HTML 元素（如增删改查）。就是把文档中的标签，属性，文本，转换成为对象来管理
![[Pasted image
.png]]
6.3 HTML DOM （文档对象模型）
- 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
- HTML DOM 树
对象
[属性，方法/函数]
![[Pasted image
.png]]
6.4 DOM 核心概念
- Document 对象：代表整个 HTML 文档，是 DOM 树的根，通过
document全局变量访问。
- document 它==管理了所有的 HTML 文档内容==
- document 它是一种==树结构==的文档。
- 有层级关系 在 dom 中把所有的标签 都 对象化 （得到这个 html 标签的<—>对象–>操作）
- 通过 document 可以访问所有的标签对象
- 节点（Node）：DOM 树的基本单位，包括元素节点（如
<div>）、属性节点（如id="btn"）、文本节点（如标签内的文本）。 - 常用 Document 方法：用于获取元素节点，核心方法如下：document 对象
doucment 对象方法一览
| 方法 | 作用 | 示例 |
|---|---|---|
getElementById(id) | 通过 id 获取单个元素节点 | var btn = document.getElementById("btn"); |
getElementsByName(name) | 通过 name 属性获取元素节点集合 | var inputs = document.getElementsByName("sport"); |
getElementsByTagName(tag) | 通过标签名获取元素节点集合 | var imgs = document.getElementsByTagName("img"); |
createElement(tag) | 创建新的元素节点 | var div = document.createElement("div"); |
appendChild(node) | 向父节点添加子节点 | document.body.appendChild(div); |
![[Pasted image 20250927100916.png]]
- 文档地址: https://www.w3school.com.cn/js/js_htmldom_document.asp
6.5 DOM 操作示例
6.5.1 通过 ID 获取元素并修改
innerHTML获取包括html标签和文本innerText获取包括html标签内的文本
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementById 的使用</title>
<!--
1. 先得到 h1 的 dom 对象, 通过 id 获取
2. 对 h1 对应的 dom 对象操作即可
-->
<script type="text/javascript">
//静态绑定
function getValue() {
//myHeader 就是 dom 对象
var myHeader = document.getElementById("myHeader");
alert(myHeader); //HTMLHeadingElement
//myHeader.innerText 获取到 myHeader 的包含的文本
alert(myHeader.innerText);//文本 tt
alert(myHeader.innerHTML);//html <div>tt</div>
//动态绑定
window.onload = function () {
//1. 获取 myHeader 的 dom 对象
var myHeader = document.getElementById("myHeader");
//2. 给 myHeader 绑定 onclick 的事件
myHeader.onclick = function () {
alert("动态绑定 内容是= " + myHeader.innerText);
}
}
//理解了基本原理，其它的问题就是 API 层级
</script>
</head>
<body>
<!-- 静态绑定一个点击事件 -->
<h1 id="myHeader"><div>tt</div></h1>
<p>Click on the header to alert its value</p>
</body>
</html>
6.5.2 应用实例 -复选框全选 / 全不选 / 反选
- 多个同id 返回 NodeList 集合
![[Pasted image 20250927101721.png]]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByName 函数</title>
<script type="text/javascript">
//sports 是什么? 是 nodeList 即时一个集合
//完成全选
function selectAll() {
//1.获取到 sport 这一组复选框
var sports = document.getElementsByName("sport");
alert(sports);
//2. 拿到[dom ,集合]，操作【属性和方法 api】
//遍历 sports， 修改
for (var i = 0; i < sports.length; i++) {
sports[i].checked = true;//选中
}
}
//全不选
function selectNone() {
//1.获取到 sport 这一组复选框
var sports = document.getElementsByName("sport");
alert(sports);
for (var i = 0; i < sports.length; i++) {
sports[i].checked = false;//全部不选中
}
}
//反选 selectReverse
function selectReverse() {
//1.获取到 sport 这一组复选框
var sports = document.getElementsByName("sport");
for (var i = 0; i < sports.length; i++) {
if(sports[i].checked) {//js true
sports[i].checked = false;
}
else {
sports[i].checked = true;//选中
}
//以上效果等于
//js语法：什么值都可以判断
sports[i].checked = !sports[i].checked;
}
}
</script>
</head>
<body>
你会的运动项目：
<input type="checkbox" name="sport" value="zq" checked="checked">足球
<input type="checkbox" name="sport" value="tq">台球
<input type="checkbox" name="sport" value="ppq">乒乓球 <br/><br/>
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectReverse()">反选</button>
</body>
</html>
6.5.3 应用实例 -图片切换（动态修改 src 属性）
![[Pasted image 20250927103552.png]]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
<script type="text/javascript">
function changeImgs() {
//1. 得到所有的 img
var imgs = document.getElementsByTagName("img");
//imgs 是 HTMLCollections 集合
alert("猫猫的数量是=" + imgs.length);
//2. 修改 src,遍历修改
for (var i = 0; i < imgs.length; i++) {
imgs[i].src = "./img/" + (i+4) +".png";//改变src路径
}
}
</script>
</head>
<body>
<img src="./img/1.png" height="100">
<img src="./img/2.png" height="100">
<img src="./img/3.png" height="100">
<br/>
<input type="button" onclick="changeImgs()" value="查看多少小猫,并切换成小狗"/>
</body>
</html>
- 连点击的文案也改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
<script type="text/javascript">
function getElements() {
var input1 = document.getElementById("input1");
//获取所有 img 集合对象
var imgs = document.getElementsByTagName("img");
if (input1.value == "查看多少小猫,并切换成小狗") {
for (var i = 0; i < imgs.length; i++) {
imgs[i].src = "./img/" + (i + 4) + ".png";
}
input1.value = "查看多少小狗,并切换成小猫";
}
else if (input1.value == "查看多少小狗,并切换成小猫") {
for (var i = 0; i < imgs.length; i++) {
imgs[i].src = "./img/" + (i+1) + ".png";
}
input1.value = "查看多少小猫,并切换成小狗";
}
}
</script>
</head>
<body>
<img src="./img/1.png" height="100">
<img src="./img/2.png" height="100">
<img src="./img/3.png" height="100">
<br/>
<input id="input1" type="button" onclick="changeImgs()" value="查看多少小猫,并切换成小狗"/>
</body>
</html>
6.5.4 应用实例-动态创建元素（createElement）
- 在dom树进行程序操作，不会引起html文档变化（它是静态的），它的变化是在内存的，所以会反过来影响浏览器的页面。
- 
.png]]
![[Pasted image 20250927105400.png]] - 创建img之后要将内容挂载到dom树上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>createElement</title>
<script type="text/javascript">
function addImg() {//添加小猫
// 在浏览器内存中 创建<img></img>
//添加img就“img”，input就“input”
//createElement 创建一个HTML元素，是对dom树操作
var img = document.createElement("img");
img.src = '1.png';
img.height = '100';
img.border = "1";
//添加到 body 标签
//作用：创建img之后要将内容挂载到dom树上
document.body.appendChild(img);
}
</script>
</head>
<body>
<input type="button" onclick="addImg()" value="点击创建一只小猫~"/>
</body>
</html>
6.6 HTML DOM 节点
- 在 HTML DOM （文档对象模型）中，每个部分都是节点：
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- TML 元素内的文本是文本节点
- 注释是注释节点
6.6.1 节点属性和方法一览
- HTML DOM Element 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_all.asp
- HTML DOM Document 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_document.asp
6.6.2 节点常用方法
- getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
- getElementsById（）方法，获取当前节点的指定id名孩子节点
- appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
6.6.3 节点常用属性
| 属性 | 作用 | 示例 |
|---|---|---|
childNodes | 获取当前节点的所有子节点（包括文本节点） | var children = div.childNodes; |
firstChild | 获取当前节点的第一个子节点 | var first = div.firstChild; |
lastChild | 获取当前节点的最后一个子节点 | var last = div.lastChild; |
parentNode | 获取当前节点的父节点 | var parent = img.parentNode; |
nextSibling | 获取当前节点的下一个兄弟节点 | var next = img.nextSibling; |
previousSibling | 获取当前节点的上一个兄弟节点 | var prev = img.previousSibling; |
innerHTML | 获取 / 设置节点的 HTML 内容 | div.innerHTML = "<p>新内容</p>"; |
innerText | 获取 / 设置节点的文本内容 | div.innerText = "新文本"; |
| className | 用于获取或设置标签的 class 属性值 |
6.6.3.1 应用实例_得到对应的节点
- 需求: 完成如功能(如图), 点击右侧的按钮，可以得到对应的节点
—需要的样式文件----
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 200px;
margin-bottom: 10px;
text-align: left;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
float:left;
}
.inner{
width:400px;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
- 小技巧:
ctrl+home直接到页面最上面 ==ctrl + end==页面最下 - id–>getElementById
- name–>getElementsByName
- 元素标签名->getElementsByTagName()
<html>
<head>
<meta charset="UTF-8">
<title>演示 HTML DOM 相关方法</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
<script type="text/javascript">
//使用动态注册/绑定
window.onload = function () {
// 先获取 btn01 的 dom
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// 查找 id=java 节点
var java = document.getElementById("java");
alert("java 节点文本=" + java.innerText); //innerText
}
alert("======================================================")
// 查找所有 标签option 节点
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
//查找所有 option 节点
var options = document.getElementsByTagName("option");
alert(options); // object HtmlCollection
for (var i = 0; i < options.length; i++) {
alert("值= " + options[i].innerText); //innerText
}
}
//查找 name=sport 的节点
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
var sports = document.getElementsByName("sport");//NodeList
for (var i = 0; i < sports.length; i++) {
//过滤显示被选中的
if (sports[i].checked) {
alert("运动是= " + sports[i].value); //value
}
}
}
//查找 id=language 下所有 li 节点
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
//getElementsByTagName 子对象
var lis = document.getElementById("language").getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerText);//<li>xxx</li> <input value="xx"/>
}
}
alert("======================================================")
//返回 id=sel01 的所有 子节点[3 种方法]
//第一种，一个个取
var btn05 = document.getElementById("btn05");
btn05.onclick = function () {
var options = document.getElementById("sel01").getElementsByTagName("option");
//11=>object text //<select> 换行也有一个节点
alert(document.getElementById("sel01").childNodes.length);
//第二种，childNodes
//1. 如果使用 document.getElementById("sel01").childNodes
//获取的是 object text 和 object htmloptionelement
//2. 如果不希望得到 text 对象，需要将所有的内容放在一行 //即没有换行
var childNodes = document.getElementById("sel01").childNodes;
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].selected) { //过滤，只有选中的
alert(i + " " + childNodes[i].innerText);
}
}
//第三种，集合
//1. sel01 是 HtmlSelectElement => 本身就有集合特点
var sel01 = document.getElementById("sel01");
for (var i = 0; i < sel01.length; i++) {
alert(sel01[i].innerText);
}
alert("======================================================")
//返回 id=sel01 的第一个子节点，firstChild
var btn06 = document.getElementById("btn06");
btn06.onclick = function () {
//除了上面的方法外，还可以直接使用属性 firstChild
var sel01 = document.getElementById("sel01");
alert("xx=" + sel01.firstChild);
//解读是按照 .childNodes 得到第一个子节点 //object text
alert("yy=" + sel01[0]);// 直 接 是 得 到 第 一 个 option 节 点 object
htmloptionelement
}
alert("======================================================")
//返回 id=java 的父节点 parentNode
var btn07 = document.getElementById("btn07");
btn07.onclick = function () {
var java = document.getElementById("java");
alert(java.parentNode);// object HtmlUListElement.
alert(java.parentNode.innerHTML);//
alert(java.parentNode.childNodes.length);//4，//java php,c++ py
alert("======================================================")
//返回 id=ct 的前后兄弟节点 nextSibling
var btn08 = document.getElementById("btn08");
btn08.onclick = function () {
var ct = document.getElementById("ct");
alert(ct.previousSibling.innerText);//object text , 输出 undefined
alert(ct.previousSibling.previousSibling.innerText); //object htmloptionelement,艳红
alert(ct.nextSibling.innerText);//object text, 输出 undefined
alert(ct.nextSibling.nextSibling.innerText);
//object HtmlOptionElement, 输出春花
}
alert("======================================================")
//设置#person 的文本域
var btn10 = document.getElementById("btn10");
btn10.onclick = function () {
var person = document.getElementById("person");
person.innerText = "这是我们最新的介绍";
}
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<P>
你会的运动项目：
</P>
<input type="checkbox" name="sport" value="zq" checked="checked">足球
<input type="checkbox" name="sport" value="tq">台球
<input type="checkbox" name="sport" value="ppq">乒乓球 <br/>
<hr/>
<P>
你当前女友是谁：
</P>
<select id="sel01">
<option>---女友---</option>
<option>艳红</option>
<option id="ct" value="春桃菇凉">春桃</option>
<option>春花</option>韩顺平 Java 工程师
<option>桃红</option>
</select>
<hr/>
<p>
你的编程语言?
</p>
<ul id="language">
<li id="java">Java~~~</li>
<li>PHP</li>
<li>C++</li>
<li>Python</li>
</ul>
<br>
<br>
<hr/>
<p>
个人介绍:
</p>
<textarea name="person" id="person">个人介绍</textarea>
</div>
</div>
<div id="btnList">
<div>
<button id="btn01">查找 id=java 节点</button>
</div>
<div>
<button id="btn02">查找所有 option 节点</button>
</div>
<div>
<button id="btn03">查找 name=sport 的节点</button>
</div>
<div>
<button id="btn04">查找 id=language 下所有 li 节点</button>
</div>
<div>
<button id="btn05">返回 id=sel01 的所有子节点</button>
</div>
<div>
<button id="btn06">返回 id=sel01 的第一个子节点</button>
</div>
<div>
<button id="btn07">返回 id=java 的父节点</button>
</div>
<div>
<button id="btn08">返回 id=ct 的前后兄弟节点</button>
</div>
<div>
<button id="btn09">读取 id=ct 的 value 属性值</button>
</div>
<div>
<button id="btn10">设置#person 的文本域</button>
</div>
</div>
</body>
</html>
6.6.4 乌龟吃鸡游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乌龟吃鸡游戏</title>
<script type="text/javascript">
// 公鸡初始坐标
var cockTop = 200;
var cockLeft = 200;
// 乌龟和公鸡的宽高（用于碰撞检测）
//看图片分辨率
var wuguiWidth = 94;
var wuguiHeight = 67;
var cockWidth = 76;
var cockHeight = 73;
// 移动乌龟
function move(obj) {
// 获取乌龟DOM对象
var wugui = document.getElementById("wugui");
// 获取当前乌龟的位置（去除px，转为数字）
// alert(wugui.style.left); //100px
// alert(typeof wugui.style.left); //string
var wuguiLeft = parseInt(wugui.style.left); //转为number
// alert(wuguiLeft) //100
// alert(typeof wuguiLeft) //number
var wuguiTop = parseInt(wugui.style.top);
// 根据按钮方向修改位置（每次移动10px）
switch (obj.value) {
case "向上走":
wuguiTop -= 10;
wugui.style.top = wuguiTop + "px"; //得给他加回去px
break;
case "向下走":
wuguiTop += 10;
wugui.style.top = wuguiTop + "px";
break;
case "向左走":
wuguiLeft -= 10;
wugui.style.left = wuguiLeft + "px";
break;
case "向右走":
wuguiLeft += 10;
wugui.style.left = wuguiLeft + "px";
break;
}
// 碰撞检测
checkCollision(wuguiLeft, wuguiTop);
}
// 碰撞检测逻辑
function checkCollision(wLeft, wTop) {
// 计算横向和纵向距离
var xDistance = Math.abs(wLeft - cockLeft);
var yDistance = Math.abs(wTop - cockTop);
// 纵向重叠判断
var yOverlap = false;
if (wTop < cockTop) {
// 乌龟在上方：纵向距离 < 乌龟高度 → 重叠
yOverlap = yDistance < wuguiHeight;
} else {
// 乌龟在下方：纵向距离 < 公鸡高度 → 重叠
yOverlap = yDistance < cockHeight;
}
// 横向重叠判断
var xOverlap = false;
if (wLeft < cockLeft) {
// 乌龟在左侧：横向距离 < 乌龟宽度 → 重叠
xOverlap = xDistance < wuguiWidth;
} else {
// 乌龟在右侧：横向距离 < 公鸡宽度 → 重叠
xOverlap = xDistance < cockWidth;
}
// 横向和纵向都重叠 → 碰撞
if (xOverlap && yOverlap) {
alert("乌龟很厉害！吃到公鸡了~");
// 重置乌龟位置
var wugui = document.getElementById("wugui");
wugui.style.left = "100px";
wugui.style.top = "120px";
}
}
</script>
</head>
<body>
<!-- 方向按钮表格 -->
<!--1. this 表示的是你点击的这个 button，而且已经是一个 dom 对象-->
<!--2. 可以使用属性和方法-->
<table border="1">
<tr>
<td></td>
<td><input type="button" value="向上走" onclick="move(this)"/></td>
<td></td>
</tr>
<tr>
<td><input type="button" value="向左走" onclick="move(this)"/></td>
<td></td>
<td><input type="button" value="向右走" onclick="move(this)"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="向下走" onclick="move(this)"/></td>
<td></td>
</tr>
</table>
<!-- 乌龟图片（绝对定位） -->
<div id="wugui" style="position: absolute; left: 100px; top: 120px;">
<img src="1.bmp" border="1" alt="乌龟">
</div>
<!-- 公鸡图片（绝对定位） -->
<div id="cock" style="position: absolute; left: 200px; top: 200px;">
<img src="2.bmp" border="1" alt="公鸡">
</div>
</body>
</html>
XML
- XML（eXtensible Markup Language）即可扩展标记语言，用于存储和传输数据，标签可自定义，具有良好的可读性和可扩展性。
一、官方文档
- 地址: https://www.w3school.com.cn/xml/index.asp
二、XML 的应用场景
- 数据传输：程序间交换数据（如前后端数据交互，现已多被 JSON 替代）
- 配置文件载体：主流框架（Spring、MyBatis）、服务器（Tomcat）、构建工具（Maven）均以 XML 作为配置文件格式，例如 Tomcat 的
server.xml（配置端口、主机）、MyBatis 的Mapper.xml（配置 SQL 映射）。 - 小型数据存储：xml 文件做小型数据库，也是不错的选择，我们程序中可能用到的数据，如果放在数据库中读取不合适(因为你要增加维护数据库工作)，可以考虑直接用 xm 来做小型数据库 ，而且直接读取文件显然要比读取数据库快
三、XML 快速入门
3.1 需求实现：存储学生信息
3.1.1 步骤 1：创建 XML 文件（students.xml）
<?xml version="1.0" encoding="UTF-8"?>
<!-- 根元素：整个XML文档必须有且仅有一个根元素 -->
<students>
<!-- 子元素：每个student代表一个学生，id为属性 -->
<student id="1001">
<name>张三</name>
<age>18</age>
<gender>男</gender>
<email>zhangsan@example.com</email>
</student>
<student id="1002">
<name>李四</name>
<age>19</age>
<gender>女</gender>
<email>lisi@example.com</email>
</student>
<!-- 空元素：无内容，可简写为<br/>形式 -->
<student id="1003"/>
</students>
3.1.2 步骤 2：XML 文件规范验证
- 必须包含文档声明（首行）：
<?xml version="1.0" encoding="UTF-8"?>，定义 XML 版本与编码。 - 存在==唯一根元素==（如
<students>），所有子元素需嵌套在根元素内。 - 标签需正确嵌套：不可交叉（如
<a><b></a></b>为错误）。 - 属性值需用引号包裹（单引号或双引号均可），如
id="1001"。
四、XML 语法详解
4.1 文档结构组成
- XML 文档由 5 部分核心组件构成，每部分需严格遵循语法规则：
- 文档声明：XML 的 “身份标识”，必须位于首行。
- 格式：
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> - 说明：
version：XML 版本（仅支持 1.0，1.1 极少用）。encoding：文件编码（如 UTF-8、GBK），需与文件实际编码一致，否则中文乱码。standalone：是否独立（yes表示不依赖外部文件，no表示依赖），一般省略。
- 格式：
- 元素（标签/节点）：XML 的核心载体，分为三种类型：
- 包含内容：
<name>张三</name>（标签体为文本）。 - 嵌套子元素：
<student><age>18</age></student>。 - 空元素：
<student id="1003"/>（等同于<student id="1003"></student>）。 - 命名规则：
- 区分大小写（
<Name>与<name>是不同标签）。 - 不能以数字 / 下划线开头，不能包含空格和冒号（
:）。 - 多单词建议用下划线（如
<book_title>），避免驼峰（兼容性差）。
- 区分大小写（
- 包含内容：
- 属性：为元素添加额外信息，格式为
属性名="属性值"。- 示例：
<student id="1001" clazz="高一(1)班">。 - 规则：
- 一个元素可有多个属性，但同一属性名不能重复。
- 属性值不能包含
&（需用转义字符&替代）。
- 示例：
- 注释：标注说明，不参与 XML 解析，格式为
<!-- 注释内容 -->。- 规则：
- 不能嵌套（
<!-- 注释1 <!-- 注释2 --> -->为错误）。 - 不能放在标签中间（如
<name<!-- 注释 -->>张三</name>为错误）。
- 不能嵌套（
- 规则：
- CDATA 区：原样输出特殊字符（如
<、>、&），无需转义，格式为<![CDATA[ 内容 ]]>。- 示例：存储 JS 代码片段（避免
<script>标签被解析）：
- 示例：存储 JS 代码片段（避免
<code>
<![CDATA[
<script>
function hello() {
alert("Hello XML");
}
</script>
]]>
</code>
4.2 转义字符
- 当需在 XML 中显示特殊字符（如
<、&），需使用转义字符，避免被解析器误认为 XML 语法
| 特殊字符 | 转义字符 | 说明 |
|---|---|---|
< | < | 小于号 |
> | > | 大于号 |
& | & | 和号（最常用，必须转义） |
' | ' | 单引号 |
" | " | 双引号 |
<student>
<resume>年龄<18 & 未成年</resume>
</student>
4.3 格式正规的 XML 文档（小结）
需同时满足以下规则，否则解析器会报错：
- 首行必须有文档声明（
<?xml version="1.0" encoding="UTF-8"?>）。 - 有且仅有一个根元素。
- 标签区分大小写，且正确嵌套、闭合（空元素用
/>闭合）。 - 属性值用引号包裹，无重复属性名。
- 特殊字符用转义字符或 CDATA 区处理。
五、XML 解析技术
- XML 解析技术原理
- 不管是 html 文件还是 xml 文件它们都是标记型文档，都可以使用 w3c 组织制定的dom 技术来解析
- document 对象表示的是整个文档（可以是 html 文档，也可以是 xml 文档）
跟树一样的层级
- dom 解析技术是 W3C 组织制定的，而所有的编程语言都对这个解析技术使用了自己语言的特点进行实现。 Java 对 dom 技术解析也做了实现
.png]]
5.1 解析技术对比
- XML 解析是将 XML 文档转换为程序可操作的对象模型，主流技术如下：
| 解析技术 | 特点 | 适用场景 |
|---|---|---|
| DOM | 加载整个 XML 到内存，生成树结构，可增删改查；内存占用大 | 小文件、需频繁修改数据 |
| SAX | 它是以类似事件机制通过回调告诉用户当前正在解析的内容。 是一行一行的读取 xml 文件进行解析的。不会创建大量的 dom 对象。 所以它在解析 xml 的时候在性能上优于 Dom 解析 | 大文件、仅读取数据 |
| JDOM | 对 DOM 封装，API 简洁；性能一般 | 中小型项目 |
| pull | 主要用在 Android 手机开发，是在跟 sax 非常类似都是事件机制解析 xml 文件 | Android 手机开发 |
| DOM4J | 对 JDOM 进一步优化，性能优异、API 灵活，支持 XPath；工业级首选 | 企业级项目（Spring、MyBatis） |
六、DOM4J解析技术
6.1 参考文档
.png]]
6.2 DOM4J 环境准备
- 下载 JAR 包：从DOM4J 官网下载
dom4j-1.6.1.jar（或更高版本）。 - 导入项目：
- 普通 Java 项目：将 JAR 包放入
lib目录，添加为库（Add as Library）。
- 普通 Java 项目：将 JAR 包放入
6.3 DOM4J 核心 API
DOM4J 通过以下核心类与方法操作 XML，核心是先获取Document对象，再遍历 / 修改节点：
| 类 / 接口 | 核心方法 | 作用 |
|---|---|---|
SAXReader | read(File file) | 读取 XML 文件，生成Document对象 |
| Document | getRootElement()、addElement(String name) | 获取根元素、添加子元素 |
Element | elements(String name)、element(String name)、attributeValue(String name) | 获取子元素集合、单个子元素、属性值 |
OutputFormat | createPrettyPrint()、setEncoding(String charset) | 格式化 XML 输出（换行、缩进）、设置编码 |
XMLWriter | write(Document document) | 将修改后的Document写入 XML 文件 |
6.4 获得 Document 对象的方式有三种
- 开发 dom4j 要导入 dom4j 的包
1、读取 XML 文件,获得 document 对象
SAXReader reader = new SAXReader();//创建一个解析器
Document document = reader.read(new File("src/input.xml"));//XML Document
2、解析 XML 形式的文本,得到 document 对象.
String text = "<members></members>";
Document document = DocumentHelper.parseText(text);
3、主动创建 document 对象.
Document document = DocumentHelper.createDocument(); //创建根节点
Element root = document.addElement("members");
★☆6.5 document 对象的底层结构——>dubug
- 需要从根节点开始寻找
- 或者结合XPath，直接导航我们要的节点（跟src一样）
![[Pasted image 20250927194137.png]]
6.6 DOM4J 应用实例（操作students.xml）
6.6.1 读取 XML（查询学生信息）
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import java.io.File;
import java.util.List;
public class Dom4jReadDemo {
public static void main(String[] args) throws DocumentException {
// 1. 创建解析器
SAXReader reader = new SAXReader();
// 2. 读取XML文件，生成Document对象（XML内存模型）
Document document = reader.read(new File("src/students.xml"));
// 3. 获取根元素（<students>）
Element rootElement = document.getRootElement();
// 4. 获取所有<student>子元素，student是你的元素
List<Element> studentElements = rootElement.elements("student");
// 5. 遍历学生信息
for (Element student : studentElements) {
// 获取属性值（id）
String id = student.attributeValue("id");
// 获取子元素文本（name、age等）
String name = student.element("name").getText();
String age = student.element("age").getText();
String gender = student.element("gender").getText();
System.out.printf("ID：%s，姓名：%s，年龄：%s，性别：%s%n",
id, name, age, gender);
}
}
}
输出结果：
ID：1001，姓名：张三，年龄：18，性别：男
ID：1002，姓名：李四，年龄：19，性别：女
ID：1003，姓名：（空），年龄：（空），性别：（空）
6.6.2 新增 XML 节点（添加学生）
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.SAXReader;
import org.dom4j.io.XMLWriter;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
public class Dom4jAddDemo {
public static void main(String[] args) throws DocumentException, IOException {
// 1. 读取原有XML,创建解析器
SAXReader reader = new SAXReader();
Document document = reader.read(new File("src/students.xml"));
Element root = document.getRootElement();
// 2. 创建新学生节点（<student>）
Element newStudent = DocumentHelper.createElement("student");
// 2.1 添加属性
newStudent.addAttribute("id", "1004");
// 2.2 创建子元素,并设置值，添加到newStudent
//Element newStu_age = DocumentHelper.createElement("age");
//newStu_age.setText("23");
newStudent.addElement("name").setText("王五");
newStudent.addElement("age").setText("20");
newStudent.addElement("gender").setText("男");
newStudent.addElement("email").setText("wangwu@example.com");
// 3. 将新节点添加到根元素
root.add(newStudent);
// 4. 格式化输出（避免XML内容紧凑）
OutputFormat format = OutputFormat.createPrettyPrint();
format.setEncoding("UTF-8"); // 解决中文乱码
// 5. 写入XML文件
XMLWriter writer = new XMLWriter(
new FileOutputStream("src/students.xml"), format
);
writer.write(document);
writer.close();
System.out.println("学生添加成功！");
}
}
6.6.3 修改 XML 节点（更新学生年龄）
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.SAXReader;
import org.dom4j.io.XMLWriter;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.List;
public class Dom4jUpdateDemo {
public static void main(String[] args) throws DocumentException, IOException {
SAXReader reader = new SAXReader();
Document document = reader.read(new File("src/students.xml"));
Element root = document.getRootElement();
// 1. 遍历所有学生，找到ID为1001的学生
List<Element> students = root.elements("student");
for (Element student : students) {
if ("1001".equals(student.attributeValue("id"))) {
// 2. 修改age节点的文本
student.element("age").setText("19");
break; // 找到后退出循环
}
}
// 3. 写入文件
OutputFormat format = OutputFormat.createPrettyPrint();
format.setEncoding("UTF-8");
XMLWriter writer = new XMLWriter(
new FileOutputStream("src/students.xml"), format
);
writer.write(document);
writer.close();
System.out.println("学生年龄更新成功！");
}
}
6.6.4 删除 XML 节点（删除学生）
- 通过父节点删除！！！！
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.SAXReader;
import org.dom4j.io.XMLWriter;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.List;
public class Dom4jDeleteDemo {
public static void main(String[] args) throws DocumentException, IOException {
SAXReader reader = new SAXReader();
Document document = reader.read(new File("src/students.xml"));
Element root = document.getRootElement();
// 1. 遍历学生，找到ID为1003的学生
List<Element> students = root.elements("student");
Element targetStudent = null;
for (Element student : students) {
if ("1003".equals(student.attributeValue("id"))) {
targetStudent = student;
break;
}
}
// 2. 删除节点（通过父节点删除）
if (targetStudent != null) {
targetStudent.getParent().remove(targetStudent);
}
// 3. 写入文件
OutputFormat format = OutputFormat.createPrettyPrint();
format.setEncoding("UTF-8");
XMLWriter writer = new XMLWriter(
new FileOutputStream("src/students.xml"), format
);
writer.write(document);
writer.close();
System.out.println("学生删除成功！");
}
}
6.7 课后：XML 转 Java 对象
- 需求：读取
books.xml，生成Book对象列表
- 创建
Book类：
public class Book {
private Integer id;
private String name;
private String author;
private Double price;
// 构造器、getter、setter、toString()
public Book(Integer id, String name, String author, Double price) {
this.id = id;
this.name = name;
this.author = author;
this.price = price;
}
@Override
public String toString() {
return "Book{id=" + id + ", name='" + name + "', author='" + author + "', price=" + price + "}";
}
// getter和setter省略
}
```
2. **创建`books.xml`**：
```xml
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book id="1">
<name>《Java编程思想》</name>
<author>Bruce Eckel</author>
<price>108.0</price>
</book>
<book id="2">
<name>《DOM4J实战》</name>
<author>韩顺平</author>
<price>88.5</price>
</book>
</books>
- 解析 XML 并生成
Book列表：
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import java.io.File;
import java.util.ArrayList;
import java.util.List;
public class BookXmlToObject {
public static void main(String[] args) throws DocumentException {
//解析器
SAXReader reader = new SAXReader();
Document document = reader.read(new File("src/books.xml"));
//获取根元素
Element root = document.getRootElement();
List<Book> bookList = new ArrayList<>();
List<Element> bookElements = root.elements("book");
for (Element bookElem : bookElements) {
// 解析属性和子元素
Integer id = Integer.parseInt(bookElem.attributeValue("id"));
String name = bookElem.element("name").getText();
String author = bookElem.element("author").getText();
Double price = Double.parseDouble(bookElem.element("price").getText());
// 创建Book对象并添加到列表
bookList.add(new Book(id, name, author, price));
}
// 打印结果
for (Book book : bookList) {
System.out.println(book);
}
}
//+++++++++++++++++++++++++++++++++++++++++或者
List<Element> books = document.getRootElement().elements("book");
for (Element book : books) {
//取出 book 元素的所有信息
Element name = book.element("name");
Element author = book.element("author");
Element price = book.element("price");
String id = book.attributeValue("id");
//创建成 Book 对象
Book book1 = new Book();
book1.setId(Integer.parseInt(id));
book1.setName(name.getText());
book1.setPrice(Double.parseDouble(price.getText()));
book1.setAuthor(author.getText());
System.out.println("book1 对象信息= " + book1);
}
}
输出结果：
Book{id=1, name='《Java编程思想》', author='Bruce Eckel', price=108.0}
Book{id=2, name='《DOM4J实战》', author='韩顺平', price=88.5}
七、XML 注意事项
- 编码一致性：文档声明的
encoding需与文件实际编码（如 IDE 保存编码）一致，否则中文乱码（推荐统一用 UTF-8）。 - 属性与元素选择：
- 属性：适合存储 “元数据”（如 ID、状态），简短且不参与嵌套。
- 元素：适合存储 “内容数据”（如姓名、描述），支持嵌套子元素。
- 解析性能：
- 大文件（如 100MB 以上）推荐用 SAX 解析，避免 DOM4J 加载整个文件导致内存溢出。
- 频繁查询建议结合 XPath（DOM4J 支持），简化代码（如
//student[@id='1001']直接定位节点）。
![[sub/JAVA Web/picture/Pasted image
.png]]
- 版本兼容性：XML 1.1 支持更多字符，但兼容性差，绝大多数场景用 XML 1.0。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
20
0- 0
已为社区贡献1条内容
所有评论(0)