HTML5学习

<u> 作者：jason-wrj </u>

<u> 分类：服务器/网络服务器/HTML </u>

<u> 标签：Server, Web Server, HTML </u>

1 HTML简介

1.1 简介

HTML的英文全称是（Hyper Text Markup Language），中文名称是超文本标记语言。HTML 是一种用于定义网页结构和内容的标记语言，而非编程语言，因为HTML 缺乏逻辑处理能力，不包含变量、循环等逻辑控制。

HTML 是通过各种元素的标签（TAG）进行“标记”（Markup），以此来描述网页内容，在 Web 浏览器中显示。是万维网的通用标记语言。HTML 是万维网的核心技术之一，也是网页开发的基础。

所有网页均基于 HTML 构建，浏览器通过解析 HTML 标签并渲染为可视化页面。

1.2 特性

超文本特性

支持超链接（Hyperlink），实现文档间的跳转与资源关联。
平台无关性

可在（Windows、macOS等）任何操作系统的浏览器中解析显示。
简单易学

语法直白，标签易学。通过使用各种标签定义页面元素，描述页面结构（文档类型、根标签、头部、主体、标题、导航栏、侧边栏、段落、页脚）。
可扩展性

大多数 HTML 元素的标签可拥有属性，标签通过属性可以提供额外信息，增强元素功能。例如：
- <a href="https://example.com">中的href指定链接地址。
- <img src="image.jpg" alt="示例图片">中的src和alt指定源路径和替代文本。
- <div class="container" id="main">中的class和id用于样式选择和脚本操作。

1.3 基本结构框架

HTML 文档是由各种元素的标签嵌套而组成，所有 HTML 文档需包含以下基本框架：

<!DOCTYPE html> <!-- 文档类型声明 DOCTYPE 标签：声明文档类型为HTML5标准 -->

<html lang="zh-CN"> <!-- 根元素 html 标签，语言 lang 属性：定义语言为中文 -->

<head> <!-- 头部元素 head 标签：定义元数据（字符集编码、标签页标题） -->
  <meta charset="UTF-8" /> <!-- 元数据信息 meta 标签，字符集 charset 属性：定义字符集编码为UTF-8 -->
  <meta name="description" content="网页描述" />
  <meta name="keywords" content="网页关键词" />
  <meta name="viewport" content="width=device-width"> <!-- 视口元素 viewport 可以确保页面以设备的视口宽度进行渲染，避免移动端浏览器以比视口更宽的宽度渲染内容，导致内容缩小。-->
  <title>标签页标题</title> <!-- 标题 title 标签：定义显示在浏览器标签页的标题 -->
  <base target="_blank" href="http://www.example.com/" /> <!-- 文档根 URL 元素：定义文档中相对 URL 地址的基础 URL -->
  <link rel="shortcut icon" href="favicon.ico" /> <!-- 连接 link 标签：设置网站图标 -->
  <link rel="alternate icon" type="image/svg+xml" href="favicon.svg" /> <!-- 连接 link 标签：设置网站图标 -->
  <link rel="stylesheet" type="text/css" href="MyStyle.css"> <!-- 连接 link 标签：引入外部 CSS 层叠样式表 -->
  <script type="text/JavaScript" src="MyScript.js" > <!-- 脚本 script 标签：引入外部 JavaScript 脚本 -->
</head>

<body> <!-- 主体元素 body 标签：包含所有用户可见元素（文本、图片、表单等） -->
  <h1>可见内容：主标题</h1> <!-- 一级标题 h1 标签：属于页面可见内容 -->
  <p>可见内容：段落文本</p> <!-- 段落 p 标签：属于页面可见内容 -->
  <img />
  <a> </a>
  <div> </div>
  <span> </span>
</body>

</html>

DOCTYPE 声明：使用 <!DOCTYPE html> 声明文档类型，通知浏览器这是一个 HTML5 标准的网页文档，为文档内容的正确呈现和验证奠定基础，使浏览器能按照标准模式来解析和显示页面。
根元素标签：使用 <html> 和 </html> 包含整个页面（除声明文档类型标签之外）的其它所有元素标签，是其它所有 HTML 元素的根元素标签，其他 HTML 元素标签都应该嵌套在这个根元素标签内部。通过 lang 属性定义语言（如中文用 zh-CN ）。
头部元素：使用 <head> 和 </head> 包含网页文档的元数据，如字符编码声明、网页描述、网页关键词、标签页标题、 CSS 样式链接、JavaScript 脚本引用等信息，这些内容不会在网页的正文中显示。可以添加在头部区域内的元素标签有：<meta> 、 <title> 、 <link> 、 <style> 、 <script> 、 <noscript> 、 <base>。
- <meta /> 元素标签，可以用于指定网页字符集、网页关键词、网页描述等元数据，这些元数据不会显示在页面上，但会被浏览器解析，关键词和描述有助于提升可读性、可访问性与 SEO 优化。例如：<meta name="keywords" content="HTML, CSS, JavaScript">。
- <title> </title> 元素标签，用于描述标签页的标题，会显示在浏览器的标签页。
- <base /> 元素标签，用于定义文档中相对 URL 地址的基础 URL。放置在所有需要包含 href 属性的元素的最前面，且一份HTML文档中只能有一个 <base> 元素，放在 <link /> 元素或 <a> </a> 元素最前面。
- <link /> 元素标签，规定了当前文档与某个外部资源的关系，常用于链接到外部 CSS 层叠样式表。也可以被用来创建站点图标，或加载外部资源。
主体元素：使用 <body> 和 </body> 承载用户可见的网页主体内容部分，包括文本、图像、链接、列表、表格、音频、视频、表单等各种可见元素都放置在这个标签内，用于向用户展示实际的网页内容。
注释：使用  添加HTML代码注释。

1.4 与 CSS 层叠样式表协同

通过在 HTML 元素标签内直接使用 "style" 属性，可添加行内样式，进而控制网页的外观和布局。

<p style="color:blue;margin-left:20px;">这是一个内联style样式属性的段落。</p>

通过在 HTML 头部 <head> 元素标签区域内使用 <style> 标签，可添加内部层叠样式表，进而控制网页的外观和布局。

<head>
    <style type="text/css"> 
        body { background-color: lightblue; } 
        p {color: red;}
    </style>
</head>

通过在 HTML 头部 <head> 元素标签区域内，使用 <link> 标签，可引用外部 CSS 层叠样式表文件，进而控制网页的外观和布局。

<head>
    <link rel="stylesheet" type="text/css" href="MyStyle.css">
</head>

1.5 与 JavaScript 脚本协同

JavaScript 常用于图片操作、表单验证以及内容动态更新。通过使用 <script> 标签定义客户端脚本，可实现网页交互功能。<script> 标签既可直接包含脚本语句，也可通过 "src" 属性指向外部脚本文件。直接包含脚本语句，如下所示：

<p>
    <script> alert("欢迎！"); </script>
</p>

JavaScript 能够直接写入 HTML 输出流中：

<script>
    document.write("<h1>一级标题</h1>");
    document.write("<p>文本段落。</p>");
</script>

通过 <noscript> 和 </noscript> 定义浏览器不支持脚本时，所需要输出的文本内容。

<script>
    document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

通过在 HTML 头部 <head> 元素标签区域内，使用 <script> 和 </script> 标签添加外部 JavaScript 脚本文件。

<head>
  <script type="text/JavaScript" src="MyScript.js" > <!-- 脚本 script 标签：引入外部 JavaScript 脚本 -->
</head>

2 HTML语法

2.1 元素标签说明

HTML元素（Element）包含标签（Tag）和内容（Content）。

HTML 各元素（Element）的标签（Tag）是由尖括号包围的关键词，比如标题 <h1> 、段落 <p>。HTML 标签可分为双标签和单标签。

双标签是成对出现的，比如 <head> 和 </head>。标签对中的第一个标签是开始标签，第二个标签是结束标签。双标签可以嵌套包含其它双标签或单标签。

单标签标签不是成对的，比如 <img /> 、 <br /> 、 <hr />。这种只有开始标签，没有结束标签。单标签没有结束标签，因此建议标签编写时，在右侧右尖括号 > 前面增加反斜杠 / 符号，例如 <br > 编写为 <br />，即在开始标签中添加反斜杠，是关闭单标签的正确方法。单标签不能嵌套包含其它标签。

2.2 标签语法规则

属于双标签的 HTML 元素可以嵌套包含其他 HTML 元素，HTML 文档是由相互嵌套的 HTML 元素标签构成。且要求双标签的每一对开始标签（Opening tag）和结束标签（Closing tag）必须正确闭合，（如 <div> <p> 内容 Content </p> </div>），禁止出现双标签不成对的交叉嵌套。

例如 <html> 和 </html> 元素定义了整个HTML文档，内部包含了 <body> 和 </body> 元素，而 <body> 和 </body> 元素可以包含 <p> 和 </p> 元素。

行内元素与块级元素
- HTML内联元素在浏览器显示时，后面的元素不会以新行开始。例如以下元素标签： <span> 、 <b> 、 <td> 、 <a> 、 <img>。
- HTML块级元素在浏览器显示时，默认占用一整行，后面的元素会以新行来开始和结束。例如以下元素标签： <div> 、 <h1> 、 <p> 、 <ul> 、 <ol> 、 <table>。

元素的属性格式

大多数 HTML 元素标签拥有属性，属性总是 name="value" 这样的（名称/值对）形式写在开始标签内，name 是属性的名称，value 是属性的值。属性值用引号包围（如 <img src="image.jpg" alt="描述">）。

属性值被包围在引号内。双引号是最常用的，不过使用单引号也可以使用。在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号。又比如属性值本身就含有单引号，那么必须使用双引号。
代码大小写规范

HTML 标签里的元素名不区分大小写，但推荐使用小写，在未来 (X)HTML 版本中强制使用小写。

2.3 元素标签的常用属性

HTML 元素标签通过属性值的设置，可以提供需要额外添加的信息，用于定义元素的内容、样式、行为或其他特性，增强元素功能。

下面所列出的属性，适用于大多数 HTML 元素。

适用所有元素的属性
- 全局属性
  
  id，class，style，title
- 自定义属性
  
  data-*
适用特定元素的属性

href，src，alt，type，value，checked，placeholder，target
事件处理属性

onclick，onmouseover，onchange
布尔属性

disabled，readonly，required，autoplay

属性的详细说明，如下表所示：

属性名	适用元素	说明
class	所有元素	为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
data-*	所有元素	用于存储自定义数据，通常通过 JavaScript 访问。
id	所有元素	为元素指定唯一的标识符。
onclick	所有元素	当用户点击元素时触发 JavaScript 事件。
onmouseover	所有元素	当用户将鼠标悬停在元素上时触发 JavaScript 事件。
style	所有元素	用于直接在元素上应用 CSS 样式。
title	所有元素	为元素提供额外的提示信息，通常在鼠标悬停时显示。
target	`<a>`, `<form>`	指定链接或表单提交的目标窗口或框架（如 _blank 表示新标签页）。
href	`<a>`, `<link>`	指定链接的目标 URL。
autoplay	`<audio>`, `<video>`	自动播放媒体。
alt	`<img>`	为图像提供替代文本，当图像无法显示时显示。
src	`<img>`, `<script>`, `<iframe>`	指定外部资源（如图片、脚本、框架）的 URL。
checked	`<input type="checkbox">`, `<input type="radio">`	指定复选框或单选按钮是否被选中。
type	`<input>`, `<button>`	指定输入控件的类型（如 text, password, checkbox 等）。
value	`<input>`, `<button>`, `<option>`	指定元素的初始值。
placeholder	`<input>`, `<textarea>`	在输入框中显示提示文本。
disabled	表单元素	禁用元素，使其不可交互。
onchange	表单元素	当元素的值发生变化时触发 JavaScript 事件。
readonly	表单元素	使输入框只读。
required	表单元素	指定输入字段为必填项。

2.4 基本框架标签

文档类型标签
- 使用 <!DOCTYPE> 定义文档类型。
HTML 根元素标签
- 使用 <html 属性> 内容 </html> 定义一个 HTML 文档。
HTML 头部元素标签
- 使用 <head> 内容 </head> 定义关于文档的头部信息。
- 使用 <title> 内容 </title> 为文档定义一个标题。
- 使用 <meta /> 定义关于 HTML 文档的元数据信息、关键词、描述。
- 使用 <base /> 定义页面中所有链接的默认地址或默认目标。默认链接地址定义后，其它链接可以用相对地址，即相对于默认链接的地址。
- 使用 <link /> 定义一个文档和外部资源之间的关系，可用于链接外部层叠样式表。
- 使用 <style 属性> 内容 </style> 定义HTML文档的样式文件。
- 使用 <script 属性> 内容 </script> 定义客户端的脚本文件。
HTML 主体元素标签
- 使用 <body> 内容 </body> 定义 HTML 文档的可见内容主体。
- 使用 <h1> 内容 </h1>、<h2> 内容 </h2>、<h3> 内容 </h3>、<h4> 内容 </h4>、<h5> 内容 </h5>、<h6> 内容 </h6> 定义网页的内容标题（Heading）。在标题h1~h6（Header 1 ~ Header 6）中，<h1> </h1> 是最高级标题，字号最大，<h2> </h2> 次之，依此类推，<h6> </h6> 是最低级标题，字号最小。
- 使用 <p 属性> 内容 </p> 创建一个文本段落（Paragraph），<p> </p> 是块级元素标签，块级元素默认占用一整行，会在段落前后添加一些默认的空白距离，使文本内容更具可读性。创建文本段落中，如果有连续的空格或空行都会被算作一个空格。
- 使用 <hgroup> H标题 P副标题/关联内容 <hgroup> 创建文档标题和与标题相关联的内容，将一个 <h1>–<h6> 元素与一个或多个 <p> 元素组合在一起。
- 使用 <br /> 定义简单的折行（Break），在文本中强制换行。不添加额外的空白距离，常用于诗句、地址等需要换行的地方。
- 使用 <hr /> 定义水平线（Horizontal Rule）。
注释标签
- 使用  添加代码注释。

2.5 块级布局元素标签

分隔符区块容器分组元素标签

使用 <div 属性> 内容 </div> （Division），定义 HTML 页面中的一个分隔区块。区块容器分组标签，属于块级元素，且默认占用一整行。<div> </div> 主要是用于组合其他 HTML 元素的块级容器分组标签，以便通过CSS 层叠样式表来对这些组合元素进行格式化。
语义化区块容器分组元素标签

推荐优先使用下面所列出的各种语义化标签替代 <div> </div> 标签定义区块分组内容，以便提升可读性、可访问性与 SEO 优化。区块容器分组标签，属于块级元素，且默认占用一整行。语义化标签如下所示：

使用 <header 属性> 内容 <header> ，定义文档页面或者文档的一部分区域的顶部页眉内容，该元素标签应该作为介绍内容或者导航链接栏的容器。注意：<header> 标签不能被放在 <footer> 、 <address> 或者另一个 <header> 元素内部。
使用 <nav 属性> 内容 </nav> ，定义页面的导航链接（navigation）。
使用 <main 属性> 内容 </main> ，定义文档的主体部分。在一个文档中，不能出现多个<main>元素。
使用 <footer 属性> 内容 </footer> ，定义文档页面或者文档的最近的祖先区域的底部页脚内容。一般情况下，该元素用于包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等。联系信息，可以在 <footer> 元素内使用 <address> 标签。
- 使用 <address> 内容 </address> ，定义文档作者的联系信息。
使用 <article 属性> 内容 </article> ，定义页面的文章内容，该元素标签的内容本身必须是有意义的且必须是独立于文档的其余部分。表示文档、页面、应用或网站中具有独立分发或复用意义的自包含内容块。
使用 <aside 属性> 内容 </aside> ，表示文档中内容仅与主内容间接相关的部分，页面所处内容之外的内容，该元素标签的内容应该与附近的内容相关，通常以侧边栏或提示框的形式呈现。
使用 <section 属性> 内容 </section> ，定义页面的某个区域、内容区块。比如章节、头部、底部，没有更具体的语义元素来表示，可包含（Heading）标题元素。
使用 <details 属性> 内容 </details> ，定义页面的补充细节，用户可见的内容或者隐藏的需求。与 <summary> 标签配合使用可以为 <details> 元素定义标题。标题是可见的，用户点击标题时，才会显示出 <details> 元素的具体内容。<details> 元素的内容默认对用户是不可见的，除非设置了open属性。
- 使用 <summary> 标题 </summary> ，嵌套在 <details> </details> 里面，<summary> 标签为 <details> 元素定义一个可见的标题，当点击标题时才会显示出详细信息。注意：<summary> 元素标签应该是 <details> 元素的第一个子元素标签。
使用 <dialog 属性> 内容 </dialog> ，定义一个对话框或者窗口。一般设置open属性，如 <dialog open="open">会话窗口内容</dialog>

2.6 行内布局元素标签

使用 <span 属性> 内容 </span> ，对文档中的行内元素进行组合，该标签可以将文本的一部分或者文档的一部分独立出来。

对 <span> 应用样式时，才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

被 <span> 元素包含的文本，可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

例如：<p>背景是<span style="color:red">红色</span> 的。</p>

2.7 链接元素标签

使用 <a 属性> 内容 </a> ，定义一个超链接（anchor），用于创建从一个网页到另一个网页资源的链接，包括其他网页、图片、文件等。该元素标签的格式为 <a href="url">链接文本</a>。其主要属性有：
- href 属性，是最重要的属性，用于指定链接的的目标 URL 地址，可以是绝对路径或相对路径，建议在子目录 subdirectory 后面添加斜杠符号 / 。例如：<a href="https://example.com/subdirectory/">访问示例网站</a>。
- target 属性，用于设置在何处打开目标 URL。常用值有 _self（在当前窗口打开，也是默认值）、_blank（在新窗口或新标签页中打开）、_parent（在父框架中打开链接）、_top（在整个窗口中打开链接，取消任何框架）。例如：<a href="https://example.com" target="_blank">在新窗口打开示例网站</a>。
- download 属性，用于下载链接目标而不是导航到该目标。如果指定文件名，浏览器会提示下载并保存为指定的文件名。例如：<a href="/document_file.pdf" download="file_name.pdf">下载文件</a>。
- id 属性，用于描点链接。例如：<a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a>
使用 <link 属性 /> ，定义文档与外部资源的关系，最常见的用途是链接外部样式表，且应存在于 <head> </head> 元素内部。

2.8 图像元素标签

使用 <img 属性 /> （image），用于在网页中嵌入图像。格式为 <img src="图片地址" alt="替代文本" width="128" height="128">。其主要属性有：
- src 属性：指定图像的源路径，可以是本地路径或网络路径。例如：<img border="1" src="image.jpg" alt="描述图像的替代文本" width="256" height="512">。
- border 属性：为图像定义外边框粗细。
- alt 属性：为图像提供替代文本，当图像无法显示时，浏览器会显示这个替代文本，对搜索引擎和屏幕阅读器也很重要。
- width 和 height 属性：设置图像的宽度和高度，单位可以是像素或百分比。养成指定图像高度和宽度的习惯，避免加载页面时可能会破坏HTML页面的整体布局。
使用 <picture> <source /> <img /> </picture> 包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。
使用 <map 属性> 内容 </map> ，定义图像映射，图像映射指的是带有可点击区域的图像。常添加id和name属性。
- 使用 <area /> ，定义图像映射内部的区域，该标签始终嵌套在 <map> 元素标签内部。
使用 <canvas 属性> 内容 </canvas> ，通过 JavaScript 脚本（Canvas API 或 WebGL API）绘制图形及图形动画（比如图表和其他图像）。该元素标签只是图形容器，必须使用脚本来绘制图形。
使用 <figure 属性> 内容 </figure> ，定义独立的流内容（图像、图表、照片、代码），对其它元素进行组合。<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。即使被删除，也不应对文档流产生影响。
- 使用 <figcaption> figure标题 </figcaption> ，定义一个 <figure> 元素标题。<figcaption> 元素应该放置在 <figure> 元素的第一个或最后一个子元素的位置。

2.9 媒体元素标签

使用 <audio 属性> 内容 </audio> （音频），定义声音，比如音乐或其他音频流。该元素标签支持MP3、Wav、Ogg格式的音频。<audio> 元素标签，除全局属性外，还支持的属性有：
- accesskey 属性：用于设置访问元素的键盘快捷键。
- contenteditable 属性：用于规定是否可编辑元素的内容。
- contextmenu 属性：用于指定一个元素的上下文菜单。当用户击该元素，出现上下文菜单。
- dir 属性：用于设置元素中内容的文本方向。
- draggable 属性：用于指定某个元素是否可以拖动。
- dropzone 属性：用于指定是否将数据复制，移动，或链接，或删除。
- hidden 属性：用于属性规定对元素进行隐藏。
- lang 属性：用于设置元素中内容的语言代码。
- spellcheck 属性：用于检测元素是否拼写错误。
- tabindex 属性：用于设置元素的 Tab 键控制次序。
- translate 属性：用于指定是否一个元素的值在页面载入时是否需要翻译。
使用 <video 属性> 内容 </video> （视频），定义一个视频，比如电影片段等视频流。该元素标签支持MP4、WebM、Ogg格式的视频。<video> 元素标签，除全局属性外，还支持的属性有：
- autoplay 属性：出现该属性时，则视频在就绪后马上播放。
- controls 属性：出现该属性时，则向用户显示控件，比如播放按钮。
- width 属性：用于设置视频播放器的宽度pixels。
- height 属性：用于设置视频播放器的高度pixels。
- loop 属性：出现该属性时，则当媒介文件完成播放后再次开始播放。
- muted 属性：出现该属性时，视频的音频输出为静音。
- poster 属性：用于设置视频正在下载时显示的图像URL，直到用户点击播放按钮。
- preload 属性：出现该属性时，则视频在页面加载时进行加载，并预备播放。
- src 属性：用于设置要播放的视频的 URL。
使用 <source 属性> 内容 </source> ，定义media元素 (<video> 和 <audio>)的媒体资源。
使用 <track 属性> 内容 </track> ，为媒体(<video> 和 <audio>)元素定义外部文本轨道。

2.10 文本元素标签

<b> 和 </b> 之间用于定义粗体字（Bold）。
<em> 和 </em> 之间用于定义着重文字_斜体字（Emphasized）。
<i> 和 </i> 之间用于定义斜体字（Italic）。
<small> 和 </small> 之间用于定义小号字（small）。
<strong> 和 </strong> 之间用于定义加重语气_粗体字（strong）。
<sub> 和 </sub> 之间用于定义下标字（Subscripted）。
<sup> 和 </sup> 之间用于定义上标字（Superscripted）。
<ins> 和 </ins> 之间用于定义插入字（Inserted）。
<del> 和 </del> 之间用于定义删除字（Deleted）。
<mark> 和 </mark> 之间用于定义带有记号的文本。
<meter> 和 </meter> 之间用于定义已知最大和最小值的标量值或分数值。
<progress> 和 </progress> 之间用于定义运行中的任务进度（进程）。
<rp> 和 </rp> 之间用于定义不支持 ruby 元素的浏览器所显示的内容。
<rt> 和 </rt> 之间用于定义字符（中文注音或字符）的解释或发音。
<ruby> 和 </ruby> 之间定义 ruby 注释（中文注音或字符）。
<time> 和 </time> 之间定义一个日期/时间。
<data> 和 </data> 之间将一个指定内容和机器可读的翻译联系在一起。但如果内容是与时间或者日期相关的，则一定要使用 <time>。
<wbr> 和 <wbr> 之间规定在文本中的何处适合添加换行符。
<s> 和 </s> 之间使用删除线来渲染文本。

2.11 列表元素标签

<ul> 和 </ul> （Unordered List）用于创建无序列表，列表项用 <li> 和 </li> ，列表项前通常以圆点符号作为标记。例如：

<ul>    <!-- Unordered List -->
  <li>苹果</li> <!--  List Item -->
  <li>橙子</li>
  <li>香蕉</li>
</ul>

<ol> 和 </ol> （Ordered List）用于创建有序列表，列表项用 <li> 和 </li> ，列表项前会自动添加数字编号。例如：

<ol>    <!-- Ordered List -->
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<dl> 和 </dl> （Definition List）用于创建自定义列表，每个自定义列表项用 <dt> 和 </dt> ，而每个自定义列表项的定义描述说明用 <dd> 和 </dd> 。

<dl> <!-- Definition List -->
<dt>自定义列表项a</dt> <!-- Definition Term -->
<dd>自定义列表项a的定义描述说明</dd> <!-- Definition Description -->
<dt>自定义列表项b</dt>
<dd>自定义列表项b的定义描述说明</dd>
</dl>

<menu> 和 </menu> 用于定义菜单列表。<menu> 元素在 HTML 规范中被描述为 <ul> 的语义替代，但浏览器视其与 <ul> 没有区别。
<command> 和 </command> 定义用户可能调用的命令（比如单选按钮、复选框或按钮）。

2.12 表格元素标签

表格标签包含 <table> （表格）、 <caption> （标题）、 <tr> （行）、 <th> （表头）、 <td>（单元格）、 <thead> （表头）、 <tbody> （主体）、 <tfoot> （表注脚注）、 <col> （列）、 <colgroup> （列组）。

表格可以嵌套包含另一个表格元素或列表元素。

<table> （表格）：表格标签，用于创建表格来组织和展示数据，如产品列表、时间表等。例如：

<table width="80%" border="1" cellpadding="5" cellspacing="5" align="center"> 
<!-- width用于定义表格整体宽度占比 -->
<!-- border用于定义边框粗细 -->
<!-- cellpadding用于定义单元格边距，增加单元格内容与其边框之间的距离。 -->
<!-- cellspacing用于定义单元格间距，增加单元格与其它单元格之间的距离。 -->
<!-- align用于定义单元格对齐方式 -->
<caption>表格标题</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th height="60" >职业</th> <!-- height用于定义单元格高度 -->
        <th colspan="2">备注1</th> <!-- colspan用于定义单元格横跨n列 -->
        <th rowspan="3">备注2</th> <!-- rowspan用于定义单元格竖跨n行 -->
    </tr>
    <tr>
        <td>李四</td>
        <td>27</td>
        <td>程序员</td>
        <td>备注描述</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>28</td>
        <td>设计师</td>
        <td>备注描述</td>
    </tr>
</table>

<caption> </caption> ：用于定义表格的标题。
<colgroup> </colgroup> （列组）：用于定义表格中供格式化的列组。
- <col /> （列）：用于定义表格中一个或多个列的属性值。
<thead> </thead> （表头）：用于定义义表格中的表头内容。
<tbody> </tbody> （主体）：用于定义表格中的主体内容。
<tfoot> </tfoot> （表注脚注）：用于定义表格中的表注内容（脚注）。
<tr> </tr> （table row行）：表格行标签，用于定义表格中的一行，一个表格可以包含多行。
<th> </th> （table header表头）：表格表头单元格标签，用于定义表格的表头内容，通常会以加粗、居中等样式显示，用于描述表格列的标题。
<td> </td> （table data单元格）：表格数据单元格标签，用于定义表格中的单元格内容，放置实际的数据信息。

2.13 表单元素标签

表单标签用于用户输入，包含 <form> 、 <label> 、 <input> 、 <select> 、 <option> 、 <textarea> 、 <fieldset> 、 <legend> 、 <optgroup> 、 <button> 、 <datalist> 、 <keygen> 、 <output>等。

<form action="demo_form.php" method="post"> <!-- method="get" -->
    <fieldset>  
    <legend>information:</legend>
        <input type="text" name="email" size="40" maxlength="50">
        <input type="password"> <br>

        <input type="checkbox" name="checkbox[]" value="A" > A <br>
        <input type="checkbox" name="checkbox[]" value="B" checked="checked"> B <br>

        <input type="radio" name="sex" value="male"> Male <br>
        <input type="radio" name="sex" value="female" checked="checked"> Female <br>

        <input type="submit" value="Send">

        <input type="reset">

        <input type="hidden">
        <select>
            <option>香蕉</option>
            <option selected="selected">樱桃</option>
            <option>苹果</option>
        </select>

        <textarea name="comment" rows="10" cols="20"></textarea>  
    </fieldset>
</form>

<form> ：表单标签，用于创建用户输入数据的表单，以便收集用户信息并提交到服务器进行处理。其主要属性有：
- action ：指定表单提交的服务器目标 URL 地址，即表单数据将被发送到哪里进行处理。
- method ：指定表单提交的方法，常用值为 get（将表单数据附加在 URL 后面进行提交）和 post（将表单数据放在请求体中进行提交）。
<fieldset> ：用于定义一组相关的表单元素，并使用外框包含起来，也包括 <label> 元素。
<legend> ：用于定义 <fieldset> 元素的标题。
<label> ：用于为 <form> 表单元素添加标签，提高可读性。
<input> ：输入框标签，用于创建各种类型的输入框，如文本框、密码框、单选按钮、复选框等。其主要属性有：
- type ：指定输入框的类型，如 radio（单选按钮）、 checkbox（复选框）、 button（按钮）、 submit（提交按钮）、 reset（f复位按钮）、 search（搜索按钮）、 text（文本框）、 password（密码框）、 number（数字框）、 tel（电话号码框）、 email（邮件地址框）、 url（网页地址框）、 image（图像）、 file（选择文件）、 range（输入范围）、 color（选择颜色）、 datetime-local（选择日期时间）、 date（选择日期）、 time（选择时间）、 month（选择月份）、 week（选择星期）等。
- name ：指定输入框的名称，用于标识表单数据中的字段名称，提交表单时会将字段名称和用户输入的值一起发送到服务器。
- value ：指定输入框的默认值或提交时的值。
- id ：ID属性用于关联 <label> 元素标签。
<select> ：下拉列表标签，用于创建下拉选择框，用户可以从预定义的选项中选择一个或多个选项。
<option> ：用于定义 <select> 下拉列表中的选项。例如：

<select name="城市">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州" selected>广州</option>
    <!-- selected用于定义默认预选项 -->
    <option value="深圳">深圳</option>
</select>

<optgroup> ：用于定义选项组，为 <select> 元素中的选项创建分组。
<textarea> ：多行文本输入框标签，用于创建一个较大面积的文本输入区域，用户可以在其中输入多行文本信息。

其中 rows 属性指定文本框的行数， cols 属性指定文本框的列数。例如：

<textarea name="留言" rows="4" cols="50">在此输入留言内容...</textarea>

<button> ：用于定义一个点击按钮。
<datalist> ：包含了一组 <option> 元素，用于指定一个预先定义的输入控件选项列表。
<keygen> ：定义了表单的密钥对生成器字段。
<output> ：用于定义一个计算结果或用户操作结果。

2.14 程序元素标签

<script> ：用于定义客户端脚本。
<noscript> ：用于定义针对不支持客户端脚本的用户的替代内容。
<embed> ：定义一个容器，将外部内容嵌入文档中的指定位置，用来嵌入外部应用程序或其他交互式内容源（插件）。
<object> ：定义嵌入的对象，可引入一个外部资源。这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。
<param> ：定义对象的参数。

2.15 框架元素标签

<iframe> 和 </iframe> （Inline frame）是内嵌框架标签，用于标记一个内联框架。通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="demo_iframe.htm" width="20" height="20" frameborder="0"> </iframe>
<!-- width和height可以是像素单位，也可以按百分比数值 -->
<!-- frameborder="0"，表示不显示边框 -->

可以使用 <iframe> 来显示 <a> 链接的页面，例如：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.baidu.com" target="iframe_a" rel="noopener">百度</a></p>

<fencedframe> 和 </fencedframe> 是围栏框架元素标签，用于将另一个 HTML 页面嵌入到当前页面中。

2.16 HTML 计算机输出元素标签

<code> 和 </code> 之间用于定义计算机代码，表明其中的文本是一段简短的计算机代码的样式。默认情况下，内容文本使用用户代理默认的等宽字体显示。。
<kbd> 和 </kbd> 之间用于定义键盘码（Keyboard）。
<samp> 和 </samp> 之间用于定义计算机程序输出样本（Sample）。
<var> 和 </var> 之间用于定义变量（Variable）。
<pre> 和 </pre> 之间用于定义预定义格式文本（Preformatted）。被包围在 <pre> 和 </pre> 之间的文本通常会保留空格和换行符，紧跟在 <pre> 开始标签后的换行符也会被省略。

2.17 HTML 引文引用定义元素标签

<abbr> 和 </abbr> 之间用于定义词语缩写（Abbreviation）。
<address> 和 </address> 之间用于定义地址。 <address> 和 </address> 通常用来表示作者/所有者的联系信息，并建议被包含在 <footer> 元素里面。
<bdi> 和 </bdi> 是双向隔离元素，在其标签之间用于设置一段文本，使其脱离其父元素的文本方向设置，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。
<bdo> 和 </bdo> 是双向文本覆盖元素，在其标签之间用于修改文字方向。

<p> <bdo dir="rtl">段落文字从右到左显示。</bdo> </p>

<blockquote> 和 </blockquote> 是块级引用元素，在其标签之间的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 属性上。若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。
- cite 属性:标注引用的信息的来源文档或者相关信息的 URL 。
<q> 和 </q> 之间用于定义短引用（Quotation）。
<cite> 和 </cite> 之间用于定义引用、引证。
<dfn> 和 </dfn> 之间用于定义一个定义项目（Defines a Definition Term）。

2.18 HTML 其它元素

<search> 和 </search> 通用搜索元素，是一个容器，代表文档或应用程序中包含与执行搜索或过滤操作相关的表单控件或其他内容的部分。<search> 元素在语义上标识了元素内容的用途——具有搜索或过滤功能。搜索或过滤功能可以针对网站或应用程序、当前网页或文档，也可以针对整个互联网或其子部分。

2.19 HTML 颜色定义

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00），最大值是255（十六进制：#FF）。

如下表所示：

颜色(Color)	颜色十六进制(Color HEX)	颜色RGB(Color RGB)
黑色	#000000	rgb(0,0,0)
红色	#FF0000	rgb(255,0,0)
黄色	#FFFF00	rgb(255,255,0)
绿色	#00FF00	rgb(0,255,0)
青色	#00FFFF	rgb(0,255,255)
蓝色	#0000FF	rgb(0,0,255)
洋红色	#FF00FF	rgb(255,0,255)
白色	#FFFFFF	rgb(255,255,255)
灰色	#C0C0C0	rgb(192,192,192)

通过 <style> 元素标签，可以定义文本段落的背景颜色，如下所示：

<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,0,255,0.3)">
通过 rbga 值设置背景颜色, a表示颜色透明度。
</p>

2.20 HTML 字符实体

HTML 中的预留字符必须用字符实体来替换显示。

< 表示小于号< （less than）。
> 表示大于号> （greater than）。
& 表示与号& （ampersand）。
' 表示单引号' （apostrophe）。
" 表示双引号" （quotation mark）。

例如需要显示（<小于号），我们必须写成 < 这样的字符实体名称，或 < / < 这样的字符实体编号。

一些在键盘上找不到的字符可以使用字符实体来替换显示。

例如需要显示（© 版权图标），我们必须写成©这样的字符实体名称，或 © 这样的字符实体编号。
不间断空格也需要使用字符实体来替换显示。

空格的字符实体名称为   ，字符实体编号为   。

2.21 HTML 的 URL 说明

URL 是统一资源定位器(Uniform Resource Locators)的缩写，用来表示一个网页地址。

一个网页地址的语法规则为 scheme://host.domain:port/path/filename ，各代码的描述说明如下：

scheme ：表示因特网服务的类型。最常见的类型是 http、https、ftp、file。
host ：表示域主机（http 的默认主机是 www）
domain ：表示因特网域名。
:port ：表示主机上的端口号（http 的默认端口号是 80）
path ：表示服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename ：定义说明文档/资源的名称

3 HTML 文档的后缀名

HTML文档支持两种后缀名，如下所示，没有区别，都可以使用。

.html（推荐统一采用 .html ）
.htm

4 浏览器作用

浏览器的作用是解析HTML各元素标签，并渲染成可视化网页，但不显示标签本身。

5 学习建议

5.1 掌握核心标签

文本、链接、图片、列表、表格。

5.2 浏览器调试网页

打开浏览器，在想学习的网页，右击鼠标，选择“查看页面源代码” 或 “查看网页源代码”。
打开浏览器，右键鼠标，选择“检查”，或按“ F12 功能键”，可以打开调试界面，进行代码调试。

5.3 实践工具

使用编辑器（如 VS Code）创建 .html 文件。

VS Code 编辑器可以安装 Live Server 插件或 Live Preview 插件来实时预览编写的代码，是否达到预期的显示效果。

5.4 实践简单页面

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>这是用HTML创建的一级标题。</h1>
    <p>这是用HTML创建的段落。</p>
    <p>Hello World!</p>
</body>
</html>

5.5 进阶内容

表单设计

复杂控件（文件上传、验证）。
HTML5 API

地理定位、拖放操作、 Web Workers 。
语义化布局

使用 <article> 、 <section> 等标签替代传统 <div> 。
结合 CSS 实现布局，用 JavaScript 添加交互
关键技能

响应式设计（媒体查询）、Flex box / Grid 布局、表单验证。

5.6 实践建议

5.6.1 语义化编码

优先使用 <header> 、 <footer> 、 <section> 、 <article> 、 <aside> 、 <details> 、 <dialog> 、 <summary> 、 <main> 、 <nav> 等语义化标签替代 <div> ，以便提升可读性、可访问性与 SEO 优化。