手写笔记

---

一、HTML 元素基础（核心知识点）

1.1 元素的完整组成

• 起始标记：以 <标签名> 形式存在，是元素的开始标识，例如 <p>（段落）、<div>（分区）、<a>（超链接）。
• 结束标记：以 </标签名> 形式存在，是元素的结束标识，与起始标记对应，例如 </p>、</div>、</a>。
• 元素内容：位于起始标记和结束标记之间，可是纯文本，也可嵌套其他子元素，例如 <p>这是一段包含<b>加粗</b>的文本</p>。
• 元素属性：为元素补充额外配置信息，写在起始标记内部，格式为 属性名="属性值"，分为两类：
  1. 局部属性：仅特定标签可使用，例如 <img> 的 src（图片路径）、alt（替代文本），<a> 的 href（链接地址）。
  2. 全局属性：所有 HTML 元素均可使用，例如 id（唯一标识）、class（样式类名）、title（鼠标悬浮提示）。

1.2 特殊元素——空元素

• Q：什么是空元素？
• A：空元素是没有结束标记、也没有元素内容的特殊 HTML 元素，通常用于插入特定功能或资源。
• 常见空元素：<img>（插入图片）、<input>（输入框）、<br>（换行）、<hr>（水平分隔线）、<meta>（页面元信息）。

---

二、HTML 语义化（重点知识点）

2.1 语义化的定义

• Q：什么是 HTML 语义化？
• A：语义化是指根据页面内容的实际含义，选择最贴合的 HTML 标签，而非仅根据视觉样式（如大小、颜色）选择标签。
• 核心原则：标签的“名称”能体现其承载的内容类型，让开发者、浏览器、搜索引擎都能快速理解内容含义。
• 反例：全部使用 <div> 或 <span> 标签包裹所有内容（无任何语义，仅用于布局）；正例：用 <h1> 表示页面主标题，<p> 表示段落，<article> 表示独立文章。

2.2 语义化的核心价值（为什么要做语义化）

1. 提升代码可维护性：结构清晰、语义明确，后续开发、修改时能快速定位内容，降低维护成本。
2. 优化 SEO（搜索引擎优化）：搜索引擎能通过语义标签快速识别页面核心内容，提升网页在搜索结果中的排名。
3. 增强可访问性：屏幕阅读器等辅助工具能通过语义标签，准确读取页面内容，帮助残障用户正常浏览。
4. 规范代码风格：统一团队开发标准，减少冗余代码，让代码更具可读性和规范性。

---

三、文本元素相关知识点

3.1 空白折叠现象

• Q：什么是 HTML 中的“空白折叠”？
• A：在 HTML 源代码中，连续的空白字符（包括空格、换行、制表符），在浏览器渲染页面时，会自动折叠成一个空格。
• 示例：源代码中 <p>这是 一段\n测试文本</p>（包含多个空格和换行），浏览器最终显示为“这是 一段 测试文本”。

3.2 保留空白与换行的方法

• 核心标签：<pre> 元素（预格式化文本标签）。
• 作用：浏览器会原样保留 <pre> 标签内的所有空白字符（空格、换行、制表符），不进行空白折叠。
• 本质原因：浏览器默认给 <pre> 元素添加了 CSS 样式 white-space: pre;，强制保留原始格式。
• 适用场景：展示代码、诗歌、需要固定格式的文本（如表格雏形、代码片段）。

---

四、HTML 实体（必备知识点）

4.1 实体的定义

• Q：什么是 HTML 实体？
• A：HTML 实体是一种特殊的字符编码，用于在页面中显示无法直接输入、或有特殊含义的字符（避免与 HTML 标签语法冲突）。
• 常见需用实体表示的字符：<（小于号，HTML 中是标签起始符号）、>（大于号，标签结束符号）、&（与号，实体的起始符号）、空格（特殊场景下需固定空格）、©（版权符号）等。

4.2 实体的两种书写形式

1. 命名实体：格式为 &实体名;，记忆方便，需记住常用实体的名称。
   • 示例：< 表示 <，> 表示 >，  表示空格（非换行空格），© 表示 ©。
2. 数字实体：格式为 &#实体编号;，兼容性更强，无需记忆名称，只需记住字符对应的编号。
   • 示例：< 表示 <，> 表示 >，© 表示 ©，  表示普通空格。

---

五、<a> 元素（超链接，高频知识点）

5.1 <a> 元素的核心属性

• 核心属性1：href（Hypertext Reference）—— 用于指定链接的目标地址，是 <a> 元素的必需属性（无 href 则不是有效超链接）。
• 核心属性2：target —— 用于指定链接的打开方式，可选值如下：
  • _self：默认值，在当前窗口/标签页打开链接。
  • _blank：在新窗口/新标签页打开链接（开发中最常用，避免跳转后关闭原页面）。

5.2 href 属性的三种取值类型（链接分类）

1. 普通链接：指向外部网页、本地文件等资源，分为两种：
   • 绝对路径：完整的资源地址，例如 href="https://www.baidu.com"（外部网页）、href="C:/test.html"（本地绝对路径）。
   • 相对路径：相对于当前 HTML 文件的路径，例如 href="./about.html"（同一文件夹下的文件）、href="../images/1.jpg"（上一级文件夹下的图片）。
2. 锚链接：指向当前页面内的某个锚点，实现页面内跳转，格式为 href="#锚点id"。
   • 使用方法：先给目标元素添加 id 属性（如 <section id="section1">第一部分</section>），再设置 <a href="#section1">跳转到第一部分</a>。
3. 功能链接：不指向具体资源，而是执行特定操作，常见场景：
   • 执行 JavaScript 代码：href="javascript:alert('欢迎访问');"（点击弹出提示框）。
   • 唤起邮件客户端：href="mailto:test@163.com"（点击唤起默认邮件，收件人已填写）。
   • 唤起拨号功能：href="tel:12345678901"（移动端点击直接拨号，PC 端无效果）。

5.3 补充说明

• <a> 元素的内容可以是文本、图片等，例如 <a href="https://www.baidu.com"><img src="logo.jpg" alt="百度"></a>（点击图片跳转）。
• 若暂时不需要指定具体链接，可设置 href="#"，表示“空链接”，点击后不会跳转（仅占位使用）。

---

六、核心总结

1. HTML 元素：由起始标记、结束标记、内容、属性组成，空元素无结束标记和内容。
2. 语义化：按内容含义选标签，核心价值是提升可维护性、优化 SEO、增强可访问性。
3. 文本处理：默认空白折叠，<pre> 标签可保留原始空白与换行。
4. HTML 实体：用于显示特殊字符，分命名实体和数字实体两种形式。
5. <a> 元素：核心属性 href（指定目标）和 target（指定打开方式），支持普通链接、锚链接、功能链接。