WEB前端基础

最新推荐文章于 2022-02-28 22:18:21 发布

一只小汪汪

最新推荐文章于 2022-02-28 22:18:21 发布

阅读量306

点赞数

分类专栏： python爬虫学习笔记

本文链接：https://blog.csdn.net/weixin_41354919/article/details/114435920

版权

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

8 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本结构，包括HTML文档头信息、图像、超链接、表格的使用，以及CSS的基础用法，如设置文本格式、布局样式。此外，还提及了JavaScript的基本应用，如定义行为，以及HTTP请求过程、状态码和头部信息。内容旨在帮助读者理解网页开发中的关键概念和技术。

摘要由CSDN通过智能技术生成

一、W3C标准

W3C：万维网联盟，W3C 标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构、表现和行为。对应的标准也分三个方面：结构化标准语言（主要包括 XHTML和XML），表现标准语言（CSS），行为标准主要包括：对象模型（W3C DOM）、ECMscript等。

1、HTML

HTML 不是编程语言，是一种表示网页信息的符号标记语言。标记语言是一套标记，HTML 使用标记来描述网页，WEB 浏览器的作用是读取 HTML 文档，并以网页的形式显示它们。浏览器不会显示 HTML 标记，而是使用标记来解释页面的内容。

HTML 语言的特点：

1、可以设置文本的格式，比如标题、字号、文本颜色、段落，等等。

2、可以创建列表

3、可以插入图像和媒体

4、可以建立表格

5、超链接，可以使用鼠标点击超链接来实现页面之间的跳转。

1.1、HTML 的基本结构

使用浏览器访问 www.baidu.com，点击F12 查看源代码

从百度首页的源代码可以分析到 HTML 的基本结构：

1、<html>内容</html>：HTML 文档时由<html></html>包裹，是 HTML 开始的标记。这对标记分别位于网页的最前端和最后端。

2、<head>内容</head>：HTML 文件头标记，也称为 HTML 头信息开始标记。用于包含文件的基本信息，比如网页的标题、关键字等。注意：此标记内的内容不会再浏览器中显示。

3、<title>内容</title>：HTML 文件标题标记。网页的“主题”，显示在浏览器的窗口的左上方。

4、<body>内容</body>：此标记是网页的主体部分。

5、<meta>内容</meta>：页面的元信息。提供有关页面的源信息，比如针对搜素引擎和更新频率的描述和关键词。主要 meta 标记必须放在 head 元素里面。

1.2、文档设置标记

文档设置标记分为格式标记和文本标记。

格式标记：

<br>：强制换行标记，让后面的文字，图片，表格等等，显示在下一行。

<p>：换段落标记。换段落，由于多个空格和回车在 HTML 中会被等效为一个空格，所以 HTML 中药换段落就要用<p>，例如<p>This is a paragraph.</p>

<center>：居中对齐标记。

<pre>：预格式化标记。保留预先编排好的格式，常用来定义计算机源代码。

<li>：列表项目标记。每一个列表使用一个<li>标记，可用在有序列表<ol>和无序列表<ul>中

<dl><dt><dd>：定义性列表。对列表条目进行简短说明。

<hr>：水平分割线标记。可用用作段落之间的分割线。

<div>：分区显示标记，也称为层标记。常用来编排一大段的 HTML 段落，也可以用于将表格式化，和<p>很相似，可以多层嵌套使用。

文本标记：

<hn>：标题标记。共有6个级别，n的范围为1-6，不同级别对应不同显示大小的标题，h1最大，h6最小。

<font>：字体设置标记。用来设置字体的格式，一般有三个常用属性：size（字体大小），color（颜色），face（字体）。

<b>：粗字体标记。

<i>：斜字体标记。

<sub>：文字下标字体标记。

<sup>：文字上标字体标记。

<tt>：打印机字体标记。

<cite>：引用方式的字体，通常显示为斜体字。

<em>：表示强调，通常显示为斜体字。

<strong>：表示强调，通常显示为粗体字。

<small>：小型字体标记

<big>：大型字体标记。

<u>：下划线字体标记。

1.3、图像标记：

<img> 称为图像标记，用来在网页中显示图像。使用方法为：<img src="路径/文件名.文件格式，width=“属性值”，height=“属性值”，border=“属性值”，alt=“属性值”>

属性解释：

src：属性用来指定我们加载的图片的路径、图片的名称以及图片格式

width：属性用来指定图片的宽度，单位为 px、em、cm、mm。

height：属性用来指定图片的高度，单位为 px、em、cm、mm。

border：属性用来指定图片的边框宽度，单位为 px、em、cm、mm。

alt：属性有三个作用：1、当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字；2、如果图像没有下载或者加载失败，会用文字来代替图片显示；3、搜素引擎可以通过这个属性的文字来抓取图片。

1.4、超链接的使用：

爬虫开发中经常需要抽取链接，链接的引用使用的是<a>标记。

<a>标记的基本语法：<a href=“链接地址” target=“打开方式” name=“页面锚点名称”>链接文字或者图片</a>。<a>标记主要包括以下属性：

href 属性值是链接的地址，链接的地址可以是一个网页，也可以是一个视频、图片、音乐等。

target 属性用来定义超链接的打开方式。当属性值为 _blank 时，作用是在一个新的窗口中打开链接；当属性值为 _self（默认值）时，作用是在当前窗口中打开链接；当属性值为 _parent 时，作用是在父窗口中打开页面；当属性值为 _top 时，在顶层窗口中打开文件。

name 属性用来指定页面的锚点名称。

1.5、表格

表格的基本结构包括<table>、<caption>、<tr>、<td>和<th>等标记。

table 常用属性：

width 属性：表示表格的宽度，它的值可以是像素（px）也可以是父级元素的百分比（%）

height 属性：表示表格的高度，它的值可以是像素（px）也可以是父级元素的百分比（%）

border 属性：表示表格外边框的宽度。

align 属性用来表示表格的显示位置。left 居左显示，center 居中显示，right 居右显示。

cellspacing 属性：单元格之间的间隔，默认是 2px ，单位是像素。

cellpadding 属性：单元格内容与单元格边框的显示距离，单位为像素。

frame 属性用来控制表格边框最外层的四条线框。void（默认值）表示无边框；above 表示仅顶部有边框；below 表示仅有底部边框；hsides 表示仅有顶部边框和底部边框；lhs 表示仅有左侧边框；rhs 表示仅有右侧边框；vsides 表示仅有左右侧边框；border 表示包含全部 4 个边框。

rules 属性用来控制是否显示以及如何显示单元格之间的分割线。属性值 none （默认值）表示无分割线；all 表示包括所有分割线；rows 表示仅有行分割线；clos 表示仅有列分割线；groups 表示仅在行组和列组之间有分割线。

<caption>标记用于在表格中使用标题。<caption>属性的插入位置，直接位于<table>属性之后，<tr>表格行之前。<caption>标记中 align 属性可以取四个值：top 表示标题放在表格的上部；bottom 表示标题放在表格的下部；left 表示标题放在表格的左部；right 表示标题放在表格的右部

<tr>标记用来定义表格的行，对于每一个表格行，都是由一对<tr>...</tr>标记表示，每一行<tr>标记内可以嵌套多个<td>或者<th>标记。

<td>和<th> 都是单元格的标记，其必须嵌套在<tr>标记内，成对常出现。<th>是表头标记，通常位于首行或者首例，<th>中的文字默认会被加粗，而<td>不会。<td>是数据标记，表示单元格的具体数据。<td>和<th>两者的标记属性都是一样的。

2、CSS

CSS ：指层叠样式，用来定义如何显示 HTML 元素，一般和 HTML 配合使用。CSS 样式表的目的是为了解决内容与表现分离的问题，即使同一个 HTML 文档也能表现出外观的多样化。在 HTML 中使用 CSS 样式的方式，一般有三种做法：

1、内联样式表：CSS 代码直接写在现有的 HTML 标记中，直接使用 style 属性改变样式。例如：<body style="background-color:green;margin:0;padding:0;"><body>。

2、嵌入式样式表：CSS 样式代码写在<style type="text/css"></style>标记之间，一般情况下嵌入式 CSS 样式写在<head></head>之间。

3、外部样式表：CSS 代码写一个单独的外部文件中，这个 CSS 样式文件以 “.css” 为扩展名，在 <head> 内（不是在 <style> 标记内）使用 <link> 标记将 CSS 样式文件链接到 HTML 文件内。例如：<link rel=“StyleSheet” type=“text/css” href=“style.css”>。。

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性。每个属性有一个值。属性和值由冒号分开。示例：

h1{color：blue；font-size：12px}

解释：h1 是选择器；color 和 font-size  是属性，blue 和 12px 是属性值。

根据选择器的定义方式，可以将样式表的定义分为三种方式：

HTML 标记定义：上面的示例就是使用了这种方式；假如想修改<p>...</p>，可以定义 CSS ：p{属性：属性值；属性1：属性值1}

ID 选择器定义：ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。HTML 元素以 ID 属性来设置 ID 选择器，CSS 中 ID 选择器以 “#” 来定义。示例：

#word{text-align：center；color：red；}
解释：将 HTML 中 ID 为 word 的元素设置为居中，颜色为红色。

class 选择器定义：class 选择器用于描述一组元素的样式，class 选择器用于描述一组元素的样式，class 选择器有别于 ID 选择器，他可以在多个元素中使用。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，class 选择器以一个点 “。” 好显示。示例：.

center{text-align：center；}
解释：将所有class 为 center类的 HTML 元素文本设置为居中

p.center{text-align：center；} 

解释：将所有 p 元素中 class 为 center 的文本居中

温馨提示：CSS 的常见属性有：颜色属性、字体属性、背景属性、文本属性和列表属性。

3、JavaScript 基本用法

JavaScript 是一种轻量级的脚本语言，和 Python 语言是一样的，只不过 JavaScript 是由浏览器进行解释执行。JavaScript 可以插入 HTML 页面中，可由所有的现代浏览器执行。

如何使用 JavaScript ？主要有直接插入代码和外部引用 js 文件两种方法：

1、直接插入代码。在<script></script>标记中编写代码。JavaScript 代码可以直接嵌在网页的任何地方，不过通常把 JavaScript 代码放到 <head> 中。示例：

2、外部引用 js 文件。把 JavaScript 代码放到一个单独的 .js 文件，然后在 HTML 中通过 <script src=‘目标文档的 URL’></script>的方式来引入 js 文件，其中目标文档的 URL 即是链接外部的 js 文件。示例：

这样 /static/js/jquery.js 就会被浏览器执行。

4、XPath

XPath 是一门在 XML 文档中查找信息的语言，被用于 XML 文档中通过元素和属性进行导航。

别的笔记中已经学习过，这里不做介绍：https://blog.csdn.net/weixin_41354919/article/details/100084101

5、JSON

JSON 是 JavaScript 对象表示法（JavaScript object notation），用于存储和交换文本信息。JSON 比 XML 更小、更快。更易解析，因此 JSON 在网络传输中，尤其是 Web 前端中运用非常广泛。JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言，其中包括 Python。

JSON 主要包括以下几个方面：

1、JSON ：名称/值对。JSON 数据的书写格式是：“name”：“qiye”，很像 python 中的字典。

2、JSON 值。 JSON 值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在方括号中）、对象（在花括号中）、null。

3、JSON 对象。 JSON 对象在花括号中书写，对象可以包含多个名称/值对。

4、JSON 数组。 JSON 数组在方括号中书写，数组可包含多个对象，例如：{“reader”：[{“name”：“qiye”，“age”：“20”}，{“name”：“marry”，“age”：“12”}]}，这里的对象 “reader” 是包含两个对象的数组。

二、HTTP 标准

HTTP 协议：超文本传输协议，是用于从 WWW 服务器传输超文本到本地浏览器的传送协议。他可以使浏览器更加高效，减少网络传输。

1、HTTP 请求过程

HTTP 协议采取的是请求响应模型，HTTP 协议永远都是客户端发起请求，服务器回送响应。HTTP 协议是一个无状态的协议，同一个客户端的这次请求和上次请求没有对应关系。一次 HTTP 操作成为一个事务。

2、HTTP 状态码含义

当浏览器访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。在浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。HTTP 状态码主要是为了标识此次 HTTP 请求的运行状态。下面是常见的 HTTP 状态码：

200 ----- 请求成功

301------ 资源（网页等）被永久转移到熬其他 URL

404------ 请求的资源（网页等）不存在

500----- 内部服务器错误

3、HTTP 头部信息

HTTP 头部信息由众多的头域组成，每个头域由一个域名、冒号（：）和域值三部分组成。域名是大小写无关的，域值前可以添加任何数量的空格符，头域可以被扩展为多行，在每行开始处，使用至少一个空格或制表符。示例：

解释：

GET ：代表的是请求方式，HTTP/1.1 表示使用 HTTP 1.1 协议标准

Host 头域：用于指定请求资源的 Intenet 主机和端口号，必须表示请求 URL 的原始服务器或网关的位置。HTTP/1.1 请求必须包含主机头域，否则系统会以 400 状态码返回。

User - Agent 头域：里面包含发出请求的用户信息，其中有使用的浏览器型号、版本和操作系统的信息。这个头域经常用来作为反爬虫的措施。

Accept 请求报头域：用于指定客户端接收那些类型的信息。例如：Accept：image/gif，表明客户端希望接收 GIF 图像格式的资源；Accept：text/html，表明客户端希望接收 html 文本。

Accept - Language 请求报头域：类似于 Accept ，但是它用于指定一种自然语言。例如：Accept - Language：zh-cn 。如果请求消息中没有设置这个报头域，服务器假定客户端对各种语言都可以接受。

Accept - Encoding 请求报头域：类似于 Accept，但是它用于指定可接受的内容编码。例如：Accept - Encoding：gzip.deflate。如果请求消息中没有设置这个域服务器，假定客户端对各种内容编码都可以接受。

Connection 报头域：允许发送用于指定连接的选项。例如指定连接的状态是连接，或者指定 “close” 选项，通知服务器，在响应完成后，关闭连接。

if - Modified -Since 头域：用于在发送 HTTP 请求时，把浏览器端缓存页面的最后修改时间一起发到服务器去，服务器会把这个是时间与服务器上实际文件的最后修改时间进行比较。如果时间一致，那么返回 HTTP 状态码 304（不返回文件内容），客户端收到之后，就直接把本地缓存文件显示到浏览器中。如果时间不一致，就返回 HTTP 状态 200 和新的文件内容，客户端收到之后，会丢弃文件，把新文件缓存起来，并显示在浏览器中。

请求发送成功后，服务器进行响应，接下来看一下响应的头信息，数据如下：

响应头中包含以下内容：

HTTP /1.1 ：表示使用 HTTP 1.1 协议标准，200 OK 说明请求成功

Date ：表示消息产生的日期和时间

Content - Type 实体报头域：用于指明发送给接收者的实体正文的媒体类型。text/html；charset=utf-8 代表 HTML 文本文档，UTF-8 编码。

Transfer - Encoding：chunked 表示输出的内容长度不能确定。

Connection：报头域允许发送用于指定连接的选项。例如指定连接的状态是连续，或者指定 “close” 选项，通知服务器，在响应完成后，关闭连接。

Vary 头域：指定了一些请求头域，这些请求头域用来决定当缓存中存在一个响应，并且该缓存没有过期失效时，是否被允许利用此响应去回复后续请求而不需要重复验证。

Cache - Control ：用于指定缓存指令，缓存指定是单向的，且是独立的。请求时的缓存指令包括：no - cache（用于指示请求或响应消息不能缓存）、no-store、max-age、max-stale、min-fresh、only-if-cached；响应时的缓存指令包括：public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age、s-maxage。

Expires 实体报头域：给出响应过期的日期和时间。为了让代理服务器或浏览器在一段时间以后更新缓存中（再次访问曾访问过的页面时，直接从缓存中加载，缩短响应时间和降低服务器负载）的页面，我们可以使用 Expires 实体报头域指定页面过期的时间。

Last - Modified 实体报头域：用于指示资源的最后修改日期和时间。

Content - Encoding 实体报头域：被用作媒体类型的修饰符，它的值指示了已经被应用到实体正文的附加内容的编码，因而要获得 Content - Type 报头域中所引用的媒体类型，必须采用相应的解码机制。

4、Cookie 状态管理

Cookie 和 Session 都用来保存状态信息，都是保存客户端状态的机制，它们都是为了解决 HTTP 无状态的问题，对于爬虫来讲，我们更加关注的是 Cookie，因为 Cookie 将状态保存在客户端，Session 将状态保存在服务器端。

Cookie 是服务器在本地机器上存储的小段文本并