5.每天进步一点点-Python爬虫需要了解网页的组成

最新推荐文章于 2024-11-06 10:59:13 发布

度假的小鱼

最新推荐文章于 2024-11-06 10:59:13 发布

阅读量243

点赞数 1

分类专栏： # Python爬虫学习笔记文章标签：爬虫

本文链接：https://blog.csdn.net/u014096024/article/details/128155789

版权

Python爬虫学习笔记专栏收录该内容

10 篇文章 4 订阅

订阅专栏

文章目录

网页的组成
1. HTML 了解
- 1.1 HTML 标签语法
- 1.2 其他的语法
2.CSS 选择器
3.JavaScript

网页的组成

一般的网络站点都由多个网页组成，而一个网页由 HTML、CSS 和 JavaScript 三部分组成，它们各司其职。

HTML 决定网页的结构和内容。
CSS 决定网页的样式。
JavaScript 控制网页的行为。

如果把网页比作一扇门，HTML 就是门板，CSS 是门上的油漆或花纹，JavaScript 则是门的开关。接下来我们来了解这三部分

1. HTML 了解

HTML（Hypertext Markup Languag，超文本标记语言）。我们来拆分这个名词，首先是超文本，文本一般指的是文字和符号，而在 HTML 中则可以是图片、音视频等其他媒体，远远超出了文本的范畴，所以称为超文本。其次是标记，在 HTML 中所有内容都叫作标记，用一个标记来包含一块内容，表示其作用，比如

标签用来标记一个文章段落

1.1 HTML 标签语法

HTML 标签是符号< >中的指令，分为单标签（<起始标签/>）和双标签（<起始标签></结束标签>），比如
<br/>和<div></div>。

双标签可以嵌套 ， 但是不能交叉 ， 比如 
<div><p></p></div> 是正确的 ，
<div><p></div></p>则是错误的

双标签中间可以添加标签的内容，比如
<h1>一级标题</h1>

标签还可以通过包含"属性"的方式来设置元素的其他特性，多个属性可以用空格
隔开，比如
<a href="http://coderpig.cn/" target="_blank">猿小鱼的博客</a>

1.2 其他的语法

（1）HTML 使用进行注释，注释不会在浏览器中显示。

（2）在 HTML 代码中直接输入一些特殊字符是没有效果的，需要用专有的代码标记，比如空格为，更多的特殊字符可到特殊字符传送门查看。

一个简单的 HTML 页面示例如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猿小鱼博客</title>
</head>
<body>
<h1>博客介绍</h1>
<p>欢迎来到猿小鱼的博客。</p>
</body>
</html>

在这里插入图片描述

可以把代码文件保存为 index.html，用浏览器打开查看效果，结果运行如下图

在这里插入图片描述

代码关键标签解析如下。
 <!DOCTYPE html>：告诉浏览器要使用哪个 HTML 版本来对页面进行编写，这里声明使用 HTML 5。
 <html>：HTML 页面的根元素。
 <head>：包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
 <title>：文档的标题。
 <body>：具体页面内容

HTML 的规则如上所述，本书并不介绍如何编写 HTML 网页，所以不会对每个标签及相关的属性进行讲解，有兴趣的读者可以访问 w3school传送门进行学习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A5uefUQQ-1669991687746)(Python爬虫image/image-20221202220537092.png)]

常见标签的简单介绍如表 1.5 所示，只需了解标签的作用即可，使用时可查询文档

HTML 常见标签

标签	描述
`<h1><h2><h3><h4><h5><h6>`	标题，h1 到 h6 为从大到小
`<p>`	段落
`<a>`	超链接
`<img>`	图像
`<pre>`	格式化文本
`<u>`	下画线
`<i>`	斜体字
`<cite>`	引用，通常为斜体
`<em>`	强调文本，通常为斜体
`<strong>`	加重文本，通常为黑体
`<font>`	设置字体、字体大小、颜色等
`<big>`	字体变大
`<small>`	字体变小
`<del>`	加删除线
`<code>`	程序码
`<kbd>`	定义键盘文本
`<blockquote>`	块引用，通常为缩进
`<address>`	地址标签
`<sup>`	上标
`<sub>`	下标
`<br/>`	换行
`<hr>`	水平线
`<dl><dt><dd>`	列表
`<ul>`	无序列表
`<ol>`	有序列表
`<li>`	列表中的元素
`<table><tbody><tr><th><td>`	表格相关
`<form>`	表单标签
`<input>`	用于输入的标签，默认为输入框
`<select>`	下拉列表
`<iframe>`	内联框架

2.CSS 选择器

CSS（Cascading Style Sheets，层叠样式表），层叠可以理解为利用 CSS 的选择器可以对 HTML 的元素堆叠很多样式。CSS 的作用就是为 HTML 元素添加样式，从而使页面更加漂亮。

HTML 通过修改属性就可以实现丰富的页面效果，为什么还要引入 CSS？为了解决内容与表现分离的问题，通过修改一个简单的 CSS 文档，即可改变网页中对应的所有元素的布局和外观。可能读者还是不太理解，我们为上一节编写的简单的 HTML 页面添加一个内嵌样式 CSS，然后来看效果，修改后的代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h1 {background-color: red}
p {margin-left: 20px}
</style>
<title>猿小鱼博客</title>
</head>
<body>

<h1>博客介绍</h1>
<p>欢迎来到猿小鱼的博客。</p>

</body>
</html>

代码执行结果如图所示（通过 CSS 为一级标题添加了一个红色背景）

在这里插入图片描述

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

2.1外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

2.2内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

2.3内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

3.JavaScript

JavaScript 一般简称 JS，是一门脚本语言，用于控制网页的行为，很多人对于 JS 的印象可能还停留在使用 JS 写特效上，比如图片轮播、动画等。JS 现在也用于处理页面的逻辑、前后端的数据交互等，利用 Node.js 还可以让 JS 运行在服务器端上。JS 的语法过于烦琐。不做介绍了。感兴趣的可以访问JS传送门来学习

下一篇博客正式进入爬虫笔记