eb前端技术由html、css和 javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。

HTML 篇

1、BOM

BOM 是 Browser Object Model

的缩写，即浏览器对象模型，当一个浏览器页面初始化时，会在内存创建一个全局的对象，用以描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型，即BOM。BOM的核心对象就是window，window

对象也是BOM的顶级对象，其中包含了浏览器的 6个核心模块：

document -

即文档对象，渲染引擎在解析HTML代码时，会为每一个元素生成对应的DOM对象，由于元素之间有层级关系，因此整个HTML代码解析完以后，会生成一个由不同节点组成的树形结构，俗称DOM树，document

用于描述DOM树的状态和属性，并提供了很多操作DOM的API。

frames - HTML 子框架，即在浏览器里嵌入另一个窗口，父框架和子框架拥有独立的作用域和上下文。

history - 以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。

location - 提供了当前窗口中加载的文档相关信息以及一些导航功能。

navigator - 用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。

screen - 提供了浏览器显示屏幕的相关属性，比如显示屏幕的宽度和高度，可用宽度和高度。

2、DOM 系统

DOM 是 Document Object Model 的缩写，即 文档对象模型，是所有浏览器公共遵守的标准，DOM

将HTML和XML文档映射成一个由不同节点组成的树型结构，俗称DOM树。其核心对象是document，用于描述DOM树的状态和属性，并提供对应的DOM操作API。随着历史的发展，DOM

被划分为1级、2级、3级，共3个级别：

1级DOM - 在1998年10月份成为W3C的提议，由DOM核心与DOM

HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM

HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

2级DOM - 鉴于1级DOM仅以映射文档结构为目标，DOM

2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM

1的核心进行了扩展，从而可支持XML命名空间。

3级DOM -

通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML

Infoset、 XPath、和XML Base。

浏览器对不同级别DOM的支持情况如下所示：

从图中可以看出，移动端常用的 webkit 内核浏览器目前只支持DOM2，而不支持DOM3 。

新手福利获取方式：

1.在你手机的右上角有【关注】选项，或点击我的头像，点击关注！（关注我）

2.关注后，手机客户端点击我的主页面，右上角有私信，请私信发我：html

其实作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要这里请私信我“html”不管你是小白还是大牛欢迎入住大家一起交流成长。小编会在里面不定期分享干货源码，包括我精心整理的一份零基础教程。欢迎各位感兴趣的的小伙伴。

学习思路：

3、事件系统

事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的 鼠标事件(mouse) 发展到了 移动端的 触摸事件(touch) 和

手势事件(guesture)，touch事件描述了手指在屏幕操作的每一个细节，guesture 则是描述多手指操作时更为复杂的情况，总结如下：

第一根手指放下，触发 touchstart，除此之外什么都不会发生

手指滑动时，触发touchmove

第二根手指放下，触发 gesturestart

触发第二根手指的 touchstart

立即触发 gesturechange

任意手指移动，持续触发 gesturechange

第二根手指弹起时，触发 gestureend，以后将不会再触发 gesturechange

触发第二根手指的 touchend

触发touchstart (多根手指在屏幕上，提起一根，会刷新一次全局touch) _ ___

弹起第一根手指，触发 touchend

更多关于手势事件的介绍请参考：

gesture事件处理复杂手势

DOM2.0 模型将事件处理流程分为三个阶段，即 事件捕获阶段 、 事件处理阶段 、 事件冒泡阶段， 如图所示：

事件捕获 ：当用户触发点击事件后，顶层对象document 就会发出一个事件流，从最外层的DOM节点向目标元素节点传递，最终到达目标元素。

事件处理 ：当到达目标元素之后，执行目标元素绑定的处理函数。如果没有绑定监听函数，则不做任何处理。

事件冒泡 ：事件流从目标元素开始，向最外层DOM节点传递，途中如果有节点绑定了事件处理函数，这些函数就会被执行。

利用事件冒泡原理可以实现 事件委托

，所谓事件委托，就是在父元素上添加事件监听器，用以监听和处理子元素的事件，避免重复为子元素绑定相同的事件。当目标元素的事件被触发以后，这个事件就从目标元素开始，向最外层元素传递，最终冒泡到父元素上，父元素再通过event.target

获取到这个目标元素，这样做的好处是，父元素只需绑定一个事件监听，就可以对所有子元素的事件进行处理了，从而减少了不必要的事件绑定，对页面性能有一定的提升。

4、HTML解析过程

浏览器加载 html 文件以后，渲染引擎会从上往下，一步步来解析HTML标签，大致过程如下：

用户输入网址，浏览器向服务器发出请求，服务器返回html文件；

渲染引擎开始解析 html 标签，并将标签转化为DOM节点，生成 DOM树；

如果head 标签中引用了外部css文件，则发出css文件请求，服务器返回该文件，该过程会阻塞后面的解析；

如果引用了外部 js 文件，则发出 js 文件请求，服务器返回后立即执行该脚本，这个过程也会阻塞html的解析；

引擎开始解析 body 里面的内容，如果标签里引用了css 样式，就需要解析刚才下载好的css文件，然后用css来设置标签的样式属性，并生成渲染树；

如果 body 中的 img 标签引用了图片资源，则立即向服务器发出请求，此时引擎不会等待图片下载完毕，而是继续解析后面的标签；

服务器返回图片文件，由于图片需要占用一定的空间，会影响到后面元素的排版，因此引擎需要重新渲染这部分内容；

如果此时 js 脚本中运行了 style.display="none"，布局被改变，引擎也需要重新渲染这部分代码；

直到 html 结束标签为止，页面解析完毕。

5、重绘 和 回流

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。

当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘。

从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。会引起重绘和回流的操作如下：

添加、删除元素(回流+重绘)

隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

移动元素，比如改变top,left的值，或者移动元素到另外一个父元素中。(重绘+回流)

对style的操作(对不同的属性操作，影响不一样)

还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

另外，transform

操作不会引起重绘和回流，是一种高效率的渲染。这是因为transform属于合成属性，对合成属性进行transition/animation

动画时将会创建一个合成层，这使得动画元素在一个独立的层中进行渲染，当元素的内容没有发生改变，就没必要进行重绘，浏览器会通过重新复合来创建动画帧。

6、本地存储

本地存储最原始的方式就是 cookie,cookie 是存放在本地浏览器的一段文本，数据以键值对的形式保存，可以设置过期时间。 但是 cookie

不适合大量数据的存储，因为每请求一次页面，cookie 都会发送给服务器，这使得 cookie

速度很慢而且效率也不高。因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST)，如下所示：

Firefox和Safari允许cookie多达4097个字节，包括名(name)、值(value) 和 等号。

Opera允许cookie多达4096个字节，包括：名(name)、值(value) 和 等号。

Internet Explorer允许cookie多达4095个字节，包括：名(name)、值(value) 和 等号。

在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。

html5 提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage, 它们都是以key/value

的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session)，即当浏览器窗口关闭后，sessionStorage中的数据被清除。

localStorage的存储空间大约5M左右(不同浏览器可能不同，分

HOST)，这个相当于一个5M大小的前端数据库，相比于cookie，可以节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage

的存储空间后会抛出异常。

此外，H5还提供了逆天的websql和

indexedDB，允许前端以关系型数据库的方式来存储本地数据，相对来说，这个功能目前应用的场景比较少，此处不作介绍。

7、浏览器缓存机制

浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)

等字段来控制文件缓存的机制。

Cache-Control 用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600

表示文件在本地应该缓存，且有效时长是600秒 (从发出请求算起)。在接下来600秒内，如果有请求这个资源，浏览器不会发出 HTTP

请求，而是直接使用本地缓存的文件。

Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过 If-Modified-Since

字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存；如果有修改，则返回200，同时返回最新的文件。

Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。

Cache-Control 还有一个同功能的字段：Expires。Expires 的值一个绝对的时间点，如：Expires: Thu, 10 Nov

2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。

Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1

标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control 是高优化级的。

Etag 也是和 Last-Modified 一样，对文件进行标识的字段。不同的是，Etag

的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过 If-None-Match

字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag 和

Last-Modified 可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。

另外有两种特殊的情况：

手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。

强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache

(或 Pragma:no-cache)，发包向服务重新拉取文件。

8、History

用户访问网页的历史记录通常会被保存在一个类似于栈的对象中，即history对象，点击返回就出栈，跳下一页就入栈。 它提供了以下方法来操作页面的前进和后退：

window.history.back( ) 返回到上一个页面

window.history.forward( ) 进入到下一个页面

window.history.go( [delta] ) 跳转到指定页面

HTML5 对History Api 进行了增强，新增了两个Api 和一个事件，分别是pushState、replaceState 和

onpopstate：

pushState是往history对象里添加一个新的历史记录，即压栈。

replaceState 是替换history对象中的当前历史记录。

当点击浏览器后退按钮或 js调用history.back 都会触发 onpopstate 事件。

与其类似的还有一个事件：onhashchange，onhashchange是老API，浏览器支持度高，本来是用来监听hash变化的，但可以被利用来做客户端前进和后退事件的监听，而onpopstate是专门用来监听浏览器前进后退的，不仅可以支持hash，非hash的同源

url 也支持。

9、HTML5离线缓存

HTML5离线缓存又叫Application

Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：

- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

离线缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

10、Web语义化 和 SEO

Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。

搜索引擎通过爬虫技术获取的页面就是由一堆 html 标签组成的代码，人可以通过可视化的方式来判断页面上哪些内容是重点，而机器做不到。

但搜索引擎会根据标签的含义来判断内容的权重，因此，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。比如h1~h6这几个标签在SEO中的权值非常高，用它们作页面的标题就是一个简单的SEO优化。

我开始一个项目，并开始计划如何布局主页时，我的大脑复现出浮动和定位。有些人可能会使用 Bootstrap 或其他框架。 那是因为这是2016年，我们一直在用这些方法来做布局。 但假设我们乘坐时光机来到2018年，所有主流浏览器都支持CSS Grid 布局模块。此时我们的页面布局模式已经完全改变，CSS的功能最终强大到能轻松实现我们的设计目标，这是一个web开发人员最美好的时代。现在，让我们使用超赞的工具——Grid布局来创建一个主页。

设计

下面是我们将要实现的页面

在我们开始编码之前，我们需要进入网格的思维模式。 第一步是观察我们的设计稿，并将其划分为主要的网格组件。 以下是我为此设计做的划分：

你会发现整个页面分为7个顶级网格区域。 我之所以说“顶级”是因为我们可以在其内部继续嵌套网格，这正是我们将要对hero部分所做的事：

HTML

这是HTML的基本结构。 稍后我会显示整个完成的文件，但现在我已经省去了大部分的细节。 这里要注意的重要部分是作为 body 的直接后代的7个元素：top-bar、main-header、hero、 blog-posts、 news、 side-bar 以及 main-footer。 body将成为我们的网格容器(grid container)，它的孩子将成为网格项(grid items)。

正如刚刚提到的，我们也将设置 hero 作为网格容器。 它有两个孩子，将作为网格项：message和 award。

<body>
 <header class="top-bar">
 <!-- social links and contact info -->
 </header>
 <header class="main-header">
 <!-- logo and main navigation -->
 </header>
 <section class="hero">
 <div class="message">
 <!-- circular element -->
 </div>
 <div class="award"> 
 <!-- award image and quote --> 
 </div>
 </section>
 <section class="blog-posts">
 <!-- blog posts and excerpts -->
 </section>
 <section class="news">
 <!-- news headlines and excerpts -->
 </section>
 <aside class="side-bar">
 <!-- critter of the month info -->
 </aside>
 <footer class="main-footer">
 <!-- footer menu and copyright -->
 </footer>
</body>

CSS

Okey，我们按照这种方式讲解，教程中我们不会展示所有使用到的CSS，在文章的最后我会展示最终完整的文件。现在我们只关注吸引我们的网格部分以及任何与它直接相关的样式即可。

我们首先在body上定义主网格容器：

body{
 display: grid;
 grid-template-columns: 12% auto 400px 12%;
 grid-template-rows: auto auto 950px auto auto auto;
}

我们刚刚创建了一个4列6行的网格，第一列和最后一列将作为主内容两侧的填充。 我把第三列设置为400px，因为这是我们将要放置side-bar元素的地方，我们希望这是一个固定的宽度。 hero 元素（第三行）的固定高度为950px。

现在我们使用grid-template-areas来定义某个网格区域会跑到哪里。 这是非常有趣的部分：

body{
 display: grid;
 grid-template-columns: 12% auto 400px 12%;
 grid-template-rows: auto auto 950px auto auto auto;
 grid-template-areas: "top-bar top-bar top-bar top-bar"
 "main-header main-header main-header main-header"
 "hero hero hero hero"
 ". blog-posts side-bar ."
 ". news side-bar ."
 "main-footer main-footer main-footer main-footer"; 
}

grid-template-areas让我们能把元素放在任何想要放置的地方，并且对于元素的布局该属性给我们提供一个不错的可视化。 值得注意的是，这里使用的值（top-bar，main-header，hero等）不是指那些元素的类名，而是指我们用grid-area属性给它们起的名字，下一步我们将对它们命名。

当网格区域名称重复时，该元素将跨越这些列/行。 例如，top-bar 横跨四列，side-bar横跨四行和五行。 .号代表空单元格。如果你回头看看上面的完整设计，您会看到这个定义如何与我们的网格模式相匹配。

假设我们已经应用了我们所有的样式，但还没有为网格项分配网格区域名称，到目前为止我们的页面看起来还不太好：

在将网格区域名称分配给网格项之前，网格将根据它们的源顺序自动将我们的元素放置在网格中。 显然这不是我们想要的。 为了使我们的布局按预期工作，我们需要定义我们的网格区域。所以我们继续往下走：

.top-bar{
 grid-area: top-bar;
} 
.main-header{
 grid-area: main-header;
} 
.hero{
 grid-area: hero;
}
.blog-posts{
 grid-area: blog-posts;
}
.news{
 grid-area: news;
}
.side-bar{
 grid-area: side-bar;
}
.main-footer{
 grid-area: main-footer;
}

需要注意的是这些名称可以随意设置。 为了方便，我选择了让它们与类名相匹配。

现在，我们已经为网格项分配了网格区域名称，它们将在被放置在网格中合适的位置。 这一步带来的变化很大：

除了 hero 部分中的网格项外，所有内容都完全按照需要正确放置，我们差不多要完成了。

但是在我们修复 hero 部分之前，我想解释一下一些难以理解的地方：主要内容两边的填充区域的设置。 作为提醒，我们再次把刚刚的设置搬过来，用如下方式调整列：

body{
 grid-template-columns: 12% auto 400px 12%;
}

设置为12％的两列用于填充主要内容两边的空白，但是它们仅用于第四行和第五行。 回想一下，我们告诉我们的top-bar、main-header、hero和main-footer元素跨越所有列，包括这两个“填充”列。 我们为什么这样做？ 因为我们希望这些元素的背景色横跨越整个视窗宽度，且任何一侧都没有空白。 我们只想在 blog-post/news和sidebar元素周围留出空白（第四行和第五行）。

为了让元素水平覆盖整个宽度，同时让元素里面的内容保存一定的padding，我们需要显示地在这些元素上设置padding：

.top-bar{
 padding: 4px 12%; 
}
.main-header{
 padding: 12px 12%;
}
.hero{ 
 padding: 55px 12% 0 12%;
}
.main-footer{
 padding: 25px 12%;
}

我们给元素设置左右 padding 为12％，这和grid-template-areas定义中的第一列和最后一列的宽度是一样的。 现在，需要填充整个宽度的元素最终呈现的结果是，背景横跨水平宽度，但其内容在两侧都预留出12％的空白。 很赞！

好了，让我们来修复 hero 部分。 这也将是一个网格容器，因此我们把它定义为一个网格，就像刚刚做过的那样：

.hero{
 display: grid;
 grid-template-columns: auto 1fr auto;
 grid-template-rows: auto auto auto;
 grid-template-areas: ". . award"
 "message . . "
 ". . . "; 
 }

这是一个3×3的网格，除了中间的列，其它都设置为 auto。 我们给中间一列大小设为1fr，因为我们希望在第一列和最后一列用东西填充后，剩下的空间完全需要完全填满。

hero中只有两个元素：message和award。 我们要message占据第二行的第一列，我们要award占据第一行的第三列。所以我们的完整网格定义应该如下所示：

.hero{
 display: grid;
 grid-template-columns: auto 1fr auto;
 grid-template-rows: auto auto auto;
 grid-template-areas: ". . award"
 "message . . "
 ". . . "; 
 }

下面我们所要做的就是命名我们的元素：

.message{
 grid-area: message;
}
.award{
 grid-area: award;
}

就这样，message和award卡入到位，我们的页面完成：

引入响应式

CSS Grid 使用媒体查询让重新排列整个布局变得非常简单。你所做的就是重新放置你的网格项。现在回到我们的设计，简单起见，我们只对两个宽度临界值做响应式处理，1600px 和 1050px。我们需要对一些元素（padding、margin等）进行一些小的样式调整，但是我不会把所有的样式调整都全部展示在这里。后面我会放出完整的代码，现在我们只需要关注关注网格相关的东西即可。

1600px 这个临界点的处理比较简单，当浏览器宽度到底1600px时我们将减少网站外部填充的地方。 之所以选择1600px，是到了这个宽度后12％填充看起来不太合适。为了解决这个问题，我们需要做的是在body上改变grid-template-columns的值，将第一列和最后一列减少到2％。 我们还需要调整其他元素的填充以匹配：

@media (max-width: 1600px) {
 body{
 grid-template-columns: 2% auto 400px 2%;
 }
 .top-bar{
 padding: 4px 2%;
 }
 .main-header{
 padding: 12px 2%;
 }
 .hero{
 padding: 55px 2% 0 2%;
 }
 .main-footer{
 padding: 25px 2%;
 }
}

对于下一个临界值，我们对网格项重新排列，使它们排列在一个列中。 再次回头看看我们原来的代码是如何对body进行设置的：

body{
 display: grid;
 grid-template-columns: 12% auto 400px 12%;
 grid-template-rows: auto auto 950px auto auto auto;
 grid-template-areas: "top-bar top-bar top-bar top-bar"
 "main-header main-header main-header main-header"
 "hero hero hero hero"
 ". blog-posts side-bar ."
 ". news side-bar ."
 "main-footer main-footer main-footer main-footer"; 
}

下面是重新设置的媒体查询：

@media (max-width: 1050px) {
 body{
 grid-template-columns: 3% auto 3%;
 grid-template-rows: auto auto auto auto auto auto auto;
 grid-template-areas: "top-bar top-bar top-bar"
 "main-header main-header main-header"
 "hero hero hero"
 ". blog-posts ."
 ". news ."
 ". side-bar ."
 "main-footer main-footer main-footer";
 }
}

我们在这里做了一些重要的改变：将列数从四个减少到三个，将第一列和最后一列的值改为3％（3％在较窄的宽度上优于2％），添加了 附加行，将所有行的长度改为auto，并将side-bar移动到自己的行。 现在我们的页面元素很适合在较窄的宽度下展示：

译者：若愚老师

https://zhuanlan.zhihu.com/p/33031255

顾

在《Python进阶记录之urllib模块》中，我们介绍了Python内置的HTTP请求库urllib模块的基本用法，需要重点掌握使用urllib的request模块进行简单的get、post请求。今天我们讲一下Python内置的HTML解析库HTMLParser模块，并结合之前的re模块和urllib模块实现爬取指定新闻页提取新闻文本内容的小需求。

HTMLParser模块简介

我们使用urllib模块进行HTTP请求获取到的是整个网页的HTML，但是我们往往只需要其中一部分对我们有用的内容。这时我们就可以使用HTMLParser模块来帮助我们处理HTML。

HTMLParser是Python内置的专门用来解析HTML的模块。利用HTMLParser，我们可以分析出一段HTML里面的标签、数据等，是一种处理HTML的简便途径。我们先来看一个官方的例子。

从上述代码中可以看出，HTMLParser模块来自html.parser，导包时要格外注意。使用HTMLParser时，我们需要定义一个继承自HTMLParser的子类，并根据需要重写HTMLParser父类中的成员方法。例子中使用的各方法作用如下：

handle_starttag(tag, attrs)：识别HTML的开始标签，例如<html>、<title>、<body>、<div>等。

handle_endtag(tag)：识别HTML的结束标签，例如</html>、</body>、</div>、</p>等。

handle_data(data)：识别HTML标签内容，例如“<p>Test</p>”中的Test。

handle_startendtag(tag, attrs)：识别没有结束标签的HTML标签，例如<img />等。

handle_comment(data)：识别HTML中的注释内容，一般是“<!-- 注释 -->”中的注释内容。

HTMLParser采用的是一种事件驱动的模式，HTMLParser找到一个特定的标记时，它会去调用一个用户定义的函数，以此来通知程序处理。

我们可以利用这些方法来实现HTML解析相关的功能。其中参数tag表示的是HTML标签，attrs是一个列表，列表元素为一个个“(属性，值)”形式的元组。HTMLParser会自动将tag和attrs都转为小写，解析时调用feed( )方法，把待解析的HTML字符串传入即可。

HTMLParser模块的简单应用

现在有以下网页，我们需要获取出里面的新闻文本内容。

首先就是获取该网页的HTML。经过上节内容的学习，我们很容易想到利用urllib库请求获取这个网页的HTML。

代码很简单，使用urlopen( )方法，传入url即可。此时，我们已经得到了整个网页的HTML，但是我们要获取的是新闻内容，显然此时的HTML中有太多我们不需要的东西。

观察整个网页HTML，我们发现新闻内容是包含在一个div中的。

我们可以使用正则表达式re模块将包含新闻内容的这个div提取出来。

新闻内容的div格式主要是：<div class="article-content">...</div>。由于该div下嵌套了其他div，如果我们直接使用r'<div class=\"article-content\">(.*?)</div>'进行正则提取，会发现在下一个</div>处就截断了。为了正确提取所有新闻内容相关的HTML，我们需要在</div>前加一个</p>，以保证是在新闻内容结束的</div>处截断。

此时，我们已经得到了新闻内容相关的HTML。现在还剩最后一部，就是把HTML标签去掉，保留新闻文本内容。这一步，我们就可以利用HTMLParser来实现了。

我们定义一个继承自HTMLParser的子类，然后重写handle_data(data)方法获取当前HTML中的文本内容即可。由于我们定义的私有变量__text是通过一个列表来逐条接收新闻内容的，所以我们在类中定义一个获取私有变量__text的方法，并将列表转换成字符串。至此，我们已经获取到了新闻的文本内容。

然而，当前文本内容一整段在一起，看起来并不美观，与实际分段的新闻文本内容也有差别。我们可以使用HTMLParser来美化新闻内容。我们知道，网页上的新闻内容是通过“\n”、“\t”、“<br/>”等特殊符号或标签进行间隔和分段的。因此，我们只需要在解析时替换掉这些特殊符号和标签即可。

重写handle_data(data)方法，识别文本的同时替换掉“\t”、“\r”、“\n”等特殊字符；重写handle_starttag(tag, attrs)方法，识别出<p>、<br>进行替换；重写handle_startendtag(tag, attrs)方法，识别出<br/>进行替换。再次运行程序，可以看到，新闻内容进行了分段，看起来就美观多了。

上述过程实现了一个非常简单的爬虫，爬取新闻网页，提取新闻内容。当然，由于我们目前还没介绍其他第三方库，实现起来还不够灵活，例如获取新闻内容的div我们现在只能通过正则表达式实现，但实际上，如果使用lxml（etree、xpath）、BeautifulSoup等第三方库会更简单实用。

总结

以上内容介绍了Python内置的HTML解析库HTMLParser模块，需要重点掌握HTMLParser类常用方法的作用，能够重写这些方法进行自定义解析。感谢大家的支持与关注，欢迎一起学习交流~