说明：本文参照Simon Munzert著&吴今朝译的《基于R语言的自动数据收集》一书，进行个人二次整合而成，如有侵权，告知后删。
同步转载至个人微信公众号：R语言学习
同步转载至个人知乎专栏：R数据处理
之所以要讲讲HTML的基础知识，是基于目前网络爬虫主要爬取源格式为HTML，本着知己知彼的心态，整理了HTML在爬取数据中需要知道的一些小知识点，以供后用。
本文涉及的案例均可在以下链接中找到，http://www.r-datacollection.com/materials/html/
1、HTML定义：HTML本身不是编程语言，而是一种描述内容并定义其表征（显示效果）的标记语言，全称为超文本标记语言 (Hyper Text Markup Language)，且该语言不区分大小写。
2、如何获取网页源代码：点击打开目标网页->右键->查看网页源代码。
3、HTML语法规则：
3.1 树形结构
先看看这么一个入门级HTML源代码：
<!DOCTYPE html>
<html>
<head>
<title>First HTML</title>
</head>
<body>
I am your first HTML-file!
</body>
</html>
通过颜色标注，大家应该可以看出哪些是一个部分（专业的叫法：元素），元素之间存在着嵌套关系，我们将这种结构成为树形结构，绘制出如下关系图：
其中<head>部分用于指定抬头信息，包括这里的title，显示效果如下：
<body>部分用于网页正文内容的指定，这里正文内容仅为一句话：I am your first HTML-file!
注意：一个结构良好并合法的HTML文件中，所有元素之间必须是严格嵌套的，即一对元素必须完全包含于另一对元素中。
非法HTML演示：
<head>
<title>Do not
</head>
do this</title>
3.2 标签、元素和属性
例1：<title>first HTML</title>其中<title>为起始标签，</title>为终止标签，first HTML为内容，三者结合起来叫元素。
例2：<a href="http://www.r-datacollection.com/">Link to Homepage</a>
其中<a href="http://www.r-datacollection.com/">为起始标签，</a>为终止标签，由于标签<a>主要是存放链接地址的，因此又叫链接标签。href为一种属性参数，这里属性取值为一个链接。
小结：
（1）标签的特点：一般以<tagname>开始，以</tagname>结束，但是也会有例外。
（2）标签、属性的关系：
- 属性总是位于起始标签的内部，标签名的右侧。
- 一个标签可以有多个属性，属性间用空格分开。
例：<meta name="roots" content="noindex,nofollow">
（name,content均为标签meta的属性，使用空格隔开即可。）
- 属性值需要用引号进行引用，引号使用注意事项：单引号、双引号均可使用，但是如果属性值内部已经有一种引号存在，则属性值整体需要另一种引号。
例：<example quote="He sat down and spoke 'What?',he said.">
也可写作：<example quote='He sat down and spoke "What?",he said.'>
（3）常见的标签：
- <head>——标题标签
- <title>——网页名称标签
- <body>——正文标签
- <br>——换行标签（不需要以</br>结束）
- <a>——链接标签（锚标签）
- <p>——段落标签
- <h1>、<h2>、<h3>......——标题标签
- <link>——外部引用标签
- <meta>——元数据标签（不需要以</meta>结束）
- <b>——强调标签（加粗）
- <i>——强调标签（斜体）
- <strong>——强调标签（加重强调）
- <div>——组织型标签（跨行、跨段、跨标签、分组）
- <span<——组织型标签（内联分组）
- <form>——表单标签
- <script>——外部脚本标签
- <table>、<tr>、<td>、<th>——表格标签
3.3 注释
HTML中，注释标记方式：以<!--开头，以-->结尾。
注释不会被解析，因此不会在网页中显示，但是网页源代码中可见。
3.4 特殊字符（HTML实体）
例：<p>5<6 but 7>3 </p>
如果按照字面意思理解，表达的是5<6但是7>3 这样的数学关系，然而，事实上网页显示结果并非如此，这是因为<、>这两个符号在HTML中已经有特殊的含义了，它们联合标签名字共同构成标签，因此，当我们需要表达大于、小于这类关系时，就需要对<、>符号做特殊处理。
处理方式：<p>5 < 6 but 7 > 3 </p>
这里，我们将<符号换成了<，将>符号换作>，乍一看，很复杂，事实上，真的很简单。
格式1：&+HTML实体名+;
格式2：&+HTML实体数字+;
附：常见的HTML特殊实体名称对照表
| 特殊字符 | 实体数字 | 实体名 | 解释 |
| “” | #34 | quot | 引号 |
| ' | #39 | apos | 单引号 |
| & | #38 | amp | 连接符 |
| > | #62 |
gt | 大于号 |
网页源代码：
<!doctype html>
<html>
<head>
<title>no title</title>
</head>
<body>
<p> I'll be presented always the same way, always the same way, <br>
always
the
same... </p>
<p> I'll be presented always
the same way, always
the same way, <br>
always the same... </p>
</body>
</html>
注释：这段代码中大量使用<br>、<p>标签，其中<br>表示换行，<p>表示段落，<p>......</p>标签之间的为一段，</p>之后的内容另起一段。
尽管在代码中我们人为增加了大量空格，如： I'll be presented always the same way, 但是在显示的时候，多个连续空格只会显示为一个空格。
网页显示效果如下：
I'll be presented always the same way, always the same way,
always the same...
I'll be presented always the same way, always the same way,
always the same...
（2）<a>——锚标签
锚标签功能：从一个网页到另一个网页的连接功能，既可以连接全部文档，也可以连接其中部分内容。
案例：http://www.r-datacollection.com/materials/html/TagExample.html
由于网页源代码较为复杂，我们仅截取其中涉及锚标签部分进行展示和讲解。
例1：连接到另一个网页
<a href="https://pic.twitter.com/Yg9UZdd6dt">link to some info graphic</a>
<a href="#bottom">I link to the bottom of the page
- all the way down</a>
.......
<a href="#top">I link to the top of the page
- all the way up</a><br>
<a id="bottom">I am the bottomline</a>
注释：两段代码结构是非常相似的，第一段功能为从网页顶端连接至网页底端，另外的为相反的连接方向。
这里涉及设置引用点，如：id="top"，id="bottom"均为设置的引用点，href="#bottom"，href="#top"则设置连接的地址为底端或者顶端。点击I link to the bottom of the page语句，则会跳转至本页底端。
网页显示效果如下：
（3）meta——元数据标签
元数据标签功能：用于提供HTML网页的元信息，包括网页的作者，网页编码方式，网页关键字，网页使用的语言等，放置于<head>元素内部。
结构特点：以<meta>开头，但不必以</meta>结束。
常见属性：name,content,charset
案例：http://www.r-datacollection.com/materials/html/TagExample.html
例1：指定关键字为Automation, Data, Data Collection, R
<meta name="keywords" content="Automation, Data, Data Collection, R">
例2：指定字符编码方式为ISO-8859-1
<meta charset="ISO-8859-1">
（4）<link>——外部引用标签
外部引用标签功能：用于链接并引入信息及外部文件，包含网站授权信息、网页作者信息、网站帮助文档、网站中涉及的图标等，放置于<head>元素内部。
结构特点：以<link开头，/>结尾。
例1：指定网站抬头使用的图标
<link rel="shortcut icon" href="htmlresources/favicon.ico" type="image/x-icon" />
注释：涉及多个属性（rel/href/type）使用空格隔开。
rel="shortcut icon" 表示链接的对象为什么内容，这里表示是一个缩略图标，href="htmlresources/favicon.ico" 表示图标位置见链接，type="image/x-icon" 表示对象类型为图片/图标。
网页显示如下：
那个墨镜表情就是我们链接的图标了~
例2：指定使用的样式表
<link href="htmlresources/awesomestyle.css" rel="stylesheet" type="text/css"/>
注释：rel="stylesheet"告知链接对象为一种表格样式，这种样式是目前最为通用的，href="htmlresources/awesomestyle.css" 告诉了表格样式存放的网页地址，type="text/css"表示表格样式的类型为text/css。
- <b>——强调标签（加粗）
- <i>——强调标签（斜体）
- <strong>——强调标签（加重强调）
例1：将文本格式设置为斜体
<i>Have you noticed that the text is not broken into
a new line unless the br-tag is used or the end of the browser window is reached? Try to make the browser window smaller until it starts breaking the text into new lines. </i>网页显示效果如下：
例2：将文本格式设置为粗体
<b>The p-tag forces line breaks before the start of its content</b>
网页显示效果如下：
（6）<h1>、<h2>、<h3>——标题标签
HTML定义了一系列的标题级别，共1~6级，示例如下：
<h1>H1: I am the main heading</h1>
<h2>H2: and here comes normal text:</h2>
网页显示效果如下：
（7）<ul>、<ol>——列举内容
<ul>主要用于列举非排序内容(unordered list)，即列举的效果中没有序号表明顺序，并将每个内容用<li>包裹起来。
例： 生成3个item，将其列举出来。
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
网页显示效果如下：
<ol>主要用于列举排序内容(ordered list)，即列举的效果中有序号表明顺序，同样将每个内容用<li>包裹起来。
例2：生成3个item，将其按顺序列举
<ol>
<li>list item 1</li>
<li>list item 2</li>
网页显示效果如下：
（8）<form>——表单标签
HTML中的表单可以实现用户与服务器的交互，用户可以向服务器发送数据，提交表单后，服务器便能实现数据收集的功能，如保险行业的出单系统便是如此，业务人员在前台出单，信息被收集起来，在后台我们便能看到一天的出单量；也可以是用户提交表单信息，提交一次需求，服务器收到需求信号，据此作出响应，这个例子很常见，如我们日常使用的搜索引擎。
结构特点：以<form开头，以>结束。
案例：http://www.r-datacollection.com/materials/html/FormExample.html
我们做了一个简单的表单，通过提交password来判断你是否通过验证。
网页显示效果如下：
网页源代码如下：
<!DOCTYPE html>
<html><head>
<link rel="shortcut icon" href="htmlresources/key.ico" type="image/x-icon" />
<title> No pasaran! </title>
</head>
<body>
<h3 id="heading" > You Shall Not Pass! </h3>
<form name ="submitPW" action ="Passed.html" method ="get" >
<fieldset>
The Magical Password:
<input name="pw" type="text" value="" >
<br>
<br>
<input type="submit" value="Passing Anyways">
</fieldset>
</form>
</body>
</html>
注释：<form name="submitPW" action="Passed.html" method="get">表示当提交（点击submit按钮）了表单所需内容（password）后，对submitPW（一个内部识别符号，也就是提交password）执行的动作（action）参见Passed.html，并且还设置了用户端向服务器发送数据的方式为get，当使用get方法发送数据时，发送的信息会被放置在URL之后。除了get方式，常见的还有post法。
<input name="pw" type="text" value="">用于对输入值进行设置，这里pw需要的是text（文本）格式，value=""表示默认值为空。
<input type="submit" value="Passing Anyways">用于设置提交按钮（submit）的信息，value="Passing Anyways"表示按钮显示名称为"Passing Anyways"。
<fieldset>标签用于从逻辑上将表单中的元素组合起来。
其余内容不再赘述，前面均有涉及。
补充：其他常见的表单样式
案例：http://www.r-datacollection.com/materials/html/InputTypes.html
由于网页源代码较长，这里仅摘取涉及表单部分，并做相应整合。
- reset——一键重置表单数据
<form action="InputTypes.html" method="GET">
reset <br>
<input type="reset" name="reset"> <br><br>
submit
<input type="submit">
</form>
网页显示效果如下：
注释：reset <br>中的reset为显示在网页中的文本，即网页显示效果中“重置”二字上的reset。
<input type="reset" name="reset"> <br><br>表示对reset（内部识别符名称）执行的type为reset（数据重置）。
submit为网页中显示的文本submit,这里没有换行符<br>,因此submit与提交按钮是并列在同行中。
<input type="submit">中type="submit"表示调用提交这一功能。
- checkbox——勾选框
<form action="InputTypes.html" method="GET">
checkbox <br>
<input type="checkbox" name="checkbox"> <br><br>
submit
<input type="submit">
</form>
网页显示效果如下：
- date——日期表单
<form action="InputTypes.html" method="GET">
date <br>
<input type="date" name="date"><br><br>
submit
<input type="submit">
</form>
网页显示效果如下：
- file——选择文件上传
<form action="InputTypes.html" method="GET">
file <br>
<input type="file" name="file"><br><br>
submit
<input type="submit">
</form>
网页显示效果如下：
- select——单选、复选文本内容
<form action="InputTypes.html" method="GET">
selection <br>
<select name="favnames" size="5" multiple>
<option>Jim</option>
<option>Jhon</option>
<option>James</option>
<option>Joe</option>
<option>Jason</option>
</select> <br><br>
submit
<input type="submit">
</form>
网页显示效果如下：
注释： <select name="favnames" size="5" multiple>通过指定multiple属性，实现多选，设置 size="5"则限定可选内容只能是5个。选项以固定格式提供：如<option>Jim</option>。
- textarea——构建文本输入框
textarea的特征是可以输入多行文本并提交。
<form action="InputTypes.html" method="GET">
textarea <br>
<textarea name="textarea">
Type in text ...
</textarea><br><br>
submit
<input type="submit">
</form>
网页显示效果如下：
常见表单就暂时介绍到这里，接下来我们再看看HTML中的表格。
（9）<table>、<tr>、<td>、<th>——表格相关标签
- <table>——新建一个表格
- <tr>——在表格中新建一行
- <td>——在表格中定义一个单元格内容
- <th>——在表格中定义一个表头
案例：http://www.r-datacollection.com/materials/html/HTMLTable.html
这里有一个做好的网页表格，我们仅截取网页源代码中body部分进行讲解。
<body>
<h1>An HTML Table</h1>
<table><tr> <th> Rank </th> <th> Nominal GDP </th> <th> Name </th> </tr>
<tr> <th></th> <th> (per capita, USD) </th> <th></th> </tr>
<tr> <td> 1 </td> <td> 170,373 </td> <td> Lichtenstein </td> </tr>
<tr> <td> 2 </td> <td> 167,021 </td> <td> Monaco </td> </tr>
<tr> <td> 3 </td> <td> 115,377 </td> <td> Luxembourg </td> </tr>
<tr> <td> 4 </td> <td> 98,565 </td> <td> Norway </td> </tr>
<tr> <td>5 </td> <td> 92,682 </td> <td> Qatar </td> </tr>
</table>
</body>
注意：若对应位置无内容，也应有标签进行占位，如第二行中的表头。一个单元格的内容需要一组<td>、</td>标签进行包裹，一行数据，需要一组<tr>、</tr>进行包裹，一个表头也需要一组<th></th>进行包裹。
网页显示效果如下：
