本文更新于 2026-04-07

HTML

HyperText Markup Language

HTML 不是一种编程语言，而是一种标记语言（Markup Language）。它通过一系列“标签”来描述网页的结构，是构建 Web 页面的基石。

HTML 核心标签

HTML 是网页的骨架，用于定义页面内容。

标题标签 (<h1> - <h6>)：用于定义 1 到 6 级标题，数字越小级别越高，字体越大。
超链接标签 (<a>)：
- href 属性：指定资源访问的 URL 地址。
- target 属性：指定打开链接的位置。
  - _self：在当前页面打开（默认）。
  - _blank：在新的空白页面打开。

表单

表单容器 `<form>`

所有表单控件必须放在 <form> 标签内，它负责定义数据提交的方向和方式。

action: 服务器接收数据的 URL 地址。
method:
- GET: 数据跟在 URL 后面，适合搜索、查询（安全性低，有长度限制）。
- POST: 数据放在请求体中，适合注册、上传文件（安全性高，无长度限制）。

	form表单：
	action：表单数据提交的url地址
	method：提交方式
	    get：默认，表单数据会出现在url后面，形式：/save?name=Tom&age=18
	    特点：
	        1．如果表单中包含了隐私数据，get方式并不安全，不推荐使用该方式．
	        2．在浏览器中get请求的大小是有限制的，不适合提交大数据量的表单．
	    post：表单数据会在消息体/请求体中提交到服务器
	    特点：
	        1．安全．
	        2．请求大小没有限制
	注意：表单项要想能够采集数据，必须得设置name属性，表示当前表单项的名字

表单项

<label> 标签 (点击文字也能选中)

极力推荐使用。它能通过 for 属性绑定到对应的 input 的 id 上。

好处：点击“用户名”这三个字，光标也会跳进输入框，对移动端非常友好。

name 属性 (后端唯一标识)

这是表单项最核心的属性。后端程序只认 name。

💡 比喻：name 是变量名，用户输入的是变量值。没写 name，后端就收不到这个项的数据。

value 属性 (初始值/提交值)

对于文本框：它是默认填好的文字。
对于单选/复选框：它是选中后传给后端的“暗号”。

`<input>`

常用 Type	视觉效果	适用场景
`text`	单行输入框	用户名、地址
`password`	掩盖输入内容	密码、敏感信息
`radio`	圆形选择点	单选（必须设置相同 `name` 才能互斥）
`checkbox`	方形勾选框	多选（如爱好、协议确认）
`file`	文件选择按钮	上传头像、文档
`submit`	提交按钮	确认并发送整个表单

`<select> & <option>`

用于在有限的空间里提供大量选项。

	<select name="city">
	  <option value="bj">北京</option>
	  <option value="sh">上海</option>
	</select>

`<textarea>`

用于输入大量文字（如自我介绍、评价），支持换行。

表格

HTML 表格是由行（Row）组成的，行里面再拆分单元格（Cell）。

<table>: 表格的容器。
<tr> (Table Row): 定义一行。
<th> (Table Header): 表头单元格。文字默认加粗、居中。
<td> (Table Data): 普通单元格。承载具体内容。为了让长表格更易读、更符合标准，建议使用以下标签：

标签	作用
`<thead>`	包裹表头部分（通常是第一行）。
`<tbody>`	包裹表格主体（数据部分）。
`<tfoot>`	包裹表格页脚（如合计行）。
`<caption>`	表格的标题，紧跟在 `<table>` 之后。

单元格合并

这是表格布局中最常用的技巧，用于处理复杂的表头或跨行数据。

colspan (跨列)：将多个单元格水平合并。
rowspan (跨行)：将多个单元格垂直合并。

页脚

维度	`<footer>` (页面页脚)	`<tfoot>` (表格页脚)
所属父级	`<body>` 或 `<article>`	`<table>`
主要功能	放置版权、导航、作者信息	放置表格数据的合计、平均值
出现频率	一个页面通常只有一个主 `<footer>`	每个表格可以有一个 `<tfoot>`
布局技巧	常配合 CSS 固定在页面底部	常配合 `colspan` 合并单元格

CSS

Cascading Style Sheets

CSS 负责网页的表现（Presentation）。如果说 HTML 是建筑的骨架，那么 CSS 就是装修、油漆和家具布局。它通过选择器定位 HTML 元素，并应用样式属性。

CSS 引入方式

CSS 用于美化 HTML 页面，主要有三种引入手段：

行内样式 (Inline Styles)：直接写在标签的 style 属性中，优先级最高但不易维护。
内部样式表 (Internal Style Sheet)：写在 <head> 标签内的 <style> 标签中，适用于单页样式。
外部样式表 (External Style Sheet)：推荐做法。通过 <link rel="stylesheet" href="路径.css"> 引入独立的 .css 文件，实现结构与表现分离。

颜色表示

十六进制颜色值

这是目前网页开发中最常用的表达方式

格式：#RRGGBB（前缀为 #，后面跟着三组十六进制数）。
原理：使用十六进制（0-9, A-F）分别定义红 (Red)、绿 (Green)、蓝 (Blue) 三原色的强度。
示例：
- #FFFFFF：纯白色。
- #000000：纯黑色。

RGB 与 RGBA 模式

直接通过数字定义三原色的混合比例，更符合计算机颜色的底层逻辑。

RGB 格式：rgb(红色值, 绿色值, 蓝色值)。每个数值范围是 0-255。
- 示例：rgb(231, 76, 60) 等同于十六进制的 #e74c3c。
RGBA 格式：rgba(r, g, b, alpha)。多了一个 alpha 通道用于控制透明度。
- alpha 取值范围是 0（完全透明）到 1（完全不透明）。
- 示例：rgba(52, 152, 219, 0.5) 表示 50% 透明度的蓝色。

选择器

基本选择器

这是最常用、最基础的选择方法。

标签选择器 (1)：通过 HTML 标签名选择。
- 写法：p { color: red; }（选中页面上所有的 <p> 标签）。
类选择器 (10)：选择具有特定 class 属性的元素。
- 写法：.highlight { background: yellow; }（选中所有 class="highlight" 的元素）。
ID 选择器 (100)：选择具有特定 id 属性的唯一元素。
- 写法：#header { font-size: 24px; }（选中 id="header" 的元素）。注意：一个 ID 在 HTML 页面中应该是唯一的。
通配符选择器 (0)：选择页面上的所有元素。
- 写法：* { margin: 0; padding: 0; }（常用于重置页面默认边距）。

复合选择器

用于更精确地定位元素。

后代选择器 (Descendant Selector)：选择某个元素内部的所有指定后代。
- 写法：.container p { ... }（选中 .container 内部所有的 <p> 标签，无论嵌套多深）。
子元素选择器 (Child Selector)：仅选择某个元素的直接子元素。
- 写法：.container > p { ... }（只选中 .container 下的第一层 <p>）。
并集选择器 (Grouping Selector)：同时给多个选择器设置相同的样式。
- 写法：h1, h2, .title { ... }（用逗号分隔）。

伪类选择器

用于选择元素的特定状态，常用于交互效果。

:hover：鼠标悬停在元素上的状态。
- 写法：a:hover { text-decoration: underline; }（鼠标移上去显示下划线）。
:active：元素被激活（鼠标点击按下）的状态。
:nth-child(n)：选择父元素中的第 n 个子元素。
- 写法：li:nth-child(2) { color: blue; }（选中列表中的第二项）。

属性选择器

根据 HTML 标签的属性来选择，这在处理你之前提到的 contest.xml 这种结构化数据转换成的 HTML 时非常有用。

写法：[type="text"] { border: 1px solid #ccc; }（选中所有 type 属性为 text 的输入框）。

选择器的优先级

当多个选择器指向同一个元素并设置相同属性时，浏览器会根据“权重”来决定听谁的：

行内样式 (style="...")：权重最高 (1000)
ID 选择器 (#id)：权重高 (100)
类、伪类、属性选择器 (.class)：权重中 (10)
标签选择器 (div, p)：权重低 (1)
通配符 (*)：权重最低 (0)

原则：描述得越精准，权重越高。如果权重相同，则后写的样式会覆盖先写的样式。

正文样式

属性	功能说明	常见取值示例
`color`	设置字体颜色	`#e74c3c` (十六进制), `rgba(0,0,0,0.8)`
`font-size`	设置字体大小	`16px`, `1rem`, `1.2em`
`line-height`	设置行高（行间距）	`1.5`, `1.6` (通常为字号的倍数)
`letter-spacing`	设置字间距	`1px`, `2px`
`text-indent`	首行缩进	`2em` (缩进两个字符)
`text-align`	文本对齐方式	`left`, `center`, `right`, `justify`

盒子模型

在 CSS 中，所有的 HTML 元素都可以看作是一个矩形的“盒子”。这个盒子由内到外由四个部分（区域）组成。

内容 (Content)：盒子的核心，显示文本、图片等实际内容。
内边距 (Padding)：内容与边框之间的透明区域。
边框 (Border)：围绕在内边距和内容外的线。
外边距 (Margin)：边框外的区域，用于控制元素与其它元素之间的距离。

通过 box-sizing 属性切换计算逻辑，这是最容易出错的地方：

标准盒子模型 (`content-box`)

特性：width 只等于 Content。
总宽度公式：Width + Padding*2 + Border*2。
结果：加了边框或内边距，盒子会被“撑大”。

怪异盒子模型 (`border-box`)

特性：width 等于 Content + Padding + Border。
总宽度公式：等于你设置的 Width。
结果：加了边框或内边距，内容区会“向内压缩”，盒子总尺寸不变。

布局

布局标签

1.<div> 标签 (Division) —— 块级容器

<div> 是 “division”（部分、分区）的缩写，用于定义文档中的一个区块。

显示特性：块级元素 (Block-level)。
- 默认情况下，它会独占一行（宽度默认铺满父容器 100%）。
- 它可以设置宽度 (width)、高度 (height)、内边距 (padding) 和外边距 (margin)。
常用场景：
- 划分页面的大区域（如：页眉、导航栏、内容区、页脚）。
- 作为 CSS 布局（如 Flex 或 Grid）的父容器。
示例：

	<div class="team-card">
	<h2>Alpha Team</h2>
	<p>积分：1500</p>
	</div>

2. <span> 标签 —— 行内容器

<span> 用于组合文档中的行内元素，以便通过 CSS 修改局部样式。

显示特性：行内元素 (Inline)。
- 它不会换行，只会占据内容所需的宽度，与其他文本排在同一行。
- 默认情况下，设置宽高属性无效。
常用场景：
- 修改一段文字中某个词的颜色、字号或字体。
- 在一行内放置小图标或状态标签。
示例：

	<p>队伍 T001 的状态是 <span style="color: green;">AC</span></p>

特性	`<div>`	`<span>`
元素类型	块级元素 (Block)	行内元素 (Inline)
占用空间	独占一行，默认宽度 100%	随内容变化，不换行
嵌套规则	可以包含其它 `div` 或 `span`	只能包含文本或其它行内元素
布局用途	构建网页骨架、容器	局部修饰、修饰行内小部件

flex布局

flex是flexible Box的缩写，意为"弹性布局"，是一种一维的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力。
通过给父容器添加flex的相关属性,来控制子元素的位置和排列方式，

理解 Flex 的关键在于明白它有两个轴：

主轴 (Main Axis)：默认是水平方向（从左到右）。
交叉轴 (Cross Axis)：默认是垂直方向（从上到下）。

可以通过 flex-direction 来交换这两个轴。

属性	作用	常用取值
`justify-content`	控制子元素在主轴（横向）上的对齐	`center`, `space-between`, `flex-end`
`align-items`	控制子元素在交叉轴（纵向）上的对齐	`center`, `flex-start`, `stretch`
`flex`	控制子元素如何分配剩余空间	`1` (平分), `2` (占两份)

flex布局相关的CSS样式

属性	说明	取值	含义
`display`	模式	`flex`	使用 flex 布局
`flex-direction`	设置主轴	`row`	主轴方向为 x 轴，水平向右（默认）
		`column`	主轴方向为 y 轴，垂直向下
`justify-content`	子元素在主轴上的对齐方式	`flex-start`	从头开始排列
		`flex-end`	从尾部开始排列
		`center`	在主轴居中对齐
		`space-around`	平分剩余空间
		`space-between`	先两边贴边，再平分剩余空间

HTML & CSS总览

JavaScript

组成

1. ECMAScript (核心语法)

这是 JavaScript 的大脑，定义了语言的基础规则。它不涉及浏览器，只规定语法。

包含内容：变量声明 (var, let, const)、数据类型、流程控制 (if/else, for)、函数、类 (Class)、对象等。
标准制定者：由 ECMA 国际组织负责更新（如 ES6, ES2023）。
通俗理解：就像汉语的语法字典，规定了怎么造句，但不规定这些句子是在书里还是在墙上。

2. DOM (文档对象模型)

DOM (Document Object Model) 是 JavaScript 操作网页内容的手脚。

功能：将 HTML 页面抽象为一棵“树”。JS 通过 DOM 接口可以增、删、改、查网页上的任何标签、属性和样式。
常见操作：
- document.getElementById()
- 修改文字内容 (innerText)
- 修改 CSS 样式 (style.display = 'none')
通俗理解：把 HTML 页面看作一间屋子，DOM 就是家具的控制面板，让你能随时换个沙发或者关上灯。

3. BOM (浏览器对象模型)

BOM (Browser Object Model) 是 JavaScript 与浏览器软件本身对话的窗口。

功能：提供与浏览器窗口交互的对象，不涉及页面内部的具体内容。
包含内容：
- window: 顶层对象（所有 JS 全局变量都在这里）。
- location: 获取或设置当前页面的 URL。
- navigation: 获取浏览器信息（版本、系统等）。
- history: 操作浏览器的前进和后退。
- screen: 获取屏幕分辨率。
通俗理解：它是浏览器的外壳控制，比如弹出一个警告框 (alert) 或开启一个新的标签页。

引入方式

行内引入

直接将 JS 代码写在 HTML 标签的事件属性中（如 onclick）

	<button onclick="alert('你点击了按钮！')">点击我</button>

优点：简单、快速，用于极少量的交互。
缺点：代码与 HTML 耦合度过高，极难维护，不推荐使用

内部引入

将代码写在 HTML 文档的 <script> 标签内。通常放在 </body> 标签之前。

代码示例：

	<body>
		<h1>标题</h1>
		<script>
			const title = document.querySelector('h1');
			console.log(title.innerText);
		</script>
	</body>

优点：不需要额外创建文件，适合单个页面的简短脚本。
缺点：如果脚本过长，会使 HTML 文件变得臃肿，无法在多个页面间复用代码。

外部引入–推荐

将 JS 代码写在独立的 .js 文件中，通过 <script> 标签的 src 属性引入。

HTML 部分：

<script src="js/main.js"></script>

JS 部分 (main.js)：

alert("这是来自外部文件的代码");

优点：
1. 代码复用：多个网页可以引用同一个 JS 文件。
2. 结构清晰：HTML 只负责结构，JS 负责逻辑，各司其职。
3. 缓存优化：浏览器会缓存外部 JS 文件，提高页面加载速度。

基础语法

1. 变量声明 (Variables)

在现代 JS 中，我们使用 let 和 const 来代替过时的 var。

const: 声明常量。一旦赋值，不能修改。优先使用。
let: 声明变量。值可以被重新覆盖。

const pi = 3.14; // 不可变
let score = 10;  // 可变
score = 20;      // 允许

2. 数据类型 (Data Types)

JS 的数据分为“简单”和“复杂”两类。

分类	数据类型	英文	说明 & 示例
基本类型	数字	`number`	数字（10, 3.14）
	字符串	`string`	字符串`("Hello", 'Hi')`
	布尔	`boolean`	布尔（true, false）
	空值	`null`	空值,`null != Null != NULL`
	未定义	`undefined`	该变量未初始化
引用类型	对象	`object`	对象，用 {} 表示，存储键值对
	数组	`array`	数组，用 [] 表示，存储有序列表

使用typeof运算符可以获取数据类型 typeof a -> number 避免使用 var，否则变量可能在声明前被访问而导致 undefined

[!WARNING] 注意
由字母、数字、下划线 _、美元符 $ 组成
不能以数字开头
严格区分大小写
不能是 JavaScript 关键字或保留字
建议见名知意，语义清晰
推荐使用小驼峰命名法，第一个单词小写，后面单词首字母大写

模板字符串

三种功能

变量嵌入通过 ${} 语法，可以直接在字符串中插入变量或表达式，不再需要用大量的 + 号

	const name = "Gemini";
	const version = 3.0;
	
	// 旧版写法
	console.log("你好，我是 " + name + "，当前版本是 " + version);
	
	// 模板字符串写法
	console.log(`你好，我是 ${name}，当前版本是 ${version}`);

多行字符串在传统字符串中，换行需要使用 \n。而在模板字符串中，可以直接按回车键换行

	// 自动保留换行格式
	const htmlTemplate = `
	  <div>
	    <h1>标题</h1>
	    <p>内容段落</p>
	  </div>
	`;

嵌入表达式 ${} 内部不仅可以放变量，还可以进行运算、调用函数或逻辑判断。

	const price = 100;
	const tax = 0.1;
	
	console.log(`总价是：${price * (1 + tax)} 元`); // 运算
	console.log(`状态：${price > 50 ? '昂贵' : '便宜'}`); // 三元运算

[!tip] 如果在模板字符串中需要显示反引号本身，请使用转义符：` \` `
如果在模板字符串中需要显示 ${} 原样字符，也需要转义：\${}

函数

在 JavaScript 中，函数（Function） 是执行特定任务的可重复调用的代码块。它是程序中最基本的“逻辑单元”。

函数声明 (Function Declaration)

最传统、最常用的方式。具有“声明提升”特性（可以在声明前调用）。

	function greet(name) {
		return `你好, ${name}!`;
	}
	console.log(greet("张三")); // 调用

匿名函数

匿名函数（Anonymous Function） 是指在定义时没有函数名称的函数。在 JavaScript 中，它们通常作为“工具人”使用，在需要的地方临时定义并立即执行或传递。

函数表达式 (Function Expression)

将函数赋值给一个变量。没有提升特性。

	const add = function(a, b) {
	  return a + b;
	};

箭头函数 (Arrow Function) —— 现代主流

ES6 引入的简洁写法。注意：它没有自己的 this，适合用作回调函数。

const multiply = (a, b) => a * b;

[!NOTE] 由于匿名函数没有名字，在复杂的报错调试（Debug）时，错误堆栈里可能只显示 anonymous，找起 Bug 来会比具名函数稍微麻烦一点。

自定义对象

在 JavaScript 中，自定义对象（Custom Objects） 是将相关数据（属性）和行为（方法）组织在一起的容器。它是 JS 模拟现实世界实体（如：用户、商品、订单）的核心方式。

	let 对象名 = {
		属性名1:属性值1;
		属性名2:属性值2;
		属性名3:属性值3;
		方法名:function(形参列表){}
	}
	
	// 调用格式
	对象名.属性名;
	对象名.方法名;

字面量方式（常用）

直接用大括号 {} 定义，适合创建一个独立、唯一的对象

	const phone = {
	  brand: "华为",
	  model: "Mate 60",
	  price: 5999,
	  // 方法：对象中的函数
	  call: function() {//不推荐使用箭头函数
		   console.log("正在拨打电话...");
	  }
	};

构造函数

当需要批量创建多个结构相似的对象时（如 100 个学生），使用构造函数约定：函数名首字母大写

	function Student(name, age) {
	  this.name = name;
	  this.age = age;
	  this.study = function() {
	    console.log(`${this.name} 正在学习`);
	  };
	}
	
	const s1 = new Student("小明", 18);
	const s2 = new Student("小红", 19);

类

ES6 引入的语法糖，逻辑更清晰，接近 Java/C# 的风格

	class Car {
	  constructor(color, speed) {
	    this.color = color;
	    this.speed = speed;
	  }
	  drive() {
	    console.log(`这辆${this.color}的车正在以${this.speed}码行驶`);
	  }
	}
	
	const myCar = new Car("白色", 120);

JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式

它基于 JavaScript 的一个子集，但它是独立于语言的文本格式，目前几乎所有的编程语言（Python, Java, PHP, Go 等）都支持 JSON

语法规则

JSON 的结构非常简单，主要由键值对组成。

数据在键值对中：键（Key）必须用双引号包裹。
数据由逗号分隔。
对象由大括号 {} 保存。
数组由方括号 [] 保存。

数据类型

类型	示例
字符串	`"Hello World"` (必须双引号)
数字	`123`, `45.6`
布尔值	`true`, `false`
数组	`["Apple", "Orange"]`
对象	`{"id": 1, "name": "Gemini"}`
空值	`null`

⚠️ 注意：JSON 不能包含函数、日期对象或 undefined

JavaScript 中的 JSON 操作

	// JSON.parse() 当从服务器收到一段 JSON 字符串时，需要用它将其解析为 JS 对象。
	const jsonStr = '{"name": "小明", "age": 18}';
	const obj = JSON.parse(jsonStr);
	console.log(obj.name); // 输出: 小明
	
	
	// JSON.stringify() 当准备把数据发送给服务器时，需要将 JS 对象转换为 JSON 字符串。
	const user = { name: "小明", age: 18 };
	const jsonString = JSON.stringify(user);
	console.log(jsonString); // 输出: '{"name":"小明","age":18}'

DOM

DOM (Document Object Model)，即文档对象模型，是 JavaScript 操作网页内容的“桥梁” 它将 HTML 文档表现为一个树状结构，让我们可以通过脚本动态地修改页面的内容、结构和样式。

DOM操作

根据CSS选择器获取DOM对象

document.querySelector('选择器')
- 作用：返回匹配到的第一个对象。
- 示例：document.querySelector('.my-class') 或 document.querySelector('#my-id p')。
document.querySelectorAll('选择器')
- 作用：返回匹配到的所有对象。
- 结果：一个 NodeList（类似数组的集合，可以用 forEach 遍历）
- 注意:得到的是一个NodeList节点集合，是一个伪数组(有长度、有索引的数组)

方法	获取依据	返回值类型	说明
`getElementById('id')`	唯一 ID	单个对象	速度最快，只能找 ID
`getElementsByClassName('class')`	类名	动态集合 (HTMLCollection)	实时更新的集合
`getElementsByTagName('标签名')`	标签名	动态集合 (HTMLCollection)	比如找所有的 `div`

事件监听

三要素

可以把事件监听想象成一个报警系统：

事件源 (Target)：谁触发了事件？（比如：一个 <button> 按钮）
- 事件源.addEventListener('事件类型',事件触发执行的函数);可以多次绑定同一事件
- 早期版本写法:事件源.on事件=function{}如果多次绑定同一事件，就会覆盖
事件类型 (Type)：发生了什么事？（比如：click 点击）
事件处理程序 (Handler)：要做什么？（通常是一个回调函数）

分类	事件名	触发时机
鼠标事件	`click`	鼠标点击
	`mouseenter` / `mouseleave`	鼠标移入 / 移出
键盘事件	`keydown` / `keyup`	按键按下 / 松开
表单事件	`input`	输入内容改变时（实时）
	`change`	内容改变并失去焦点时
	`submit`	表单提交时
窗口事件	`load`	整个页面加载完成
	`scroll`	页面滚动