python爬虫004
网页基础
用浏览器访问网站时，页面各不相同，你有没有想过它为何会呈现这个样子呢?本节中，我们就来了解一下网页的基本组成、结构和节点等内容。
网页的组成
网页可以分为三大部分-HTML、CSS和JavaScript。如果把网页比作一个人的话，HTML相当于骨架，JavaScript相当于肌肉，CSS相当于皮肤，三者结合起来才能形成一个完善的网页。下面我们分别来介绍一下这三部分的功能。
1.HTML
HTML是用来描述网页的一种语言，其全称叫作Hyper Text Markup Language，即超文本标记语言。网页包括文字、按钮、图片和视频等各种复杂的元素，其基础架构就是 HTML。不同类型的元素通过不同类型的标签来表示，如图片用 img 标签表示，视频用 video 标签表示，段落用p 标签表示,它们之间的布局又常通过布局标签 div 嵌套组合而成，各种标签通过不同的排列和嵌套才形成了网页的框架。
在Chrome浏览器中打开百度，右击并选择“检查”项(或按F12键)，打开开发者模式，这时在Elements选项卡中即可看到网页的源代码。
这就是HTML，整个网页就是由各种标签嵌套组合而成的。这些标签定义的节点元素相互嵌套和组合形成了复杂的层次关系，就形成了网页的架构。
2.CSS
HTML定义了网页的结构，但是只有 HTM 页面的布局并不美观，可能只是简单的节点元素的排
列为了让网页看起来更好看一些，这里借助了CSS。CSS，全称叫作 Cascading Style Sheets，即层叠样式表。“层叠”是指当在 HTML中引用了数个样式文件，并且样式发生冲突时，浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。
CSS是目前唯一的网页页面排版样式标准，有了它的帮助，页面才会变得更为美观。
#head_wrapper.s-ps-islite,s-p-top {
position: absolute;bottom: 40px;width: 100%;height:181px;
}就是一个CSS样式。大括号前面是一个CSS选择器。此选择器的意思是首先选中id为 head_wrapper且class为s-ps-islite 的节点，然后再选中其内部的 lass为 s-p-top 的节点。大括号内部写的就是一条条样式规则，例如 position 指定了这个元素的布局方式为绝对布局,bottom指定素的下边距为40像素，width 指定了宽度为 100%占满父元素，height 则指定了元素的高度。也就是说，我们将位置、宽度、高度等样式配置统一写成这样的形式，然后用大括号括起来，接着在开头再加上CSS 选择器，这就代表这个样式对CSS 选择器选中的元素生效，元素就会根据此样式来展示了
在网页中，一般会统一定义整个网页的样式规则，并写人 CSS 文件中(其后缀为 css)。在HTMI中，只需要用link标签即可引人写好的CSS文件，这样整个页面就会变得美观、优雅。
3.JavaScript
JavaScript，简称JS，是一种脚本语言。HTML和CSS 配合使用，提供给用户的只是一种静态信息，缺乏交互性。我们在网页里可能会看到一些交互和动画效果，如下载进度条、提示框、轮播图等这通常就是 JavaScript 的功劳。它的出现使得用户与信息之间不只是一种浏览与显示的关系，而是实
现了一种实时、动态、交互的页面功能。JavaScript通常也是以单独的文件形式加载的，后缀为js,在HTML中通过 script 标签即可引人例如:
<script src="jquery-2.1.0.js"x</script>
综上所述，HTML定义了网页的内容和结构，CSS 描述了网页的布局，JavaScript 定义了网页的
行为。
网页的结构
我们首先用例子来感受一下HTML的基本结构。新建一个文本文件，名称可以自取，后缀为 html。
<IDOCTYPE html>
<html>chead><meta charsete"UTF-8"<title>This is a Demo</title>/head>body><div id-"container"s<div class-"wrapper"ch2 class="title"Hello World</h2><p class="text"sHello,this is a paragraph.</p>
</div>
</div>
/body>
k/htmIs这就是一个最简单的HTML实例。开头用 DOCTYPE 定义了文档类型，其次最外层是 ht 标答最后还有对应的结束标签来表示闭合，其内部是 head 标签和 body标签，分别代表网页头和网贡体它们也需要结束标签。head标签内定义了一些页面的配置和引用，如:
<meta charset="UTF-8"》
它指定了网页的编码为UTF-8
title 标签则定义了网页的标题，会显示在网页的选项卡中，不会显示在正文中。body标签内则是在网页正文中显示的内容。div标签定义了网页中的区块，它的id是container，这是一个非常常用的属性，且 id 的内容在网页中是唯一的，我们可以通过它来获取这个区块。然后在此区块内又有个div标签，它的class为 wrapper，这也是一个非常常用的属性，经常与CSS配合使用来设定样式。然后此区块内部又有一个 h2 标签，这代表一个二级标题。另外，还有一个p标签，这代表一段落。在这两者中直接写人相应的内容即可在网页中呈现出来，它们也有各自的class属性。
节点树及节点间的关系
在HTML中，所有标签定义的内容都是节点，它们构成了一个HTMLDOM树。
我们先看下什么是DOM。DOM是W3C(万维网联盟)的标准，其英文全称 Document ObjectModel，即文档对象模型。它定义了访问 HTML和XML文档的标准:
W3C 文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3CDOM标准被分为3个不同的部分
口核心DOM:针对任何结构化文档的标准模型
口XMLDOM:针对XML文档的标准模型。
口HTMLDOM:针对HTML文档的标准模型
根据W3C的HTMLDOM标准，HTML文档中的所有内容都是节点。
整个文档是一个文档节点。
口每个HTML元素是元素节点。
口HTML元素内的文本是文本节点。
口每个HTML属性是属性节点。
口注释是注释节点。
HTMLDOM将HTML文档视作树结构，这种结构被称为节点树。
通过HTMLDOM，树中的所有节点均可通过 JavaScript访问，所有HTML节点元素均可被修改,也可以被创建或删除。
节点树中的节点彼此拥有层级关系。我们常用父(parent)子(child)和兄弟(sibling)等术语描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点。
在节点树中，顶端节点称为根(root)。除了根节点之外，每个节点都有父节点，同时可拥有任意数量的子节点或兄弟节点。
- 点赞
- 收藏
- 关注作者
评论（0）