1. HTML：页面结构
语义化标签：
<header>、<nav>、<main>、<article>、<section>、<footer>等，有助于可读性和 SEO。常用元素：文本（
<h1>–<h6>、<p>）、列表（<ul>/<ol>）、链接（<a>）、图片（<img>）、表单（<form>、<input>、<select>、<button>）。文档结构：
<!DOCTYPE html>声明、<html lang="zh">设定语言、<head>中的字符集 (<meta charset="utf-8">)、视口 (<meta name="viewport">)。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>示例页面</title>
</head>
<body>
<header><h1>网站标题</h1></header>
<main><p>内容……</p></main>
<footer><p>© 2025</p></footer>
</body>
</html>
表单与交互
输入类型：
type="text"、email、number、tel、url、date、color等验证属性：
required、pattern、min/max、step辅助标签：
<label for>、<fieldset>+<legend>、<datalist>、<output>文件上传：
<input type="file" multiple accept="image/*">
全局属性适用于几乎所有 HTML 元素
id：文档中唯一标识，用于 CSS、JS 选取。class：元素分组，可多个，用于样式和脚本。style：内联样式，尽量少用，优先外部或内部样式表。data-*：自定义数据属性，便于 JS 获取。title：鼠标悬停提示。tabindex：键盘焦点顺序，0表示按文档流，负数表示可聚焦但不在 Tab 顺序内。
列表
无序列表：
<ul>+<li>有序列表：
<ol>+<li>（可用type、start、reversed属性定制）定义列表：
<dl>+<dt>（术语）+<dd>（定义）
2. CSS：样式与布局
选择器：类型、类（
.class）、ID（#id）、属性（[attr=value]）、伪类（:hover、:nth-child()）。盒模型：
content + padding + border + margin；理解box-sizing: border-box;带来更直观的宽高计算。布局方式：
经典：块布局、内联布局、浮动（float）、定位（position）
现代：Flexbox（
display: flex;）、Grid（display: grid;）
响应式：媒体查询（
@media）、相对单位 (%, rem, vw/vh)。预处理器（可选）：Sass/LESS，支持变量、嵌套、Mixin
3. JavaScript：行为与交互
基本语法：变量（
let/const）、数据类型、运算符、流程控制、函数。DOM 操作：
变量声明
let：块级作用域，可修改const：块级作用域，常量（引用类型指向不可变）var：函数级作用域（不推荐用）
流程控制
条件语句：
if (x > 0) {
// ...
} else if (x === 0) {
// ...
} else {
// ...
}
循环语句
for：常规、for…of（遍历可迭代对象）、for…in（遍历对象键）while/do…while
for (let i = 0; i < arr.length; i++) { … }
for (let v of arr) { … }
for (let k in obj) { … }
跳转与异常
break、continueswitch：多分支try…catch…finally：异常处理
switch (code) {
case 1: …; break;
default: …;
}
try {
risky();
} catch (e) {
console.error(e);
} finally {
// 必执行
}
函数与作用域
函数声明 vs 表达式 vs 箭头
function add(a, b) { return a + b; } // 声明提升
const sub = function(a, b) { return a - b; };
const mul = (a, b) => a * b; // 无 this、自身 arguments
评论