Python爬虫学习笔记（一）———

Python爬虫学习笔记（一）————网页基础

1.网页的组成

2.HTML

（1）标签

（2）比较重要且常用的标签：

①列表标签

②超链接标签（a标签）

③img标签：用于渲染，图片资源的标签

④div标签和span标签

（3）属性

（4）常用的语义化标签

（5）元素的分类及特点

①块元素

②行内元素

③行内块元素

（6）文件路径

（7）HTML的基本结构

（8）节点树及节点间的关系

3.CSS

（1）引入css的方法

（2）选择器

（3）单位

（4）css三大特性

1.网页的组成

网页可分为三个部分——HTML、CSS和JavaScript。如果把网页比作一个人的话，HTML相当于骨架，JavaScript相当于肌肉，CSS相当于皮肤，三者结合起来才能形成一个完善的网页。

2.HTML

HTML是用来描述网页的一种语言，全称为超文本标记语言。网页包含文字、按钮、图片和视频等各种复杂的元素，其基础架构就是HTML。不同类型的文字通过不同类型的标签来表示，如图片用img标签表示，视频用video标签表示，段落用p 标签表示，他们之间的布局又常通过布局标签 div 嵌套组合而戚成，各种标签通过不同的排列和嵌套才形成了网页的框架。

我们可以随意打开一个网站，比如京东首页，然后单击鼠标右键选择“检查元素”菜单或者按 F12，即可打开浏览器开发者工具，接着切换到 Elements 面板，这时候呈现的就是京东网首页对应的 HTML，它包含了一系列标签，浏览器解析这些标签后，便会在网页中将它们渲染成一个个节点，这便形成了我们平常看到的网页。

（1）标签

是由w3c提前制定好的一些针对于html文档的标记符号,这些符号是具备各自的含义的。具体在html中的变现形式由 < > 括起来的对象比如: html head body

需要注意的是:

①标签通常是成对出现的,但也有极少部分只有开始标签,没有结束标签称作单标签或者空标签比如:meta

②标签是允许嵌套的,但是要符合嵌套的标准

通常,我们也会将标签称作为元素，例如：根元素、head元素等

（2）比较重要且常用的标签：

①列表标签

1>有序列表,表示如下：

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

2>无序列表，表示如下：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

3>定义列表，表示如下：

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

注：列表之间是可以相互嵌套的

②超链接标签（a标签）

1>可以访问到外部网络的资源

2>可以访问本地网页资源

3>可以作为锚点，在当前页面指定位置进行定位跳转

③img标签：用于渲染，图片资源的标签

④div标签和span标签

小tip：href和src的区别：

href和src都是指向外部资源地址或者本地资源地址

不同点：

href属性:

1>通过该属性去关联另一份外部资源文件

2>如果被关联的资源文件，在页面渲染时需要用到该资源中的内容时，它会下载该资源，

3>如果需要下载资源文件内容时，并行下载的方式，不会阻塞页面的渲染

src属性：

1>通过该属性去访问到对应的外部资源，并替换掉该标签的内容

2>src属性肯定是会下载对应路径的资源的

3>src的下载不是并行下载，在页面渲染时如果遇到src那么会将该资源全部下载完毕并且解析后，才会继续渲染页面后续的内容（src会阻塞页面的渲染）

（3）属性

通常格式：key=value（注：有时候只有key没有value，即表示逻辑值的时候）

①全局属性：全部元素都具备（例id，class，style等等）

②局部属性：只能某些元素使用

（4）常用的语义化标签

标题标签（h1-h6标签）、段落标签（p标签）、i/em标签（斜体）、b/strong标签（粗体）、blockquote/q标签（引用）等等。

（5）元素的分类及特点

①块元素

1>块元素具有布局特点,一般常用页面的整体布局

2>块元素独占(其父元素)页面的一行

3>块元素可以嵌套任何类型的元素(除p元素以外,p元素中不能嵌套任何的块元素)

4>块元素可以设置宽,高默认的宽度是其父元素的宽度

5>块元素默认高度是由内容决定的

②行内元素

1>正常情况下,行内元素是不会换行的

2>行内元素会在一行排不下时进行换行

3>行内元素不能设置宽高行内元素的宽和高都是由其内容决定的

4>行内元素一般不会嵌套块级元素,大多数是嵌套文本或者其他的行内元素

③行内块元素

1.行内块元素不会独占一行,在一行排列

2.可以设置宽高(默认是内容的宽高)

注：元素之间可以相互进行转换，使用diaplay:block(inline/inline-block);

（6）文件路径

①相对路径：与当前的文件是没有联系的，不是根据当前该文件所处的位置去访问对应的资源。

②绝对路径：从当前文件出发去寻找其他的资源，当前的位置为中心。

（7）HTML的基本结构

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>This is a Demo</title>
</head> 
<body>
    <div id="container">
        <div class="wrapper">
            <h2 class="titie">Hello Morld</h2>
        	<p class="text">Hello, this is a parpgtaph.</p>
        </div>
    </div>
</body>    
</html>

（8）节点树及节点间的关系

在HTML中,所有标签定义的内容都是节点,这些节点构成一个 HTML节点树,也叫HTMLDOM树。

先来看一下什么是 DOM。DOM 是 W3C（万维网联盟）的标准，英文全称是 Document Object Model，即文档对象模型。它定义了访问 HTML 和 XML 文档的标准。根据 W3C 的HTMLDOM 标准,HTML 文档中的所有内容都是节点。

整个网站文档是一个文档节点。
每个 html 标签对应一个根节点，即上例中的 html 标签，它属于一个根节点。
节点内的文本是文本节点，比如 a 节点代表一个超链接，它内部的文本也被认为是一个文本节点。
每个节点的属性是属性节点，比如 a 节点有一个 href 属性，它就是一个属性节点。
注释是注释节点，在 HTML 中有特殊的语法会被解析为注释，它也会对应一个节点。

因此，HTML DOM 将 HTML 文档视作树结构，这种结构被称为节点树，如下图所示。可通过这棵树访问所有节点。可以修改或删除它们的内容，也可以创建新的元素。这颗节点树展示了节点的集合，以及它们之间的联系。这棵树从根节点开始，然后在树的最低层级向文本节点长出枝条：

DOM node tree