相对路径和绝对路径
相对路径和绝对路径是用来指定文件或目录位置的两种不同的路径表示方式。
相对路径是相对于当前文件所在位置的路径。
它基于当前文件所在的目录，指定要访问的文件或目录的位置。
相对路径可以是以下几种形式：
- 相对于当前目录：使用文件或目录的名称，例如
./image.jpg或./folder/file.txt。 - 相对于上级目录：使用
..表示上级目录，例如../image.jpg。 - 相对于子目录：指定子目录的名称，例如
subfolder/image.jpg。
绝对路径是从文件系统的根目录开始的完整路径。它提供了文件目录的完整位置，不依赖于当前文件所在的位置。绝对路径可以是以下几种形式：
- 在Windows系统中，本地绝对路径通常以盘符开头，例如
C:\path\to\file.txt。（缺点:很多电脑的本地没有这个资源） - 网络绝对路径是指在互联网上引用资源时使用的完整路径。它包含协议、域名、端口（如果有）、路径和查询参数等信息，用于准确定位和访问网络上的资源。例如：http://pic.bizhi360.***/bbpic/78/11678.jpg。（缺点：有些图片受到保护，不可使用）
相对路径和绝对路径在不同的情况下有不同的用途。相对路径适用于在同一项目或文件夹结构中引用文件或目录，而绝对路径适用于在不同位置或不同项目之间引用文件或目录。
需要注意的是，相对路径和绝对路径的使用取决于上下文和具体需求。在编写html、CSS或其他文件路径时，根据文件的位置和目标文件的位置选择适当的路径表示方式。
常见的图片格式
常见的图片格式有以下几种：
-
JPEG（.jpg）：JPEG是一种有损压缩的图像格式，适用于存储照片和其他需要高质量图像的应用。它支持16.7百万种颜色，可以在不失真的情况下压缩图像文件大小。JPEG图像通常用于网站、印刷和数字摄影等领域。（颜色丰富，占用空间小，细节一般）
-
PNG（.png）：PNG是一种无损压缩的图像格式，适用于存储透明或具有大量颜色的图像。它支持256种颜色和透明度，可以在不失真的情况下压缩图像文件大小。PNG图像通常用于网站、应用程序和计算机图形等领域。（色彩丰富，占用空间略大，细节更好，高质量）
-
GIF（.gif）：GIF是一种支持动画和透明度的图像格式，适用于存储简单的动画和徽标。它支持256种颜色和透明度，可以在不失真的情况下压缩图像文件大小。GIF图像通常用于网站、社交媒体和移动应用程序等领域。(可动态）
-
BMP（.bmp）：BMP是一种未经压缩的图像格式，适用于存储高质量的图像和图形。它支持16.7百万种颜色，但文件大小通常很大。BMP图像通常用于印刷和桌面出版等领域。（一般不用于网页，占用空间太大)
-
Base64是一种用于将二进制数据编码成ASCII字符的编码方式。它将原始数据分割成固定长度的块，然后将每个块转换为对应的可打印字符。也就是把图片编码成文本。Base64编码常用于在文本协议中传输或存储二进制数据，例如在电子邮件中传输附件或在网页中嵌入图像。
这些图像格式都有各自的优点和用途，具体使用哪种格式取决于应用场景和需求。
超链接-跳转链接
在前端中，可以使用超链接（标签）来实现页面之间的跳转。以下是一个简单的示例
<!--语法-->
<a href="目标页面的URL">链接文本</a>
<!--实例-->
<!DOCTYPE html>
<html lang="zh-***">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欧买噶的第2个网页</title>
</head>
<body>
<a href="http://pic.bizhi360.***/bbpic/78/11678.jpg">动漫女孩</a>
</body>
</html>
结果展示：
图片链接：http://pic.bizhi360.***/bbpic/78/11678.jpg
点击动漫女孩
其中，href属性指定了目标页面的URL，即要跳转到的页面。链接文本是显示在页面上的可点击文本，用户点击该文本时会触发跳转。
例如，要将用户点击的文本显示为"点击跳转到目标页面"，并跳转到target.html页面，可以使用以下代码：
<a href="target.html">点击跳转到目标页面</a>
当用户点击该链接时，浏览器将加载target.html页面并显示在当前窗口或标签页中。
此外，还可以通过添加target属性来指定链接的打开方式。常见的取值有：
_self：在当前窗口或标签页中打开链接（默认值）。
_blank：在新的窗口或标签页中打开链接。
_parent：在父级窗口或标签页中打开链接。
_top：在顶级窗口或标签页中打开链接。
例如，要在新的窗口中打开目标页面，可以使用以下代码：
<a href="target.html" target="_blank">点击跳转到目标页面</a>
这样，用户点击链接时，目标页面将在新的窗口中打开。通过使用超链接，可以轻松实现前端页面之间的跳转和导航。
超链接-跳转文件
<!DOCTYPE html>
<html lang="zh-***">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欧买噶的第2个网页</title>
</head>
<body>
<a href="http://pic.bizhi360.***/bbpic/78/11678.jpg">动漫女孩</a>
<a href="./resouce/1111.TXT">打开文本</a>
<a href="./resouce/1111.zip">不能直接打开的文件（例如压缩包），会自动触发下载</a>
<a href="./resouce/1111.zip" download="./resouce/1111.zip">不能直接打开的文件（例如压缩包），会强制触发下载</a>
</body>
</html>
超链接-跳转锚点
在前端中，可以使用锚点（anchor）来实现页面内的跳转。锚点是在页面中标记某个位置的标记点，可以通过链接点击或编程方式跳转到该位置。以下是实现前端跳转锚点的方法：
1、使用标签和href属性：可以在标签的href属性中设置锚点的名称，然后通过点击链接来跳转到锚点所在的位置。例如：
<a href="#section1">跳转到第一节</a>
<!-- ... -->
<h2 id="section1">第一节</h2>
<p>这是第一节的内容。</p>
在上述示例中，当用户点击"跳转到第一节"链接时，页面将滚动到具有id="section1"的元素，即"第一节"的标题。通俗来理解就是类似于word里面的目录跳转，跳到对应的锚点
2、使用标签和name属性：可以在要跳转到的位置（通常是目标元素）上使用标签，并设置name属性为锚点的名称。然后，在跳转链接中使用标签的href属性指向该锚点名称。例如：
<a name="section1">第一节</a>
<p>这是第一节的内容。</p>
<!-- ... -->
<a href="#section1">跳转到第一节</a>
超链接-唤起指定应用
<a href="weixin://">打开微信</a>
<a href="alipay://">打开支付宝</a>
<a href="tel:10001">电话联系</a>
<a href="mailto:12456@qq.***">邮箱联系</a>
<a href="sms:10086">短信联系</a>
:后面写要联系的号码或者邮箱微信支付宝
列表
列表可以根据其特性和用途进行不同的分类。以下是一些常见的列表分类：
有序列表（Ordered List）：有序列表是按照一定的顺序排列元素的列表。元素的顺序在列表中是固定的，每个元素都有一个唯一的位置。例如，数字列表 [1, 2, 3, 4, 5] 是一个有序列表。
无序列表（Unordered List）：无序列表中的元素没有固定的顺序，可以随意排列。元素的位置不影响列表的含义或使用。例如，一个无序的水果列表 [‘apple’, ‘banana’, ‘orange’]。
自定义列表（Definition List）
在前端中，可以使用HTML标签来创建有序列表。有序列表使用
- 标签包裹列表项，每个列表项使用
- 标签包裹。以下是一个示例代码
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
在上述代码中，
- 表示有序列表的开始，
- 表示每个列表项。浏览器会自动为列表项添加数字标记，并按顺序进行编号。
可以根据需要在 - 标签中添加任意内容，例如文本、图像、链接等。
无序列表怎么写
<ul>
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
</ul>
自定义列表
<dl>
<dt>术语</dt>
<dd>术语解释<dd/>
<dt>术语</dt>
<dd>术语解释<dd/>
</dl>
例如：
<ol>
<li>第一项</li>
<li>第二项</li>
<li>
第三项包含子项：
<ul>
<li>子项1</li>
<li>子项2</li>
</ul>
</li>
</ol>
在上述代码中，第三项包含一个无序子列表，使用<ul>和<li>标签来创建。
<!DOCTYPE html>
<html lang="zh-***">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<h2>如何写CSDN</h2>
<ol>
<li>输入网址</li>
<li>进入CSDN
<dl>
<dt>CSDN</dt>
<dd>CSDN是一个程序员论坛</dd>
</dl>
</li>
<li>
进行创作：
<ul>
<li>编写目录</li>
<li>编写内容</li>
</ul>
</li>
<li>发布</li>
</ol>
</body>
</html>
在上述代码中，第二项包括一个自定义列表，第三项包含一个无序子列表，使用<ul>和<li>标签来创建。
