vue1秒刷新一下div怎么写_写爬虫，你还需要了解这些基础知识（二）

第二部分 网页基础

一、网页的组成

网页可以分为三大部分——HTML、CSS和JavaScript。如果把网页比作人的话，HTML就是骨架，JavaScript就是肌肉，CSS就是皮肤。

1、HTML

HTML的全称为Hyper Text MarkupLanguage，即超文本标记语言，作用是描述网页。

网页包括文字、按钮、图片和链接等各种复杂的元素，其基础架构就是HTML。

不同类型的元素通过不同类型的标签来表示，如图片用img标签表示，链接用a标签表示，段落用p标签表示，布局用div表示。

用浏览器打开知乎，右键选择“检查”，在Elements选项卡中即可看到网页的源代码。

整个网页就是由各种标签嵌套组合而成的。这些标签定义的节点元素相互嵌套和组合形成了复杂的层次关系，也就是网页的架构。

2、CSS

CSS的全称为Cascading Style Sheets，即层叠样式表。

CSS是目前唯一的网页页面排版样式标准，有了它，页面才会更加美观。

但CSS并不是爬取的主要目标。

3、JavaScript

JavaScript简称JS，是一种脚本语言，主要用来写交互和动画效果，也不是爬取的主要目标。

二、网页的结构

先来感受一下。新建一个文本文件（txt格式），名称就叫Hello，内容如下：

这是一个简单的HTML实例，开头的DOCTYPE定义文档类型，最外层是html标签，内部有head标签和body标签，分别代表网页头和网页体，它们都有对应的结束标签来表示闭合。

head标签内定义了一些页面的配置和引用，如<metacharset=”UTF-8”>，注定了网页的编码为UTF-8 。

title标签定义了网页的标题，会显示在网页的选项卡中，不会显示在正文中。

body标签内是网页正文中显示的内容。

div标签定义网页的区块，id的内容在网页中是唯一的，如“container”，相当于身份证，通过它可以获取这个区块；class也可以用来获取区块，但它可以重名，网页中可以出现多个“wrapper”，主要用来设定样式。

h2标签代表二级标题。

p标签代表一个段落。

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

DOM的全称为Document Object Model，即文档对象模型。

HTML DOM将HTML文档视作树结构，即节点树，如图：

通过HTML DOM所有节点均可通过JavaScript访问，所有HTML节点元素均可被修改，或创建，或删除。

在节点树中，顶端节点称为根（root）。除了根节点外，每个节点都有父节点，同时可拥有任意数量的子节点或兄弟节点，如图：

四、选择器

既然网页是节点组成的，那怎么定位节点呢？

CSS选择器！

上例中div节点的id为container，那么就可以表示为#container，其中#开头代表选择id，后面是id名称。

如果想选择class为wrapper的节点，可以使用.wrapper，这里以点（.）开头代表选择class，后面是class名称。

如果想选择标签呢？直接写标签名即可，如h2 。

例如，div#container .wrapper p表示层层筛选到标签p 。