` 表示独立内容区块。语义化标签有助于机器（如搜索引擎、屏幕阅读器）理解内容，提升可访问性与搜索引擎优化效果。
3. 属性：标签通过属性提供额外信息。例如，`
` 中，`src` 指定图片来源，`alt` 提供替代文本。
4. 文档结构：一个标准 HTML 文档包含 `` 声明、`` 根元素，以及其下的 ``（元信息）和 ``（可见内容）两部分。
实践关键：编写清晰、语义化的 HTML 结构是后续样式与交互实现的基础。
二、表现层：CSS
层叠样式表控制网页的视觉呈现，包括布局、颜色、字体等。
核心要点：
1. 选择器与声明：CSS 规则由选择器和声明块组成。选择器指定哪些 HTML 元素被样式化，声明块包含一组用 `属性: 值;` 格式书写的样式声明。例如，`p { color: blue; font-size: 16px; }`。
2. 盒模型：每个 HTML 元素都被视为一个矩形盒子，由内到外包括内容、内边距、边框和外边距。理解盒模型是控制元素尺寸和间距的关键。
3. 布局技术：
传统布局：基于 `display` 属性（如 `block`, `inline`, `inline-block`）和 `position` 属性（如 `relative`, `absolute`, `fixed`）。
Flexbox 布局：一维布局模型，擅长在单行或单列中分配空间、对齐项目，实现灵活的响应式布局。
Grid 布局：二维布局系统，通过行和列来定义区域，适合构建复杂的整体页面结构。
4. 响应式设计：核心是使用媒体查询，根据设备特性（如屏幕宽度）应用不同的 CSS 规则。通常与流动布局（使用百分比、`vw/vh` 等单位）和弹性图片结合。
5. 层叠与继承：“层叠”决定了当多条规则应用于同一元素时，哪条规则生效，优先级由来源、特异性和顺序决定。“继承”使得某些属性值能自动从父元素传递到子元素。
实践关键：合理运用布局模型与响应式技术，是实现跨设备一致视觉体验的核心。
三、行为层：JavaScript
JavaScript 为网页添加动态功能和交互行为，使其从静态文档变为动态应用。
核心要点：
1. 基础语法：包括变量声明（`let`, `const`）、数据类型、运算符、流程控制（条件、循环）和函数定义。
2. DOM 操作：文档对象模型将 HTML 文档表示为节点树。JavaScript 可以访问、修改、添加或删除 DOM 节点与属性，从而动态改变网页内容与结构。主要 API 包括 `document.getElementById`、`querySelector`、`createElement`、`appendChild` 等。
3. 事件处理：JavaScript 通过事件监听来响应用户操作（如点击、鼠标移动、键盘输入）或浏览器行为（如页面加载）。使用 `addEventListener` 方法为元素绑定事件处理函数。
4. 数据交互：通过 `XMLHttpRequest` 或更现代的 `Fetch API`，JavaScript 可以与服务器进行异步数据交换，实现局部更新页面内容而无需重新加载整个页面。
5. ES6+ 特性：现代 JavaScript 引入了诸多增强特性，如箭头函数、模板字符串、解构赋值、`Promise` 和 `async/await`（用于处理异步操作），使代码更简洁、易读。
实践关键：JavaScript 的逻辑应增强用户体验，避免阻塞页面渲染，并注意与 HTML/CSS 的解耦。
四、核心技术协同与工作流程
三大技术各司其职，紧密协作。
协作关系：
1. HTML 与 CSS：HTML 提供结构化的内容，CSS 选择器基于这些结构应用样式。CSS 的样式规则通过层叠机制 终决定每个元素的视觉表现。
2. HTML/CSS 与 JavaScript：JavaScript 通过 DOM API 读取或修改 HTML 结构及 CSS 样式（通常通过修改元素的 `class` 或 `style` 属性）。事件驱动模型使得用户与 HTML 元素的交互能触发 JavaScript 逻辑执行。
3. 开发流程：通常遵循“渐进增强”或“优雅降级”原则。先使用 HTML 搭建可访问的内容结构，再用 CSS 进行视觉增强， 后用 JavaScript 添加交互功能。确保在不支持 CSS 或 JavaScript 的环境中，核心内容依然可用。
工具与扩展：
开启者工具：浏览器内置的开启者工具是调试 HTML、CSS、JavaScript 的必备利器，可用于检查元素、修改样式、监控网络请求、调试脚本等。
CSS 预处理器：如 Sass、Less，引入了变量、嵌套、混合等功能，提升了 CSS 的可维护性和编写效率。
JavaScript 框架/库：如 React、Vue、Angular，提供了组件化、状态管理等能力，适用于构建复杂的单页面应用，但其基础仍是原生 JavaScript 与 Web 标准。
五、性能与可访问性基础
技术实现需兼顾效率与包容性。
性能优化要点：
1. 资源优化：压缩 HTML、CSS、JavaScript 文件；优化图片（格式选择、尺寸调整、懒加载）；减少 HTTP 请求数量。
2. 渲染优化：CSS 放在 `` 中，避免阻塞渲染；JavaScript 非阻塞加载（使用 `async` 或 `defer` 属性）；减少重排与重绘。
3. 代码效率：编写高效的 CSS 选择器；避免 JavaScript 中的长时间运行任务阻塞主线程。
可访问性基础：
1. 语义化 HTML：如前所述，是确保辅助技术理解内容的基础。
2. 键盘导航：确保所有交互功能都能通过键盘（如 Tab 键）访问和操作。
3. ARIA 属性：当标准 HTML 元素无法充分表达语义时，使用无障碍富互联网应用属性进行补充说明，例如 `aria-label`、`role`。
4. 颜色与对比度：确保文本与背景有足够的颜色对比度，信息不仅通过颜色传递。
网页设计的基础技术体系以 HTML、CSS、JavaScript 为核心支柱。HTML 构建语义化结构，CSS 实现视觉呈现与布局，JavaScript 驱动交互与动态行为。三者分工明确又协同工作。掌握这些技术的核心概念、协作方式，并在此基础上关注性能优化与可访问性实践，是创建功能完善、体验良好、稳健高效网页的坚实基础。技术的具体实现方式会随时代演进，但这些基础原则与协作逻辑保持相对稳定，是网页设计者必须理解和掌握的核心。
