HTML是什么？
HTML（Hyper Text Markup Language）是用来描述网页的一种语言，也叫超文本标记语言 。
查看网页的HTML代码
推荐用谷歌浏览器（Chrome）或火狐浏览器（Firefox）二者之一
方法一：快捷方式是ctrl+shift+i
方法二：网页任何地方右击“审查元素”
HTML的层级
HTML源代码中有一些小三角形，每一个三角形都可以展开或合上。尖角向下代表展开，向右代表合上了，这就是HTML的层级关系。
HTML的组成
标签和元素
标签：
在HTML文档中，夹在尖括号<>中间的字母，就叫“标签”。
1、 标签通常是成对出现的：前面的是【开始标签】，比如<body>；后面的是【结束标签】，如</body>。
2、 偶尔也会有单独出现的，比如：<meta charset="utf-8">（定义网页编码格式为 utf-8）
元素：
开始标签+结束标签+中间的所有内容，它们在一起就组成了“元素”
1-1.png
网页头和网页体
HTML文档的最外层标签一定是<html>，里面嵌套着<head>元素与<body>元素。<head>元素代表了【网页头】，<body>元素代表了【网页体】，这是最基本的网页结构。
【网页头】
网页头的内容不会被直接呈现在浏览器里的网页正文中。
具体包含内容及解释如下：
<head>
<meta charset="utf-8"> #定义了HTML文档的字符编码
<title>我是网页的名字</title> #用来定义网页的标题，这个标题就是显示在浏览器的标签页中的内容
</head>
【网页体】
就是那些能看到的显示在网页中的内容
属性
注意：HTML的属性和Python中的属性不是一个东西，不要搞混。
HTML标签可以通过设置【属性】来为HTML元素描述更多的信息。比如增加颜色，链接等。
style属性
用途：
可以用来定义网页文本的样式，比如字体大小、颜色、间距、对齐方式等等。
写法是：
<h1 style="color:#20b2aa;">这个书苑不太冷</h1>
href属性
用途：
可以用来添加链接。
在HTML中，链接一般都由<a>标签定义，href属性用于规定指向页面的URL。
写法是：
<a href="https://wordpress-edu-3autumn.localprod.oc.forchange.cn/">我是一个链接，点我试试</a>
Class属性
用途：
查找、定位元素，或者为元素设置样式
写法是：
出现在网页头里的下述内容：
<style>
.book {
/以下是.book的具体样式规定/
float: left; /控制元素浮动/
margin: 5px; /外边距为5像素/
padding: 15px; /内边距为15像素/
width: 350px; /宽度为350像素/
height: 240px; /高度为240像素/
border: 3px solid #20b2aa; /边框为3像素/
}
</style>
与出现在网页体里的： <div class="book">
二者一个是网页头里的.book；一个是网页体里的<div class="book">。其实.对应class，所以.book代表class book。因此，网页头中的.book和网页体中的class="book"是有联系的。
在网页头里面，定义了class属性，属性值为"book"，然后下面一长串代码是对这个class属性的描述；接着再在网页体中调用，所以看到了<div class="book">。网页头的<style>元素中定义了.book的样式，
因此，凡是class="book"的元素都会继承它的样式。假如想在这个页面中多加一些书籍的介绍，只要在网页体中增加一些class="book" 的div元素就好了
id属性
用途：
查找、定位元素，或者为元素设置样式。
与Class不同之处在于，id属性用于标识唯一的元素，而class用于标识一系列的元素。id就像是学生的学生证号码，每个人都是唯一的；而学生们可以属于同一个班级，班级就像class。
实操：制作本地网页（源代码）
1、请求网页的源代码，并且将源代码保存到本地
写法：
import requests
res=requests.get('https://localprod.pandateacher.com/python-manuscript/crawler-html/spider-men5.0.html')
article=res.text
k=open('书苑.txt','a+')
k.write(article)
k.close()
2、把上述请求到的HTML源文件复制粘贴，在vscode中保存为后缀为.html 的文档，它就是一个保存在你本地中的网页了。.html这种文件格式，可以用浏览器打开。这就好比MP3文件用音乐播放器打开，txt用记事本打开一样。
网友评论