2-3 网页爬虫所需的 HTML 基础（版本：py3）

在chrome的网页中，鼠标右键，选择“显示网页源代码”可以查看网页的HTML代码
“control+F”可以搜索并跳转到网页中的关键字

HTML 代码的一般形式

下方是一个基本的网页代码框架：

<!DOCTYPE html>
<html>

<head>
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

一个网页的基本示例

最基本的标签说明

标签基本格式：<标签名 *属性名1=“属性值” 属性名2=“属性值”* ……>文件内容</标签名>

<! DOCTYPE html>：用于代码开头指定html版本等信息

<html></html>：告知浏览器这是一个 HTML 文档，是 HTML 文档中最外层的元素

<head></head>：所有头部元素的容器，必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他

<title></title>：定义文档的标题，定义浏览器工具栏中的标题，显示在搜索引擎结果中的页面标题

<body></body>：定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等）

<h1></h1>：定义 HTML 标题，从<h1>到<h6>标题的重要程度逐渐降低

<p></p>：定义段落，浏览器会自动在其前后创建一些空白

<br>：一个简单的换行符，是一个空标签，意味着它没有结束标签。

<div></div>：定义 HTML 文档中的一个分隔区块或者一个区域部分。经常与 CSS 一起使用，用来布局网页。

链接中一些常用的标签

<a>标签实现基本的超链接
<a href="www.pkbigdata.com">访问DC官网</a>
其中<a></a>为标签，href="www.pkbigdata"表示链接指向的地址，访问DC官网表示超链接的文本。其显示效果如下：

访问DC学院

指向同一服务器同一目录下的form.html
<a href="form.html">Fill Our Form</a>

指向同一服务器父目录下的parent.html
<a href="../parent.html">Parent</a>

指向同一服务器子目录stuff下的cat.html
<a href="stuff/cat.html">Catalog</a>

指向外部网站
<a href="http://pkbigdata.com" target="_blank">BASD</a>

超链接除了指向一个文件，还可以具体指明位置，这样浏览器就会直接跳转显示文件的相应位置。指向同一个文件的其他位置

<a href="#section1">Go to Introduction</a>
…
<h2 id="section1">Introduction</h2>

指向其他文件的某个位置

<a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a>

<!–- In chapter3.html —>
…
<div id="section3.1.1”>  
<h3>3.1.1. Technical Background</h3>
</div>

图片 `<img>`标签

插入一张图片
<img src="php.png" alt="PHP Logo" />
其中<img />为图片标签；src="php.png"表示服务器中的 php.png 这个图片；alt="PHP Logo"表示图片的代替文本，如果图片无法显示，则显示这个文本

为图片增加超链接：
<a href="apply-now.html"><img src="apply-now-button.jpg" /></a>

<img>标签的一些基本属性

src：图片路径
alt：图片无法显示时的代替文本
height：高度
width：宽度
border：边框宽度

无序列表

无序列表一般用<ul>+<li>的形式来实现，一个简单的例子：

<ul>
   <li>Coffee</li>
   <li>Milk</li>
   <li>Tea</li>
</ul>

上面无序列表的代码在网页中显示如下：

Coffee
Milk
Tea

有序列表

有序列表一般用<ol>+<li>的形式来表现，一个简单的例子：

<ol>
   <li>Coffee</li>
   <li>Milk</li>
   <li>Tea</li>
</ol>

上面的有序列表代码在网页中显示如下：

Coffee
Milk
Tea

我们也可以通过规定起始值的形式来编号：

<ol start=“50">
   <li>Coffee</li>
   <li>Milk</li>
   <li>Tea</li>
</ol>

则显示为从50开始的一个有序列表：

Coffee
Milk
Tea

表格

HTML表格由多种标签组合而成，其中最重要的三种标签是：

<table></table> 表格的开始和结束
<tr></tr> 创建表格的一行
<td></td> 创建表格中普通单元格
<th></th>创建表格中标题栏单元格

一个简单的表格示例

实现的代码如下：

<table border="1">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Jhon</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</table>

表单

用于收集用户输入的信息，一个简单的例子如下：

<form action="/statics/demosource/demo-form.php" method="post">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

这个表单在网页中显示为：

关于HTML的深入和延伸

关于更多HTML的知识，你可以根据需要在W3Cschool进行学习

W3Cschool HTML5教程

你也可以在 w3cschool 的在线编辑器中实现HTML代码

在W3C中训练HTML代码编写

通过练习之后希望你能通过HTML代码展示以下内容（可直接在上面的链接中练习）

说明：

标题（title）：数据分析师
“数据分析师应该掌握哪些技能” “学习这门课的流程”“课程的基本信息”这三个标题个都是<h3>标签
图片（DC logo）的目录（地址）为http://pkbigdata.com/common/allow/logo.png?date=2017-6-20%2016:26:23
图片的超链接为http://pkbigdata.com/

参考代码如下：请务必先自己练习一次

<!DOCTYPE html>
<html>

<head>
<title>数据分析师</title>
</head>

<body>

<h3>数据分析师应该掌握哪些技能</h3>

    <ul>
        <li>数据获取</li>
        <li>数据存取</li>
        <li>数据分析</li>
        <li>报告撰写</li>
    </ul>
    <br>

<h3>学习这门课程的流程</h3>

    <ol>
        <li>观看课程视频</li>
        <li>查看课后资料</li>
        <li>复现老师演示操作</li>
        <li>完成课后练习</li>
    </ol>
    <br>

    <h3>课程的基本信息</h3>

    <table border="1">
    <tr>
        <th>名称</th>
        <th>时长</th>
        <th>难度</th>
        <th>资料</th>
    </tr>
    <tr>
        <td>数据获取</td>
        <td>3h</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>数据存取</td>
        <td>4h</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>数据分析</td>
        <td>10h</td>
        <td>4</td>
        <td>8</td>
    </tr>
    <tr>
        <td>报告撰写</td>
        <td>2h</td>
        <td>2</td>
        <td>1</td>
    </tr>

</table>

    <br>
    <br>

<p>更多数据科学课程，在DC官网</p>
<a href="http://pkbigdata.com/"><img src="http://pkbigdata.com/common/allow/logo.png?date=2017-6-20%2016:26:23" alt="DataCastle" /></a>
</body>

</html>

补充知识

1.爬虫知识框架

请阅读爬虫小白入门（一）写在前面。阅读完本材料之后，你将对爬虫有一个直观的理解，明白爬虫所需要的知识一共有三大块，HTML知识、Python技能、相关协议，现在请开始对HTML部分的学习。

2.HTML知识

如果不知道自己所需要的数据在HTML元素的哪个位置，那么无异于大海捞针。了解网页通过什么样的元素来呈现你所需要的信息的是实现爬虫的重要步骤。
请阅读：

HTML基础教程目录中的简介、基础、元素、标题、图像、表格、头部和实体
HTML元素速查

在阅读完材料过后，希望你能通过网页的源代码，轻松地找到你需要的数据的位置，提高你爬虫的效率。

如果学有余力的话，可以继续：

HTML基础教程的其他内容
不妨自己试试！怎么用代码生成一个网页

扩展阅读

HTTP基础知识

1.HTTP基础知识对于爬虫的作用

HTTP—超文本传输协议（HyperText Transfer Protocol）是互联网中应用最为广泛的一种网络协议，设计的最初目的就是为了提供一种发布和接受HTML页面的方法，而爬虫的本质就是通过程序发送HTTP请求，并返回HTML文档，遵守HTTP的传输协议是爬虫的基础。

请阅读链接内容中开始的概述和工作原理部分
爬虫入门系列（一）：快速理解HTTP协议

2.HTTP报文

HTTP协议中有两个报文，一个是请求报文，一个是响应报文，这是HTTP协议的核心内容。

请阅读链接内容中的请求报文和响应报文
HTTP消息结构

3.更多扩展阅读