【重识 HTML + CSS】网页基础知识、基本 HTML 标签

柔情只为你懂 2022-11-03 00:42 192阅读 0赞

### 重识 HTML + CSS ###

*  网页的基础知识
 *   *  网页的显示过程
     *  缓存(cache)技术
     *  浏览器内核
 *  常用 HTML 元素
 *   *  DOCTYPE 文档说明
     *  html 元素：根元素
     *   *  lang 属性
     *  head 元素：存放元数据
     *   *  title 元素：网页的标题
         *  meta 元素：网页的字符编码
         *  base 元素：设置 a 元素的默认行为
     *  body 元素：网页的具体内容和结构
     *  h、p、strong 元素：文本样式
     *  pre、code、br 元素：结构样式
     *  字符实体：显示特殊符号
     *  img 元素：显示图片
     *   *  图片与像素
     *  a 元素：定义超链接
     *   *  iframe 元素：嵌入 HTML 文档
         *  锚点链接：在网页内进行跳转
         *  伪链接：点击后不跳转 URL
         *  图片链接
 *  URL
 *  标签语义化

> 博文集合：[【重识 HTML + CSS】知识点目录][HTML _ CSS]

本章 Gitee 代码：[https://gitee.com/szluyu99/html\_css\_note/tree/master/day02][https_gitee.com_szluyu99_html_css_note_tree_master_day02]

# 网页的基础知识 #

> **世界上第一个网页**  
> 诞生于上世纪90年代，[http://info.cern.ch/hypertext/WWW/TheProject.html][http_info.cern.ch_hypertext_WWW_TheProject.html]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]  
> **以前的浏览器**  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 1]

一个完整的网页一般由3部分组成：

*  **HTML**：网页的内容结构
 *  **CSS**：网页的视觉体验
 *  **JavaScript**：网页的交互处理

## 网页的显示过程 ##

**服务器**

*  就是一台配置比较高的、24小时不断的电脑
 *  实时为客户端提供服务（比如查找数据）

**客户端**包括PC端、移动端、智能设备等联网设备。

用户量、数据访问量越大，对服务器的性能要求越高

*  中大型公司一般都有自己独立的服务器机房，摆放着成群的服务器。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 4]

## 缓存(cache)技术 ##

有一个现象：在浏览网页过程中，再次显示同一张图片会比首次显示快很多。

*  原因：浏览器显示图片的过程中使用了缓存 (cache) 技术。

缓存的使用过程：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 5]

> 任意打开一个网页，打开开发者工具，刷新多次，可以发现很多文件都是从缓存中取。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 6]

缓存的好处：

*  减少网络请求次数
 *  节省用户流量
 *  加快网页的响应速度（提升用户体验）

> 浏览器常用快捷键：  
> F12 显示开发者工具  
> F5 或者 Ctrl + R 刷新网页

## 浏览器内核 ##

浏览器最核心的部分是**渲染引擎(Rendering Engine)**，一般也称为“**浏览器内核**”

*  负责解析网页语法，并渲染（显示）网页
 *  不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同

常见的浏览器内核有

*  **Trident** ：IE、360安全浏览器、360极速浏览器、搜狗高速浏览器、百度浏览器、UC浏览器
 *  **Gecko** ：Mozilla Firefox
 *  **Presto** \-> **Blink** ：Opera
 *  **Webkit** ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
 *  **Webkit** \->**Blink** ：Google Chrome

前端工程师需要特别关注的浏览器有：

*  Google Chrome、Mozilla Firefox（火狐）、Opera（欧朋）、Safari、Internet Explorer（IE）  
    ![在这里插入图片描述][20210225222525530.png]

# 常用 HTML 元素 #

> HTML 简史：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 7]

HTML文件的拓展名是 `.htm` 或 `.html`（现在都使用 `.html`）

> 因历史遗留问题，Win95 \\ Win98 系统的文件拓展名不能超过 3 字符，所以使用 `.htm`

HTML 提供了大量元素，每一个元素都有特定的用途，保证了网页的丰富多样性：

*  区块：div
 *  区分：span
 *  文本：p、**h1~h6**、em、dt、dd
 *  表格：table、tbody、thead、tr、td、th、tfoot、caption
 *  表单：form、**input**、label、textarea、select
 *  链接：**a**
 *  图片：**img**
 *  文档：html、head、title、body、meta
 *  列表：ul、ol、li、dlside、footer、nav
 *  其他：br、hr、iframe
 *  结构：header、section、a、strong、pre、address、q、blockquote、cite、code

元素嵌套的含义是什么？

*  把多个功能相似的、临近的元素包装成一个整体来使用，方便对它们进行归类、统一操作

> 下面只介绍一些常见的可以单独使用的元素，很多需要和 CSS 一起使用的将和 CSS 一起介绍。

## DOCTYPE 文档说明 ##

HTML5 的 **文档说明**：

<!DOCTYPE html>

*  HTML 文档声明，告诉浏览器当前页面是 HTML5 页面，让浏览器用 HTML5 的标准去解析识别 HTML 文档
 *  必须放在 HTML 文档的最前面，不能省略，省略了会出现兼容性问题
 *  HTML5 的文档声明比 HTML 4.01、XHTML 1.0 简洁非常多

> HTML4 的文档说明：  
> ![在这里插入图片描述][20210516233218240.png]

## html 元素：根元素 ##

**html** 元素是 HTML 文档的根元素，一个文档中只能有一个，其他所有元素都是它的后代元素

### lang 属性 ###

W3C 标准建议为 html 元素增加一个 `lang` 属性，作用是：

*  帮助语音合成工具确定要使用的发音
 *  帮助翻译工具确定要使用的翻译规则

当操作系统语言默认为中文时：

*  `lang="en"` 告诉浏览器：这个HTML文档的语言是英文，浏览器会有翻译提示  
    ![在这里插入图片描述][20210516232550740.png]
 *  `lang="zh"` 表示这个HTML文档的语言是中文，不会要翻译提示

## head 元素：存放元数据 ##

![在这里插入图片描述][20210516233645788.png]  
**head** 元素里面的内容是一些“元数据”（元数据：描述数据的数据）

*  一般用于描述网页的各种信息，比如 **字符编码、网页标题、网页图标**

### title 元素：网页的标题 ###

**title** 元素：**网页的标题**  
![在这里插入图片描述][20210516233715944.png]

### meta 元素：网页的字符编码 ###

**meta** 元素用于**设置网页的字符编码**，不设置或者设置错误会导致乱码

*  一般都使用 UTF-8 编码，涵盖了世界上几乎所有的文字

> 在 HTML5 之前，meta 标签的写法也是比较复杂的  
> ![在这里插入图片描述][20210516233830160.png]

以下列出的元素大多数情况下都是在 head 元素内部使用：

*  meta
 *  title
 *  style
 *  link
 *  base
 *  script
 *  noscritpt

### base 元素：设置 a 元素的默认行为 ###

**base** 元素用于**设置当前页面所有 a 元素的默认行为**；base 元素写在 head 元素中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 8]

## body 元素：网页的具体内容和结构 ##

body 元素里面的内容是你在浏览器窗口中看到的东西，也就是**网页的具体内容和结构**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 9]

> 官方文档是最权威的参考资料，可以查看 HTML5 相关的一切信息
> 
>  *  [https://www.w3.org][https_www.w3.org]
>  *  [https://www.w3.org/standards/techs/html][https_www.w3.org_standards_techs_html]

> HTML5 代码规范检测器：[https://validator.w3.org/][https_validator.w3.org]

## h、p、strong 元素：文本样式 ##

**h** 元素表示**网页的标题**（h1 ~ h6 共规定了6个等级的标题）

> h 元素 和 **SEO**  
> h 元素有助于网站的 **SEO (Search Engine Optimization) 优化**，可以促进关键词排名  
> 建议在网页中最多只有 1 个 h1 元素  
> 乱用 h 元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致K站

**p** 元素**表示文章中的一个段落（paragraph）**

**strong** 元素用于**强调某些文本，粗体的显示效果**

## pre、code、br 元素：结构样式 ##

在默认情况下，HTML 代码中的大多数空格都会被浏览器压缩

*  比如一段连续的空格会被压缩成 1 个空格

如果想**完全保留 HTML 代码中的空格、换行**，可以使用 **pre** 元素  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 10]![在这里插入图片描述][20210517101400932.png]  
**code** 元素用于**显示程序代码**

**br** 元素是 **单标签**，表示**强制换行**

## 字符实体：显示特殊符号 ##

HTML 中有一些字符是预留出来作特殊用途的，比如小于号 `<`、大于号 `>`

要想在网页中正确地显示这些预留字符，必须使用字符实体，书写格式一般有 2 种：

*  `&entity_name;`
 *  `&#entity_number;`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 11]  
常用字符实体：

*  空格：` `
 *  大于号：`>`
 *  小于号：`<`
 *  &：`&`

## img 元素：显示图片 ##

**img** 元素专门用来**显示图片（img 是 image 的缩写）**

**src** 属性用来设置图片的路径（URL）

*  **绝对路径**：完整的描述文件位置的路径
 *  **相对路径**：由这个文件所在的文件夹引起的跟其它文件的路径关系  
    `.` 代表当前文件夹，可以省略  
    `..` 代表上级文件夹
 *  **对于网页来说，不管什么操作系统，路径分隔符都是 `/`，不是 `\`**

注意：

*  img 元素如果只设置了 `width`，浏览器会自动根据图片宽高比计算出 `height`  
    `width` 同理
 *  在 HTML5 规范中，`alt` 是 img 元素的必要属性
 *  `width`、`height` 的默认单位是 **px（像素）**

### 图片与像素 ###

web中常用的图片格式有：

*  **png**：静态图片，支持透明
 *  **jpg**：静态图片，不支持透明
 *  **gif**：动态图片、静态图片，支持透明

**像素**：

*  像素（px）是图像显示的最小单位
 *  每个像素都能表示一种颜色
 *  计算机显示出来的图像都是由一堆像素组成的
 *  组成图片的像素越多，显示越清晰  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 12]

> 平时说的屏幕分辨率，一般都是用像素作为单位：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 13]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 14]

## a 元素：定义超链接 ##

**a** 元素的作用：**定义超链接，用于打开新的URL**

<a href="https:///www.bbaidu.com">百度</a>

常用属性

*  `href`：指定要打开的 URL  
    Hypertext Reference 的简称
 *  `target`：在哪里打开 URL

`target` 可以有以下几种取值

*  `_self`：默认值，在当前窗口打开 URL
 *  `_blank`：在一个新的窗口中打开 URL
 *  `_parent`：在父窗口中打开 URL
 *  `_top`：在顶层窗口中打开 URL
 *  某个 frame 的 name 值：在某个 frame 中打开 URL  
    ![在这里插入图片描述][20210517114623683.png]

**思考：a 元素一定是用来跳转到新网页的么？**

*  将以下 URL 放到 a 元素的 `href` 属性中会造成不同效果

https://github.com/CoderMJLee/MJRefresh/archive/master.zip

mailto:12345@qq.com

ed2k://|file|%E7%94%9F%E6%B4%BB%E5%A4%A7%E7%88%86%E7%82%B8.The.Big.Bang.Theory.S10E24.END.%E4%B8%AD%E8%8B%B1%E5%AD%97%E5%B9%95.WEB-HR.AAC.1024X576.x264-%E4%BA%BA%E4%BA%BA%E5%BD%B1%E8%A7%86.mp4|194911068|a3285a9ddbea54f5200d3367ec376a58|h=ky54pschiappe5afeqic3oujrue7sxta|/

thunder://QUFodHRwOi8vNDEuZGwueTgwcy5uZXQ6OTIwLzEzMDMvW+a1t+i0vOeOi13nrKw1ODbpm4YvW+a1t+i0vOeOi13nrKw1ODbpm4ZfaGQubXA0Wlo=

### iframe 元素：嵌入 HTML 文档 ###

**iframe** 元素可以实现：在一个 HTML 文档中嵌入其他 HTML 文档

`frameborder` 属性用于规定是否显示边框：`1` \- 显示、`0` \- 不显示

### 锚点链接：在网页内进行跳转 ###

锚点链接可以实现：**跳转到网页中的具体位置**

--------------------

点击go会定位到：

*  `id` 值为 `one` 的任何元素
 *  `name` 值为 `one` 的 **a元素**

--------------------

<a href="#">回到最顶部</a>

如果 `href="#"` 则点击后会**回到当前页面的最顶部**

--------------------

<a href="index.html#one">首页第一节</a>

利用以上方法可以**跳转到其他页面的指定位置**

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 15]

### 伪链接：点击后不跳转 URL ###

伪链接：没有指明具体链接地址的链接

*  有时点击链接并不希望打开新的 URL，而是希望干点别的事情，这时可以使用**伪链接**
 *  点击链接后具体要做什么事情，需要编写对应的 JavaScript 代码

如果暂时不做任何事，可以先写成下面形式：

> 所以有时候可以把链接当作按钮来使用

### 图片链接 ###

img 元素跟 a 元素一起使用，可以实现图片链接  
![在这里插入图片描述][20210517131243472.png]

# URL #

浏览器访问 https://www.baidu.com/img/bdlogo.gif 的过程：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 16]  
什么是 URL？

*  URL 的全称是 Uniform Resource Locator（统一资源定位符）
 *  URL 就是资源的地址、位置，互联网上的每个资源都有一个唯一的URL
 *  通过 1 个 URL，能找到互联网上唯一的 1 个资源

URL 的基本格式 = `protocol://hostname/path` = `协议://主机地址/路径`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 17]

--------------------

URL 常见的协议：

*  **http**：超文本传输协议，访问的是远程的网络资源，格式是 `http://`  
    http 协议是在网络开发中最常用的协议  
    https 协议相当于是 http 协议的安全版
 *  **file**：访问的是本地计算机上的资源，格式是 `file://`（不用加主机地址）
 *  **mailto**：访问的是电子邮件地址，格式是 `mailto:`
 *  **ftp**：访问的是共享主机的文件资源，格式是 `ftp://`
 *  **ed2k**：通过支持 ed2k（专用下载链接）协议的 P2P 软件访问该资源，格式是 `ed2k://`  
    代表软件：电驴
 *  **thunder**：通过支持 thunder（专用下载链接）协议的 P2P 软件访问该资源，格式是 `thunder://`  
    代表软件：迅雷

--------------------

URL更具体更完整的语法格式为：

*  protocol://hostname\[:port\]/path/\[;parameters\]\[?query\]\#fragment 
 *  例： `http://www.baidu.com:80/s?wd=ios#page`

`port`：端口号

*  一台拥有 IP 地址的主机可以提供许多服务，比如 Web 服务、FTP 服务、SMTP 服务等
 *  主机通过 “IP 地址 + 端口号” 来区分不同的服务，端口号类似于营业厅的窗口
 *  端口号的范围从 0 到 65535，HTTP 默认端口号是 80，FTP 默认端口号是 21

`query`：请求参数，提交给服务器的数据

`fragment`：锚点位置

# 标签语义化 #

**标签语义化**： **选择标签的时候要尽量让每一个标签都有正确的语义**

虽然很多标签之间互换之后也能实现功能，但还是要遵守“标签语义化”的原则

*  比如用 strong 实现 a、img 的功能

标签语义化的好处：

*  方便代码维护减少
 *  让开发者之间的沟通成本
 *  能让语音合成工具正确识别网页元素的用途，以便作出正确的反应
 *  让搜索引擎能够正确识别重要的信息…

总结：**使用最合适的标签去做最合适的事情**

[HTML _ CSS]: https://blog.csdn.net/weixin_43734095/article/details/117025820
[https_gitee.com_szluyu99_html_css_note_tree_master_day02]: https://gitee.com/szluyu99/html_css_note/tree/master/day02
[http_info.cern.ch_hypertext_WWW_TheProject.html]: http://info.cern.ch/hypertext/WWW/TheProject.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]: /images/20221024/6102e2b7f9784a9ea6b3562581d90221.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 1]: /images/20221024/339debedd56545a887c23e173292e880.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 2]: /images/20221024/521f7a1c3689457ba08059ae7204cd8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 3]: /images/20221024/f00ad00037dd459e858855cdb2717c61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 4]: /images/20221024/9e4fc8ca50e64d49b8b4bccc580bcf72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 5]: /images/20221024/a0f98c7aa24f471292cc45233dc4c51c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 6]: /images/20221024/9c22cd18f066473194b231cf9abea5cd.png
[20210225222525530.png]: /images/20221024/3d7f76c58f34453fa615aa0f0be4cb87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 7]: /images/20221024/9a2bbe73b8d94c008399919edee2b320.png
[20210516233218240.png]: /images/20221024/6c5e2402ba6c447aa549d29cc5488611.png
[20210516232550740.png]: /images/20221024/955c9ea304a14708bb22d2ee467d36e8.png
[20210516233645788.png]: /images/20221024/77d05f3255d04260aafefbdab96a503e.png
[20210516233715944.png]: /images/20221024/d21e39b7efbc460cbffedd70e2ab1723.png
[20210516233830160.png]: /images/20221024/a27a5f7ea2f34d7a93cbc52a826470fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 8]: /images/20221024/88513ddef7a345b3a52959f15d08afd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 9]: /images/20221024/073a7cb9718646498399f005c3b876db.png
[https_www.w3.org]: https://www.w3.org
[https_www.w3.org_standards_techs_html]: https://www.w3.org/standards/techs/html
[https_validator.w3.org]: https://validator.w3.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210517101356271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_1,color_FFFFFF,t_70
[20210517101400932.png]: /images/20221024/cf81a9f2b0ce4205888e2e12cab0d376.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 11]: /images/20221024/4a77b8e2e12247358cae53c594e5edd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 12]: /images/20221024/7b9ecb8e3527438f93833fd425bf0640.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210517112728300.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 14]: /images/20221024/b6b5597bcb1c479fa7f0aa49b3fd3303.png
[20210517114623683.png]: /images/20221024/c04de931f03544bdb045b8b4cd66e300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 15]: /images/20221024/b0b7a894855e4f13b67abde86425be1f.png
[20210517131243472.png]: /images/20221024/d02e23d4908246d38a8e247201d09a18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 16]: /images/20221024/6a4e04163af04790ba048dea2c104953.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 17]: /images/20221024/2926c4205c5747fb80b1ca23cd67d7cd.png