第02课:网页基础知识一点通

第02课:网页基础知识一点通

什么是网页

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

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

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

为什么要学习网页知识

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

网页基础知识

什么是 HTML?

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

HTML 示例

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>GitChat达人课</title>
  </head>
  <body>
     <h1>这是我的第一个标题</h1>
     <p>这是段落</p>
  </body>
</html>

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

  • <!DOCTYPE html> 是 HTML 的声明。该方法是为了方便浏览器准确的获取 HTML 的版本,以便于正确的对网页内容进行渲染(关于HTML 版本的问题,你可以参考这篇文章:HTML 标准的版本历史)。
  • <html></html> 是 HTML 的根元素。一个 HTML 文档的所有内容,必须放入此标签内。
  • <head></head> 是 HTML 的元(meta)数据。
  • <meta> 能够提供 HTML 页面的元信息,比如定义网页的编码方式、针对搜索引擎的关键词管理。
  • <title></title> 是网页的标题,但我们打开一个网页,浏览器显示的标签名就是 title 中的文字。
  • <body></body> 是 HTML 文档所包含的所有内容(例如文字、视频、音频等)。
  • <h1></h1> 用来定义标题。在 HTML 中,h 被确切的定义为标题大小。一共有6级标题,分别是 <h1>-<h6>,文字从大到小。
  • <p></p> 是 HTML 页面的段落标签。HTML 中如果对文字另起一行的话,必须使用该元素。

CSS

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

  • 内联:在 HTML 元素中直接使用 “style” 属性。
  • 内部样式表:在 <head></head> 内标记 <style> 元素中使用 CSS。
  • 外部引用:使用外部定义好的 CSS 文件。
内联

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

<p> 这是正常的段落文字</p>
<p style="color:red"> 这是使用内联CSS的段落文字</p>

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

图1-正常与CSS区别

内部样式表

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

<head>
 <style type="text/css">
   p {color:red;}
 </style>
</head>

内部样式表应该在 <head> 部分通过 <style> 标签来定义。通过上述内部样式表的展示,现在所有段落(<p>)里面的文字,都变成了红色。

外部样式表

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

 <head>
   <link rel="stylesheet" type="text/css" href="gitchat.css">
 </head>

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

补充内容

网页线性定位

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

html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GitChat达人课</title> </head> <body> <h1>GitChat欢迎您</h1> <p>GitChat全场1折,不买不要钱</p> </body> </html>

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

图2-线性表示

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

课后需了解的相关知识点

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

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

当然,如果你课下的确很忙,没有关系,本门课程在后续的课程中,会在使用相关技术的时候,进行一个简单的讲解,方便新人理解。

参考资料

  1. W3school
  2. HTML 基础 | 菜鸟教程
  3. Head First HTML与CSS(第二版)
上一篇
下一篇
目录