python网页设计基础_Python爬虫丨HTML基础

HTML是什么？

HTML(Hyper Text Markup Language)是用来描述网页的一种语言，也叫超文本标记语言。

HTML文档就是前端工程师设计网页时使用的语言，浏览器会根据HTML文档的描述，解析出它所描述的网页。

查看网页的HTML代码

在网页任意地方点击鼠标右键，然后点击"显示网页源代码"。(Windows系统的快捷键Crtl+u)。

浏览器会弹出一个新的标签页

在网页空白处点击右键，然后选择检查(快捷方式Ctrl+Shift+i)。

点击后的效果

注：标亮的部分就是网页的HTML代码

将鼠标放在HTML源代码上，左边网页上有一些内容会被标量。这其实就是这行代码所描述的网页内容，一左一右，相互对应。

HTML的层级

HTML源代码和网页，就像建筑图制和房子。房子有不同楼层所组成，每一层中，都会包含一些房间，一个房间还可能划分几个更小的房间，每个小房间是由门、窗、墙壁、地板等等构建组成的。

HTML源代码中有一些小三角，每一个三角形都可以展开或合上。

每一个可以展开和合上的小三角形里包含的内容，都是一个层级，它很像电脑中一层一层的文件夹。

HTML的组成

标签和元素

实例

我是一级标题

我是二级标题

我是三级标题

我是一个段落啦。一级标题、二级标题、三级标题和我，我们三个一起组成了body。

尖括号<>中间的字母，就叫做标签。

标签通常是成对出现的：前面的是开始标签，例

；后面的是结束标签，如。

常见元素：

注：HTML标签是可以嵌套标签的，而且可以多层嵌套。

网页头和网页体

HTML文档的基本是有网页头和网页体组成的

HTML文档的最外层标签一定是，里面嵌套着

元素与元素。元素代表了网页头，元素代表了网页体。

网页头里面的内容

定义了HTML文档的字符编码。

元素定义网页的标题

而网页体，就是显示在网页中的内容了。

网页体中依次有四个内容：

元素代表一级标题，

元素代表二级标题等等 。然后

元素，代表段落文本。

属性

HTML标签可以通过设置属性来为HTML元素描述更多信息

实例

这个书苑不太冷

这行代码给

元素添加了一个style属性，属性中的内容规定了这行文字的颜色。

style属性可以用来定义网页文本的样式，比如字体大小、颜色、间距、对齐方式等等。

href属性——添加链接

我是一个链接，点我试试

除了style和href，HTML中还有两个很常用的属性，即class与id。

实例

这个书苑不太冷3.0

.book {

float: left;

margin: 5px;

padding: 15px;

width: 350px;

height: 240px;

border: 3px solid #20b2aa;

}

​

这个书苑不太冷

吴枫喜欢的书:

点这里看看

《奇点遗民》

本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……刘宇昆的独特之处在于，他写的不是科幻探险或英雄奇幻，而是数据时代里每个人的生活和情感变化。透过这本书，我们看到的不仅是未来还有当下。

.book中的.对应class。因此，网页头中的.book和网页体中的class='book'是有联系的。

在网页头里面，定义了class属性，属性值为'book'，然后下面一长串代码是对这个class属性的描述；接着再再网页体中调用，所以看到了

。

类似建筑师会做门表图，规定好每一种门的详细尺寸和样式，然后给每个门都起个名字。

网页头的

id属性和class属性的用法类似，给元素定义id和class的目的都是为了查找、定位元素，或者为元素设置样式。

而id属性用于表示唯一的元素，而class用于标识一系列的元素。

常用HTML属性总结

一起来读HTML

网页中点击右键——检查

在网页头中定义了编码、选项卡之类的内容，里面的

网页体，点击三角符号折叠，内部的结构

网页体有三大部分，

元素的部分，

元素的部分，和

元素的部分。

三部分分别是：顶部的标题、中间的内容、以及底部。

首个

元素是网页的顶部标题：id='header'

然后是

元素，对应的是中间的正文部分。

底部对应着的

继续点开HTML的

元素，折叠三角符号

元素分为两部分，分别是对应着网页中间的左边栏和正文部分。

第一个

元素，id='nav'，对应着侧边栏。

可以看到

元素中，包含了三个 元素，内容是：科幻小说、人文读物、技术参考。

第二个

元素对应着右边正文部分，id='main'

在

中，又包含了三个

元素，它们都用同样的属性。每个

元素分别介绍了一本书的内容。

修改网页

打开网页，点击开发者工具的左上角

点击它，然后再把鼠标放在网页中，和点击源代码的情景相反，当数标放在网页上，右边代码区中描述它的代码会被标亮出来。

这是以后要经常用到的功能，用来定位所要查找的网页内容的源代码。

通过修改HTML源代码，是可以修改网页的。

实例：修改网页的标题

把鼠标放在网页"这个书苑不太冷"，看到网页源代码中，标题所在的这个元素被标亮了，接下来修改这里的内容。

把鼠标点上去，双击，就和修改word文档一样。

改完之后，按下enter确认。左边的文字就变成了你刚才输入的样子。最后关掉开发者工具就可以啦。

拓展练习

通过修改HTML源码，修改明星的微博。