chapter3-网页基础知识一点通

最新推荐文章于 2024-08-06 16:15:06 发布

君若雅

最新推荐文章于 2024-08-06 16:15:06 发布

阅读量704

点赞数 25

分类专栏： Python 爬虫从入门到精通文章标签：爬虫 python

本文链接：https://blog.csdn.net/ElegantOfKing/article/details/135667338

版权

Python 爬虫从入门到精通专栏收录该内容

13 篇文章 0 订阅

订阅专栏

什么是网页

当你在浏览器输入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(Cascading Style Sheets) 是用来渲染HTML 文档中元素标签的样式。常见的CSS 使用方式有3种：

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

内联

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

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

上述的两个段落，经过浏览器的渲染后，显示的结果如下：
在这里插入图片描述

内部样式表

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

<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 样子。当我们的文件中存在对应的标签时，浏览器会自动为我们配置好相应的样式。

补充内容

网页线性定位

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN博客</title>
</head>
<body>
<h1>CSDN欢迎您</h1>
<p>CSDN全场1折，不买不要钱</p>
</body>
</html>

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

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

课下了解的相关知识点

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

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

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

参考资料

君若雅

关注

25
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
chapter3-网页基础知识一点通

当你在浏览器输入，并回车访问的时候，你看到的所有的展现在你屏幕上的东西，其实都是网页。网页是通过URL来进行识别和访问的。按照wiki 百科的说法，网页被定义成下面的说明网页web page）是一个适用于万维网和网页浏览器的文件，它存放在世界某个角落的某一部或一组计算机中，而这部计算机必须是与互联网相连。网页经由网址URL）来识别与访问，当我们在网页浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到用户家的计算机，然后再通过浏览器解释网页的内容，再展示给用户。是网络中的一“页”，通常是。
复制链接

扫一扫