【基础标签（文档类型声明、html、title、body、h1~h6、p、br、hr、注释）

本文详细介绍了HTML的基础标签，包括文档类型声明、html、title、body等。阐述了各标签的作用、使用场景及省略后的影响，如文档类型声明可确保浏览器以标准模式渲染。还提及了hr标签用于分隔内容，注释标签在代码解释、团队协作等方面的重要作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础标签

1. HTML 的基础标签

1. HTML 的基础标签

1.1 基础标签有哪些 ?（文档类型声明、html、title、body、h1~h6、p、br、hr、注释）

用途	标签名
① 文档类型声明（html 版本、渲染模式）	`<!DOCTYPE>`
② html 文档（根元素；文档的开始和结束）	`<html>`
③ 文档标题（网页的标题、网页的主题是什么）	`<title>`
④ 文档主体（页面主要内容）	`<body>`
⑤ 文档内容的标题（页面主要内容的分级标题）	`<h1>-<h6>`
⑥ 段落（最基本的内容分组）	`<p>`
⑦ 换行；请不要用 `<br>` 来创建段落或增加文本之间的行间隔；请使用 `<p>` 元素来包装文本，并使用 CSS `margin` 属性来控制间隔大小。	`<br>`
⑧ 水平线（主题分隔，语义上）	`<hr>`
⑨ 注释（说明、纠错、条件注释、不解析）	`<!--...-->`

注：使用 <br> 创建单独的文本段落不仅是糟糕的做法，而且对于借助屏幕阅读技术进行浏览的人来说也是有问题的。屏幕阅读器可能会提示该元素的存在，但不包括 <br> 中的任何内容（空元素，无内容）。这可能会让使用屏幕阅读器的人感到困惑和沮丧。

1.2 ★ !DOCTYPE 文档类型声明 (第一行、用的哪一版本 HTML、渲染模式)

⑴ 什么是文档类型声明？有什么用？

<!DOCTYPE> 是一种标准通用标记语言的 文档类型声明，它告诉浏览器关于页面使用的 HTML 版本 和 渲染模式的信息。使用 <!DOCTYPE> 是非常重要的，因为它确保了浏览器以标准模式（也称为严格模式）渲染网页，而不是以怪异模式（quirks_{/kwɜːrks/，怪异} mode_/moʊd/）渲染。
- 在怪异模式下，浏览器会模拟旧版浏览器的行为，这可能导致网页的布局和表现与预期不符。而在标准模式下，浏览器会遵循最新的网页标准来渲染页面。
HTML 文档类型声明用什么 ?
- 一般使用<!DOCTYPE> 进行文档类型声明；
<!DOCTYPE> 声明一般放在什么位置 ?
- 必须是 HTML 文档的第一行， <html> 文档根标签之前。
  <!DOCTYPE> 是一个标签吗 ?
- 不是 HTML 标签；
如何快捷输入文档结构：
- 支持 emmet_{/ˈemɪt/，一种编程插件} 的编辑器中，如 webstorm 中，输入 html:5，按下 tab 键，会自动扩展出 5.0 版本的文档结构，包括 html 5.0 版本的文档类型声明。
<!DOCTYPE> 声明是否区分大小写 ?有没有结束标签 ?
- 没有结束标签，是一个空标签；
- 不区分大小写，但 html 5 中，为了让代码看起来更干净，一般建议文档类型声明、标签名、属性名、属性值全部小写；
如何检查是否编写了有效的 HTML / XHTML 文档 ?
- ❶ IDE 检查：编写代码的 IDE 也具有一定的检查功能，如 webstorm 编辑器；
  - IDE：abbr. 集成开发环境（integrated_{/ˈɪntɪɡreɪtɪd/} development_{/dɪˈveləpmənt/} environment_{/ɪnˈvaɪrənmənt/}），里面一般集成了各种各样的功能、插件等，具有一定的检查功能；
- ❷ 使用 W3C 的验证器 ：The W3C Markup_{/ˈmɑːrkʌp/，标记} Validation_{/ˌvælɪˈdeɪʃn/，验证} Service
HTML 4.01 与 HTML 5 之间有什么差异 ?
- 在 HTML 4.01 中有三种 <!DOCTYPE> 声明：严格、过度、框架集；
- 在 HTML 5 中只有一种；
- 在 HTML 4.01 中，为什么 <!DOCTYPE> 声明要引用 DTD (文档类型定义，document_{美，/ˈdɑːkjumənt/} type definition_{美，/ˌdefɪˈnɪʃn/})？
  - 因为 HTML 4.01 基于 SGML。
    - abbr. 标准通用标记语言（Standard_{/ˈstændərd/} Generalized_{/ˈdʒenrəlaɪzd/} Markup Language_{/ˈlæŋɡwɪdʒ/}）
    - 验证和错误检查：
      - DTD 定义了标记语言的合法结构，包括哪些元素可以出现，以及它们可以包含哪些其他元素。
      - 使用 DTD 可以帮助验证 HTML 文档是否符合规范，从而减少错误和不一致性。
- 在哪里规定了 标记语言的规则，使浏览器正确地呈现内容 ?
  - 在 DTD 中
    - DTD，abbr. 文档类型定义（document type definition）；
    - 总结 :文档类型定义 = DTD = 标记语言的规则 = DTD的网址；

⑵ 为什么 HTML5 不需要引用 DTD？

因为 HTML 5 不基于 SGML 标准通用标记语言；
HTML5 的文档类型声明（<!DOCTYPE html>）没有包含 DTD（文档类型定义），这是因为 HTML5 设计为不需要依赖于 DTD 来确定元素和属性的合法性。在 HTML5 中，元素和属性的合法性是由 HTML5 规范本身定义的，而不是通过 DTD。
- 在 HTML4 和 XHTML 中，DTD 被用来定义哪些元素和属性是有效的，以及它们如何组合。这是因为 HTML4 和 XHTML 都是 基于 SGML（标准通用标记语言）的，而 SGML 使用 DTD 来定义 文档结构。
- HTML5 与此不同，它是 基于 XML 的，但设计为 向后兼容，以便能够处理旧的 HTML4 文档。
  - XML：abbr. 可扩展标记语言（Extensive_{/ɪkˈstensɪv/} Markup Language）
- HTML5 规范详细描述了元素和属性的使用，而不是依赖于外部的 DTD 来定义这些规则。
- 这样做的好处包括：
  - 简化：HTML5 的 <!DOCTYPE> 声明非常简单，只有一行，这使得它更容易被记住和使用。
  - 兼容性：由于 HTML5 不依赖于 DTD，它更容易被旧的浏览器识别，即使这些浏览器不支持 HTML5 的所有新特性。
  - 灵活性：HTML5 允许更多的灵活性，因为它不强制使用特定的 DTD 结构。这使得开发者可以更容易地添加新的元素和属性，而不需要修改 DTD。
  - 错误容忍：HTML5 设计为更加容忍错误，这意味着即使文档中存在一些错误，浏览器也能够尽可能地正确渲染页面。
- 因此，HTML5 的 <!DOCTYPE> 声明是自闭合的，不需要引用任何 DTD，这有助于简化 HTML 文档的编写和处理。

⑶ 为什么一定要添加文档类型声明？省略会怎样？

为什么一定要向 HTML 文档添加 <!DOCTYPE> 声明，如果省略文档类型声明会怎样？
- 因为这样做浏览器才能知道文档类型，知道 html 的版本，才能更正确地显示。
- 如果省略了文档类型声明（<!DOCTYPE>），浏览器将无法获得关于文档类型和版本的重要信息，这可能导致以下情况：
  - ① 怪异模式（Quirks Mode）：浏览器可能会进入怪异模式，这意味着它将使用一种 兼容旧版浏览器 的渲染方式。在这种模式下，CSS 和 HTML 的表现可能与标准模式不同，导致布局和样式出现意外。
  - ② 兼容性问题：在怪异模式下，不同浏览器可能对 CSS 和 HTML 的解释存在差异，这可能导致跨浏览器兼容性问题。
  - ③ CSS 渲染问题：某些 CSS 属性可能无法按预期工作，或者表现不一致。例如，盒模型的计算方式可能与标准模式不同。
  - ④ JavaScript 行为变化：在怪异模式下，JavaScript 的某些行为也可能与标准模式不同，这可能影响脚本的执行。
  - ⑤ DOM 方法的不一致性：DOM 方法的行为可能与标准模式不同，这可能影响 DOM 操作和事件处理。
  - ⑥ 表单元素的默认样式：在怪异模式下，表单元素（如输入框和按钮）的默认样式可能会有所不同。
  - ⑦ 图像和媒体的渲染：图像和媒体元素的渲染也可能受到影响，比如图像的缩放行为。
  - ⑧ SEO 影响：搜索引擎优化可能会受到影响，因为搜索引擎爬虫可能无法正确解析和索引页面内容。
  - ⑨ 开发者工具的准确性：在怪异模式下，开发者工具可能无法提供准确的信息，这会影响调试和开发过程。
- 在现代浏览器中，即使省略了 <!DOCTYPE> 声明，浏览器通常也会尝试以标准模式渲染页面。但是，为了确保最佳兼容性和避免潜在的问题，最好还是包含一个 <!DOCTYPE html> 声明，特别是在开发需要广泛兼容性的网页时。

⑷ 常用的文档类型声明有哪些？

常用的 DOCTYPE 声明有哪些 ?
- html 5 、html 4.0、xhtml；
HTML 5 的文档类型声明是怎样的 ?
- <!DOCTYPE html>，仅一种；
HTML 4.01和 XHTML 的文档类型声明是怎样的 ?
- 根据 W3C 标准，为 XHTML 和 HTML 4.01 各规定了 3 种文档类型：严格、过渡、框架；
HTML 4.01 的 3 种文档类型声明
- ① Strict（严格型）：三者都无：无展示、弃用、框架集；
  - 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（例如 <font>）。不允许使用框架集（Framesets）。
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
- ② Transitional（过渡型）：无框架：有展示、弃用、无框架集；
  - 包含所有 HTML 元素和属性，包括展示性的和弃用的元素。也不允许使用框架集。
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
- ③ Frameset（框架型）：三者都有：有展示、弃用、框架集；
  - 等同于过渡型，包括展示性的和弃用的元素，但允许使用框架集内容。
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
```

需要使用 <!DOCTYPE> 的情况：
① HTML5：当你编写 HTML5 页面时，需要使用 HTML5 的 <!DOCTYPE> 声明。HTML5 的 <!DOCTYPE> 声明非常简单，如下所示：
```
<!doctype html>
```
这会告诉浏览器你正在使用 HTML5，并且应该以标准模式渲染页面。

② HTML 4.01：如果你需要支持 HTML 4.01，你需要使用对应的 <!DOCTYPE> 声明。例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

这个声明告诉浏览器你正在使用 HTML 4.01 严格、过渡、框架集版本。

③ XHTML 1.0：如果你的页面是 XHTML 1.0 格式的，你需要使用 XHTML 的 <!DOCTYPE> 声明。例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这个声明告诉浏览器你正在使用 XHTML 1.0 严格、过渡版本，并且页面应该以标准模式渲染。

举例说明：
- 假设你正在创建一个简单的 HTML5 页面，你希望确保浏览器以标准模式渲染它。你应该在 HTML 文档的最开始添加 HTML5 的 <!DOCTYPE> 声明，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>My HTML5 Page</title>
</head>
<body>
   <h1>Hello, World!</h1>
   <p>This is a simple HTML5 page.</p>
</body>
</html>

在这个例子中，<!DOCTYPE html> 声明告诉浏览器这是一个 HTML5 文档，浏览器将按照 HTML5 的标准来渲染页面。这是创建现代网页时最常用的 <!DOCTYPE> 声明。

1.3 ★ html （根元素：告诉浏览器文件是一个 HTML 文档）

1.3.1 什么是 html 标签，有什么用？

<html> 标签是 HTML 文档的 根元素，它定义了 整个文档的开始和结束。
- 在 HTML 文档中，<html> 标签是 必需的，因为它包含了所有的 HTML 内容，包括头部（<head>）和主体（<body>）部分。
- 允许的内容：一个 <head> 元素，后跟一个 <body> 元素；html > head + body;
- 允许的父元素：无。这是文档的根元素。（相当于一件礼物最外层的包装盒）
如何告诉浏览器文件自身是一个 HTML 文档 ?
- 使用 <html> 文档根标签；
- 总结 : <html> = 我是一个HTML 文档；
  - <html> 标签，相当于一个礼物盒，而且礼物盒的上面写着 “html” 的 logo，浏览器一看就知道里面放的是什么东西；
- 根元素: <html>文档根元素表示 HTML 文档的根 (根元素，顶级元素)，因此也称为 root_/ruːt/ 根元素。
- 祖先: 所有其他元素都必须是该元素的后代。其他元素都必须写在<html> 元素的内部，自身没有父元素，就像始祖一样。当然，根标签和文档类型声明是兄弟关系；
如何表示文档的 开始点和结束点 ?
- <html> 与 </html>
<html>文档根标签的 xmlns 命名空间属性（html-xmlns）是必需的吗 ?
- ns:namespace_/'neimspeis/，命名空间；
- 在 XHTML 中是必需的，在 HTML 中不是必需的；
- 如果 XHTML 文档中的 <html> 没有使用 xmlns 属性，W3C 的验证器会报错吗?
  - 不会报错。
    - 为什么不会报错 ?
      - 因为 "xmlns=http://www.w3.org/1999/xhtml" 是一个 固定值，没有包含它，这个值也会被添加到 <html> 标签中。
<html> 文档根元素中应该包含文档类型声明 <!DOCTYPE> 吗 ? 。
- 不包含 .<!DOCTYPE> 必须位于<html> 元素之前，和根标签是兄弟关系。

1.3.2 如果省略了 html 标签会怎样？

在标准的 HTML 文档中，<html> 标签是必需的，因为它定义了 整个文档的根元素。如果在你的 HTML 代码中省略了 <html> 标签，浏览器会尝试修复这个问题，但可能会导致不可预测的结果。以下是一些可能发生的情况：
- ①浏览器默认行为：大多数现代浏览器会尝试自动纠正这种错误，将未包含在 <html> 标签内的内容视为文档的一部分。这意味着即使没有 <html> 标签，内容仍然可能被显示，但可能不是按照你预期的方式。
- ② CSS 布局问题：由于 <html> 标签包含了整个文档，省略它可能会导致布局问题。例如，CSS 样式可能无法正确应用，因为样式表通常是基于 <html> 元素来设置的。
- ③ JavaScript 问题：JavaScript 代码可能依赖于 <html> 元素的存在。例如，如果你的脚本中使用了 document.documentElement 或者针对 <html> 元素设置了事件监听器，那么在没有 <html> 标签的情况下，这些代码将无法正常工作。
- ④ SEO 影响：搜索引擎优化（SEO）可能会受到影响，因为搜索引擎爬虫依赖于标准的 HTML 结构来解析和索引网页内容。没有 <html> 标签可能会导致内容无法被正确索引。
- ⑤ 辅助技术问题：屏幕阅读器和其他辅助技术可能依赖于标准的 HTML 结构来正确读取和解释网页内容。没有 <html> 标签可能会使这些技术难以理解页面结构，从而影响残障用户的访问体验。
- ⑥ 跨浏览器兼容性：不同的浏览器可能以不同的方式处理缺少 <html> 标签的情况，这可能导致跨浏览器兼容性问题。
- 为了确保你的网页能够被正确渲染，并且具有良好的可访问性和兼容性，建议始终在 HTML 文档中包含 <html> 标签。这是一个简单且重要的步骤，可以避免许多潜在的问题。

1.3.2 html 根标签的常用属性

属性	值	用于
~~manifest~~	=url	已废弃 . 缓存清单的文件地址；定义一个 URL，这个 URL 指示应在本地缓存的资源。
`xmlns`	=`http://www.w3.org/1999/xhtml`	限定版本中使用，定义 XML namespace 命名空间属性，xhtml 版本中才使用，html 5 版本中不使用。
`lang`	=“语言代码” ，`zh-CN` 简体中文；`en` 英语；	指明文档内容使用的是什么语言。是 `html` 标签中最常用的属性。（注：`lang` 语言属性，是个全局属性，但是在 `html` 标签中最常使用。）

<html> 标签是 HTML 文档的根元素，它定义了整个文档的结构和内容。<html> 标签可以包含多个属性，以下是一些常见的属性及其使用情况：
. ① lang（文档的语言）：
- 用途：定义文档的语言。
- 使用场景：当你的网页内容主要使用一种语言时，应该使用此属性来 指定语言代码。这有助于搜索引擎优化和辅助技术（如屏幕阅读器）正确处理语言。
```
<html lang="en">
    
</html>
```
② dir（文档文本方向）：
- 用途：定义文档的文本方向。
- 使用场景：如果你的文档需要从右到左（如阿拉伯语或希伯来语）显示文本，可以使用此属性设置文本方向。
```
<html dir="rtl">
    
</html>
```
③ manifest（缓存清单的文件地址，已废弃）：
- 用途：指定一个资源文件，该文件包含了文档的缓存清单。
- 使用场景：在应用离线缓存时使用，允许网页在没有网络连接的情况下被访问。
  - manifest_{/ˈmænɪfest/，清单} 本地缓存资源属性，使用时会有个背景色，鼠标放上去，会提示是弃用的属性。
```
<html manifest="app.manifest">
    
</html>
```
④ xmlns （xml 命名空间，xhtml 中使用）：
- 用途：定义 XML 命名空间。
- 使用场景：在 XHTML 文档中使用，用于指定 XML 命名空间的 URI。
```
<html xmlns="http://www.w3.org/1999/xhtml">
    
</html>
```
⑤ xml:lang（在 XHTML 中使用）：
- 用途：定义文档的语言，与 lang 属性类似，但在 XHTML 中使用时需要加个前缀 xml: ⇒ xml:lang。
- 使用场景：在 XHTML 文档中指定语言。
```
<html xml:lang="en">
    
</html>
```
在 HTML5 中，<html> 标签通常只需要 lang 属性来指定文档的语言。其他属性要么不推荐使用，要么只在特定情况下（如 XHTML）需要。大多数现代网页都使用 HTML5，因此 lang 属性是最常见和最重要的 <html> 标签属性。

⑴ lang：文档语言属性（文档的语言：zh-CN 简体中文；en 英语）

① lang 文档语言属性
- 用途：定义 文档的语言。
- 使用场景：当你的网页内容主要使用一种语言时，应该使用此属性来 指定语言代码。这有助于搜索引擎优化和辅助技术（如屏幕阅读器）正确处理语言。
  - lang 是英语 language_{/ˈlæŋɡwɪdʒ/，语言} 的缩写；
  - 最常用的属性值： en 代表英语，zh-CN 代表简体中文。
  - lang 是全局属性，但一般在html 标签中使用的最多，用来指明整个文档内容使用的语言。
例： csdn 网站中使用的就是 zh-CN，这里的 lang="zh-CN" 属性指定了该文档的主要语言是中文，并且特别指明是简体中文（“zh-CN” 是简体中文的国际标准语言代码）。

② 定义 lang 属性有什么好处？
- ❶ 辅助技术：辅助设备如屏幕阅读器可以根据语言代码正确地发音和处理页面上的中文文本。
- ❷ 搜索引擎优化（SEO）：搜索引擎可以利用这个属性来更好地理解网页内容，从而在搜索结果中提供更准确的匹配。
- ❸ 国际化和本地化：对于需要支持多种语言的网页，lang 属性帮助区分不同语言的内容，确保翻译的准确性和文化适应性。
  - 如 MDN 网站，可以切换成不同的语言，切换后，这个属性的属性值就会跟着变化；以下是英语、简体中文、日语时的样子；
- ❹ 用户体验：浏览器可以根据语言代码调整界面元素，如日期和时间格式，以及文本的排版方向等，以适应该语言用户的阅读习惯。
简而言之，这个属性告诉浏览器和任何处理网页内容的软件，该文档的主要语言是什么，从而确保内容的正确呈现和处理。

③ 国际标准语言代码
- 国际标准语言代码由 ISO 639 系列标准定义（ISO：International Organization for Standardization，国际标准化组织），其中最常用的是 ISO 639-1，它提供了每种语言的两个字母的代码。此外，还有 ISO 639-2（三个字母代码，分为术语和辅助语言两种）和 ISO 639-3（三个字母代码，包含更多语言）。这些代码被广泛应用于计算机系统、网站多语言版本、出版业、图书馆学以及信息和文献管理等领域。
- 一些常见的 ISO 639-1语言代码示例：
  - 英语：en
  - 简体中文：zh-CN （CN：中国 China）
  - 德语：de
  - 法语：fr
  - 西班牙语：es
  - 俄语：ru
  - 日语：ja
  - 韩语：ko
- 这些代码有助于 标准化语言的识别，尤其是在多种文化中，同一语言可能有不同的名称，或者不同语言可能有相似的名称。
  - 例如，中文的简化字版本使用"zh-CN"表示，而繁体字版本使用"zh-TW"表示台湾地区使用的中文， "zh-HK"表示香港地区使用的中文。
  - 查看完整的语言代码列表：国家语言代码对照表_国际化（i18n）各国语言缩写表；

⑵ xmlns： xml 命名空间属性（xml 命名空间、仅限 xhtml 文档、命名冲突）

① <html> 文档根标签的 xmlns命名空间属性
- <html> 标签的 xmlns 属性用于为文档指定一个 XML 名称空间（XML Namespace）。这个属性通常只在 XHTML 文档中使用；
- XHTML 是一种将 HTML 与 XML 结合的标记语言，它要求文档 符合 XML 的规范。
② 使用 xmlns 属性的原因：
- ❶ XML 命名空间：在 XHTML 中，xmlns 属性定义了 XHTML 元素和属性的命名空间，确保了 XHTML 文档的合法性和规范性。
- ❷ 文档类型声明：XHTML 文档需要一个文档类型声明（DOCTYPE），而 xmlns 属性与 DOCTYPE 一起使用，以确保文档被浏览器正确解析为 XHTML。
- ❸ 兼容性：使用 xmlns 属性有助于确保文档在不同的浏览器和设备上具有更好的兼容性，尤其是在处理 XML 和 XHTML 内容时。
- ❹ 验证：XHTML 文档需要通过验证，以确保其符合 XHTML 规范。xmlns 属性是验证过程中的一个重要部分。
③ 不使用 xmlns 属性的后果：
- ❶ 非标准 XHTML：如果你的文档声明为 XHTML 但未使用 xmlns 属性，那么它可能不会被解析为有效的 XHTML，这可能导致在某些环境下出现兼容性问题。
- ❷ 验证失败：没有 xmlns 属性，XHTML 文档将无法通过 W3C 的验证，因为它不符合 XHTML 的规范要求。
- ❸ 浏览器解析问题：虽然现代浏览器通常可以很好地处理没有 xmlns 属性的 XHTML 文档，但在某些情况下，缺少这个属性可能导致解析问题。
- ❹ 限制使用：某些基于 XML 的工具和服务可能要求文档具有 xmlns 属性，否则可能无法正确处理文档。
例：一个标准的 XHTML 1.0 文档应该包含以下声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>XHTML Document</title>
</head>
<body>
    <p>This is an XHTML document.</p>
</body>
</html>

在这个例子中，<html xmlns="http://www.w3.org/1999/xhtml"> 指定了 XHTML 的命名空间，这是 XHTML 文档的一个标准部分。
总的来说，xmlns 属性在 XHTML 中是重要的，但在 HTML5 中不是必需的，因为 HTML5 不是基于 XML 的。在 HTML5 中，<html> 标签通常只需要 lang 属性来指定文档的语言。

如何定义 XML namespace (XML的命名空间 ) ?
- 使用 html-xmlns 命名空间属性
- 指定文档的 XML 命名空间。默认值是 "http://www.w3.org/1999/xhtml"
- 使用范围: 这在使用 XML 解析器解析的文档中，即 xhtml 文档中是必需的，在 HTML 中，xmlns 属性是无效的，就是说，在最新版本的 html 5 版本中没有必要使用这个属性。
xmlns 属性的属性值一般是 ?
- http://www.w3.org/1999/xhtml
- 固定值 :html-xmlns="http://www.w3.org/1999/xhtml"
如何在文档中定义一个或多个可供选择的命名空间 ?
- 使用xmlnsxml 命名空间属性
html-xmlns命名空间属性可以放置在什么位置?
- 文档内 任何元素的 开始标签中.不仅仅是 <html>文档根标签中.
xmlns 属性的属性值一般是 ?
- 类似于 URL，它定义了一个命名空间
- 固定值 :http://www.w3.org/1999/xhtml
浏览器会将此xmlns命名空间属性命名空间用在哪里 ?
- 该属性所在元素内的所有内容。
如果需要使用符合 XML 规范的 XHTML 文档，如何 指定整个文档所使用的主要命名空间 ?
- 在文档中的<html> 根标签中使用一个 xmlns命名空间属性
- xmlns 属性详细内容
- XML 命名空间（XML Namespaces）
为什么要定义 xmlns 命名空间属性 ?
- XML 命名空间的作用是 : 提供避免元素命名冲突的方法。
- 有必要理解存在着多个命名空间，以便在需要选择将基于某个 DTD 的内容，嵌入其他 DTD 定义的内容中时，可以管理多个命名空间。

1.4 ★ title 定义文档的标题（网页的标题、网页的主题）

<title> 标签是 HTML 文档中非常重要的一个标签，它定义了网页的标题，并且这个标题会显示在 浏览器的标签页上。
- 内容分类：元数据内容；
- 允许内容：非空字符或特殊字符的文本；
- 允许的父标签：一个 <head> 元素只能包含一个 <title> 元素；
- 使用位置：<title>元素始终在页面的 <head> 标签内使用；

⑴ 需要使用 title 标签的情形：页面主题、搜索引擎、浏览器标签、书签、预览标题、简要描述

以下是一些需要使用 <title> 标签的情况：
- ① 定义网页标题：每个 HTML 页面都应该有一个 <title> 标签，它告诉 用户、搜索引擎 这个页面的主题 是什么。
```
<!DOCTYPE html>
<html>
<head>
    <title>My Blog- 优快云 博客</title>
</head>
<body>
    
</body>
</html>
```
- ② 搜索引擎优化（SEO）：<title> 标签是搜索引擎用来确定页面内容和相关性的重要因素之一。一个好的标题可以提高页面在搜索结果中的排名。
  - 网页标题及搜索引擎优化 SEO
    - abbr. 搜索引擎优化（Search Engine_/ˈendʒɪn/ Optimization_{/ˌɑːptɪməˈzeɪʃn/，最优化}）
  - ❶ 页面标题和搜索优化: 页面标题的内容对搜索引擎优化(SEO)有重要的影响；
  - ❷ 长描述性标题更佳: 一般来说，较长的描述性标题比较短或缺乏灵感的标题效果更好；
  - ❸ 搜索结果出现顺序: 标题的内容是算法用来决定在搜索结果中列出页面的顺序的组件之一；
  - ❹ 吸引读者: 浏览搜索结果页面时，标题也是吸引读者注意力的初始“钩子”。
- ③ 浏览器标签和书签：当用户将网页添加到书签或者查看打开的标签页时，<title> 标签的内容会显示在浏览器标签上，方便用户识别不同的页面。
- ④ 社交媒体分享（预览标题）：当用户在社交媒体上分享网页链接时，<title> 标签的内容通常会被用作预览的标题。
- ⑤ 辅助技术（简要描述）：对于使用屏幕阅读器等辅助技术的用户来说，<title> 标签提供了页面的简要描述，帮助他们理解页面的主要内容。
- ⑥ 文档打印：在某些情况下，当用户打印网页内容时，<title> 标签的内容可能会被包含在打印的文档页眉或页脚中。
- ⑦ 多语言支持：在多语言网站中，<title> 标签可以根据不同的语言版本进行本地化，以提供更准确的页面描述。
- 总之，<title> 标签是 HTML 文档中不可或缺的一部分，它不仅有助于提升 用户体验，也是网站内容在互联网上被正确识别和索引的关键因素。

⑵ 省略 title 标签的负面影响

如果一个网页省略了 <title> 标签，可能会有以下几个影响：
- ① 浏览器标签显示：浏览器标签页可能会显示文件名或者默认的浏览器名称，而不是网页的实际内容或主题。这可能会让用户难以区分不同的标签页，尤其是当多个标签页打开的是同一网站的页面时。
- ② 搜索引擎优化（SEO）：搜索引擎可能会降低该页面的排名，因为 <title> 标签是搜索引擎用来评估页面内容和相关性的重要因素之一。没有 <title> 标签，搜索引擎可能无法准确理解页面的主题。
- ③ 用户体验：用户在浏览历史记录或书签时，可能难以识别没有标题的页面，从而影响用户体验。
- ④ 社交媒体分享：如果用户在社交媒体上分享该网页，预览可能不会显示一个吸引人的标题，这可能会减少点击率。
- ⑤ 辅助技术：使用屏幕阅读器等辅助技术的用户可能会遇到障碍，因为他们依赖 <title> 标签来快速了解页面的主要内容。
- ⑥ 文档打印：在打印网页时，如果没有 <title> 标签，打印的文档可能不会包含页面标题，这可能会影响文档的可读性和专业性。
- ⑦ 浏览器兼容性：大多数现代浏览器都能够处理没有 <title> 标签的网页，但是某些旧版浏览器或特定的浏览器配置可能会以不同的方式处理这种情况。
总的来说，虽然省略 <title> 标签不会导致网页无法显示，但它确实会对用户体验、搜索引擎优化和页面的可识别性产生负面影响。因此，建议在每个 HTML 页面中都包含一个 <title> 标签。

⑶ title 标签的使用讲解

如何定义 文档的标题（网页的标题） ?
- 使用 <title> 文档标题标签
- 文档标题: 定义显示在 ❶ 浏览器页面选项卡（标签页）中的文档标题。它只包含文本，元素中的标签被忽略。
- 什么是浏览器标题栏？
  - 浏览器顶部，即为标题栏
  - 标题栏在计算机软件中，位于窗口最顶部。显示当前应用程序名、文件名等，在许多窗口中，标题栏也包含程序图标、“最小化”、“最大化”、“还原”和“关闭”按钮以及“帮助”的按钮，可以简单地对窗口进行操作。
- 什么是页面选项卡（标签页）？
  - 选项卡显示的是目前所有打开的网页，一个标签页显示一个网页。
  - 打开了三个网页，三个选项卡（标签页）。
  - 可以看到页面选项卡，是标题栏的一部分。
浏览器会怎样使用<title> 文档标题标签的内容 ?
- ❶ 标签页：通常把它放置在浏览器窗口的 标签页或状态栏上。
  - 下方是网页的快捷方式，选中后，显示在 windows 窗口的状态栏中。
- ❷ 书签：当把网页加入收藏夹或书签列表时，标题将成为该网页的 默认名称。
<title> 文档标题标签一般放在哪里 ?
- <head> 头部标签中，head>title，作为头部标签的子标签。
- <title> 文档标题标签是<head> 头部标签必需的子元素吗 ?
  - 是的，一个 <head>有且仅有一个<title>，因为一个网页往往有且只有一个大的主题。
<title> 文档标题标签的内容，一般要有什么特点 ?
- 说明文档的内容主题；
写好网页标题的指导方针和技巧
- ① 简洁明了：标题应该简洁且直接，能够快速告诉用户这个页面是关于什么的。
  - 但标题不能过短+ 要有描述性: 避免使用一两个单词的标题。
- ② 不能过长，重要的写在前面:
  - 不超过60个字符：为了确保标题在大多数设备上都能完整显示，建议不超过60个字符。
  - 前 55-60个字符: 搜索引擎通常会显示页面标题的前55-60个字符。
    - 超过这个长度的文本可能会丢失，所以尽量不要有超过这个长度的标题。
  - 重要的写在前: 如果必须使用更长的标题，请确保重要的部分出现得更早，并且标题中可能被删除的部分没有关键内容。
- ③ 不要使用特殊字符: 尽可能避免使用特殊字符;并不是所有的浏览器都会以相同的方式显示它们。
  - 例如，“<”经常在窗口标题栏中显示为＆lt;
- ④ 包含关键词：在标题中包含与页面内容相关的关键词，有助于搜索引擎理解页面的主题。
  - 不要只使用“关键字块”: 如果你的标题只是一个单词列表，算法通常会人为地降低页面在搜索结果中的位置。
  - 避免填充关键词：不要为了 SEO 而过度填充关键词，这可能会降低用户体验，并且可能被搜索引擎视为垃圾信息。
- ⑤ 吸引用户：标题应该能够吸引用户的注意力，促使他们点击链接。
- ⑥ 独特性：每个页面的标题应该是独特的，即使是相似的内容页面，也应该有细微的差别。
  - 标题的特别性: 确保你的标题在你自己的网站中尽可能的独一无二。重复或接近重复的标题会导致搜索结果不准确。
- ⑦ 品牌识别：如果适用，可以在标题的末尾加上品牌名，这有助于建立品牌识别度。
<title> 标签的内容是网页的标题，它不仅显示在浏览器的标签页上，还对搜索引擎优化（SEO）有重要影响。以下是一些编写 <title> 标签内容的建议：
例：假设你有一个关于“人工智能”的博客文章页面，标题可以这样写：

	<title>人工智能简介 - 优快云 博客</title>

在这个例子中，标题简洁明了地说明了页面的主题（“人工智能简介”），并且包含了关键词（“人工智能”）。同时，它还包含了品牌名（“CDSN 博客”），有助于用户识别内容来源。

例：另一个例子，如果你有一个电子商务网站，销售特定的产品，标题可以这样写：

	<title>最新款手机 华为 mate 20 - 优快云 商城</title>

这里，“最新款手机华为 mate 20”是用户可能搜索的关键词，而“优快云商城”则是品牌名，有助于用户知道他们正在访问的是哪个网站。
记住，一个好的标题应该是对用户和搜索引擎都友好的，它应该准确 反映页面内容，同时 吸引用户点击。

例：为页面定义一个标题

<head>
	<title>演示实例的页面</title>
</head>

在这里插入图片描述

<title> 标签的属性：全局属性（适用于所有标签的属性）；
- <title> 标签本身并没有特定的属性，因为它是一个简单的容器，用于定义网页的标题，并且这个标题会显示在浏览器的标签页上。不过，<title> 标签可以使用全局属性；
- 尽管<title>标签可以包含全局属性，但在实际应用中，我们通常不会在 <title> 标签中使用它们，因为大多数属性对于定义网页标题并不适用。<title>标签的主要目的是简洁明了地定义网页的标题，以便于用户和搜索引擎理解页面内容。

1.5 ★ body 定义文档的主体内容（主要内容、可见内容的容器）

⑴ 什么是 body 标签？有什么用？

<body> 标签在 HTML 中用于定义文档的主体部分，即网页的主要内容。它是网页中 所有可见内容的容器，包括文本、图片、链接、表格、列表等。
- 内容分类：无。
- 允许的内容：流式内容。
- 允许的父元素：它必须是 <html> 元素的第二个元素。
如何定义文档的主体 ?
- 使用 <body> 文档主体标签
- 文档的内容: <body>标签表示 HTML 文档的内容。
- 数目: 一个文档中只能有一个<body>标签。
- 位置: 它必须是 <html>根标签的第二个标签。为什么是第二个？因为第一个是<head>头部标签，从上往下，先有头，才有主体，有上下顺序。
网页中显示的内容，比如文本、超链接、图像、表格和列表等等，一般都放在哪里 ?
- <body> 文档主体标签中，一般body标签中的内容，都是显示给用户看的，而head头部标签中的内容，则给浏览器看的，它们服务的对象是不同的。
HTML 与 XHTML 的<body> 文档主体标签有什么区别 ?
- 在 HTML 4.01 中
  - 所有 body 文档主体元素的“呈现属性” 均不赞成使用。
- 在 XHTML 1.0 Strict DTD 中
  - 所有 body 元素的“呈现属性”均不支持。
- 呈现属性有哪些 ?
  - 如 background、bgcolor、text 等标签原来的 样式化的属性，基本上都废弃了，使用 css 代替。

以下是<body>标签的用途和一些例子：
- ① 内容展示：
  - <body> 标签包含了网页的所有可见内容，用户在浏览器窗口中看到的内容几乎都包含在 <body> 标签内。
- ② 样式和布局：
  - 通过 CSS，<body> 标签可以控制网页的整体样式和布局，比如背景颜色、字体、边距等。
- ③ 脚本执行：
  - <body>标签可以包含 JavaScript 代码，这些代码可以控制网页的行为和交互。
- ④ SEO 优化：
  - <body>标签中的内容对搜索引擎优化（SEO）至关重要，因为它包含了网页的主体内容。
- ⑤ 结构划分：
  - 虽然 <body> 标签本身不用于结构划分，但通过在 <body> 中使用如 <header>、<footer>、<section>等语义化标签，可以更好地组织和划分网页结构。
举例说明：
① 基本的 <body> 标签用法：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
</body>
</html>

在这个例子中，<body> 标签包含了网页的标题和一个段落。
② 使用 CSS 样式化 <body> 标签：

<body style="background-color: lightblue;">
  <h2>带有背景颜色的网页</h2>
  <p>这段文字的背景颜色被设置为浅蓝色。</p>
</body>

这里，<body> 标签使用了内联样式来改变背景颜色。
③ 在 <body> 标签中包含 JavaScript：

<body>
  <button onclick="alert('欢迎!')">点击我</button>
</body>

在这个例子中，<body>标签包含了一个按钮，当用户点击按钮时，会执行一个 JavaScript 函数，显示一个警告框。
④ 使用<body>标签进行 SEO 优化：

<body>
  <h1>重要关键词 - SEO优化</h1>
  <p>这个段落包含了一些针对搜索引擎优化的关键词。</p>
</body>

在SEO中，<body> 标签中的关键词有助于提高网页在搜索引擎中的排名。
⑤ 在 <body> 标签中划分结构：

<body>
  <header>这里是头部信息</header>
  <section>这里是主要内容区域</section>
  <footer>这里是底部信息</footer>
</body>

这个例子中，<body> 标签被用来组织网页的不同部分，使其结构更加清晰。
<body> 标签是HTML文档中不可或缺的部分，它为网页的主要内容提供了一个容器，并允许开发者通过 CSS 和 JavaScript 来增强网页的外观和行为。

⑵ 如果省略 body 标签会怎样？（文档结构不完整、影响相关显示和行为）

在HTML文档中，<body> 标签是定义文档主体的关键部分，如果省略了<body>标签，会导致以下情况：
- ① 内容不显示：
  - 浏览器将不会显示任何内容，因为没有 <body> 标签来包含和定义页面的主体内容。
- ② 结构不完整：
  - HTML文档的结构将不完整，因为<body>标签是HTML标准中定义的必需部分。
- ③ 浏览器默认行为：
  - 一些浏览器可能会尝试自动修复这种错误，通过添加一个隐含的<body>标签来展示页面内容，但这并不是所有浏览器的通用行为。
- ④ CSS 和 JavaScript 问题：
  - 如果 CSS 和 JavaScript 代码依赖于<body>标签中的元素，它们可能无法正确执行，因为缺少了必要的上下文。
举例说明：
① 省略<body>标签的HTML文档：

<!DOCTYPE html>
<html>
<head>
  <title>缺少Body标签的页面</title>
</head>
<!-- 缺少了<body>标签 -->
</html>

在这个例子中，页面将不会显示任何内容，因为没有 <body> 标签来包含页面的主体内容。
② 浏览器尝试修复：

<!DOCTYPE html>
<html>
<head>
  <title>浏览器尝试修复</title>
</head>
<!-- 浏览器可能会自动添加<body>标签 -->
<p>这段文字可能显示，取决于浏览器如何处理缺少<body>的情况。</p>
</html>

在某些情况下，浏览器可能会自动添加一个隐含的 <body> 标签，使得页面内容得以显示，但这种行为并不是所有浏览器都保证的。
③ CSS 和 JavaScript 依赖问题：

<!DOCTYPE html>
<html>
<head>
  <title>CSS和JavaScript依赖</title>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
  <script>
    document.body.onload = function() {
      alert('页面加载完成！');
    }
  </script>
</head>
<!-- 缺少了<body>标签 -->
</html>

在这个例子中，CSS 样式和 JavaScript 代码都依赖于<body>标签，但由于缺少<body>标签，背景颜色不会改变，页面加载完成的提示也不会显示。
总的来说，省略 <body> 标签会导致 HTML 文档的结构不完整，内容无法显示，并且可能导致 CSS 和 JavaScript 代码无法正常工作。因此，始终建议在 HTML 文档中包含 <body> 标签。

1.6 ★ h1~h6 定义文档内容的标题

⑴ 什么是 h1~h6 标签？有什么用？

<h1> 到 <h6> 是 HTML 中的标题标签，用于定义文档中的内容标题。这些标签按照 重要性递减 的顺序定义标题的六个级别，其中 <h1> 是最高级别，通常用于主标题，而 <h6> 是最低级别，用于最小的小节标题。
- 内容类别：流式内容，标题内容，可触知的内容；
- 允许内容：短语内容；
- 允许的父元素：任何接受流内容的元素；不要把它作为 <hgroup> 元素的子元素，这种做法已经被废弃了。
  - 不应该使用<hgroup>，因为没有辅助技术支持它，因此它对放置在其中的标题的辅助有不利影响。
如何定义文档内容的标题 ?
- <h1> 到 <h6> 内容标题标签
- <h1>–<h6> 标题(Heading_/ˈhedɪŋ/)元素呈现了六个不同的级别的区段标题，<h1> 一级标题标签的级别最高，而 <h6> 六级标题标签的级别最低。
- 属性: 这些元素只包含全局属性。
如何定义最大的标题（级别最重要的标题 /主标题）?
- <h1>一级内容标题标签
如何定义最小的标题（级别最低的标题） ?
- <h6> 六级内容标题标签
注意事项
- 内容标题标签一般用于什么样的内容 ?
  - 用于 标题文本。
- 可以为了产生粗体文本而使用标题标签吗 ?
  - 不可以。因为标题标签是有语义的，并非只是粗体。如果只是为了粗体的样式，可以使用 CSS 代替。
使用说明
- ❶ 自动构造目录: 例如，用户代理可以使用标题信息自动构造文档的目录。
- ❷ 不要跳级使用按顺序: 避免跳过标题级别:总是从<h1>开始，然后使用<h2>、<h3>… 以此类推。
  - 标题间跳转: 屏幕阅读软件用户常用的一种导航技术是从一个标题跳转到另一个标题，以快速确定页面的内容。因此，很重要的一点，就是不要跳过一个或多个标题级别。这样做可能会造成混淆，因为以这种方式导航的人可能会想知道丢失的标题在哪里。
- ❸ 仅用一次<h1>: 避免在页面上多次使用<h1>，就像一本书，只有一个书名一样，一个大主题；
- ❹ 避免用来调整大小: 避免使用标题标签来调整文本大小，因为是有语义的。
  - 相反，使用 CSS 字体大小属性 font-size 来调整文字大小。标题的大小用来表示它们的相对重要性，但是 CSS 更适合用于一般用途的调整大小。

示例1: 所有标题

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

在这里插入图片描述

字体的大小反应了不同级别标题的重要性

示例2: 标题
- 标题和页面内容结构: 次级标题放在上级标题的下方，如 h1+h2+h3，三个兄弟标签，有先后顺序，级别高的放前面，级别低的放后面，可以反映页面内容的组织结构。大多数屏幕阅读器还可以生成页面上所有标题的有序列表，这可以帮助用户快速确定内容的层次结构：优快云就采用了这种技术自动生成目录。

示例3: <h1>~<h6> 六个级别的标题，搭配 aria-labelledby属性
- aria-labelledby 属性详解
- id属性值被当作特别的标签使用： aria-labelledby属性用来表明某些元素的id是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系。
- 屏幕阅读器和标签: 使用诸如屏幕阅读器等辅助技术的用户通常使用 tab 键在页面的不同区域间进行导航。如果一个输入元素、控件或控件组没有被分配一个 label 标签，那么屏幕阅读器就无法对其进行阅读，有的话，就能把这个相关的标签读出来。
- 标题和相关内容相关联: 标题元素与标题相关的内容相关联。
  - 标题的 id 属性，相关性内容区的 div 的 aria-labelledby=h1 的 id，两个属性的属性值一样的。

<div role="main" aria-labelledby="foo">
   <h1 id="foo">Wild fires spread across the San Diego Hills</h1>
   Strong winds expand fires ignited by high temperatures ...
</div>

以下是 <h1> 到 <h6> 标签的用途和一些例子：
- ① 定义标题：
  - <h1> 到 <h6> 标签用于创建不同级别的标题，帮助组织和结构化网页内容。
- ② 语义化：
  - 这些标签提供了文档结构的语义信息，有助于搜索引擎优化（SEO）和屏幕阅读器等辅助技术。
- ③ 样式化：
  - 标题标签通常具有默认的样式，如加粗和较大的字体大小，但也可以通过 CSS 进行自定义样式设置。
- ④ 内容突出：
  - 使用标题标签可以突出文档中的重要部分，提高内容的可读性和易用性。
举例说明：
① 主标题：

<h1>这是主标题</h1>
<p>这是段落文本，描述了主标题下的内容。</p>

在这个例子中，<h1> 标签定义了页面的主要标题。

② 子标题：

<h1>主标题</h1>
<h2>子标题</h2>
<p>这是段落文本，描述了子标题下的内容。</p>

这里，<h2> 标签定义了主标题下的子标题。
③ 多级标题：

<h1>主标题</h1>
<h2>子标题</h2>
<h3>子子标题</h3>
<p>这是段落文本，描述了子子标题下的内容。</p>

这个例子展示了如何使用多个级别的标题来创建文档的层级结构。
④ 标题样式化：

<h1 style="color: red;">红色主标题</h1>
<p>这是段落文本，描述了主标题下的内容。</p>

在这个例子中，<h1> 标签使用了内联样式来改变标题的颜色。

⑤ 标题与内容关联：

<h2>用户评论</h2>
<ul>
  <li>用户A：非常好的产品！</li>
  <li>用户B：服务不错，推荐。</li>
</ul>

这里，<h2> 标签定义了一个标题，而下面的无序列表 <ul> 包含了与标题相关的内容。
使用 <h1> 到 <h6> 标签有助于创建结构化的文档，提高内容的可访问性和搜索引擎的友好性。合理使用这些标题标签可以使网页内容更加清晰和有条理。

⑵ 什么情况下需要使用 h1~h6 标签？

<h1> 到 <h6> 标签在 HTML 中用于创建不同级别的标题，它们应该在以下情况下使用：
- ① 组织内容层次：
  - 当你需要定义页面的主要标题和子标题时，使用这些标签可以清晰地展示 内容的结构。
  - 例如：在一篇文章中，<h1> 可以用来表示文章的标题，<h2> 表示文章内的小节标题，<h3> 表示小节下的小标题等。
- ② 强调重要内容：
  - 当你想要强调页面中的重要信息或关键词时，使用 <h1> 到 <h6> 标签可以提高这些内容的可见性。
  - 例如：在产品介绍页面上，<h1> 可以用来突出显示产品名称，<h2> 来突出产品的关键特性。
- ③ 辅助阅读：
  - 当你希望帮助用户快速了解页面内容，使用标题标签可以让用户通过扫描标题来抓住页面的主要内容。
  - 例如：FAQ 页面上，<h2> 可以用来为每个问题提供一个清晰的标题，使查找特定问题的答案变得更加容易。
- ④ 提高 SEO 效果：
  - 当你想要优化网页的搜索引擎排名时，使用这些标签特别是 <h1> 标签，可以提高关键词的权重。
  - 例如：在博客文章中，<h1> 标签包含文章的主题关键词，有助于搜索引擎理解文章的主题。
- ⑤ 无障碍性：
  - 当你想要提高网页的无障碍性，使用标题标签可以帮助屏幕阅读器用户更好地 理解内容结构。
  - 例如：在内容复杂的页面上，适当的使用 <h1> 到 <h6> 标签，可以帮助视觉障碍用户通过听觉了解页面结构。
举例说明：
① 组织文章内容：

<article>
  <h1>文章的主标题</h1>
  <p>文章的摘要或介绍。</p>
  <section>
    <h2>小节标题一</h2>
    <p>小节内容。</p>
    <h3>小节下的子标题</h3>
    <p>子标题下的内容。</p>
  </section>
  <section>
    <h2>小节标题二</h2>
    <p>小节内容。</p>
  </section>
</article>

在这个例子中，<h1> 到 <h6> 标签用来表示文章的结构，帮助读者理解内容的层次。
② 产品页面强调特性：

<div>
  <h1>超级笔记本电脑</h1>
  <h2>高性能处理器</h2>
  <p>详细介绍处理器的性能。</p>
  <h2>出色的显示效果</h2>
  <p>详细介绍显示屏的特点。</p>
</div>

在这个产品介绍页面中，<h1> 和 <h2> 标签用来强调产品的名称和关键特性，同时吸引用户的注意。

⑶ 如何正确使用 h1~h6 标签来优化 SEO？

要正确使用 <h1> 到 <h6> 标签来优化 SEO，可以遵循以下指导原则：
- ① 每个页面只使用一个 <h1> 标签：
  - <h1>标签是页面中最重要的标题标签，它定义了页面的主要主题。搜索引擎如 Google_{/ˈɡuːɡl/，谷歌} 建议每个页面只使用一个<h1>标签，以避免混淆搜索引擎，明确页面的主要内容。
- ② <h1> 标签应包含关键词：
  - 在<h1>标签中合理地包含目标关键词，这有助于搜索引擎理解页面的主题，并提高页面针对这些关键词的排名。
- ③ <h1> 标签与标题标签 <title> 相匹配：
  - Google 建议 <h1> 标签与页面的标题标签 <title>（显示在浏览器标签页、搜索结果中的标题）相匹配或非常相似，以避免用户感到困惑，提高用户体验。
- ④ 优化<h1>以满足搜索意图：
  - <h1>标签应该快速告知读者页面内容将满足他们的搜索目标，这有助于提高页面的相关性和排名。
- ⑤ 使用 <h2> 到 <h6> 标签构建内容层次：
  - <h2>到<h6>标签用于定义内容的子标题，形成有层次的内容结构。这有助于搜索引擎更好地理解网页的层次结构，同时也提高了用户体验。
- ⑥ 在<h2>到<h6>标签中使用关键词：
  - 虽然<h1>标签是最重要的，但在<h2>到<h6>标签中适当使用关键词也可以提高内容的相关性，尤其是<h2>和<h3>标签，它们通常用作副标题，对于 SEO 有较大的影响。
- ⑦ 保持标题标签的自然和可读性：
  - 在标题标签中使用关键词时，应确保语句通顺自然，避免堆砌关键词，以免影响可读性和用户体验。
举例说明：

<!DOCTYPE html>
<html>
<head>
  <title>页面标题 - 网站名称</title>
</head>
<body>
  <h1>页面标题</h1> <!-- 包含主要关键词 -->
  <p>页面的主要内容...</p>
  <h2>子标题一</h2> <!-- 包含次要关键词 -->
  <p>子标题下的内容...</p>
  <h3>子标题二</h3>
  <p>子标题下的内容...</p>
  <!-- 其他内容 -->
</body>
</html>

在这个例子中，<h1> 标签定义了页面的 主要主题，并包含主要关键词。<h2> 和 <h3> 标签用于定义子标题，形成清晰的内容结构，有助于搜索引擎优化。

1.7 ★ p 定义段落（最基本的内容分组）

⑴ 什么是 p 标签？

<p> 标签是 HTML（HyperText Markup Language）中的一个元素，用于定义一个段落（paragraph_{/ˈpærəɡræf/}）。它是网页内容排版中最基本的结构之一，用来将 文本内容分组 为 独立的、意义完整的区块。
- 内容分类：流式内容、可感知内容；
- 允许的内容：短语内容；
- 允许的父元素：任何接受流式内容的元素；
以下是 <p> 标签的一些关键特性：
- ① 双标签：<p> 是一个双标签元素，需要一个开始标签 <p> 和一个结束标签 </p> 来包围需要格式化为段落的文本。
- ② 默认样式：大多数浏览器会给 <p> 标签默认添加一些样式，比如上下外边距（margin_{/ˈmɑːrdʒɪn/}），使得段落之间有明显的间隔，以提高阅读体验。
- ③ 可继承样式：<p> 标签可以继承其父元素的 CSS 样式，也可以通过 CSS 直接对 <p> 标签设置样式，如字体大小、颜色、对齐方式等。
- ④ 内容分隔：在页面布局中，<p> 标签用于分隔不同的内容，使得文本内容条理清晰，逻辑分明。
- ⑤ 语义化：<p>标签具有明确的语义化特征，它告诉浏览器和辅助技术（如屏幕阅读器）这些标签内的文本应该被视为一个段落。
- ⑥ 搜索引擎优化（SEO）：合理使用 <p> 标签有助于搜索引擎更好地理解页面结构和内容，从而可能对搜索引擎排名产生积极影响。
举例说明：

<p>这是一个段落。它包含了一些文本，并且被 p 标签包围。</p>
<p>这是另一个段落，它自动地与上一个段落保持一定的间隔。</p>

在上述代码中，两段文本分别被<p>标签包围，形成了两个独立的段落。

如何定义段落 ?
- 使用段落标签 <p>
  - paragraph 美 /ˈpærəɡræf/
- <p>表示一个段落。
  - ① 文本块: 段落通常在可视媒体中表示为文本块，文本块通过空行和 / 或第一行缩进与相邻的块分隔开。
    - 段落: 指根据文章或事情的内容、阶段划分的相对独立的部分。
  - ② 相关联内容分组: HTML 段落可以是相关内容的结构化分组，比如图像或表单字段。
- 块级元素: 段落标签p 是块级元素；
- 自动关闭: 值得注意的是，如果在结束标记</p>之前解析另一个块级元素，段落将自动关闭，意思是，其他的块级元素的前后也会自动换行，那就相当于是段落中多了一个段落，就不只是一个段落了，看上去像是有两个段落。如下，两段，两个独占一行的。
  - 如果只要一个段落，p标签中，最好别包含其他的块级标签，否则会自动换行，看上去就是多出来一个段落。

    <p>
        <h2>二级标题</h2>
        我是段落内容
    </p>

<p> 段落元素在显示上有什么特点 ?
- 浏览器会自动在其 前后自动换行。
  - 显示结果：

    </p>
    段落前
    <p>聪明出于勤奋，天才在于积累。——华罗庚</p>
    段落后

分段和可访问性
- ❶ 更容易访问: 将内容分成段落有助于使页面更容易访问。
  - 为屏幕阅读器和其他辅助技术提供了快捷方式，让用户跳过下一段或上一段，让他们浏览内容，比如空白键如何让视觉用户跳过。
- ❷ 不要使用空的<p>段落添加空白
  - 使用空的<p>元素在段落之间添加空格对于使用屏幕阅读技术导航的人来是有问题的。屏幕阅读器可以显示段落的存在，但不能显示其中包含的任何空内容，因为没有任何内容。这可能会使使用屏幕阅读器的人感到困惑，明明是一个段落，怎么没有任何东西？
- ❸ 创建段落间空白: 如果需要额外的空间，使用 CSS 属性，如外边距 margin 外边距来创建效果:

示例1: 两个文本块段落

<head>
	<style>
		p {
		    margin: 10px 0;
		    padding: 5px;
		    border: 1px solid #999;
		}
	</style>
</head>
<body>
	<p>壁虎通常是一群夜间活动的小型蜥蜴。除了澳大利亚，其他大陆都有。</p>
	 
	<p>有些物种生活在房子里，它们捕捉被人造光吸引的昆虫。</p>


</body>

在这里插入图片描述

不带样式的两个段落

⑵ 什么情况下需要使用 p 标签？（组织文本、可读性、应用 css 、增强 seo、辅助技术）

<p> 标签在 HTML 中用于定义段落，以下是一些需要使用 <p> 标签的情况，并附上相应的例子：
① 组织文本内容：
- 当你需要将文本内容分成几个逻辑区块时，可以使用 <p> 标签。
- 例如：在一篇文章中，每个段落都使用 <p> 标签来组织。
```
<p>这是文章的第一个段落，介绍了主题的背景信息。</p>
<p>这是第二个段落，深入探讨了主题的细节。</p>
```
② 改善网页可读性：
- 当你希望改善网页的可读性，使内容更易于阅读和理解时，使用<p>标签。
- 例如：在 FAQ 页面上，每个问题和答案都用<p>标签分隔。
```
<p>问：什么是HTML？</p>
<p>答：HTML是一种用于创建网页的标准标记语言。</p>
```
③ 应用 CSS 样式：
- 当你想要通过 CSS 对文本段落进行样式设计时，<p> 标签提供了一个选择器。
- 例如：给所有段落文本设置特定的字体和颜色。
```
<p style="font-family: Arial; color: #333;">这个段落的字体是Arial，颜色是深灰色。</p>
```
④ 增强 SEO 效果：
- 当你想要优化网页内容的搜索引擎排名时，合理使用 <p> 标签有助于搜索引擎更好地理解内容结构。
- 例如：在博客文章中，每个段落都包含关键词，并且被 <p> 标签包围。
```
<p>在优化搜索引擎排名时，使用正确的关键词非常重要。</p>
<p>关键词应该自然地融入到文章的每个段落中。</p>
```
⑤ 辅助技术兼容：
- 当你考虑到辅助技术（如屏幕阅读器）的用户时，使用 <p> 标签有助于这些技术正确解读网页内容。
- 例如：确保屏幕阅读器用户能够理解每个段落的开始和结束。
```
<p>这是一个重要的安全提示。请务必遵守所有安全指南。</p>
```
⑥ 创建多段落内容：
- 当你需要在网页上展示包含多个段落的内容时，使用 <p> 标签来分隔每个段落。

例如：在用户指南或教程中，每个步骤都用<p>标签标记。

<p>步骤1：连接到互联网。</p>
<p>步骤2：打开浏览器并访问网站。</p>
<p>步骤3：登录并开始使用服务。</p>

使用<p>标签有助于创建结构化、清晰、易于阅读的网页内容，同时也有助于提高网页的可访问性和搜索引擎优化。

1.8 ★ hr 分隔主题水平线（语义上、非表现上）

<hr> 标签在 HTML 中代表水平分隔线，用于在页面上创建一条横向的直线，以视觉上分隔内容或段落。
- 空元素：这个标签是一个空标签，意味着它没有闭合标签，没有标签内容，只需要一个 <hr> 就可以创建一条分隔线。
  - horizontal，/ˌhɔːrɪˈzɑːnt(ə)l/，水平线；
- 内容分类：流式内容。
- 允许的内容：无，是一个空元素。
- 标签省略：必须有开始标签，不能有结束标签。
- 允许的父元素：所有接受流式内容的元素。
以下是 <hr> 标签的一些用途：
- ❶ 内容分隔：在页面的不同部分之间创建视觉上的分隔，比如分隔介绍文本和评论部分。
- ❷ 强调章节变化：在文档的不同章节之间使用，以突出章节的变化，类似于书本中的分节符。
- ❸ 改善可读性：通过提供视觉上的间隔，增加页面的可读性和美观性。
- ❹ 简化布局：在不需要复杂布局的情况下，快速简单地分隔内容。

如何在 HTML 页面中创建一条水平线 ?
- 使用<hr> 主题分隔水平线标签
- ❶ 主题中断(主题分隔): <hr>水平线元素表示段落级元素之间的主题中断:例如，一个故事中的 场景更改，或者一个段落中的 主题转换。
- ❷ 语义性不仅仅是水平线: 历史上，这一直被表示为一条水平线。
  - 虽然在可视浏览器中它仍然可以作为水平线显示，但是现在这个元素是语义术语 而不是表示术语，所以如果只是希望绘制一条水平线而内容没有语义上的区别，应该使用适当的 CSS。
水平分隔线（horizontal rule）可以在视觉上有什么特点 ?
- 将文档分隔成各个部分。(分隔文档)
- 美 /ˌhɔːrɪˈzɑːntl/ 美 /ruːl/

<hr> 标签在 HTML 中用来创建一条水平分隔线，以视觉上和语义上区分内容或段落。

以下是一些使用<hr>标签的情况，并附上相应的例子：（一般都是主题有变化，因为语义在视觉上进行分隔）
① 分隔不同内容：
- 当你的页面上有不同的内容区块，比如介绍和评论，你可以使用<hr>标签来分隔它们。

<p>这是一段关于产品的介绍。</p>
<hr>
<p>这是用户对产品的评论。</p>

② 强调章节变化：
- 在文章或文档中，如果你想要强调章节之间的变化，可以在章节之间使用<hr>标签。

<h2>第一章：介绍</h2>
<p>第一章的内容。</p>
<hr>
<h2>第二章：使用方法</h2>
<p>第二章的内容。</p>

③ 改善页面布局：
- 当你想要改善页面的布局和可读性，可以在不同的部分之间添加 <hr> 标签，以提供视觉上的间隔。

<section>
  <h3>新闻标题</h3>
  <p>新闻内容。</p>
</section>
<hr>
<section>
  <h3>另一个新闻标题</h3>
  <p>另一个新闻内容。</p>
</section>

1.9 ★ < !–…–> 在 html 代码中插入注释

⑴ 什么是注释标签？

如何在 html 的源代码中插入注释 ?
- 使用注释标签  ；
注释的内容会显示在浏览器中吗 ?
- 不会；
注释标签的用途有哪些 ?
- ① 代码解释 : 如何对代码进行解释 ?
  - 使用注释标签 
  - 这段代码干什么用的，写明白了，团队合作的时候，队友很容易看懂，自己看代码也容易抓住主题。
- ② 隐藏脚本: 如何隐藏浏览器不支持的脚本 ?
  - 使用注释标签 ，只在结束的位置多了个 //；

<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>

注释：注释行结尾处的两条斜杠 //有什么用 ?
- 是 JavaScript 注释符号。可以避免 JavaScript 执行-->标签。
html 注释的作用
- 说明文档代码
  - 适当的解释说明提高 代码可读性；
- 纠错
  - 比如可以一次注释一行 HTML 代码，以搜索错误。
多注释: 多使用注释标签是很好的习惯，开发网站的时候，注释有利于理解。
浏览器不解析: 注释的内容，是给开发者看的，浏览器是不解析的。
html 注释的快捷键:
- 单行注释: ctrl + / (可先选中要注释的区域)
- 多行注释: ctrl+shift+ / (可先选中要注释的区域)

<!-- 此刻不显示图片：
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->

定义只在 IE 中执行的 HTML 代码
- 使用 条件注释；
  - 开始和结束的基础标签：  连字符后面多了个方括号 + if ： [if xxx]>
- 条件注释的结束如何表示? 和普通注释的区别是什么?
  - 结束标签：<![endif]-->
    - <!--> 连字符前面多了个方括号 + endif：多了个[endif]

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

在优快云的博客中可以看到的条件注释

<!--[if lte IE 11]>
    <meta name='csdn-browser-upgrade'  content='为了获得更好的写作体验，建议更换<a href="https://www.google.cn/chrome/">Chrome</a>或<a href="http://www.firefox.com.cn/">FireFox</a>最新版浏览器'>
    <![endif]-->

    <!--[if lte IE 11]>
      <script src="https://g.csdnimg.cn/browser_upgrade/1.0.2/browser_upgrade.js"></script>
    <![endif]-->

在这里插入图片描述

⑵ 什么情况下需要使用注释标签？（说明、临时移除、不解析、条件注释）

在 HTML 中使用注释标签的情况 ，通常包括但不限于以下几种：

① 说明代码：为代码块添加解释，以便其他开发者或未来的自己理解代码的目的和功能。

<!-- 导航栏开始 -->
<nav>
  <!-- 导航链接 -->
  <a href="index.html">首页</a>
  <a href="about.html">关于我们</a>
</nav>
<!-- 导航栏结束 -->

② 临时移除代码：在调试过程中，可能需要暂时移除某些代码段，而不删除它们，以便之后可以恢复。
```

```
③ 避免浏览器解析：有时候，你可能需要在 HTML 中包含一些不能直接显示的代码，比如 JavaScript 代码或者服务器端代码片段，注释可以防止浏览器尝试解析这些代码。
```

<script>
  console.log('Hello, world!');
</script>
```
④ 条件性注释：在旧的 IE 浏览器中，可以使用条件性注释来针对特定版本的 IE 浏览器应用特定的样式或脚本。
```

```
⑥ SEO 优化：有时候，开发者会在注释中添加一些 SEO 相关的信息，比如页面的描述、关键词等，尽管这些信息对用户不可见，但可以提供给搜索引擎。
```


```
⑦ 防止代码被复制：在一些情况下，开发者可能会在注释中添加一些代码，这些代码对用户不可见，但可以防止页面被简单地复制粘贴。（如果用户是开发者可以使用 F12 查看源代码，就能看到注释了）
```

```
使用注释是一种良好的编程实践，它有助于保持代码的清晰性和可维护性。

⑶ 注释标签在团队协作中有什么用？（说明：可读性、沟通；维护、调试、学习、协作开发）

在团队协作中，注释标签发挥着重要的作用，以下是一些具体的应用场景：
- ① 提高代码可读性：通过在代码中添加注释，可以帮助团队成员更快地理解代码的功能和逻辑，尤其是对于复杂的代码块。
  - 在处理一个复杂的算法时，开发者可能会在代码中添加注释，解释算法的逻辑和关键步骤，这样在未来需要维护或优化这段代码时，其他开发者可以更容易地接手。
- ② 促进沟通：注释可以作为一种沟通工具，让团队成员之间通过代码注释进行非正式的沟通，比如指出潜在的问题、提出改进建议或者说明代码变更的原因。
  - 例：在一个多人开发的项目中，如果一个开发者添加了一段复杂的代码，他可以通过注释来解释这段代码的目的和工作原理，这样其他团队成员在阅读代码时就能更快地理解其意图。
- ③ 文档化：注释可以作为代码的即时文档，尤其是对于那些不容易从代码本身直接理解的部分，注释提供了额外的上下文信息。
  - 例：在处理与第三方服务集成的代码时，开发者可能会添加注释来说明如何与该服务交互，包括 API 的使用方法和任何需要注意的事项。
- ④ 维护和调试：在代码维护和调试过程中，注释可以帮助团队成员快速定位问题所在，尤其是那些被注释掉的代码块，可能包含了问题的临时解决方案或者历史记录。
  - 变更历史：当一个功能被重构或者代码被修改时，开发者可以在相应的代码块旁边添加注释，说明变更的原因、日期以及变更人，这样其他团队成员可以追踪代码的变更历史。
  - 记录测试信息：在测试代码时，开发者可能会添加注释来记录测试用例和测试结果，这样其他团队成员在进行回归测试时可以快速了解测试情况。
- ⑤ 教育和培训（辅助新成员）：对于新加入团队的成员，注释可以帮助他们更快地熟悉项目和代码库，理解团队的编码风格和项目结构。
  - 对于新加入团队的成员，通过阅读项目中的关键注释，他们可以更快地理解项目的架构和代码逻辑，加速他们的学习曲线。
- ⑥ 协作开发：在多人协作开发时，注释可以帮助团队成员了解哪些部分是其他人正在工作的，避免工作重叠或者冲突。
  - 避免代码冲突：在多人同时编辑同一个文件时，开发者可以在他们正在工作的代码部分添加注释，说明这部分代码正在被谁修改，这样其他团队成员在查看代码时可以避免不必要的冲突。
  - 标记待办事项：开发者可能会在代码中添加注释来标记尚未完成的功能或者需要进一步讨论的问题；
    - 例如： TODO: 实现登录功能，这样团队成员可以清晰地看到项目中还有哪些待办事项。
- ⑦ 版本控制：虽然版本控制系统（如 Git）提供了变更历史记录，但注释可以提供更详细的变更说明，尤其是在快速迭代的项目中。
- ⑧ 遵守规范：在一些项目中，可能会有特定的编码规范要求，注释可以帮助团队成员遵守这些规范，确保代码的一致性。
- ⑨ 法律和合规性：在某些情况下，注释可以用来记录版权信息、合规性声明等法律相关的信息，这对于团队和项目来说是很重要的。
- ⑩ 紧急修复：在紧急情况下需要快速修复 bug 时，注释可以帮助团队成员理解问题所在，并快速实施修复，同时记录修复的背景和原因。
- 总之，注释标签是团队协作中不可或缺的一部分，它有助于提高团队的工作效率和项目的可维护性。