"> "> 网络爬虫-网页基础知识 | Yufei Luo's Blog

Yufei Luo's Blog

But I was so much older then, I am younger than that now.

Yufei Luo's Blog

网络爬虫-网页基础知识

发表于 更新于 分类于 ， 阅读次数：
本文字数： 11k 阅读时长 ≈ 10 分钟

HTML简介

什么是HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language。它不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)
  • HTML使用标记标签来描述网页
  • HTML文档包含了HTML 标签及文本内容，HTML文档也叫做 web 页面

HTML标签与HTML元素

HTML标记标签通常被简称为HTML标签。HTML 标签是由尖括号包围的关键词，比如 <html>。它通常是成对出现的，构成<标签>内容</标签>的格式。标签对中的第一个标签是开始标签，第二个标签是结束标签，它们也被称为开放标签和闭合标签。结束标签都以/加上标签名来表示。

属性只能在开始标签中指定，属性值可以用单引号或双引号括起来。

某些标签包含的内容中还可以有新的标签，新的标签名甚至可能还可以与包含它的标签的名称相同。例如<div>标签。

有时候，有些标签并不包含其它内容，只包括自己的属性，甚至连属性都没有，例如：<img src="logo.gif" />。注意最后的一个空格和一个反斜杠，它说明这个标签已经结束，不需要单独的结束标签了。

而一个 HTML元素包含了开始标签与结束标签，以及其中的内容。

HTML基本骨架

下面是一个简单的HTML文件的内容：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html> <!--声明文章内容，这一声明代表文档为HTML5-->
<html> <!--HTML页面的根元素-->
<head> <!--HTML页面的元数据-->
	<meta charset="utf-8"> <!--定义网页编码格式-->
	<title>123</title> <!--定义文档标题-->
</head>
    
<body> <!--包含了页面显示的内容-->
	<h1>我的第一个标题</h1> <!--定义一个标题-->
	<p>我的第一个段落。</p> <!--定义一个段落-->
</body>
</html>

常用标签内容

排版

标题

HTML标题通过<h1>-<h6>来定义：

1
2
3
4
5
6
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

分段与换行

由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>，例如：

1
2
<p>这是第一段。</p>
<p>这是第二段。</p>

或者是使用<br>，它只表示换行，不表示段落开始或者结束，因此没有结束标签。例如：

1
2
3
这是第一段。<br>
这是第二段。<br/>
这是第三段。

容器

有时，要把文档看作不同的部分组合起来的，比如一个典型的页面可能包括三个部分：页头，主体，页脚。<div>标签专门用于标明不同的部分：

1
2
3
<div>页头内容</div>
<div>主体内容</div>
<div>页脚内容</div>

注意，<div>标签可以多层嵌套，例如：

1
2
3
4
<div>
  <div>分类目录...</div>
  <div>当前分类内容列表...</div>
</div>

与<div>标签类似的还有<span>标签，它们两个的本质都是一个容器。

链接

HTML 链接是通过标签<a>来定义的：

1
<a href="https://www.baidu.com">这是一个链接使用了 href 属性</a>

图像

HTML 图像是通过标签<img>来定义的。注意图像的名称和尺寸是以属性的形式提供。

1
<img src="figure.jpg" width="640" height="640" />

表格

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用<th>标签进行定义。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

列表可以分为无序列表（<ul>），有序列表（<ol>）和定义列表（<dl>）。前两种列表更常见一些，都用<li>标签包含列表项目。例如：

1
2
3
4
5
<ul>
  <li>苹果</li>
  <li>桔子</li>
  <li>桃</li>
</ul>

HTML速查列表

本节内容转自https://www.runoob.com/html/html-quicklist.html，更详细的命令及其对应用法也可以在这个教程里面查找。

HTML基本文档

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>

<head> 
<title>文档标题</title> 
</head> 

<body> 
可见文本... 
</body> 

</html>

基本标签（Basic Tags）

1
2
3
4
5
6
7
8
9
10
11
<h1>最大的标题</h1> 
<h2> . . . </h2> 
<h3> . . . </h3> 
<h4> . . . </h4> 
<h5> . . . </h5> 
<h6>最小的标题</h6>   

<p>这是一个段落。</p> 
<br> （换行） 
<hr> （水平线） 
<!-- 这是注释 -->

文本格式化（Formatting）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<b>粗体文本</b> 
<code>计算机代码</code> 
<em>强调文本</em> 
<i>斜体文本</i> 
<kbd>键盘输入</kbd>  
<pre>预格式化文本</pre> 
<small>更小的文本</small> 
<strong>重要的文本</strong>   
<abbr> （缩写） 
<address> （联系信息） 
<bdo> （文字方向） 
<blockquote> （从另一个源引用的部分） 
<cite> （工作的名称） 
<del> （删除的文本） 
<ins> （插入的文本） 
<sub> （下标文本） 
<sup> （上标文本）
1
2
3
4
5
6
普通的链接：<a href="http://www.example.com/">链接文本</a> 
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> 
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a> 
书签： 
<a id="tips">提示部分</a> 
<a href="#tips">跳到提示部分</a>

图片（Images）

1
<img loading="lazy" src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

1
2
3
4
5
<style type="text/css">
h1 {color:red;} p {color:blue;}
</style> 
<div>文档中的块级元素</div> 
<span>文档中的内联元素</span>

无序列表

1
2
3
4
<ul>
    <li>项目</li>
    <li>项目</li> 
</ul>

有序列表

1
2
3
4
<ol>
	<li>第一项</li>
    <li>第二项</li> 
</ol>

定义列表

1
2
3
4
5
6
<dl>
	<dt>项目 1</dt>
    	<dd>描述项目 1</dd>
    <dt>项目 2</dt>
    	<dd>描述项目 2</dd> 
</dl>

表格（Tables）

1
2
3
4
5
6
7
8
9
10
<table border="1">
	<tr>
    	<th>表格标题</th>
        <th>表格标题</th>
    </tr>
    <tr>
    	<td>表格数据</td>
        <td>表格数据</td>
    </tr>
</table>

框架（Iframe）

1
<iframe src="demo_iframe.htm"></iframe>

表单（Forms）

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password"> <input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden"> 
<select> 
<option>苹果</option> 
<option selected="selected">香蕉</option> 
<option>樱桃</option> 
</select> <textarea name="comment" rows="60" cols="20"></textarea>
</form>

实体（Entities）

1
2
3
&lt; 等同于 < 
&gt; 等同于 > 
&#169; 等同于 ©

CSS规则

简介

CSS 指层叠样式表 (Cascading Style Sheets)。样式定义如何显示HTML元素，它们通常存储在样式表中。CSS文件便是用于存储外部样式表，这样可以极大提供工作效率。

组成

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器：指明网页中要应用样式规则的元素

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。

例如：

1
2
3
4
p { /*p代表选择器，指明网页中要应用样式规则的元素，如本例中的p代表作用于所有的段的文字*/
	color:red; /*声明的内容*/
    text-align:center; 
}

此时，HTML中所有如下格式的元素都会使用这一设置：

1
<p>Hello World!</p>

选择器

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 "#" 来定义。

例如以下的样式规则应用于元素属性 id="para1":

1
2
3
4
5
#para1
{
    text-align:center;
    color:red;
}

在HTML中的使用方式如下：

1
2
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>

class选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有center类的HTML元素均为居中：

1
.center {text-align:center;}

当然也可以指定特定的HTML元素使用class。在以下实例中，所有的p元素使用 class="center" 让该元素的文本居中:

1
p.center {text-align:center;}

在HTML中用法如下：

1
2
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>

样式表

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

外部样式

在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link>标签在文档的头部：

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

1
2
3
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表，像下面这样：

1
2
3
4
5
6
7
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

要使用内联样式，需要在相关的标签内使用样式属性。Style 属性可以包含任何 CSS 属性。下面的例子展示如何改变段落的颜色和左外边距：

1
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将按照优先级规则继承过来。

一般情况下，优先级如下：内联样式>内部样式>外部样式>浏览器默认样式

JavaScript

简介

JavaScript 是一种轻量级的编程语言，是可插入 HTML 页面的编程代码。当JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。使用JavaScript，可以实现直接写入HTML输出流、事件触发、改变HTML设置、验证输入等功能。

JavaScript更详细的用法可参考：https://www.runoob.com/js/js-tutorial.html。

用法

HTML 中的脚本必须位于<script>与</script>标签之间。脚本可被放置在 HTML 页面的 <body>和<head>部分中，在HTML文档中可以放入不限数量的脚本。

<script>标签

如需在 HTML 页面中插入 JavaScript，需要使用 <script> 标签。<script> 和</script> 会告诉 JavaScript 在何处开始和结束。<script>和 </script> 之间的代码行包含了 JavaScript:

1
2
3
<script> 
    alert("我的第一个 JavaScript"); 
</script>

浏览器会解释并执行位于<script> 和</script>之间的 JavaScript 代码。

JavaScript 函数和事件

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。通常的做法是把函数放入<head> 部分中，或者放在页面底部。这样就可以把所有函数安置到同一处位置，不会干扰页面的内容。

例如下面的函数会在点击按钮时被调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，在<script>标签的 "src" 属性中设置该 .js 文件。

下面为一个简单的例子：

1
2
3
4
5
6
<!DOCTYPE html> 
<html> 
<body> 
<script src="myScript.js"></script> 
</body> 
</html>

myScript.js文件代码如下：

1
2
3
4
function myFunction() 
{    
	document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; 
}

注意：外部脚本不能包含 <script>标签。

URL

统一资源定位符（Uniform Resource Locator）被用于定位万维网上的文档，URL的一般格式为（带方括号[]的为可选项）：

protocol :// hostname[:port] / path / [;parameters][?query]#fragment

例如：在网址https://baike.baidu.com /item/http/243074?fr=aladdin#3中，https为protocol；baike.baidu.com为hostname；item/http/243074为path；?fr=aladdin为query；#3为fragment。

各个字段的解释如下：

  • protocol：指定使用的传输协议，常用的有表示本机文件的file、文件传输协议ftp、超文本传输协议http、安全超文本传输协议https等
  • hostname：主机名，指存放资源的DNS主机名或者IP地址。有时，在主机名前也可以包含连接到服务器所需的用户名和密码（格式：username:password）。
  • port：端口号，它是一个整数。这一参数为可选参数，省略时使用方案的默认端口，各种传输协议都有默认的端口号，如http的默认端口为80。如果输入时省略，则使用默认端口号。有时候出于安全或其他考虑，可以在服务器上对端口进行重定义，即采用非标准端口号，此时，URL中就不能省略端口号这一项。
  • path：由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
  • ;parameters：这是用于指定特殊参数的可选项。
  • ?query：用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。
  • fragment：信息片断，它是一个字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释的位置处。

审查元素

在浏览器中打开一个网页，然后在网页空白处右键便可看到审查元素，也可以按F12键打开审查元素。这样，便可以看到该网页的HTML内容。

我们在页面的哪个位置点击审查元素，浏览器就会为我们定位到相应的HTML位置，进而就可以在本地更改HTML信息。

常用工具

requests：发送HTTP请求，详细用法可参考https://2.python-requests.org/zh_CN/latest/user/quickstart.html

scrapy：爬取网站数据并提取结构性数据，详细用法可参考https://scrapy-chs.readthedocs.io/zh_CN/1.0/intro/overview.html

beautifulsoup：页面内容解析，简单教程可以参考https://blog.csdn.net/mouday/article/details/79922223

参考

  1. https://www.runoob.com/html/html-tutorial.html
  2. https://blog.csdn.net/qq_26122557/article/details/81076378
  3. https://zongxp.blog.csdn.net/article/details/83277729
  4. https://www.runoob.com/css/css-tutorial.html
  5. https://www.runoob.com/js/js-tutorial.html
  6. https://cuijiahua.com/blog/2020/04/spider-6.html
  7. https://zhuanlan.zhihu.com/p/71374158
  8. https://www.runoob.com/html/html-url.html