1. HTML基本结构

<!DOCTYPE> 声明：位于 HTML 文档的最开始，用于指定文档类型和版本。例如：<!DOCTYPE html> 表示 HTML5 文档类型。

<html> 标签：HTML 文档的根元素，包含了整个 HTML 内容。

<head> 标签：位于 <html> 标签内部，用于定义文档的元数据和引入外部资源。例如，可以在 <head> 标签中设置文档的标题（<title>）、引入 CSS 样式表（<link>）和 JavaScript 脚本（<script>）等。

<body> 标签：位于 <html> 标签内部，用于定义文档的主体内容。例如，可以在 <body> 标签中添加文本、图像、链接、表格、表单等元素，用于展示在浏览器中的页面内容。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- 指定文档使用 UTF-8 编码 -->
        <meta charset="UTF-8">
        
        <!-- 控制页面在移动设备上的视口大小和缩放比例 
			width=device-width：表示视口的宽度应该等于设备的宽度，确保网页内容在移动设备上能够完全显示。
			initial-scale=1.0：表示初始的缩放比例为 1.0，即不进行缩放。
		-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 指定浏览器使用最新的渲染引擎来渲染网页 -->
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入CSS -->
        <link rel="stylesheet" href="styles.css">
        <!-- 引入JS -->
		<script src="script.js"></script>
        <!-- 设置网页标题 -->
        <title>Document</title>
    </head>

    <body>
        ...
    </body>

</html>

1.1 HTML5文档头部相关标记

标签	描述
`<title>`	定义文档的标题，显示在浏览器的标题栏或标签页上。
`<meta>`	定义文档的元数据，如字符编码、关键词、描述等。
`<link>`	引入外部资源，如样式表（CSS）或图标文件。
`<style>`	定义文档的样式信息，包括内联样式或嵌入式样式表（CSS）。
`<script>`	引入或定义客户端脚本，如 JavaScript 代码。
`<base>`	定义页面中所有链接的基准 URL 或默认目标窗口。
`<noscript>`	定义在浏览器不支持脚本或脚本被禁用时显示的替代内容。

meta标签

meta 标签是 HTML 中用于定义文档元数据的标签

属性：

属性	样例	样例说明
charset	`<meta charset="UTF-8">`	指定文档使用 UTF-8 编码
name="viewport"	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	控制页面在移动设备上的视口大小和缩放比例
name="description"	`<meta name="description" content="网页描述">`	提供网页的描述信息，通常在搜索引擎结果中显示
name="keywords"	`<meta name="keywords" content="关键词1, 关键词2, ...">`	指定网页的关键词，有助于搜索引擎对网页内容进行索引和匹配
name="author"	`<meta name="author" content="作者名">`	指定网页的作者信息
name="robots"	`<meta name="robots" content="index,follow">`	指导搜索引擎的爬虫程序如何处理网页内容
http-equiv="refresh"	`<meta http-equiv="refresh" content="5;url=https://example.com">`	在指定时间后自动跳转到另一个网页
http-equiv="X-UA-Compatible"	`<meta http-equiv="X-UA-Compatible" content="IE=edge">`	指定浏览器使用最新的渲染引擎来渲染网页

table：设置网页标题
```
<title>网页标题名称</title>
```

link：引入外部样式

用于引入外部资源，如样式表（CSS 文件）、图标（favicon）、字体等。常见的属性有 rel、href、type、media 和 sizes 等。

属性	描述	样例	样例说明
`rel`	定义当前文档与被链接文档之间的关系。常见的取值包括：`stylesheet`（引入样式表）、`icon`（引入图标）、`preload`（预加载资源）、`alternate`（替代版本）等。	`<link rel="stylesheet" href="styles.css">`	引入名为 `styles.css` 的样式表文件
`href`	指定被链接文档的 URL。可以是相对路径或绝对路径。	`<link rel="icon" href="favicon.ico">`	引入名为 `favicon.ico` 的网站图标文件
`type`	指定被链接文档的 MIME 类型。常见的取值包括：`text/css`（样式表）、`image/png`（PNG 图片）、`application/javascript`（JavaScript 文件）等。	`<link rel="stylesheet" href="styles.css" type="text/css">`	明确指定了样式表文件的 MIME 类型为 `text/css`
`media`	指定样式表适用的设备或媒体类型。常见的取值包括：`all`（所有设备）、`screen`（屏幕设备）、`print`（打印设备）等。	`<link rel="stylesheet" href="styles.css" media="screen">`	仅在屏幕设备上应用名为 `styles.css` 的样式表
`integrity`	用于提供资源完整性校验的哈希值，以确保资源在传输过程中未被篡改。	`<link rel="stylesheet" href="styles.css" integrity="sha256-abcdef123456">`	提供了样式表文件的完整性校验哈希值
`crossorigin`	指定是否跨域请求资源以及如何处理跨域请求。常见的取值包括：`anonymous`（匿名请求）和 `use-credentials`（使用凭证进行请求）。	`<link rel="stylesheet" href="styles.css" crossorigin="anonymous">`	以匿名方式跨域请求名为 `styles.css` 的样式表文件
`as`	指定资源的预期用途或加载优先级。常见的取值包括：`script`（脚本文件）、`style`（样式表）、`image`（图片）等。	`<link rel="preload" href="image.jpg" as="image">`	将名为 `image.jpg` 的图片资源预加载，并指定预期用途为图片
`sizes`	指定图标的尺寸，用于不同尺寸的设备或显示环境。	`<link rel="icon" href="favicon.ico" sizes="16x16" type="image/x-icon">`	指定网站图标的尺寸为 16x16 像素，并指定 MIME 类型为 `image/x-icon`
`title`	提供关于被链接文档的额外信息，通常在鼠标悬停时显示。	`<link rel="stylesheet" href="styles.css" title="Main Styles">`	为样式表文件提供额外的标题信息，用于鼠标悬停时显示
`charset`	指定被链接文档的字符编码。	`<link rel="stylesheet" href="styles.css" charset="UTF-8">`	明确指定样式表文件的字符编码为 UTF-8

style：用于定义内部样式表，可以在标签内编写 CSS 样式

属性	描述	样例	样例说明
`type`	定义样式表的 MIME 类型。默认值为 `text/css`。	`<style type="text/css">...</style>`	指定样式表的 MIME 类型为 `text/css`
`media`	指定样式表适用的设备或媒体类型。	`<style media="screen">...</style>`	仅在屏幕设备上应用样式表
`title`	提供关于样式表的额外信息。	`<style title="Main Styles">...</style>`	为样式表提供额外的标题信息，用于辅助理解样式表的作用
`scoped`	指定样式仅适用于当前元素及其子元素。	`<style scoped>...</style>`	限定样式仅适用于包含该 `<style>` 标签的元素及其子元素
`lang`	指定样式表中使用的语言。	`<style lang="css">...</style>`	指定样式表使用的语言为 CSS
`media`	指定样式表适用的设备或媒体类型。	`<style media="screen">...</style>`	仅在屏幕设备上应用样式表
`nonce`	用于提供样式表的安全性校验。	`<style nonce="ABC123">...</style>`	提供样式表的安全性校验值，用于防止跨站点脚本攻击
`title`	提供关于样式表的额外信息。	`<style title="Main Styles">...</style>`	为样式表提供额外的标题信息，用于辅助理解样式表的作用
`media`	指定样式表适用的设备或媒体类型。	`<style media="screen">...</style>`	仅在屏幕设备上应用样式表
`nonce`	用于提供样式表的安全性校验。	`<style nonce="ABC123">...</style>`	提供样式表的安全性校验值，用于防止跨站点脚本攻击
`dir`	指定样式表中的文本方向。	`<style dir="rtl">...</style>`	指定样式表中的文本方向为从右到左
`xml:space`	指定样式表中的空白处理方式。	`<style xml:space="preserve">...</style>`	保留样式表中的空白字符，不进行自动折行或空格的处理
`charset`	指定样式表的字符编码。	`<style charset="UTF-8">...</style>`	指定样式表的字符编码为 UTF-8

script：用于引入 JavaScript 文件或内嵌 JavaScript 代码

属性	描述	样例	样例说明	是否必填
`async`	指定脚本的异步执行。	`<script async src="script.js"></script>`	脚本将在下载时立即执行，而不会阻塞页面的加载	否
`charset`	指定脚本的字符编码。	`<script charset="UTF-8" src="script.js"></script>`	指定脚本的字符编码为 UTF-8	否
`defer`	指定脚本的延迟执行。	`<script defer src="script.js"></script>`	脚本将在文档解析完毕后执行，而不会阻塞页面的加载	否
`src`	指定外部脚本文件的 URL。	`<script src="script.js"></script>`	引入位于 `script.js` 文件中的外部 JavaScript 代码	是
`type`	定义脚本的 MIME 类型。默认值为 `text/javascript`。	`<script type="text/javascript">...</script>`	指定脚本的 MIME 类型为 `text/javascript`	否
`language`	指定脚本使用的编程语言。已废弃。	`<script language="JavaScript">...</script>`	指定脚本使用的编程语言为 JavaScript（已废弃，请使用 `type` 属性）	否
`nonce`	用于提供脚本的安全性校验。	`<script nonce="ABC123">...</script>`	提供脚本的安全性校验值，用于防止跨站点脚本攻击	否

base：用于指定页面中相对 URL 的基准 URL，影响其他链接元素中的相对路径解析

属性	描述	样例	样例说明	是否必填
`href`	指定基准 URL。相对路径前会加上次路径	`<base href="https://www.example.com/">`	设置基准 URL 为 `https://www.example.com/`	是
`target`	当有跳转其他网址时，类似A标签，指定以什么方式进行跳转。有3中类型，_blank：打开新标签；_self：当前窗口跳转；_parent：到父窗口跳转	`<base target="_blank">`	设置链接的默认目标窗口为新窗口（`_blank`）	否

noscript：定义在禁用脚本时显示的内容，通常用于向用户提供替代的内容或指导
```
<noscript>
    <p>This page requires JavaScript to function properly.</p> 
</noscript>
```
在上述示例中，如果浏览器不支持脚本或脚本被禁用，将显示 <noscript> 标签中的替代内容，即显示 "This page requires JavaScript to function properly." 的段落。

2.文本控制标记

2.1 标题和段落标记

2.1.1 标题标记 < h1> ~ < h6 >

<hn align="对齐方式">内容</hn>

属性	可选值	含义
align	left, center, right	指定标题的对齐方式。left表示左对齐（默认），center表示居中对齐，right表示右对齐。
dir	ltr, rtl	指定标题文本的方向。ltr表示从左到右（默认），rtl表示从右到左
lang	任意有效的语言代码（如"en", "zh-CN"）	指定标题的语言。可使用ISO 639-1语言代码或BCP 47语言标记。
title	任意字符串	鼠标悬停在标题上时显示的文本提示。可以提供有关标题内容的额外信息。

2.1.2 段落标记< P>

<p align="对齐方式">内容</p>

属性	可选值	含义
align	left, center, right, justify	指定段落的对齐方式。left表示左对齐，center表示居中对齐，right表示右对齐，justify表示两端对齐。
dir	ltr, rtl, auto	指定段落文本的方向。ltr表示从左到右，rtl表示从右到左，auto表示根据语言设置自动判断。
lang	任意有效的语言代码（如"en", "zh-CN"）	指定段落的语言。可使用ISO 639-1语言代码或BCP 47语言标记。
title	任意字符串	鼠标悬停在段落上时显示的文本提示。可以提供有关段落内容的额外信息。

2.1.3 水平线标记 < hr/>

<hr 属性="属性值"/>

属性	可选值	含义
align	left, center, right	指定水平线的对齐方式。left表示左对齐，center表示居中对齐，right表示右对齐。
color	任意有效的颜色值（如#ff0000）	指定水平线的颜色。可以使用颜色名称或十六进制值。
dir	ltr, rtl	指定水平线文本的方向。ltr表示从左到右，rtl表示从右到左。
size	任意正整数（如2）	指定水平线的厚度/高度。默认为1。
width	任意长度值（如100px, 50%）	指定水平线的宽度。默认为100%。

2.1.4 换行标记< br/>

<br/>

属性	可选值	含义
title	任意字符串	鼠标悬停在换行标签上时显示的文本提示。可以提供有关换行的额外信息。

2.2 文本格式化标记

标签	含义
`<b>`	用粗体格式显示文本。
`<i>`	用斜体格式显示文本。
`<u>`	给文本添加下划线效果。
`<s>`	在文本上添加删除线（中划线）效果。
`<sub>`	将文本显示为下标（如化学式中的小数字）。
`<sup>`	将文本显示为上标（如数学上的幂运算符和脚注中的引用数字）。
`<mark>`	高亮显示文本，通常以黄色或其他醒目颜色进行标记。
`<small>`	显示较小的文本，通常用于注释或法律声明的附加信息。
`<strong>`	指示重要的文本，通常以粗体显示，但更强调语义上的强调。
`<em>`	强调文本，通常以斜体显示，但更强调语义上的强调。
`<code>`	显示计算机代码或其他片段的文本，通常以等宽字体显示。
`<pre>`	保留文本中的空格和换行符，以保持原始格式。在显示代码或排版示例时特别有用。

2.3 特殊标记

标签	属性	含义
`<br>`	无	在文本中插入换行符。
`<wbr>`	无	在长单词或URL等位置插入可选的换行符。在位置不够的情况下自动换行
`<hr>`	无	插入水平分隔线，用于在文档中创建视觉上的分隔。
`<cite>`	无	标记引用或参考的作品的标题。
`<q>`	无	标记短的行内引用或嵌套引用块。
`<blockquote>`	无	标记长引用块，通常显示为缩进的段落或引用区域。
`<abbr>`	`title`	定义缩写词或首字母缩写词，并提供全称的额外信息。
`<dfn>`	`title`	定义术语或概念，并提供解释或定义的额外信息。
`<address>`	无	标记联系人或组织的联系信息。可以包含邮件地址、电话号码等。
`<time>`	`datetime`	标记日期、时间或时间范围，并可以提供机器可读的日期和时间数据。
`<var>`	无	标记变量或占位符。通常以斜体显示。
`<kbd>`	无	标记键盘输入或命令。通常以等宽字体显示。
`<samp>`	无	标记示例输出或计算机程序的样本输出。
`<mark>`	无	高亮显示文本，通常以黄色或其他醒目颜色进行标记。

2.4 符号转换

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
大于号		`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

2.5 文本倒序显示`<bdo>`

<!-- 下列显示结果654321，文本 -->
<bdo dir="rtl">123456</bdo>

属性

值	描述
ltr	从左向右的文本方向。
rtl	从右向左的文本方向。

3. 图像标记

3.1 图像标记< img />

<img src="image.jpg" alt="图像描述" width="300" height="200">

属性	属性值	描述
`src`	URL 或文件路径	指定图像文件的 URL 或路径
`alt`	文本字符串	指定在图像无法加载时显示的替代文本，或用于可访问性
`width`	正整数、百分比值	指定图像的宽度
`height`	正整数、百分比值	指定图像的高度
`loading`	`auto`、`lazy`、`eager`	定义图像的加载方式， `auto`：这是默认值。浏览器会自动选择最佳的加载方式。通常会对可见图像进行立即加载，而对位于屏幕外的图像进行延迟加载。 `lazy`：图像将被延迟加载，直到它们进入浏览器视口（可见区域）附近。 `eager`：图像将立即加载，而不管它们是否在浏览器视口中。
`decoding`	`sync`、`async`、`auto`	定义浏览器如何解码图像文件。 `sync`：该选项指示浏览器在解码图像时阻塞渲染页面。这意味着图像将立即开始解码，但在解码完成之前，页面的渲染可能会被延迟，直到所有图像都解码完毕。这是默认行为。 `async`：该选项指示浏览器在后台异步解码图像。这意味着页面的渲染不会被图像解码所阻塞，而是继续进行。图像将在后台解码，并在解码完成后显示在页面上。这可以改善页面加载性能，特别是当页面有多个大型图像时。 `auto`：该选项允许浏览器自动选择最佳的解码方式。浏览器会根据具体情况决定是否同步或异步解码图像。这通常是最常用的选项，因为它由浏览器自行决定，以提供最佳的用户体验和性能。
`sizes`	媒体查询字符串	指定图像的尺寸变化情况和媒体查询。< img src="image.jpg" sizes="(max-width: 768px) 100vw, 50vw">当视口宽度小于等于 768 像素时，图像的显示大小为视口宽度的百分之百 (`100vw`)；而在其他情况下，图像的显示大小为视口宽度的一半 (`50vw`)。
`srcset`	图像文件路径和描述	提供一系列备选图像，以适应不同的设备像素密度或视口尺寸
`usemap`	`#mapname` 或 `#`	关联图像与使用 `<map>` 元素定义的客户端图像映射
`ismap`	无值	声明图像为服务器端图像映射
`title`	文本字符串	提供有关图像的额外说明，通常以工具提示的形式显示
`align`	`left`、`right`、`top`、`middle`、`bottom`	对齐图像的方式
`border`	非负整数	定义图像周围边框的大小
`hspace`	非负整数	定义图像与周围元素的水平间距
`vspace`	非负整数	定义图像与周围元素的垂直间距

3.2 图像映射

<!-- usemap="#planetmap"指定映射的map标签 -->
<img decoding="async" src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
 
<!-- 为 image-map 规定的名称 -->
<map name="planetmap">
    <!-- 当点击img指定坐标coords时，则跳转到href指定的URL地址 -->
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

area属性

属性	值	描述
alt	text	规定区域的替代文本。如果使用 href 属性，则该属性是必需的。
coords	coordinates	规定区域的坐标。
href	URL	规定区域的目标 URL。
hreflang	language_code	规定目标 URL 的语言。
media	media query	规定目标 URL 是为何种媒介/设备优化的。默认：all。
nohref	value	HTML5 不支持。规定没有相关链接的区域。
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	规定当前文档与目标 URL 之间的关系。
shape	default rect circle poly	规定区域的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。
type	MIME_type	规定目标 URL 的 MIME 类型。注：MIME = Multipurpose Internet Mail Extensions。

3.3 绝对路径和相对路径

绝对路径

绝对路径是网页上的文件或目录在硬盘上的真正路径，如“D:\HTML5+CSS3\images\logo.gif",或完整的网络地址，如www.itcast.cn/images/logo…

网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器。就是说很有可能不存在“D:\HTML5+CSS3\images\logo.gif" 这样一个路径。
相对路径 相对路经就是相对于当前文件的路径，相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。总结起来，相对路径的设置分为以下3种。
1. 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可，如< img src=“logo. gif” />。
2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用”/“隔开，如< img src=“images/logo.gif”/>
3. 图像文件位于html文件的上一级文件夹:在文件名之前加入"… /", 如果是上两级，则需要使用"…/…/“以此类推，如<img src="…/…/logo.gif/>

4. 超链接标记

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

<a href="#1" >点我不做跳转</a>

<h2><a id="top">这是标题，底部链接可以链接到这</a></h2>
<a href="#top">跳转到标题</a>

属性	值	意义
href	URL 字符串	指定链接的目标 URL
target	_blank, _self, _parent, _top, 或自定义窗口或框架的名称	指定链接在何处打开。_blank: 在新窗口或标签中打开；_self: 在当前窗口中打开；_parent: 在父级框架中打开；_top: 在顶级窗口中打开；自定义名称：在指定名称的窗口或框架中打开
download	文件名字符串	指示浏览器下载链接的目标文件，而不是导航到它
rel	nofollow, noreferrer, noopener, 或自定义值	定义链接与当前文档之间的关系，如搜索引擎指令、安全策略等
type	媒体类型字符串	指定链接目标文件的媒体类型
referrerpolicy	no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, or strict-origin-when-cross-origin	指定在发送引荐来源头部时的策略
hreflang	语言代码字符串	指定链接的目标资源语言
media	媒体查询字符串	指定链接样式表的媒体特性，以确定其应用范围

5. 列表元素

标签	描述
ol	定义有序列表，前面以编号开头
ul	定义无序列表，前面以黑点开头
li	定义列表项,在ol或者ul标签内定义
dl	定义列表，前面无任何图标
dt	自定义列表项目,在dl标签内定义
dd	定义自定列表项的描述,在dl标签内定义

5.1 有序列表< ol>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<!-- 从50开始展示序号-->
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

属性	属性值	描述
type	`a` 表示小写英文字母编号 `A` 表示大写英文字母编号 `i` 表示小写罗马数字编号 `I` 表示大写罗马数字编号 `1` 表示数字编号（默认）	指定列表项的标记类型
start	数字或字母	指定列表的起始数值或字母
reversed	reversed	将列表倒序显示
`dir`	ltr（从左到右）或rtl（从右到左）	指定列表内容的文本方向

5.2 无序列表< ul>

<ul type="circle" compact>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

属性	值	描述
compact	compact	在 HTML 4中 compact 属性已废弃。规定列表呈现的效果比正常情况更小巧。
type	disc：默认实心圆点 square：正方形 circle：空心圆点	规定列表的项目符号的类型。

5.3 列表项< li>

<ol>
  <!-- 编号显示大写字母 -->
  <li type="A">Coffee</li>
  <li type="A">ddd</li>
	
  <!-- 编号显示正方形 -->
  <li type="square">Tea</li>
  <!-- 编号50 -->
  <li value="50">Milk</li>
</ol>

属性	值	描述
type	1 A a I i disc square circle	HTML5 不支持该属性。HTML 4.01 已废弃该属性。不赞成使用。请使用样式取代它。规定使用哪种项目符号。
value	number	不赞成使用。请使用样式取代它。规定列表项目的数字。

5.4 无序号无图标列表< dl>< dt>< dd>

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

效果：

Coffee: Black hot drink
Milk: White cold drink

6. 语义化标签

标签	说明
`<header>`	区块的页眉部分，通常包含网站的标题、导航菜单等
`<main>`	页面的主体内容，一个页面只能有一个`<main>` ，不能放置在`<header>`、`<footer>`、`<article>`、`<aside>`、`<nav>`等标签之中。
`<footer>`	区块的页脚部分，通常包含版权信息、联系方式等
`<nav>`	通常放在`<header>`里面，用于放置页面或文档的导航信息
`<article>`	定义独立的、完整的、可以独立于页面其余部分存在的内容块
`<aside>`	定义页面的侧边栏内容，通常包含与主要内容相关但可以独立存在的信息
`<figure>`	独立的流内容（图像、图表、照片、代码等等），如果被删除，则不应对文档流产生影响。
`<figcaption>`	定义 `<figure>` 元素的标题或说明,应该被置于 `<figure>` 元素的第一个或最后一个子元素的位置。

<body>
  <!-- 页面的头部 -->
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <!-- 页面的主体 -->
  <main>
    <!-- 独立的内容块 -->
    <article>
      <h3>文章标题</h3>
      <p>文章内容</p>
    </article>

    <aside>
      <!-- 侧边栏内容 -->
    </aside>


    <figure>
      <img decoding="async" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
      <figcaption>图片描述</figcaption>
    </figure>
  </main>

  <footer>
    <!-- 页脚内容 -->
    公司：XXXXX，联系电话：135XXXX
  </footer>

</body>

7. 布局标签

标签	描述
div	定义文档区块，块级(block-level)
span	定义 span，用来组合文档中的行内元素。

7.1 块级元素和行内元素

在HTML中，元素可以被分类为块级元素和行内元素，这是根据它们在文档流中的显示行为和默认样式来划分的。

块级元素（Block-level Elements）：
- 块级元素以新行开始，并占据可用的水平空间。
- 块级元素可以包含其他块级元素和行内元素。
- 常见的块级元素有<div>、<p>、<h1>-<h6>、<ul>、<li>等。
行内元素（Inline Elements）：
- 行内元素不会以新行开始，它们在同一行内按照从左到右的顺序排列。
- 行内元素只占据它们实际内容所需的空间。
- 行内元素不能包含块级元素，只能包含其他行内元素或文本。
- 常见的行内元素有<span>、<a>、<strong>、<em>、<img>、<input>等。

需要注意的是，HTML5中引入了一些新的元素和元素分类，例如<header>、<nav>、<section>、<article>等。这些元素也可以根据其默认样式和显示行为被归类为块级元素或行内元素。

此外，可以使用CSS来修改元素的显示行为，例如通过display属性将行内元素转换为块级元素，或将块级元素转换为行内元素。这样可以更灵活地控制元素的布局和显示方式。

总结起来，块级元素以新行开始，占据水平空间，可以包含其他块级元素和行内元素；行内元素在同一行内排列，只占据实际内容所需的空间，不能包含块级元素。

7.2 布局块级元素< DIV>

<div align="center">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

属性	值	描述
align	left：左 right：右 center：居中 justify：内容两端对齐	HTML5 不支持。HTML 4.01 已废弃。规定元素中的内容的对齐方式。

7.3 布局行内元素< span>

我的猫有蓝色的眼睛，我的老虎有碧绿色的眼睛。

<p>
    我的猫有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，
    我的老虎亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。
</p>

8. 表格`<table>`

每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义），表格可以包含标题行（）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

8.1 HTML 表格标签

标签	描述
`<table>`	定义表格
`<table>--<caption>`	定义表格标题,在表格上方展示定义的内容
`<table>--<thead>`	定义表格的页眉，类似表格的表头
`<table>--<tbody>`	定义表格的主体，类式表格的内容
`<table>--<tfoot>`	定义表格的页脚，包含的tr、td内容会显示在表格的最后一行
`<table>--<tr>`	表格的行
`<table>--<tr>--<th>`	表格表头的单元格，跟td类似，不过td是用于内容，th用于表头
`<table>--<tr>--<td>`	定义表格单元
`<table>--<colgroup>`	定义表格列的组，需要与col进行配合
`<table>--<colgroup>--<col>`	定义用于表格列的属性，指定合并几列

8.2 样例

<table>
  <caption>销售数据报表</caption> <!-- 表格标题 -->
  <colgroup>
    <!-- 列组定义 -->
    <col style="background-color: lightblue;"> <!-- 第一列样式 -->
    <col style="background-color: lightgreen;"> <!-- 第二列样式 -->
    <col style="background-color: lightyellow;"> <!-- 第三列样式 -->
  </colgroup>
  <thead>
    <!-- 表头部分 -->
    <tr>
      <!-- 表头行 -->
      <th>日期</th> <!-- 第一列表头 -->
      <th>产品</th> <!-- 第二列表头 -->
      <th>销售额</th> <!-- 第三列表头 -->
    </tr>
  </thead>
  <tbody>
    <!-- 主体部分 -->
    <tr>
      <!-- 第一行数据 -->
      <td>2023-07-01</td> <!-- 第一列数据 -->
      <td>产品A</td> <!-- 第二列数据 -->
      <td>1000</td> <!-- 第三列数据 -->
    </tr>
    <tr>
      <!-- 第二行数据 -->
      <td>2023-07-02</td> <!-- 第一列数据 -->
      <td>产品B</td> <!-- 第二列数据 -->
      <td>1500</td> <!-- 第三列数据 -->
    </tr>
    <tr>
      <!-- 第三行数据 -->
      <td>2023-07-03</td> <!-- 第一列数据 -->
      <td>产品C</td> <!-- 第二列数据 -->
      <td>800</td> <!-- 第三列数据 -->
    </tr>
  </tbody>
  <tfoot>
    <!-- 页脚部分 -->
    <tr>
      <!-- 页脚行 -->
      <td colspan="2">总计</td> <!-- 合并前两列 -->
      <td>3300</td> <!-- 第三列数据 -->
    </tr>
  </tfoot>
</table>

销售数据报表
日期	产品	销售额
2023-07-01	产品A	1000
2023-07-02	产品B	1500
2023-07-03	产品C	800
总计		3300

8.3 属性

元素中内容的垂直对齐方式。

涉及标签	属性	值	描述
`<table>` `<caption>` `<thead>` `<tbody>` `<tfoot>` `<tr>` `<th>` `<td>` `<colgroup>` `<col>`	align	left：靠左 center：居中 right：靠右	HTML5 不支持。HTML 4.01 已废弃。规定表格相对周围元素的对齐方式。
`<table>` `<tr>` `<th>` `<td>`	bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 不支持。HTML 4.01 已废弃。规定表格的背景颜色。
`<table>`	border	数字	HTML5 不支持。规定表格单元是否拥有边框。
`<table>`	cellpadding	px	HTML5 不支持。规定单元边沿与其内容之间的空白
`<table>`	cellspacing	px	HTML5 不支持。规定单元格之间的空白。
`<table>`	frame	void：不显示外侧边框。 above：显示外侧边栏 below：显示上部的外侧边框 hsides：显示上部和下部的外侧边框 lhs：显示左边的外侧边框 rhs：显示右边的外侧边框 vsides：示左边和右边的外侧边框 box：在所有四个边上显示外侧边框 border：在所有四个边上显示外侧边框	HTML5 不支持。规定外侧边框的哪个部分是可见的。
`<table>`	rules	none：没有线条。 groups：位于行组和列组之间的线条。 rows：位于行之间的线条。 cols：位于列之间的线条。 all：位于行和列之间的线条。	HTML5 不支持。规定内侧边框的哪个部分是可见的。
`<table>`	summary	text	HTML5 不支持。规定表格的摘要。
`<table>` `<th>` `<colgroup>` `<col>`	width	px %	HTML5 不支持。规定表格的宽度。
`<thead>` `<tbody>` `<tfoot>` `<tr>` `<th>` `<td>` `<colgroup>` `<col>`	valign	top：对内容进行上对齐。 middle：对内容进行居中对齐（默认值）。 bottom：对内容进行下对齐。 baseline：与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。请看下面的图示。	HTML5 不支持。规定
`<th>` `<td>`	abbr	text	HTML5 不支持。规定表头单元格中内容的缩写版本。
`<th>` `<td>`	axis	规定类别的名称	HTML5 不支持。对表头单元格进行分类。
`<th>` `<td>`	colspan	number	规定表头单元格可横跨的列数。
`<th>` `<td>`	headers	header_id	规定与表头单元格相关联的一个或多个表头单元格。
`<th>` `<td>`	height	pixels %	HTML5 不支持。HTML 4.01 已废弃。规定表头单元格的高度。
`<th>` `<td>`	nowrap		HTML5 不支持。HTML 4.01 已废弃。规定表头单元格中的内容是否折行。
`<th>` `<td>`	rowspan	number	规定表头单元格可纵跨的行数。
`<th>` `<td>`	scope	col：规定单元格是列的表头。 row：规定单元格是行的表头。 colgroup：规定单元格是列组的表头。 rowgroup：规定单元格是行组的表头。	规定表头单元格是否是行、列、行组或列组的头部。
`<colgroup>` `<col>`	span	number	规定列组应该横跨的列数。

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
大于号		`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
大于号		`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

HTML5入门教程-1