Python爬虫学习：网页基础- 前端开发

文章目录

一、网页的组成

网页可以分为三大部分，HTML、CSS和JavaScript。将网页当成一个人的话，HTML为人的骨架，CSS为人的皮肤，JavaScript为人的肌肉，三者结合起来才能形成一个完善的网页。

HTML
超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。不同类型的元素通过不同的标签来表示，如视频用video标签表示，段落使用p表示，他们之间的布局常通过标签div嵌套组合而成。
CSS
HTML定义了网页的结构，但是只有HTML页面的布局并不美观，可能只是简单的节点元素排列，为了网页的美观这里借助CSS。
CSS，全称叫作Cascading Style Sheets，也就是层叠样式表。目前唯一的网页排版样式标准。“层叠”指在HTML中引用了数个样式文件，当样式发生冲突时，浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。
例如

#head_test.s-islite .s-top {
    position: absolute;
    bottom: 60px;
    width: 80%;
    height: 171px;}

这个例子大括号前面是一个CSS选择器，此选择器的意思是首先选中id为head_test且class为s-islite的节点，然后再选中其内部的class为s-top的节点。
大括号内部写的就是一条条样式规则，例如position指定了这个元素的布局方式为绝对布局，bottom指定元素的下边距为60像素，width指定了宽度为80%占满父元素，height则指定了元素的高度。
也就是，我们将位置、宽度、高度等样式配置统一写成这样的形式，然后用大括号括起来，接着在开头再加上CSS选择器，这就代表这个样式对CSS选择器选中的元素生效，元素就会根据此样式来展示了。
在网页中，一般会统一定义整个网页的样式规则，并写入CSS文件中，后缀为css(test.css)。在HTML中，只需要用link标签即可引入写好的CSS文件，这样整个页面就会变得整洁美观。

JavaScript
JavaScript，简称JS，是一种脚本语言。HTML和CSS配合使用，提供给用户的只是一种静态信息，缺乏交互性。我们在网页里可能会看到一些交互和动画效果，如下载进度条、提示框之类的，这就是JavaScript的功劳。它的出现使得用户与信息之间不只是一种浏览与显示的关系，而是实现了一种实时、动态、交互的页面功能。
JavaScript通常也是以单独的文件形式加载，后缀为js，在HTML中通过script标签即可引入。

<script src="jquery-2.1.1.js"> </script>
1

综上所述，HTML定义了网页的内容和结构，CSS描述了网页的布局，JavaScript定义了网页的行为。

二、网页的结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>This is a Demo</title>
    </head>
    <body>
        <div id="container">
            <div class="wrapper">
                <h2 class="title">Hello World</h2>
                <p class="text">Hello, this is a paragraph.</p>
            </div>
        </div>
    </body>
</html>
67
8
9
10
11
12
13
14
15

这是最简单的一个HTML实例，开头用DOCTPYE定义了文档标签，其次最外层是HTML标签，最后还有对应的结束标签来表示闭合，内部是head标签和body标签，分别代表网页头和网页体，他们也需要结束标签。head标签内定义了一些页面的配置和引用，如：

<meta charset="UTF-8"> #它指定了网页的编码为UTF-8
1

title 标签则指定了网页的标题，会显示在网页的选项中，不会显示在正文中。body标签内则是在网页正文中显示的内容。div标签定义了网页中的区块，它的id是container，这是一个非常常用的属性，且id的内容在网页中是唯一的，我们可以通过它来获取这个区块。然后在此区块内又有一个div标签，它的class为wrapper，这也是一个非常常用的属性，经常与CSS配合使用来设定样式。然后此区块又有一个h2标签，这代表一个2级标题。另外还有一个p标签代表一个段落。在这两者中直接写入的内容可在网页中直接呈现出来，它们也有各自的class属性。

三、选择器

 <div id="container">
            <div class="wrapper">
                <h2 class="title">Hello World</h2>
                <p class="text">Hello, this is a paragraph.</p>
            </div>
 </div>
6

代码中div节点的id为container，那么就可以表示为 #container，其中 #开头代表选择id，其后紧跟id的名称。

如果我们想选择class为wrapper的节点，便可以使用.wrapper，这里以点（.）开头代表选择class，其后紧跟class的名称。

另外，还有一种选择方式，那就是根据标签名筛选，例如想选择二级标题，直接用h2即可。这是最常用的3种表示，分别是根据id、class、标签名筛选，请牢记它们的写法。

CSS选择器还支持嵌套选择，各个选择器之间加上空格分隔开便可以代表嵌套关系，如#container .wrapper p则代表先选择id为container的节点，然后选中其内部的class为wrapper的节点，然后再进一步选中其内部的p节点。
如果不加空格，则代表并列关系，如#container .wrapper p.text代表先选择id为container的div节点，然后选中其内部的class为wrapper的节点，再进一步选中其内部的class为text的p节点。这就是CSS选择器，其筛选功能还是非常强大的。

CSS选择器还有一些其他语法规则，具体如下表所示
(基本选择器的优先级：id > class > 元素)

选择器	例子	例子描述
`.class`	`.test`	选择class="test"的所有节点
`#id`	`id=first`	选择id="first"的所有节点
`*`	`*`	选择所有节点
`element`	`p`	选择所有p节点
`element,element`	`div,p`	选择所有div节点和所有p节点
`element element`	`div p`	选择div节点内部的所有p节点