python爬虫从入门到放弃之二：HTML基础

2019-07-15 本文已影响4人 52d19f475fe5

——上文说到，爬虫就是模拟浏览器，请求网址并提取数据的自动化程序。那么，怎么爬呢？
回答：可见，可爬！
通俗的说法是：我们要拿一样东西，是不是得先知道东西放在什么位置？

为什么要学HTML？

只有读懂了HTML，我们才能看得懂网页结构，知道数据存放的位置，才有可能爬取数据。这里不需要学到专业，只要学点HTML基础就足够了。

HTML是什么？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签(markup tag)
HTML 使用标记标签来描述网页
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
任意一个网页，右键另存为.html，就是HTML文档。
HTML文档 = 网页，浏览器根据HTML文档的描述，解析出它的网页内容。

实例0：

<html>
    <head>
        <meta charset="utf-8">
        <title>我是网页的名字</title> 
    </head>
    <body>
        <h1>我是一级标题</h1>
        <h2>我是二级标题</h2>
        <h3>我是三级标题</h3>
        <p>我是一个段落啦。一级标题、二级标题和我，我们三个一起组成了body。
         </p>
    </body>
</html>

标签和元素

在这个HTML文档中，可以看到很多夹在尖括号<>中间的字母，它们叫做【标签】。

标签通常是成对出现的：前面的是【开始标签】，比如<body>；后面的是【结束标签】，如</body>。

不过，也有标签是形单影只地出现，比如HTML代码的第三行<meta charset="utf-8">（定义网页编码格式为 utf-8），就是此类。这些你知道就好，大部分情况下用的都是成双成对出现的标签。

开始标签+结束标签+中间的所有内容，它们在一起就组成了【元素】。

以上就是简单的标签，通常HTML标签是嵌套标签的，而且是多层嵌套。

网页头和网页体

事实上，HTML文档的基本是由【网页头】和【网页体】组成的。

HTML文档的最外层标签一定是<html>，里面嵌套着<head>元素与<body>元素。<head>元素代表了【网页头】，<body>元素代表了【网页体】，这是最基本的网页结构。

HTML文档和网页的内容一定是一一对应的。只是，【网页头】的内容不会被直接呈现在浏览器里的网页正文中，而【网页体】的内容是会直接显示在网页正文中的。

实例0中，<head>元素，也就是【网页头】，<meta charset="utf-8">定义了HTML文档的字符编码。

<title>元素用来定义网页的标题，这个标题就是显示在浏览器的标签页中的内容。

【网页头】中的编码是没办法在网页中直接被看到的，标签页的内容也不属于网页的正文。

而<body>元素中，即【网页体】，就是那些你能看到的显示在网页中的内容了。

实例1：

<html>
  <head>
      <meta charset="utf-8"> 
      <title>这个书苑不太冷</title>
  </head>
  <body>
      <h1 style="color:#20b2aa;">这个书苑不太冷</h1>
      <a href="https://book.douban.com/subject/27077140/" target="_blank">点这里看看</a>
      <br>
      <h2>《奇点遗民》</h2>
      <p>本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……刘宇昆的独特之处在于，他写的不是科幻探险或英雄奇幻，而是数据时代里每个人的生活和情感变化。透过这本书，我们看到的不仅是未来还有当下。
      </p>
  </body>
</html>

属性

实例1中，代码<h1 style="color:#20b2aa;">这个书苑不太冷</h1>给<h1>元素添加了一个style属性，属性中的内容规定了这行文字的颜色。

style属性可以用来定义网页文本的样式，比如字体大小、颜色、间距、对齐方式等等。

代码<a href="https://book.douban.com/subject/27077140/" target="_blank">点这里看看</a>href属性的用法是——添加链接。target="_blank"定义在窗口打开。

在HTML中，链接一般都由<a>标签定义，href属性用于规定指向页面的URL。

除了style和href，HTML中还有两个很常用的属性，即class与id。看实例2。

实例2：

<!DOCTYPE html>
<!-- saved from url=(0084)https://localprod.pandateacher.com/python-manuscript/crawler-html/spider-men4.0.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <title>这个书苑不太冷</title>
        <style>
        .book {
        float: left;
        margin: 5px;
        padding: 15px;
        width: 350px;
        height: 240px;
        border:  3px solid #20b2aa;
        } 
        </style>
    </head>

    <body>
        <div id="header">
        <h1 style="color:#20b2aa;">这个书苑不太冷</h1>
        </div>
        <br>
        <div id="article">
            <div class="book">
                <h2>《奇点遗民》</h2>
                <p>本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……刘宇昆的独特之处在于，他写的不是科幻探险或英雄奇幻，而是数据时代里每个人的生活和情感变化。透过这本书，我们看到的不仅是未来还有当下。
                </p>
            </div>
            <div class="book">
                <h2>《未来简史》</h2>
                <p>未来，人类将面临着三大问题：生物本身就是算法，生命是不断处理数据的过程；意识与智能的分离；拥有大数据积累的外部环境将比我们自己更了解自己。
                <br><br>如何看待这三大问题，以及如何采取应对措施，将直接影响着人类未来的发展。
                </p>
            </div>
            <div class="book">
                <h2>《利用Python进行数据分析》</h2>
                <p>本书含有大量的实践案例，你将学会如何利用各种Python库高效地解决各式各样的数据分析问题。
                <br><br>作者Wes McKinney是pandas库的主要作者，所以本书也可以作为利用Python实现数据密集型应用的科学计算实践指南。
                </p>
            </div>
        </div>
</body></html>

实例2中，网页头有一个很长的<style>元素，<style>元素的内容，是对.book的具体描述，比如float: left;，而/控制元素浮动/是对代码的注释。

其实，网页头里的.book呼应网页体里的<div class="book">
.对应class，所以.book代表class book。因此，网页头中的.book和网页体中的class="book"是有联系的。

在网页头里面，定义了class属性，属性值为"book"，然后下面一长串代码是对这个class属性的描述；接着再在网页体中调用，所以看到了<div class="book">。

网页头的<style>元素中定义了.book的样式，因此，凡是class="book"的元素都会继承它的样式。

以上就是class属性的用法，接下来是id属性。

网页体有两大部分，<div id="header">元素的部分，<div id="article">元素的部分，这个id属性就是用来定义元素的标识。

id属性和class属性的用法类似，给元素定义id和class的目的都是为了查找、定位元素，或者为元素设置样式。

但id属性用于标识唯一的元素，而class用于标识一系列的元素。id就像是学生的学生证号码，每个人都是唯一的；而学生们可以属于同一个班级，班级就像class。

以上，就是常见的四个属性style、href、class、id

更多HTML知识请点击下面链接：
http://www.w3school.com.cn/html/index.asp

>>>阅读更多文章请点击以下链接：

python爬虫从入门到放弃之一：认识爬虫
 python爬虫从入门到放弃之二：HTML基础
 python爬虫从入门到放弃之三：爬虫的基本流程
 python爬虫从入门到放弃之四：Requests库基础
 python爬虫从入门到放弃之五：Requests库高级用法
 python爬虫从入门到放弃之六：BeautifulSoup库
 python爬虫从入门到放弃之七：正则表达式
 python爬虫从入门到放弃之八：Xpath
python爬虫从入门到放弃之九：Json解析
 python爬虫从入门到放弃之十：selenium库
 python爬虫从入门到放弃之十一：定时发送邮件
 python爬虫从入门到放弃之十二：多协程
 python爬虫从入门到放弃之十三：Scrapy概念和流程
 python爬虫从入门到放弃之十四：Scrapy入门使用