Python——Html（语法、格式、段落、文字处理、路径、超链接、图片、视频）
HTML（Hyper Text Markup Language超文本标记语言）用特殊的一种标签把需要特殊展示出来的内容圈起来。
这就是标记语言
语法规则
<标记>被标记的内容</标记>
<标记/>
巨大的坑。在以前2000年左右。那个时候语法规则不够规范。有些人写HTML的时候习惯性的漏掉括回
文本：文字，字符串，符号。超文本：图片，音乐，小视频.
超文本标记语言：通过标记的形式来展示一段超文本内容（包含文本，字符串，视频，音频，图片〕
今天的浏览器端你们看到的所有的网站都离不开HTML语言(查看网页源代码)
HTML的语法规则：
<大>被标记的内容</大>
<大><紅>周杰伦</紅></大>結婚生子
周杰伦的下一张专辑明天上线.<图片 图片的地址/>
xjhfjkladsjklfasd kflksadhjkldf
fadslfjdlsa jfas
dfhjkadsh fads网页架构介绍
<!DOCTYPE html> <!--文档类型-基于HTML5的标准 老的是xxxxxxxxx 4.01标准 -->
<html lang="en"> <!--html开始 标签属性lang="en"-->
<head> <!--头-->
<meta charset="UTF-8"> <!--字符集-->
<title>标签页的标题</title> <!--标签页的标题-->
</head> <!--头结束-->
<body> <!--网页上给用户展示的内容。爬虫内容99%都从这里获取-->
</body> <!--内容结束-->
</html> <!--html结束-->标题和段落介绍：h1-h6、br、p
标题标签<h1>——<h6>：一级标签——六级标签
标题效果：变大了、变粗了、独占一行了
标签号越小，标签字越大
<h6>以后的都不生效<h7><h8>和没加一样
换行可以用<br></br>
段落可以用<p></p>
浏览器会特殊对待p标签
自动的给p标签换行，还会添加外边距（段间距）案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>古诗词鉴赏</title> <!--标签页显示的文字-->
</head>
<body>
<h1>咏柳</h1>
<p>碧玉妆成一树高，</p>
<p>万条垂下绿丝绦。</p>
<p>不知细叶谁裁出，</p>
<br>二月春风似剪刀。</br>
</body>
</html>网页效果展示
文字处理：b、i、u、font等参数
字体变大、变颜色： <font size="7" color="red">万条</font> #已经被css架构替代
字体变大、变颜色： <span style="font-size: 1cm;color: blue">不知</span> #css架构的字体调整方法
加粗： <b>二月</b>
斜体： <i>碧玉</i>
下划线： <u>一树高</u>
多标签相互嵌套： <p><font size="7" color="red"><u><i><s>咏柳</s></i></u></font></p>
其他的标签可以通过word去查询了解案例代码
<body>
<p><font size="7" color="red"><u><i><s>咏柳</s></i></u></font></p>
<p><i>碧玉</i>妆成<u>一树高</u>，</p>
<p><font size="7" color="red">万条</font>垂下绿丝绦。</p>
<p><span style="font-size: 1cm;color: blue">不知</span>细叶谁裁出，</p>
<br><b>二月</b>春风似剪刀。</br>
</body>网页效果展示
关于列表：ol、ul、li、dl、dt、dd
有标签序号的列表
<ol>
<li>第1句话</li>
<li>第2句话</li>
</ol>
没有标签序号的列表
<ul>
<li>第1句话</li>
<li>第2句话</li>
</ul>自定义列表
<dl>
<dt>国内明星</dt>
<dd>XXX</dd>
<dt>国际明星</dt>
<dd>XXX</dd>
</dl>案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--正常情况下.ol和ul里面放的是li,爬虫要找li-->
<!--ol是有序列表-->
<ol>
<li>第1句话</li>
<li>第2句话</li>
<li>第3句话</li>
<li>第4句话</li>
<li>第5句话</li>
</ol>
<!--ul是有序列表-->
<ul>
<li>第1句话</li>
<li>第2句话</li>
<li>第3句话</li>
<li>第4句话</li>
<li>第5句话</li>
</ul>
<!--正常情况下.dl里面放的是dt和dd,爬虫要找dt和dd-->
<!--dl是自定义列表-->
<dl>
<dt>国内明星</dt>
<dd>于根伟</dd>
<dd>范志毅</dd>
<dd>姚明</dd>
<dt>国际明星</dt>
<dd>梅西</dd>
<dd>C罗</dd>
<dd>内马尔</dd>
</dl>
</body>
</html>网页效果展示
注意：不论列表本来的样子是什么样，未来我们从网页上看到的样子都是被css框架魔改过的，很可能是动态展示的页面。
路径：
-
相对路径
-
./当前或者不写 -
../上一级
-
-
绝对路径
-
一个固定得链接地址(如域名)
-
从根磁盘一直到你的文件得路径
-
超链接：href
超链接:<a></a>
<a>给用户展示的文字或者图片</a>
target：链接展示的方式
_blank，在新窗口展示
_self，在当前窗口展示
如果不写,默认是当前窗口
href：链接被触发时，浏览器跳转的url地址(必须要记住！！！)
href中给的不一定是完整的url地址,可以是相对地址(本地路径),可以是绝对地址(互联网地址)
<a href="../../第一个网页.html">可以跳转到自己的网页</a>案例代码
<a href="目标URL地址，点击后跳转">给用户展示的文字或者图片</a>
<a href="www.baidu.com" target="_blank">点击我啊,点我访问百度</a>
<a href="第一个网页.html">可以跳转到自己的网页</a>
图片：img
图片
<img src="路径/文件名" alt="替代文本">
<img src="路径/文件名" alt="替代文本" />
这种写法是为了符合XML的语法，同时也是HTML5规范的一部分。在HTML5中，这样的自闭合标签是有效的，并且更加清晰地表达了元素的结束。然而，需要注意的是，并非所有的HTML元素都可以使用自闭合的形式，只有空元素才可以。<img> 就是一个空元素，因为它没有内容。
总的来说，是否使用自闭合的形式取决于个人偏好和代码风格，两种写法都是有效的。
路径地址:src="图片路径"
src: 这是指定图像文件的路径的属性。可以是相对路径（相对于当前HTML文件的位置）或绝对路径（完整的文件路径或URL）。
替代文本:<img src="路径/文件名" alt="替代文本">
alt: 这是替代文本的属性，用于在图像无法加载时显示。替代文本也对可访问性很重要，因为屏幕阅读器会朗读替代文本，使得使用辅助技术的用户能够理解图像的内容。
alt只有图片加载中的时候才显示的.
想给图片加一些显示名称,就直接在后面跟上文字信息,并使用css框架的知识进行调整
<img src="tututu/a.jpg" >图片描述文字
高度设置:height="600" 单位是px(像素),可不写 设置完高度后,宽度会按照比例自适应调节
宽度设置:width="300" 单位是px(像素),可不写 设置完宽度后,高度会按照比例自适应调节
高度和宽度一起设置 会严格按照设定缩放,图片会被拉伸或收缩,走形
案例代码
<img src="tututu/a.jpg" height="600" >图片描述文字
<img src="tututu/a.gif" width="600" alt="依然范特西封面图">
<img src="tututu/a.png" height="600" width="300" alt="加载不出来图片的时候可以看我">
视频：video
视频:<video src="视频路径">展示文字</video>
一般情况下,视频不会被整个存储到网站上.因为这样加载太困难了.
视频会被特殊处理,把视频做切片.切割成很多份,并需要专业的播放工具去播放,因此比较麻烦.案例代码
<video src="shipin/xxx.mp4">点我看视频!</video>
<video src="http://mediaplay.kksmg.com/2022/07/25/h264_720p_600k_39038-DFTVHD-20220725175000-4800-310117-600k_mp4.mp4">点我看视频!</video>
