目录
在上一章初识爬虫时说过，爬虫充当了浏览器的角色，需要向服务器发送请求，并解析服务器作出的响应，也就是解析 HTML 文档内容，然后从中提取数据。
网页的本质是 HTML 文档。当我们用浏览器打开某个网页的时候，服务器会将 HTML 文档响应给浏览器。浏览器接收到 HTML 文档后，会解析文档内容，并用适合人类阅读的方式呈现出来。
以我的主页为例，打开开发者工具，点开“Type”类型为document的这个请求。
点开请求详情的“Response”（响应）面板，显示以下内容，大致浏览，发现一些有趣的事。
因此，掌握 HTML 基本语法，有助于我们更深入了解网页结构，从而更好地编写爬虫程序。
一、HTML基本语法
（一）HTML常见元素
HTML 全称 Hyper Text Markup Language，翻译过来是 超文本标记语言，是计算机语言的一种。其特点为用标签作为元素的标记工具、以元素为基本单位、通过嵌套关系构建整体结构。
接下来我们分别介绍。
1. 用标签作为元素的标记工具：定义元素的 “边界”
标签是元素的 “外在标识”，是定义元素的基础工具。它由尖括号 <> 包裹，作用是标记元素的开始和结束，让浏览器能识别元素的范围。标签又可以分成对标签和自闭合标签。
成对标签：大多数元素需要开始标签和结束标签 “包裹” 内容，明确元素的边界。
例如：<h1>网页标题</h1>中，<h1>是开始标签，</h1>是结束标签，二者之间的 “网页标题” 是元素内容。自闭合标签：顾名思义，部分元素无需包裹内容（如图片、换行），只用单个标签即可定义，称为自闭合标签。
例如：<br>（换行元素）、<img src="pic.jpg">（图片元素），它们的功能通过标签本身和属性即可实现。
标签本身不直接承载内容，但没有标签，元素就无法被浏览器识别 —— 标签是元素的 “语法外壳”，而元素才是包含内容和功能的 “实体”。
【更多的对常见标签的详细介绍我另起一篇文章讲，在这里不过多赘述】
2. 以元素为基本单位：HTML 的 “最小功能单元”
j介绍完标签，我们来扩大范围介绍一下元素。元素是 HTML 的核心组成部分，是承载网页内容和功能的 “最小功能单元”。一个完整的元素包含：
- 开始标签（如
<p>）和结束标签（如</p>）（自闭合元素如<img>除外）； - 标签内的属性（如
<a href="https://example.com">中的href属性，用于补充元素信息）； - 标签包裹的内容（可以是文本、图片、视频，甚至其他元素）。
举例：
<p class="intro">这是一段介绍文字</p> 是一个段落元素，其中 class="intro" 是属性，“这是一段介绍文字” 是内容；
<img src="photo.jpg" alt="风景图"> 是一个图片元素（自闭合），src 定义图片路径，alt 定义替代文本。
元素的类型决定了内容的 “含义”：<h1> 代表一级标题，<ul> 代表无序列表，<form> 代表表单 —— 不同元素的组合，直接定义了网页 “有什么内容” 以及 “内容是什么类型”。
3. 用嵌套关系构建整体结构：HTML 的 “搭积木逻辑”
单个元素只能完成局部功能，HTML 通过元素的嵌套关系（父子、兄弟关系）将零散的元素组合成完整的网页结构，就像用积木搭出房子一样。
父子关系：一个元素包含另一个元素，被包含的是 “子元素”，包含者是 “父元素”。
例如：<article>（文章元素）中包含<h2>（标题元素）和<p>（段落元素），则<article>是父元素，<h2>和<p>是其子元素。兄弟关系：同一父元素下的元素互为兄弟。
例如：<ul>（无序列表）中包含多个<li>（列表项），这些<li>之间是兄弟关系。
通过嵌套，元素从 “局部单元” 逐步组合成复杂结构：小到一个按钮（<button>），大到整个网页（<html> 根元素包含 <head> 和 <body>，<body> 再包含导航、主体、页脚等模块）。
【建议大家按照常见标签的例子，稍加练习后再进行下一小节的学习】
（二）网页样式与交互逻辑
按照例子实际操作后的朋友，可能会产生这样的一个疑问，内容确实能按需求显示出来，但这效果......怎么和平时浏览的网页不一样啊（丑且简陋）
这是因为，HTML 只是用来描述元素类型与内容的，以上显示的只是浏览器在渲染 HTML 文档时，会默认地为元素添加一些样式。
如果想要精细地控制元素样式，达成自己想要的美观效果，则需要用到网页开发领域另一门计算机语言，CSS。CSS和HTML、JavaScript共称为Web三板斧。HTML 负责网页内容和骨架，CSS 负责美化元素样式，JavaScript 负责处理页面元素交互逻辑。
由于爬虫主要是和网页内容打交道， 因此我们不需要全部掌握 HTML、CSS、JavaScript 这三种语言，只需要对 HTML 语法、CSS 选择器语法有 基本了解 即可。
还记得上面对元素的介绍吗？元素包含标签、标签内的属性、标签包裹的内容，CSS 就是通过选择器找到 HTML 元素，再用属性 - 值重新给元素设置样式
如果我们调整一级标题的属性为默认的段落正文的样式
<h1>这是一级标题，字号非常大</h1>
<h1 style="font-size: 1rem; font-weight: normal; margin-block-start: 10rem; margin-block-end: 10rem; margin: 2;">加上样式后，一级标题看起来可以像段落正文</h1>会产生以下效果
神奇吧~
（三）HTML语法特性
通过上面的学习，我们理解了HTML元素需要用开始标签和结束标签来标记（自闭和的空元素除外）、通过嵌套完成复杂效果、更改属性调整样式。本小节我们通过一些奇怪的标签来了解HTML的更多语法特性。
HTML中有自闭和标签<br>和字符实体 ，特意用于换行和空格，效果如下：
<p>无空格实体：Hello World!（多个空格被合并）</p>
<p>有空格实体：Hello World!（空格被保留）</p>
<p>无换行标签：床前明月光
疑是地上霜
举头望明月
低头思故乡</p>
<p>有换行标签：床前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡</p>
因为元素中的内容是被标签包裹，直接呈现给用户的，初学者可能会理解为，在被标签包裹的范围随意空格、回车都能正常显示出来，但其实不是。浏览器在解析 HTML 文档时，会忽略所有多余空格、换行符。也就是说，只要元素的书写符合语法规范，你可以把文档所有内容压缩为一行。
<p>无空格实体：Hello World!（多个空格被合并）</p><p>有空格实体：Hello World!（空格被保留）</p><p>无换行标签：床前明月光 疑是地上霜 举头望明月 低头思故乡</p><p>有换行标签：床前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡</p>压缩后的 HTML 代码虽然可读性大打折扣，但同时，文件体积也缩小了许多。如此一来，你从互联网上访问（下载）这个网页时，耗费的流量就会更少，加载时间也会更短。
二、HTML文档结构
通过上面的学习，我们了解到标签大多成对出现，那么点小三角回收“枝叶”，我们就能发现HTML文档的主干结构。
第一行的 !<DOCTYPE html> 表明该文件是 HTML 文档，便于浏览器正确解析，没有实际含义。DOCTYPE 之后的整个网页内容都包裹在 html 元素 中，这是约定俗成的格式，html 元素也被称为 根元素。
再往内部看，网页根元素最粗壮的两个分支，一个叫 head 元素，另一个叫 body 元素。它们分别是网页的 网页头 和 网页体。
网页体中的信息内容是展现给用户的，其主要内容按照页面设计要求由一个个具体元素组成。
网页头中的信息则是展示给浏览器和搜索引擎等程序的，比如：网页内容使用什么 字符编码方式？当用户打开网页时，标签页标题 中应该显示什么内容？该如何配合搜索引擎，让需要网页内容的人能通过 关键字 检索到我的网页？
因此网页头至关重要，HTML规定
- 用 title 元素 设置网页标题，这个标题将显示在浏览器标签页上，也会作为收藏时的描述文字；
- 用 meta 元素 设置网页元信息，这些信息包括网页使用什么样的字符编码方式、样式、整体布局，还包含页面描述信息和面向搜索引擎的搜索关键字等等。
head 元素中还有许多 link 元素 和 script 元素，它们负责将 HTML 文档与对应的 CSS 样式、JavaScript 代码文件关联起来。仔细观察这些元素中的元素内容或 href（hypertext reference，超文本引用） 属性的值，就能够了解这个网页用到了哪些技术。
---------------------------------------------
恭喜你，对网页有了进一步的认识
下一节将正式开始学习如何编写爬虫程序，并将爬取结果保存为文件
下一章节见~