网页基础知识一点通

什么是网页

当你在浏览器输入 ，并回车访问的时候，你看到的所有的展现在你屏幕上的东西，其实都是网页。网页是通过 URL 来进行识别和访问的。按照 Wiki 百科的说法，网页被定义成下面的说明。

网页（英语：Web Page）是一个适用于万维网和网页浏览器的文件，它存放在世界某个角落的某一部或一组计算机中，而这部计算机必须是与互联网相连。网页经由网址（URL）来识别与访问，当我们在网页浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到用户家的计算机，然后再通过浏览器解释网页的内容，再展示给用户。是网络中的一“页”，通常是 HTML 格式，但现今已经有愈来愈多、各色各样的网页格式和标准出现。网页通常用图像来提供图画。网页要通过网页浏览器来阅读。

简单的来说，你在浏览器中见到的任何一个页面，都是网页。

为什么要学习网页知识

学习基础的网页知识最重要的一点，是因为这门课程后续要讲授的技术，都涉及到对网页内容的分析与爬取。哪怕仅仅是作为一名刚入门的爬虫小白，你都需要了解一下网页的相关知识。作为一名开发人员，不仅仅要知其然，更要知其所以然。一味地 Copy 代码，不懂得为什么要这样做，反而会大大降低学习的效果。

网页基础知识

什么是 HTML？

HTML（HyperText Markup Language） 是一种用来描述网页的语言，它是通过“标记标签”来描述网页的。通常来说，我们把 HTML 文档称为 Web 页面。

HTML 示例

上述示例中的 、 等，只要是用包裹住的元素，都可以认为是 HTML 的“标记标签”。需要注意的是，“标题标记”一般都有开始标记和结束标记，普通的标题标记，一般以这样进行使用。接下来我们详细的解释一下上述示例中的“标记标签：

是 HTML 的声明。该方法是为了方便浏览器准确的获取 HTML 的版本，以便于正确的对网页内容进行渲染（关于HTML 版本的问题，你可以参考这篇文章：HTML 标准的版本历史）。

是 HTML 的根元素。一个 HTML 文档的所有内容，必须放入此标签内。

是 HTML 的元（meta）数据。

能够提供 HTML 页面的元信息，比如定义网页的编码方式、针对搜索引擎的关键词管理。

是网页的标题，但我们打开一个网页，浏览器显示的标签名就是 title 中的文字。

是 HTML 文档所包含的所有内容（例如文字、视频、音频等）。

用来定义标题。在 HTML 中，h 被确切的定义为标题大小。一共有6级标题，分别是 ，文字从大到小。

是 HTML 页面的段落标签。HTML 中如果对文字另起一行的话，必须使用该元素。

CSS

CSS（Cascading Style Sheets）是用来渲染 HTML 文档中元素标签的样式。常见的 CSS 使用方式有三种：

内联：在 HTML 元素中直接使用 “style” 属性。

内部样式表：在 内标记 元素中使用 CSS。

外部引用：使用外部定义好的 CSS 文件。

内联

用内联的方式使用 CSS，只需要在相关的标签中使用样式属性即可，不需要其他的配置。

上述的两个段落，经过浏览器的渲染后，显示的结果如下：

内部样式表

内联方式虽然简单，但是如果标签很多，一个一个添加，无疑浪费了本来就很宝贵的时间。如果对某一个标题设定为统一样式，或者是希望能够方便管理相关样式的时候，就可以使用内部样式表

内部样式表应该在 部分通过 标签来定义。通过上述内部样式表的展示，现在所有段落（）里面的文字，都变成了红色。

外部样式表

试想一下：你有100个网页要使用 CSS 样式，如果使用内联样式，你的工作量无疑是“亚历山大”的；如果使用内部样式表，你也要重复的修改100次。这个时候，你就需要外部样式表来“救火”啦。外部样式表可以仅通过一个文件来改变整个网页的外观。

上述的例子中，我们通过 导入了一个名叫 的外部样式表。 里面是已经写好的各种 CSS 样子。当我们的文件中存在对应的标签时，浏览器会自动为我们配置好相应的样式。

补充内容

网页线性定位

网页线性定位的意思是：对网页标签进行线性表示，将其一维转化，便于确定其位置。

假定在上述代码中，我们需要获取到 所在的位置。按照网页线性定位的概念，我们可以表示为 。

如上图所示，即 被包含在 标签中，而 标签被包含在 中。通过这样一种线性的转换，新人可以很方便的了解需要获取的标签，位于网页的哪个位置。

本篇文章只是介绍了基础的 HTML 知识。但是，正像作者在课程中一直强调的那样，任何技术一旦被广泛应用，其技术栈的支线也会越来越多。本文为了照顾新人，没有介绍 这项技术。如果你对于前端开发感兴趣的话，可以尝试课后自己学习相关的知识点。

为了加速后续的开发进度。你也可能需要在课后学习一下 HTML 中列表、表格、div 等常见的 HTML 标签和相关的特性。

当然，如果你课下的确很忙，没有关系，本公众号，会在使用相关技术的时候，进行一个简单的讲解，方便新人理解。

参考资料

W3school

HTML 基础 | 菜鸟教程

Head First HTML与CSS（第二版）