【python教程入门学习】网页是怎样构成的

爬虫程序之所以可以抓取数据，是因为爬虫能够对网页进行分析，并在网页中提取出想要的数据。在学习 Python 爬虫模块前，我们有必要先熟悉网页的基本结构，这是编写爬虫程序的必备知识。

如果您熟悉前端语言，那么您可以轻松地掌握本节知识。

网页一般由三部分组成，分别是 HTML（超文本标记语言）、CSS（层叠样式表）和 JavaScript（简称“JS”动态脚本语言），它们三者在网页中分别承担着不同的任务。

• HTML 负责定义网页的内容
• CSS 负责描述网页的布局
• JavaScript 负责网页的行为

HTML

HTML 是网页的基本结构，它相当于人体的骨骼结构。网页中同时带有“＜”、“＞”符号的都属于 HTML 标签。常见的 HTML 标签如下所示：

 声明为 HTML5 文档
.. 是网页的根元素
.. 元素包含了文档的元（meta）数据，如  定义网页编码格式为 utf-8。

编写如下代码：

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  点击访问
9.  
python教程入门学习https://jq.qq.com/?_wv=1027&k=sqgP9S9Y
10.  
Python爬虫
11.  
  
  

   
   
12.  
   
   
认识网页结构
13.  
   
   

    
    
14.  
    
    
HTML

15.  
    
    
CSS

16.  
   
   
17.  
  
  
18.  
19.  

图1：HTML网页结构

CSS

CSS 表示层叠样式表，其编写方法有三种，分别是行内样式、内嵌样式和外联样式。CSS 代码演示如下：

1.  
2.  
3.  
4.  
  
  
5.  

20. python教程入门学习https://jq.qq.com/?_wv=1027&k=sqgP9S9Y

21. 点击访问

22. Python爬虫

24. 认识网页结构

27. HTML
29. CSS

图2：CSS样式表演示

如图 2 所示内嵌样式通过 style 标签书写样式表：

＜style type="text/css"＞

而行内样式则通过 HTML 元素的 style 属性来书写 CSS 代码。注意，每一个 HTML 元素，都有 style，class，id，name，title 属性。

外联样式表指的是将 CSS 代码单独保存为以 .css 结尾的文件，并使用 引入到所需页面：

当样式需要被应用到多个页面的时候，使用外联样式表是最佳的选择。

JavaScript

JavaScript 负责描述网页的行为，比如，交互的内容和各种特效都可以使用 JavaScript 来实现。当然可以通过其他方式实现，比如 jQuery、还有一些前端框架( vue、React 等)，不过它们都是在“JS”的基础上实现的。

简单示例：

1.  
2.  
3.  
4.  

13. python教程入门学习https://jq.qq.com/?_wv=1027&k=sqgP9S9Y

14. Python爬虫

15. 点击下方按钮获取当前时间

16. 点击这里

图3：JS获取当前时间

如果用人体来比喻网站结构的话，那么 HTML 是人体的骨架，它定义了人的嘴巴、眼睛、耳朵长在什么位置；CSS 描述了人体的外观细节，比如嘴巴长什么样子，眼睛是双眼皮还是单眼，皮肤是黑色的还是白色的等；而 JavaScript 则表示人拥有的技能，例如唱歌、打球、游泳等。