前言
对于python爬虫、数据分析等等一些实用技能的学习，小编思考良久，觉得前端知识的学习无比重要。就先去学习HTML的基础知识，希望可以帮到读者学习和了解HTML。
一个网页由哪些部分组成（网页标准）？
（一）、结构：HTML
（二）、表现：CSS 了解HTM
（三）、行为：JavaScript下面是对其中之一：HTML的基本知识
C/S架构和B/S架构
C：Client（客户端）
B：Browser（浏览器）
S：Server（服务器）
对服务器的一个简单理解：
服务器就是一个中转站，帮我们保存信息、传达消息，是所有用户之间的一个桥梁
C/S架构：需要安装、偶然更新、不跨平台。对大型专业应用、安全性要求较高的应用，要采用C/S架构。
B/S架构：无需更新、无需安装、可跨平台
浏览器
为什么叫五大浏览器？
因为这五大浏览器都有自己的内核，其他浏览器都是用这五个浏览器的内核。
什么是内核？
内核是浏览器的核心，用于处理浏览器所得到的各种资源。
了解即可，五大浏览器四大内核。
什么是HTML？
什么是HTML标记语言？HTML不是编程语言，是一种表示网页语言信息的符号标记语言。标记语言是一套标记，HTML使用标记来描述网页。Web网页浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标记，而是使用标记来解释页面的内容，html语言的特点包括：
可以设置文本的格式，比如标题、字号、文本颜色、段落，等等。
可以创建列表。
可以插入图像和媒体。
可以建立表格。
超链接，可以通过鼠标点击超链接来实现页面之间的跳转。
HTML标签
一个标签由<起始标签>标签体</结束标签>组成。
标签又称元素，是HTML的基本组成单位。不区分大小写，单推荐小写，因为小写更规范。
单标签：<起始标签>
双标签：<起始标签>标签体</结束标签>
标签属性：用于给标签提供附加信息。可以写在起始标签或单标签中，形式如下：<标签命 属性名=“属性值”属性名“=属性值”>
有些特殊的属性，没有属性名，只有属性值，例如：
<input disabled>
注意事项：
1、不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写）
2、属性名、属性值不能乱写，都是W3C规定好的
3、属性名、属性值都不区分大小写。
4、双引号，也可以写成单引号，甚至不写都行
5、标签中不要出现同名属性，否则后写的会失效，例如：
<input type="text" type="password">
HTML字符编码
编码、解码，会遵循一定的规范--字符集。
ASCII：支持大写字母、下写字母、数字、一些符号，共计128个。
ISO 8859-1：在ASCII基础上扩充了一些希腊字符等，共计256个。
GB2312：收录了6763个常用汉字、682个字符。
GBK：收录了的汉字和符号达到20000+，支持繁体中文。
UTF-8：包含了世界上所有语言的所有文字与符号。
计算机对数据的操作：
存储时，对数据进行：编码
读取时，对数据进行：解码
如果读取与存储的编码不一致，就会出现数据错乱。
语义化标签
概念：用特定的标签，去表达特定的含义。
原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要！
举例：对于h1标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。
优势：代码结构清晰可读性强。
有利于SEO（搜索引擎优化）
方便设备解析（如屏幕阅读器、盲人阅读器）
块级元素与行内元素
1、块级元素：独占一行（排版标签都是块级元素）
2、行内元素：不独占一行（如input）
3、使用规则：
块级元素中能写行内元素和块级元素（块级元素中几乎什么的能写）
行内元素中能写行内元素，但不能写块级元素。
h1~h6不能互相嵌套。
p中不要写块级元素
不常有的文本标签
| 标签名 | 语义 |
|---|---|
| cite | 作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑） |
| dfn | 特殊术语，或专属名词 |
| del与ins | 删除的文本与插入的文本 |
| sub与sup | 下标文字与上标文字 |
| code | 一段代码 |
| samp | 从正常的上下文中，将某些内容提取出来，例如：标识设备输出 |
| kbd | 键盘文本，表示文本时通过键盘输入的，经常用在与计算机相关的手册中 |
| bdo | 更改文本方向，要配合dir属性，可选值：ltr（默认值）、rtl |
| var | 标记变量，可以与code标签一起使用 |
| small | 附属细则，例如：包括版权、法律文本。 |
图片标签的基本使用
img的常用属性：
- 1、src：图片路径
- 2、alt：图片描述
- 3、width：图片宽度，单位是像素，例如：200px或200
- 4、height：图片高度，单位是像素
注意：尽量不同时修改图片的宽和高，可能会造成比例失调。
img是行内块元素。alt属性的作用是搜索引擎通过alt属性，得知图片的内容。
当图片无法展示时候，有些浏览器会呈现alt属性的值。
相对路径：以当前位置作为参考点，去建立路劲。
符号有：1、./（同级）2、/（下一级 ） 3、../(上一级)
相对路径中的./可以省略不写。
相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。
绝对路径：以根位置作为参考点，去建立路径。
1、本地绝对路径：如D:\python\PyCharm 2023.2.3\bin
2、网络绝对路径：例如：112-2103261F408-50.jpg (1080×1920) (18183.cn)
使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。
常用图片格式：
1、jpg格式：
概述：扩展名为.jpg或.jpeg，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）
主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
使用场景：对图片细节没有极高要求的场景。例如：网站的产品宣传图等
png格式：
概述：扩展名为：.png，是一种无损的压缩格式，能够更高质量的保存图片。
主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景：1、想让图片有透明背景2、想更高质量的呈现图片。例如：公司logo图
重要配图等等
3、bmg格式：
概述：扩展名为：.bmp，不进行压缩的一种格式，在最大程度上保留图片更多细节。
主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片。（网页中很少使用）
4、gif格式：
概述：扩展名为.gif，仅支持256中颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
使用场景：网页中的动态图片。
5、webp格式：
概述：扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中各种图片
6、base64
本质是一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
原理：把图片进行base64编码，形成一串文本。
如何生成：靠一些工具或网站
如何使用：直接作为img标签的src属性的值即可，并且不受文件位置的影响。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。
超链接
主要作用：从当前页面进行跳转。
<a></a>：超链接
常用属性：
href：要跳转的具体位置。
target：跳转时如何打开页面，常用值如下：_self：在本页签中打开。
_blank：在新页签中打开。
<a href="https://www.jb.com"><a>
代码中的多个空格、多个回车，都会被浏览器解析成一个空格！虽然a是行内元素，但a元素可以包裹出它自身外的任何元素！
补充：跳转锚点
锚点是网页中的一个标记点。
具体使用方式：
第一步：设置锚点
<a name=“test1”></a>
<h2 id="test2"></h2>
1、具有href属性的a标签是超链接，具有name属性的a标签是锚点。
2、name和id都是区分大小写的，且id最后别是数字开头。
超文本的真正含义：是一种组织信息1的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容。
HTML基本使用
源代码发送至浏览器后，会经过浏览器的HTML格式检查，检查其代码格式是否合法，如果合法，就直接渲染。如果不合法，浏览器会自己处理后，再渲染。
这里插入一个小插曲。对于HTML知识的实践练习，有一个叫做LIveServer的小插件非常有用。
安装LIveServer插件的优点：
（1）、可以更方便的打开网页。
（2）、打开网页的方式更贴近项目上线。
（3）、代码出现改动后，可以自动刷新。
根据自己的情况，去配置VSCode的自动保存。
注意：1、务必使用VSCode打开的是文件夹，否则Live Server插件无法正常工作。
2、打开的网页必须是标准的HTML结构，否则无法自动刷新。
练习一：
<html> <head> <title>Python爬虫开发与项目实战</title> <meta charset="UTF-8"> </head> <body> 文档设置标记<br> <p>这是段落。</p> <p>这是段落。</p> <p>这是段落。</p> <hr> <center>居中标记1</center> <center>居中标记2</center> <hr> <pre> [00:00](music) [00:28]你我皆凡人，生在人世间； [00:35]终日奔波苦，一刻不得闲； [00:43]既然不是仙，难免有杂念； </pre> <hr> <p> [00:00](music) [00:28]你我皆凡人，生在人世间； [00:35]终日奔波苦，一刻不得闲； [00:43]既然不是仙，难免有杂念； </p> <hr> <br> <ul> <li>Coffee</li> <li>Milk</li> </ul> <ol type="A"> <li>Coffee</li> <li>Milk</li> </ol> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> <div > <h3>这是标题</h3> <p>这是段落。</p> </div> </body> </html>
这里面的格式标记包括：
·<br>：强制换行标记。让后面的文字、图片、表格等等，显得在下一行
·<p>：换段落标记。换段落，由于多个空格和回车在HTML中会等效为一个空格，所以HTML中要换段落就要用<p>，<p>段落中也可以包含<p>段落。例如：<p>This is a paragraph.</p>。
·<center>：居中对齐标记。让段落或者文字相对于父标记居中显示。
·<pre>：预格式化标记。保留预先编排好的格式，常用来定义计算机原代码。与<p>进行对比，方便理解。
·<li>：列表项目标记。每一个列表使用一个<li>标记，可用来有序列表（<ol>）和无序列表（<ul>）中。
·<ul>：无序列表标记。<ul>表明这个列表没有序号。
·<ol>：有序列表标记。可以显示特定的一下顺序。有序列表的type属性值“1”表示阿拉伯数字1、2、3等等；默认type属性值“A”表示大写字母A、B、C等等。注意列表可以嵌套。
·<dl><dl><dl>：定义性列表。对列表条目进行简短说明。
·<hr>：水平分割线标记。可以用作段落之间的分割线。
·<div>：分区显示标记，也称为层标记。常用来编排一大段的HTML段落，也可以用于将表格式化，和<p>很相似，可以多层嵌套使用。
效果图入下
练习二：
<html> <head> <title>Python爬虫开发与项目实战</title> <meta charset="UTF-8"> </head> <body> Hn标题标记---->> <br> <h1>Python爬虫</h1> <h2>Python爬虫</h2> <h3>Python爬虫</h3> <h4>Python爬虫</h4> <h5>Python爬虫</h5> <h6>Python爬虫</h6> font标记---->> <font size="1">Python爬虫</font> <font size="3">Python爬虫</font> <font size="7">Python爬虫</font> <font size="7" color="red" face="微软雅黑">Python爬虫 </font> <font size="7" color="red" face="宋体">Python爬虫</font> <font size="7" color="red" face="新细明体">Python爬虫 </font> <br> B标记加粗---->> <b>Python爬虫</b> <br> i标记斜体---->> <i>Python爬虫</i> <br> sub下标标记---->> 2<sub>2</sub> <br> sup上标标记---->> 2<sup>2</sup> <br> 引用标记---->> <cite>Python爬虫</cite> <br> em标记表示强调，显示为斜体---->> <em>Python爬虫</em> <br> strong标记表示强调，加粗显示---->> <strong>Python爬虫</strong> <br> small标记，可以显示小一号字体，可以嵌套使用---->> <small>Python爬虫</small> <small><small>Python爬虫</small></small> <small><small><small>Python爬虫</small></small></small> <br> big标记，显示大一号的字体---->> <big>Python爬虫</big> <big><big>Python爬虫</big></big> <br> u标记是显示下划线---->> <big><big><big><u>Python爬虫</u></big></big></big> <br> </body> </html>
其中文本标记包括：
·<hn>：标题标记。共有6个级别，n的范围为1到6，不同级别对应不同显示大小的标题，h1最大，h6最小。
·<font>：字体设置标记。用来设置字体的格式，一般有三个常用属性：size(字体大小)，<font size=”14px”>;color(颜色)，<font color=”red”>;face（字体），<fontface=”微软雅黑”>。
<b>：粗字体标记。
<i>：斜字体标记。
<sub>：文字下标字体标记。
<sup>：文字上标字体标记。
<tt>：打印字体标记。
<cite>：引用方式的字体，通常显示为斜体。
<em>：表示强调，通常显示为斜体字。
<strong>：表示强调，通常显示为粗体字。
<small>：小型字体标记
<big>：大型字体标记。
<u>：下划线字体标记。
效果图如下：
练习三：
<html> <head> <title>学生信息表</title> <meta charset="UTF-8"> </head> <body> <table width="960" align="center" border="1" rules="all" cellpadding="15"> <tr> <th>学号</th> <th>班级</th> <th>姓名</th> <th>年龄</th> <th>籍贯</th> </tr> <tr align="center"> <td>1500001</td> <td>(1)班</td> <td>张三</td> <td>16</td> <td>上海</td> </tr> <tr align="center"> <td>1500011</td> <td>(2)班</td> <td>李四</td> <td>15</td> <td bgcolor="# ccc">浙江</td> </tr> </table> <br/> <table width="960" align="center" border="1" rules="all" cellpadding= "15"> <tr bgcolor="# ccc"> <th>学号</th> <th>班级</th> <th>姓名</th> <th>年龄</th> <th>籍贯</th> </tr> <tr align="center"> <td>1500001</td> <td>(1)班</td> <td>张三</td> <td>16</td> <td bgcolor="red"><font color="white">上海 </font></td> </tr> <tr align="center"> <td>1500011</td> <td>(2)班</td> <td>李四</td> <td>15</td> <td>浙江</td> </tr> </table> </body> </html>
表格的基本结构包括<table>、<caption>、<tr>、<td>和<th>等标记。
<table>标记的基本格式为<table属性1=“属性值1”属性2=“属性2”……>表格内容</table>。table标记有以下常见属性：
width属性：表示表格的宽度，它的值可以时像素(px)也可以是父级元素的百分比（%）。
height属性：表示表格的高度，它的值可以是像素(px)也可以是父级元素的百分比（%）。
border属性：表示表格外边框的宽度。
align属性用来表示表格的显示位置。left局左显示，center居中显示，right局右显示。
cellspacing属性：单元格之间的间距，默认是2px，单位为像素。
cellpadding属性：单元格内容与单元格边框的显示距离，单位为像素。
frame属性用来控制表格边框最外层的四条线框。void（默认）表示无线框；above表示仅顶部有线框；below表示仅有底部边框；hside表示仅有顶部边框和底部边框；lhs表示仅有左侧边框；rhs表示仅有右侧边框；vside表示仅有左右侧边框；border表示包含全部4个边框。
rule属性用来控制是否显示以及如何显示单元格之间的分割线。属性值none（默认值）表示无分割线；all表示包括所有分割线；rows表示仅有行分割线；clos表示仅有列分割线；groups表示仅在行组和列组之间有分割线。
<caption>标记用于表格中使用标题。<caption>属性的插入位置，直接位于<table>属性之后，<tr>表格行之前。<caption>标记中aligh属性可以取四个值；top表示标题放在表格的上部分；bottom表示标题放在表格的下部；left表示标题放在表格的左部；right表示标题放在表格的右部。
<tr>标记用来定义表格的行，对于每一个表格行，但是由一对<tr>…</tr>标记表示，每一行<tr>标记内可以嵌套多个<td>或者<th>标记。
·bgcolor属性用来设置背景颜色，格式为bgcolor=“颜色值”。
·align属性用来设置垂直方向对齐方式，格式为align=“值”。值为bottom时，表示靠顶端对齐；值为top时，表示靠底部对齐；值为middle时，表示居中对齐。
·valign属性用来设置水平方向对齐方式，格式为valign=“值”。值为left时，表示靠左对齐；值为right时，表示靠右对齐；值为center时，表示居中对齐。
<td>和<th>都是单元格的标记，其必须嵌套在<tr>标记内，成对出现。<th>是表头标记，通常位于首行或者首列，<th>中的文字默认会被加粗，而<td>不会。<td>是数据标记，表示该单元格的具体数据。<td>和<th>两者的标记属性都是一样的。
常用属性如下：
·bgcolor设置单元格背景。
·align设置单元格对齐方式。
·valign设置单元格垂直对齐方式。
·width设置单元格宽度。
·height设置单元格高度。
·rowspan设置单元格所占行数。
·colspan设置单元格所占列数
效果图如下
后言
新年在家没有闲着，总算是学习完HTML的基础知识并整理好了，越是深入的学习，就越是觉得计算机技术的深度，知道自己才刚刚开始。
最后，如果我的笔记可以帮到大家，当然是小编的最大荣幸。
