HTML基础介绍（仅介绍涉及R语言爬虫部分内容）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› R语言›R语言教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

说明：本文参照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	大于号

更多HTML实体可以在该地址中查询：Unicode® character table

进入网页进行按Ctrl+F搜索目标内容即可，如我搜索了<符号，查询到它的编号是60.

3.5 常用标签解读

（1）<p>&<br>——段落和换行

案例：http://www.r-datacollection.com/materials/html/SpacesAndLineBreaks.html

网页源代码：

<!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...

（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>

注释：href属性的取值为一个连接地址，在网页中真正显示的内容将是link to some info graphic，并且点击这段话后，网页将自动跳转至href提供的网页。

网页显示效果如下：

例2：设置引用点，并连接到引用点

<a id="top">I am (the) on TOP of the page</a><br>

<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。

（5）<b>、<i>、<strong>——强调标签

强调标签属于布局类标签。

<b>——强调标签（加粗）
<i>——强调标签（斜体）
<strong>——强调标签（加重强调）

案例：http://www.r-datacollection.com/materials/html/TagExample.html

例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>

</ul>

网页显示效果如下：

<ol>主要用于列举排序内容(ordered list)，即列举的效果中有序号表明顺序，同样将每个内容用<li>包裹起来。

例2：生成3个item，将其按顺序列举

<ol>

</ol>

网页显示效果如下：

（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>