<!-- Three.js WebGPU 计算着色器粒子系统 - 功能与技术点详解
🎯 代码功能概述
这是一个基于WebGPU的GPU计算粒子系统，实现了30万个粒子的实时动画效果。粒子在GPU上并行计算位置和速度，通过鼠标交互产生动态视觉效果。

核心功能：
大规模粒子模拟 - 30万个粒子在2D空间中的物理运动

GPU并行计算 - 所有粒子位置更新完全在GPU上完成

交互式效果 - 鼠标移动会"清除"指针周围的粒子

实时边界碰撞 - 粒子碰到边界会反弹

可视化调试 - 内置GUI可调节参数

🔧 主要技术点
1. WebGPU渲染器
javascript
renderer = new THREE.WebGPURenderer({ antialias: true });
下一代图形API：替代WebGL，提供更底层的GPU控制

计算管线支持：专门的计算着色器队列

多线程优化：更好的CPU-GPU并行性

显存管理：更高效的资源分配和回收

2. Three.js着色器语言(TSL)
javascript
import { Fn, uniform, instancedArray, float, vec2, color } from 'three/tsl';
声明式着色器编程：用JavaScript语法编写GPU代码

类型安全：编译时类型检查

节点化设计：可组合的着色器组件

自动优化：TSL编译器优化着色器代码

3. GPU计算着色器
javascript
const computeShaderFn = Fn(() => {
  // 每个粒子独立执行的代码
  const position = particle.add(velocity);
  // ... 物理计算
});
数据并行模型：30万个粒子 = 30万个GPU线程

存储缓冲区：instancedArray存储粒子数据

统一变量：uniform传递全局参数（鼠标位置、边界）

4. 实例化渲染(Instanced Rendering)
javascript
const pointsGeometry = new THREE.BufferGeometry();
pointsGeometry.drawRange.count = 1; // 只有一个顶点
mesh.count = particlesCount; // 但渲染30万个实例
高效渲染：单次绘制调用渲染所有粒子

顶点重用：共享相同的顶点数据和着色器

实例数据：通过gl_InstanceIndex区分不同实例

5. 计算与渲染管线分离
graph LR
    A[鼠标输入] -> B[更新Uniforms]
    B -> C[GPU计算管线]
    C -> D[更新粒子位置]
    D -> E[GPU渲染管线]
    E -> F[屏幕显示]
    
    G[粒子位置缓冲区] -> C
    C -> G
    G -> E


6. 交互式物理模拟
粒子行为规则：
自由运动：每个粒子有随机初始速度和方向

边界碰撞：碰到边界（±1范围）会反弹

鼠标交互：指针周围0.1半径内粒子被重置到中心

物理计算公式：
glsl
// 位置更新
new_position = current_position + velocity * delta_time

// 边界检测
if (abs(position.x) >= limit.x)
    velocity.x = -velocity.x  // X方向反弹

// 鼠标交互
distance = length(mouse_position - particle_position)
if (distance < 0.1)
    particle_position = vec2(0, 0)  // 重置到中心
7. 性能优化策略
优化技术	实现方式	效果
GPU计算	计算着色器并行处理	CPU零负担
实例化	单顶点多次绘制	减少绘制调用
数据驻留	数据保持在GPU内存	避免CPU-GPU传输
异步操作	await renderer.init()	不阻塞主线程
8. 调试与可视化
javascript
// Inspector调试工具
renderer.inspector = new Inspector();
const gui = renderer.inspector.createParameters('设置');
gui.add(scaleVector, 'x', 0, 1, 0.01);
实时参数调整：边界范围可动态调节

性能监控：帧率、GPU使用率等

场景检查：对象层次结构查看

9. 坐标系转换
空间转换链：
text
屏幕像素坐标 → 归一化设备坐标 → 着色器计算
(0~width)     →     (-1~1)     →   物理模拟
转换公式：
javascript
// 像素到NDC转换
ndcX = (pixelX / width - 0.5) * 2.0   // [-1, 1]
ndcY = (-pixelY / height + 0.5) * 2.0 // [1, -1]（Y轴翻转）

🚀 技术优势
与传统CPU实现的对比：
方面	CPU实现	本Demo（GPU实现）
计算速度	串行处理，慢	30万线程并行，快
主线程阻塞	可能卡顿UI	完全异步，流畅
可扩展性	粒子数有限	轻松支持百万级
能耗效率	CPU高负载	GPU专用硬件加速
与WebGL方案的对比：
WebGL：通过transform feedback实现计算，复杂且有限制

WebGPU：原生计算管线，更简洁高效

Three.js TSL：比手写GLSL更易维护

📊 实际应用场景
这个技术可以扩展到：

科学可视化：分子运动、流体模拟

游戏特效：烟雾、火焰、星空背景

数据可视化：散点图、地理信息点

交互艺术：生成艺术、创意视觉效果

🔍 关键代码段解析
javascript
// 最核心的计算逻辑：
particle.assign(
  distanceFromPointer.lessThanEqual(pointerSize)
  .select(vec2(), position)  // 条件运算符：距离近则重置，否则保持位置
);
这个select()函数是TSL的条件表达式，在GPU中所有线程同时执行，实现了向量化的条件分支。

🎨 视觉效果特点
颜色映射：粒子位置直接映射到颜色（白色偏移）

运动轨迹：随机初始速度产生螺旋状运动

交互反馈：鼠标划过产生"清除"效果

密度变化：边界附近粒子更密集（反弹聚集） -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面元数据设置
			charset="utf-8": 设置文档字符编码为UTF-8，支持中文等多语言字符
			viewport: 视口设置，确保页面在不同设备上正确显示
				width=device-width: 宽度等于设备宽度
				user-scalable=no: 禁止用户手动缩放（为了保持3D场景的稳定显示）
				minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1.0
		-->
		<title>Three.js WebGPU 计算着色器演示 - 30万粒子GPU加速动画</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			引入外部CSS样式表
			rel="stylesheet": 定义链接类型为样式表
			href="example.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>
		<!-- 
			页面信息展示区域
			id="info": 为这个div元素分配唯一标识符，方便CSS和JavaScript操作
			这个区域包含logo、标题和描述信息
		-->
		<div id="info">
			<!-- 
				Three.js官方链接
				href="https://threejs.org/": 点击跳转到Three.js官网
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全设置，防止新页面访问原页面的window对象
				class="logo-link": CSS类名，用于样式化（可能包含背景图片作为logo）
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装容器，用于布局和样式控制 -->
			<div class="title-wrapper">
				<!-- 主标题链接，指向Three.js官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题，描述当前演示的功能 -->
				<span>WebGPU计算着色器演示</span>
			</div>

			<!-- 
				描述信息区域
				<small>: HTML语义化标签，表示小号字体文本，通常用于版权信息、注释等
				这里描述演示的核心特性：使用GPU计算驱动30万个粒子的实时动画
			-->
			<small>
				使用GPU计算着色器实时驱动30万个粒子的动画 - 鼠标移动可与粒子交互
			</small>
		</div>

		<!-- 
			模块导入映射配置 (Import Map)
			这是一个现代JavaScript模块系统的配置，告诉浏览器如何解析模块导入路径
			type="importmap": HTML5新特性，用于定义模块别名
			注意：这个功能需要现代浏览器支持（Chrome 89+、Edge 89+、Safari 15.4+）
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					
					"three/webgpu": "../build/three.webgpu.js",
					
					"three/tsl": "../build/three.tsl.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块
			type="module": 声明这是一个ES6模块，支持import/export语法
			模块代码会在HTML解析时自动执行
		-->
		<script type="module">

			// ==================== 模块导入部分 ====================
			// 使用import语句导入Three.js WebGPU版本的所有导出
			// * as THREE: 将所有导出对象打包到THREE命名空间中
			import * as THREE from 'three/webgpu';

			// 从附加模块导入Inspector（调试检查器）
			// Inspector: 用于在运行时检查和调试Three.js场景的GUI工具
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 从TSL库导入着色器构建函数和数据类型
			// Fn: 用于创建着色器函数的高阶函数
			// uniform: 创建统一变量（在GPU中所有线程共享的只读变量）
			// instancedArray: 创建实例化数组（用于存储每个实例的数据，如粒子位置）
			// float, vec2, color: 数据类型（浮点数、2维向量、颜色）
			// instanceIndex: 内置变量，表示当前正在处理的实例（粒子）的索引
			import { Fn, uniform, instancedArray, float, vec2, color, instanceIndex } from 'three/tsl';

			// ==================== 全局变量声明 ====================
			// Three.js核心对象
			let camera;      // 相机：定义观察场景的视角
			let scene;       // 场景：包含所有3D对象的容器
			let renderer;    // 渲染器：负责将3D场景绘制到2D屏幕上
			
			// 计算着色器节点
			let computeNode; // 用于执行GPU计算的节点，包含粒子更新逻辑
			
			// 交互控制向量
			// pointerVector: 存储鼠标/指针在归一化设备坐标中的位置
			// 初始值设置为(-10, -10)，这是一个屏幕外的位置，确保开始时不会影响粒子
			const pointerVector = new THREE.Vector2(-10.0, -10.0);
			
			// scaleVector: 定义粒子运动的边界范围
			// 初始值为(1, 1)，表示粒子在x和y方向上的活动范围为[-1, 1]
			const scaleVector = new THREE.Vector2(1, 1);

			// ==================== 程序入口点 ====================
			// 调用初始化函数，开始设置Three.js场景
			// 注意：init是async函数，它返回一个Promise
			init();

			// ==================== 初始化函数 ====================
			// async function: 异步函数声明，允许在函数内使用await关键字
			// 这个函数负责创建和配置所有Three.js对象
			async function init() {

				// ==================== 相机设置 ====================
				// 创建正交投影相机(Orthographic Camera)
				// 正交相机不会产生透视变形，物体大小不随距离变化
				// 参数说明：
				//   -1.0, 1.0: 左右裁剪平面位置（左=-1，右=1）
				//   1.0, -1.0: 上下裁剪平面位置（上=1，下=-1）
				//   0, 1: 近和远裁剪平面距离
				camera = new THREE.OrthographicCamera(-1.0, 1.0, 1.0, -1.0, 0, 1);
				
				// 设置相机在Z轴上的位置
				// 由于是正交投影，Z位置不影响物体大小，只影响深度排序
				camera.position.z = 1;

				// ==================== 场景创建 ====================
				// 创建Three.js场景对象
				// 场景是所有3D对象（网格、灯光、相机等）的容器
				scene = new THREE.Scene();

				// ==================== 粒子系统参数 ====================
				// 定义粒子总数
				// 300000个粒子对于CPU计算来说负担很重，但GPU可以轻松处理
				const particlesCount = 300000;

				// ==================== GPU数据存储创建 ====================
				// 使用TSL的instancedArray函数创建实例化数组
				// 这些数组存储在GPU内存中，可以在计算着色器和渲染着色器之间共享
				
				// particleArray: 存储每个粒子的当前位置（2D向量）
				// 'vec2'表示数据类型是包含两个浮点数的向量
				const particleArray = instancedArray(particlesCount, 'vec2');
				
				// velocityArray: 存储每个粒子的当前速度（2D向量）
				const velocityArray = instancedArray(particlesCount, 'vec2');

				// ==================== 计算着色器函数定义 ====================
				// 使用TSL的Fn函数定义GPU计算着色器
				// Fn创建一个可在GPU上并行执行的函数
				// 这个函数会被每个粒子（工作项）并行执行
				const computeShaderFn = Fn(() => {

					// 获取当前处理的粒子数据
					// instanceIndex是内置变量，表示当前粒子的索引（0到299999）
					// element(instanceIndex): 从数组中获取指定索引的元素
					const particle = particleArray.element(instanceIndex); // 粒子当前位置
					const velocity = velocityArray.element(instanceIndex); // 粒子当前速度

					// 创建统一变量(uniform variables)
					// uniform变量在GPU中的所有线程（粒子）之间共享，具有相同的值
					// pointer: 鼠标指针的当前位置（从pointerVector获取）
					const pointer = uniform(pointerVector);
					
					// limit: 粒子运动边界限制（从scaleVector获取）
					const limit = uniform(scaleVector);

					// 计算粒子新位置：当前位置 + 速度
					// toVar(): 将表达式转换为可赋值的变量
					// 这个新位置是临时变量，用于后续的边界检测
					const position = particle.add(velocity).toVar();

					// ============ 边界碰撞检测与反弹逻辑 ============
					// 使用选择运算符(select)实现条件逻辑
					// 语法：条件.select(为真时的值, 为假时的值)
					
					// X轴边界检测：
					// 如果position.x的绝对值大于等于limit.x（超出边界）
					// 则将velocity.x取反（反弹），否则保持原速度
					velocity.x = position.x.abs().greaterThanEqual(limit.x)
						.select(velocity.x.negate(), velocity.x);
					
					// Y轴边界检测：
					// 如果position.y的绝对值大于等于limit.y（超出边界）
					// 则将velocity.y取反（反弹），否则保持原速度
					velocity.y = position.y.abs().greaterThanEqual(limit.y)
						.select(velocity.y.negate(), velocity.y);

					// ============ 位置约束 ============
					// 确保粒子位置不会超出边界限制
					// min(limit): 确保position不超过正边界
					// max(limit.negate()): 确保position不低于负边界
					// 这样position就被限制在[-limit, limit]范围内
					position.assign(position.min(limit).max(limit.negate()));

					// ============ 鼠标指针交互处理 ============
					// 定义鼠标指针的影响半径
					const pointerSize = 0.1;
					
					// 计算当前粒子与鼠标指针的距离
					// pointer.sub(position): 计算从粒子到指针的向量
					// .length(): 计算向量的长度（欧几里得距离）
					const distanceFromPointer = pointer.sub(position).length();

					// 如果粒子在指针影响范围内，将其重置到中心
					// 条件：distanceFromPointer <= pointerSize
					// 为真时：选择vec2()（零向量，即中心点）
					// 为假时：选择position（保持当前位置）
					// 最后将结果赋值回particle数组
					particle.assign(
						distanceFromPointer.lessThanEqual(pointerSize)
						.select(vec2(), position)
					);

				});

				// ==================== 计算节点创建与配置 ====================
				// 创建计算节点，用于在渲染循环中执行GPU计算
				// computeShaderFn(): 调用之前定义的着色器函数
				// .compute(particlesCount): 指定要执行的工作项数量（每个粒子一个工作项）
				// .setName('Update Particles'): 为节点设置名称，方便在调试器中识别
				computeNode = computeShaderFn().compute(particlesCount).setName('更新粒子状态');
				
				// ==================== 计算节点初始化回调 ====================
				// onInit: 设置初始化回调函数，在计算节点首次使用时执行
				// 这个回调用于初始化粒子速度（只执行一次）
				computeNode.onInit(({ renderer }) => {

					// 定义预计算着色器函数
					// 这个函数在初始化时运行一次，为每个粒子设置初始速度
					const precomputeShaderNode = Fn(() => {

						// 获取当前粒子索引并转换为浮点数
						// float(): 将整型索引转换为浮点数，便于数学运算
						const particleIndex = float(instanceIndex);

						// ============ 生成随机运动方向 ============
						// 基于粒子索引生成随机角度
						// 公式：角度 = 粒子索引 * 0.005 * 2π
						// 乘以0.005确保不同粒子有不同的角度
						// 乘以2π将角度转换为弧度制（0到2π范围）
						const randomAngle = particleIndex.mul(.005).mul(Math.PI * 2);
						
						// ============ 生成随机速度大小 ============
						// 基于粒子索引生成随机速度
						// 公式：速度 = 粒子索引 * 0.00000001 + 0.0000001
						// 这个公式确保：
						// 1. 每个粒子的速度都不同（因为粒子索引不同）
						// 2. 所有速度都非常小（在0.0000001到0.0030001范围内）
						// 3. 粒子运动会非常缓慢平滑
						const randomSpeed = particleIndex.mul(0.00000001).add(0.0000001);

						// ============ 计算速度向量 ============
						// 使用三角函数将角度和速度转换为2D向量
						// velX = sin(角度) * 速度
						const velX = randomAngle.sin().mul(randomSpeed);
						
						// velY = cos(角度) * 速度
						const velY = randomAngle.cos().mul(randomSpeed);

						// 获取当前粒子的速度数组元素
						const velocity = velocityArray.element(instanceIndex);

						// 将计算得到的速度向量赋值给速度数组
						// vec2(velX, velY): 创建包含x和y分量的2D向量
						velocity.xy = vec2(velX, velY);

					});

					// 执行预计算着色器
					// 这会在GPU上并行初始化所有粒子的速度
					renderer.compute(precomputeShaderNode().compute(particlesCount));

				});

				// ==================== 粒子渲染几何体创建 ====================
				// 虽然我们有30万个粒子，但我们只需要一个基础几何体
				// Three.js会通过实例化(instancing)技术重复使用这个几何体
				
				// 创建缓冲几何体对象
				const pointsGeometry = new THREE.BufferGeometry();
				
				// 设置position属性
				// 这里只创建一个顶点（包含3个浮点数：x, y, z）
				// new Float32Array(3): 创建包含3个浮点数的数组，初始值都是0
				// 第二个参数3表示每个顶点由3个分量组成（x, y, z）
				pointsGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(3), 3));
				
				// 强制Three.js将几何体渲染为实例化点
				// drawRange.count = 1: 告诉渲染器只绘制一个顶点
				// 配合后面的mesh.count = particlesCount，实现实例化渲染
				pointsGeometry.drawRange.count = 1;

				// ==================== 点材质创建 ====================
				// 使用PointsNodeMaterial（基于节点的点材质）
				// 这种材质允许使用节点图(node graph)定义材质属性
				const pointsMaterial = new THREE.PointsNodeMaterial();
				
				// 设置颜色节点：基于粒子位置生成颜色
				// particleArray.element(instanceIndex): 获取当前粒子的位置
				// .add(color(0xFFFFFF)): 将位置向量与白色相加
				// 这个操作实际上是将位置向量（范围[-1,1]）映射到颜色空间
				// 结果是：粒子位置不同，颜色也不同
				pointsMaterial.colorNode = particleArray.element(instanceIndex).add(color(0xFFFFFF));
				
				// 设置位置节点：使用计算着色器更新的粒子位置
				// 这覆盖了几何体原始的position属性
				// 每个粒子实例会使用自己在particleArray中的位置
				pointsMaterial.positionNode = particleArray.element(instanceIndex);

				// ==================== 点网格对象创建 ====================
				// 创建Points对象，这是Three.js中表示点云的特殊网格类型
				const mesh = new THREE.Points(pointsGeometry, pointsMaterial);
				
				// 设置实例数量：告诉Three.js要渲染多少个点实例
				mesh.count = particlesCount;
				
				// 将点网格添加到场景中
				scene.add(mesh);

				// ==================== 渲染器创建与配置 ====================
				// 创建WebGPURenderer（Three.js的WebGPU后端渲染器）
				// { antialias: true }: 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer({ antialias: true });
				
				// 设置设备像素比例
				// window.devicePixelRatio: 获取设备的物理像素与CSS像素的比例
				// 这确保在高DPI屏幕上渲染足够清晰
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为窗口尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环函数
				// animate函数会被每帧调用（通常每秒60次）
				renderer.setAnimationLoop(animate);
				
				// 附加调试检查器到渲染器
				// Inspector: 提供场景检查、性能分析、参数调整等功能
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到页面body中
				// renderer.domElement: 渲染器对应的HTMLCanvasElement
				document.body.appendChild(renderer.domElement);

				// ==================== 异步初始化渲染器 ====================
				// 等待渲染器初始化完成
				// WebGPU渲染器需要异步初始化，因为需要请求GPU设备
				// 这个初始化过程包括：
				// 1. 请求WebGPU适配器和设备
				// 2. 创建命令队列和渲染管线
				// 3. 设置交换链和渲染目标
				await renderer.init();

				// ==================== 事件监听器设置 ====================
				// 监听窗口大小变化事件
				// 当浏览器窗口大小改变时，调用onWindowResize函数
				window.addEventListener('resize', onWindowResize);
				
				// 监听鼠标移动事件
				// 当鼠标在页面上移动时，调用onMouseMove函数
				window.addEventListener('mousemove', onMouseMove);

				// ==================== GUI调试界面创建 ====================
				// 使用Inspector创建参数设置面板
				// createParameters('Settings'): 创建名为"设置"的参数面板
				const gui = renderer.inspector.createParameters('设置');
				
				// 添加边界范围控制滑块
				// gui.add(对象, 属性名, 最小值, 最大值, 步长)
				gui.add(scaleVector, 'x', 0, 1, 0.01);  // X轴边界范围控制
				gui.add(scaleVector, 'y', 0, 1, 0.01);  // Y轴边界范围控制

			} // init函数结束

			// ==================== 窗口大小变化处理函数 ====================
			// 这个函数在窗口大小改变时被调用
			function onWindowResize() {

				// 更新相机的投影矩阵
				// 正交相机的投影矩阵需要根据新的窗口宽高比重新计算
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸以匹配新窗口尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);

			}

			// ==================== 鼠标移动事件处理函数 ====================
			// 这个函数在鼠标移动时被调用
			// event参数包含鼠标事件信息
			function onMouseMove(event) {

				// 获取鼠标在浏览器窗口中的坐标（以像素为单位）
				// clientX, clientY: 相对于浏览器视口的坐标
				const x = event.clientX;
				const y = event.clientY;

				// 获取浏览器窗口的当前尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 将鼠标坐标从屏幕空间转换到归一化设备坐标(NDC)
				// NDC是WebGL/WebGPU的标准坐标系统，范围是[-1, 1]
				
				// X坐标转换公式：
				// 1. x / width: 将像素坐标转换为[0, 1]范围
				// 2. - 0.5: 转换为[-0.5, 0.5]范围
				// 3. * 2.0: 转换为[-1, 1]范围
				// 最终：屏幕左边缘对应-1，中心对应0，右边缘对应1
				const ndcX = (x / width - 0.5) * 2.0;
				
				// Y坐标转换公式：
				// 1. y / height: 将像素坐标转换为[0, 1]范围
				// 2. -y / height + 0.5: 转换为[0.5, -0.5]范围（Y轴翻转）
				// 3. * 2.0: 转换为[1, -1]范围
				// 最终：屏幕上边缘对应1，中心对应0，下边缘对应-1
				// 注意：WebGL/WebGPU的Y轴是向上的，而屏幕Y轴是向下的，所以需要翻转
				const ndcY = (-y / height + 0.5) * 2.0;

				// 更新pointerVector，这个向量会在计算着色器中作为uniform使用
				pointerVector.set(ndcX, ndcY);

			}

			// ==================== 动画循环函数 ====================
			// 这个函数由渲染器的动画循环每帧调用
			// 在WebGPU渲染器中，通常每秒调用60次（与显示器刷新率同步）
			function animate() {

				// 第一步：执行GPU计算
				// 调用计算着色器更新所有粒子的位置
				// 这发生在渲染之前，确保粒子位置是最新的
				renderer.compute(computeNode);

				// 第二步：渲染场景
				// 使用更新后的粒子位置渲染点云
				// renderer.render(场景, 相机): 将场景从相机视角渲染到屏幕上
				renderer.render(scene, camera);

			} // animate函数结束

		</script> <!-- 主JavaScript模块结束 -->
	</body> <!-- 页面body结束 -->
</html> <!-- HTML文档结束 -->