网页基础知识一点通

什么是网页

当你在浏览器输入 ,并回车访问的时候,你看到的所有的展现在你屏幕上的东西,其实都是网页。网页是通过 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(第二版)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190817A0OZ4C00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券