（爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客- | ImapBox

（爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客-

14 五月
星期四, 14 五月 2020 08:40 Last Updated on 星期四, 14 五月 2020 08:40 0 Comments


一、网页的组成

​ 网页可以分为三大部分——HTML，CSS 和 JavaScript

1、HTML

​ HTML：一种用来描述网页的语言——超文本标记语言（Hyper Text Markup Language）。网页包括了文字，土图片，视频和按钮等复杂的元素，其中基础框架就是HTML。不同的元素通过不同的标签来表示，例如：图片img，视频video，段落p，一级标题h1 等。他们之间的分布通常又由 div 嵌套组合而成，通过标签的排序和嵌套才形成了网页框架。

2、CSS

​ CSS：一个网页排版工具——层叠样式表（Cascading Style Sheets）。即当在HTML中引用了数个样式（文字大小，颜色，元素间距，排列等格式）文件并且发生冲突时，浏览器能依据层叠顺序进行处理。以下给出一个CSS例子：

#head_wrapper.s-ps-islite .s-p-top{ position: absolute; bottom:40px; width:100%; height:181px; }

​ 其中大括号前是一个CSS选择器。意思为：选中 id 为 head_wrapper 且 class 为 s-ps-islite 的节点。大括号下的就是一条条样式规则，例如：position 指定了元素的布局方式为“绝对布局”，bottom 指定元素的下边距为“40像素”，width 指定了宽度为“100%占满父元素“，height 指定了指定了元素的高度。即我们将这样的样式配置写成这样的格式，然后用大括号括起来，在开头加上CSS选择器，这就代表这个样式对CSS选择器选中的元素生效。

​ 在网页中一般会统一定义整个网页样式规则，并写入CSS文件中（后缀为css）。在HTML中，只需要 link 标签即可引入写好的CSS文件。

3、JavaScpit

​ JavaScipt：一种脚本语言。如果一个网页中只有 HTML 和 CSS 配合使用，那么这个网页能提供给用户的只有一种静态信息，缺乏交互性。而我们平常在网页中看到的一些交互和动画效果（下载进度条，提示框，轮播图等），通常都是JavaScipt的功劳，它实现了一种实态、动态、互交的页面功能。

​ JavaScipt通常也是以单独文件形式加载的，后缀为 js ，在HTML中通过 scipt 标签即可引入，例：

<scipt src="jquery-2.1.0.js"></scipt>

二、网页的结构

​ 我们先自己写一个例子，再分析HTML的基本结构。先创建一个 txt 文件（名字自取），写入以下这串代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> This is a Demo</title> </head> <body> <div id="container"> <div class="wrapper"> <h1 class="title">Hello World(这是一级标题)</h1> <h2 class="title">Hello World(这是二级标题)</h2> <p class="text">Hello, this is a paragraph.(这是段落)</p> </div> </div> </body> </html>

写好后将 txt 文件的后缀改为：.html 并双击打开。

​ 这是一个最简单的HTML例子。开头用 DOCTYPE定义了文档的类型，其次是 html 标签，还有最后的结束标签表示闭合，内部是 head（网页头） 和 body（网页体） 标签，同样也有结束标签。其中 head 中定义了一些网页的配置和引用，例：

<meta charset="utf-8">

指定了网页的编码为UTF-8。

  • title 标签定义了网页的标题，显示在网页的选项卡中（不显示在正文）；
  • body 标签内则是网页正文中的内容；
  • div 标签定义了网页中的区块，其中它的 id 是 container，这是一个非常常用的属性，且 id 的内容在网页中是唯一的，我们可以通过它来获得这个区块；
  • 在 id 区块下还有一个 div 标签，它的 class 为 wrapper，这也是一个非常常用的属性，通常与CSS配合使用来定义样式；
  • h1 标签为：一级标题；
  • h2 标签为：二级标题；
  • p 标签为：段落（一个 p 标签表示一个段落）；

​ 一般网页标准形式就是如此，html 标签内嵌套 head 和 body 标签，head 内定义网页的配置和引用，body 标签内定义网页的正文。

三、节点树及节点间的关系

​ 在HTML中，所有标签定义的内容都是节点，他们构成了HTML DOM树。那么什么是DOM？

​ DOM（Document Object Model） 是 W3C（万维网联盟）的标准，即文档对象模型。它定义了访问 HTML 和 XML 文档的标准（W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档内容、结构和样式）。

1、W3C DOM标准被分为3个不同的部分：

  • 核心 DOM：针对任何结构化文档的标准模型；
  • XML DOM：针对 XML 文档的标准模型；
  • HTML DOM：针对 HTML 文档的标准模型；

根据 W3C 的 HTML DOM 标准，HTML文档中的所有内容都是节点

  • 整个文档是一个文档的节点；
  • 每个 HTML 元素是元素节点；
  • HTML 元素内的文本时文本节点；
  • 每个 HTML 属性是属性节点；
  • 注释是注释节点；

2、HTML DOM 节点树

​ HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树，通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

（爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客-

3、节点父、子和同胞

​ 节点树中的节点彼此拥有层级关系：父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

  • 在节点树中，顶端节点被称为根（root）
  • 每个节点都有父节点、除了根（它没有父节点）
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

（爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客-
本段参考 W3SCHOOL，链接：https://www.w3school.com.cn/htmldom/dom_nodes.asp

四、选择器

​ 现在我们已经知道网页是由许多节点组成的，CSS选择器会根据不同的节点设置不同的样式规则，那么如何定义节点？

​ 以我们自己写的实例为例子：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> This is a Demo</title> </head> <body> <div id="container"> <div class="wrapper"> <h1 class="title">Hello World(这是一级标题)</h1> <h2 class="title">Hello World(这是二级标题)</h2> <p class="text">Hello, this is a paragraph.(这是段落)</p> </div> </div> </body> </html>

三种常见的选择方式：

  1. 根据 id 进行筛选：在 div 节点中的 id 为container，那么就可以表示为 #contairner，其中 #开头表示选择 id，其后紧跟 id 的名称；
  2. 根据 class 进行筛选：如果我们想选择 class 为 wrapper 的节点，就可以使用 .wrapper，这里的（.）开头代表选择 class，其后紧跟 class 的名称；
  3. 根据标签名筛：想要选择二级标题，直接用 h2 即可；
  • 另外CSS选择器还支持嵌套选择，各个选择器之间加上空格分隔便可以代表嵌套关系，例：
#container .wrapper p

代表先选择 id 为 container 的节点，然后选中其内部的 class 为 wrapper 的节点，然后再选择内部的 p 节点。

  • 如果不加空格则表示并列关系，如：
div#container .wrapper p.text

代表先选择 id 为 container 的 div 节点，然后选中其内部的 class 为 wrapper 的节点，再进一步选中中内部的 class 为 text 的 p 节点。

下面附上CSS选择器的部分语法：

选择器 例子 例子描述
.class .intro 选择 class=“intro” 的所有节点
#id #firstname 选择 id=“firstname”的所有节点
* * 选择所有节点
element p 选择所有 p 节点
element , element div , p 选择所有 div 节点和所有 p 节点
element element div p 选择 div 节点内的所有 p 节点
element>element div>p 选择父节点为 div 节点的所有 p 节点
element+element div+p 选择紧接在 div 节点之后的所有 p 节点
[ attribute ] [ target ] 选择带有 target 属性的所有节点
[ attribute=value ] [ target=blank ] 选择带有 target=“blank” 的所有节点
[ attrubute~=value ] [ title~=flower ] 选择 title 属性包含单词 flower 的所有节点
: link a : link 选择所有未被访问的链接
: visited a : visited 选择所有已被访问的链接
: active a : active 选择活动链接
: hover a : hover 选择鼠标指针位于其上的链接
: focus input : focus 选择获得焦点的 input 节点
: first-letter p : first-letter 选择每个 p 节点的首字母
: first-line p : first-line 选择每个 p 节点的首行
: first-child p : first-child 选择属于父节点的第一个子节点的所有 p 节点
: before p : before 在每个 p 节点的内容之前插入内容
: after p : after 在每个 p 节点的内容之后插入内容
: lang(language) p : lang 选择带有 it 开头的 lang 属性值的所有 p 节点
element1~element2 p~ul 选择前面有 p 节点的所有 ul 节点
[ attribute^=value ] a[ src^=“https” ] 选择其 src 属性值以 https 开头的所有 a 节点
[ attribute$=value ] a[ src$=“.pdf” ] 选择其 src 属性以 .pdf 结尾的所有 a 节点
[ attribute*=value ] a[ src8=“abc” ] 选择其 src 属性中包含 abc 字串的所有 a 节点
: first-of-type p : first-of-type 选择属于其父节点的首个 p 节点的所有 p 节点
: last-of-type p : last-of-type 选择属于其父节点的最后 p 节点的所有 p 节点
: only-of-type p : only-of-type 选择属于其父节点唯一的 p 节点的所有 p 节点
: only-child p : only-child 选择属于其父节点的唯一子节点的所有 p 节点
: nth-child(n) p : nth-child 选择属于其父节点的第二个子节点的所有 p 节点
: nth-last-child(n) p : nth-last-child 同上，从最后一个子节点开始计数
: nth-of-type(n) p : nth-of-type 选择属于其父节点第二个 p 节点的所有 p 节点
: nth-last-of-type p : nth-last-of-type 同上，但是从最后一个子节点开始计数
: last-child p : last-child 选择属于其父节点最后一个子节点的所有 p 节点
: root : root 选择文档的根节点
: empty p : empty 选择没有子节点的所有 p 节点（包括文本节点）
: target #new : target 选择当前活动的 #new 节点
: enabled input : enabled 选择每个启用的 input 节点
: disabled input : disabled 选择每个禁用的 input 节点
: checked input : checked 选择每个被选中的 input 节点
: not(selector) : not 选择非 p 节点的所有节点
: : selection : : selection 选择被用户选取的节点部分

所有内容全部引自《python3 网络爬虫开发实战（人民邮电出版社）》，此笔记仅用于学习。

原创文章 2获赞 35访问量 223

  • （爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客- （爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客- 35
  • （爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客- 评论
  • （爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客-
    x

    海报

    扫一扫，海报

  • （爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客- （爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客- 3
  • （爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客- 手机看

    到微信朋友圈

    x

    扫一扫，手机阅读

  • （爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客-打赏

    打赏

    （爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客-

    疯人忠

    “你的鼓励将是我创作的最大动力”

    5C币 10C币 20C币 50C币 100C币 200C币

（爬虫学习笔记2）网页基础（网页的组成，网页的结构，节点树及节点间的关系，选择器）爬虫Zbreakzhong的博客-



 
 
 
 


本页所有内容来自官方网站 https://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器 工具地址: 网页图片批量下载工具-最新版本下载

非凡下载站地址：https://www.crsky.com/soft/35838.html

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。

ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.




文章目录

  • 全球报导 (16311)
  • 全球云计算 (29506)
  • 程序员专区 (1974)
  • Imap 全球通用标准协议 (7)
  • 全球邮局列表 (17)
  • Imapbox 系列软件 (3)
  • 产品一览 (6)
  • 事业方向 (7)
  • 联系我们 (2)

官方链接

imapbox邮箱网盘 imapbox 海外官网 iMapBox百度百科

登录