python爬虫——第一篇：了解网页构成

非凡 · 发表于 2021-10-23 18:09:28

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由非凡于 2021-10-23 21:35 编辑

原文中第一篇是介绍了什么是爬虫，我想这个就不需要再给放到这里来了，大家应该都是知道的。

但是网页的构成还是需要了解下的，毕竟爬虫的目的就是通过去网页上爬取我们所需要的东西，如果不了接爬虫，怎么好获取自己想要的东西呢？

网页一般由三部分组成，分别是 HTML（超文本标记语言）、CSS（层叠样式表）和 JavaScript（简称“JS”动态脚本语言），它们三者在网页中分别承担着不同的任务。
HTML 负责定义网页的内容——是网页的主要内容
CSS 负责描述网页的布局——定义网站中内容的样式、文本字体、图片大小等
JavaScript 负责网页的行为——是区分动态网站和静态网站的主要，所谓的行为举个简单例子，通过你鼠标或键盘在网站上的操作，反馈不同的内容给到你。

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

——标签是成对出现的，<img src="" alt="">表示图片的标签除外
格式：
<标签名>
标签内容
<子标记名>
标签内容（文本）
图片
</子标签名>
</标签名>
两个标记中间存放该标签的内容。

常见的 HTML 标签如下所示：
<!DOCTYPE html> 声明为 HTML5 文档
<html>..</html> 是网页的根元素
<head>..</head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title>..<title> 元素描述了文档的标题
<body>..</body> 表示用户可见的内容
<div>..</div> 表示框架
<p>..</p> 表示段落
<ul>..</ul> 定义无序列表
<ol>..</ol>定义有序列表
<li>..</li>表示列表项
<img src="(图片link)" alt="">表示图片
<h1>..</h1>表示标题
<a href="(link)">..</a>表示超链接

一个简单的网页如下代码：
复制一个网页代码到txt文件，然后吧txt文件后缀改成html,就可以成为一个简单的网页了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程帮</title>
</head>
<body>
<a href="www.biancheng.net">点击访问</a>
<h1>编程帮www.biancheng.net</h1>
<h2>Python爬虫</h2>
<div>
<p>认识网页结构</p>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
   <!-- 内嵌样式 -->
    <style type="text/css">
    
    body{
        background-color:yellow;
    }
    p{
        font-size: 30px;
        color: springgreen;
    }
    </style>
<meta charset="utf-8">
<title>编程帮</title>
</head>
<body>
<!-- h1标签使用了行内样式 -->
<h1 style="color: blue;">编程帮www.biancheng.net</h1>
<a href="www.biancheng.net">点击访问</a>
<h2>Python爬虫</h2>
<div>
<p>认识网页结构</p>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</body>
</html>

如图 2 所示内嵌样式通过 style 标签书写样式表：
＜style type="text/css"＞</style>
而行内样式则通过 HTML 元素的 style 属性来书写 CSS 代码。注意，每一个 HTML 元素，都有 style，class，id，name，title 属性。

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

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
当样式需要被应用到多个页面的时候，使用外联样式表是最佳的选择。

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

<!DOCTYPE html>

<html>
<head>
    <style type="text/css">
        body{
            background-color: rgb(220, 226, 226);
        }
    </style>
<meta charset="utf-8">
<title>编程帮</title>
</head>
<body>
<h1 style="color: blue;">编程帮www.biancheng.net</h1>
<h2>Python爬虫</h2>
<p>点击下方按钮获取当前时间</p>
<button onclick="DisplayDate()">点击这里</button>
<p id="time" style="color: red;"></p>
<!-- script标签内部编写js代码 -->
<script>
    function DisplayDate(){
        document.getElementById("time").innerHTML=Date()
    }
</script>
</div>
</body>
</html>

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

本篇帖子主要内容来自于
http://c.biancheng.net/python_spider/webpage.html

账号		自动登录	找回密码
密码			立即注册

[技术交流] python爬虫——第一篇：了解网页构成

马上注册，结交更多好友，享用更多功能^_^