喽大家好，我是胖达。本期视频来看看路径相关的内容。我们知道在网页中存在很多的图片，如果把这些图片和html文档放在一起，这样不光不美观，管理起来也非常不方便。通常会新建一个专门用来管理图像资源的文件夹，当需要查找图像的时候就会选择使用路径的方式来指定图像文件的位置。

路径的类型又分为两种，第一种是相对路径，第二种是绝对路径。今天先来了解一下相对路径。相对路径是相对于当前文件的位置来表示资源，也就是图片位置的路径表达方式。简单来说就是图片相对于当前html文档的位置。这里把相对路径的分类给大家列出来了，一个一个往下看。

·首先是同级路径。同级路径不需要在html里面写任何符号，只需要将文件名写到html属性里就可以了。在代码里看一下，这里有一个image，点jpg的图片和html文档处于同一级，所以在html的属性里直接写image，点jpg保存一下看看效果。

可以看到现在图片是正常展示的，同级路径下只需要在html属性里完整填写图像文件的名称就可以了。

·再来看第二个下级路径。当图像文件位于html文件下一集时，需要在html属性里完整填写同级文件夹的名称，然后斜杠写出对应图片文件的名称。

→首先打开资源文件夹，在这里新增一个images的文件夹。将image图片文件复制一份放到images文件夹里。

→打开vscode，新建一个gtml文档，这里新增一个image标签。

→在左侧资源管理器中刚刚新增的images文件夹已经显示出来了，打开以后会发现里面有一个image，点jpg的图片。把这个路径写一下，在src属性里面写入位于当前html文件同级的images文件夹的名称，使用符号斜杠找到image，点gpg，看一下效果。此时图片也完整显示出来了。

→如果在amager四文件夹里还有一个amager四文件夹，下级路径又该怎么写？在amager文件夹里再新建一个文件夹，打开vscod，在左侧的资源管理器中a major s文件夹下面又新增了一个a major s文件夹，在这里面又放了一张图片。

这张图片应该怎样让它展示出来？一起来看一下。

→首先找到同级的images文件夹，使用符号斜杠，此时vscode会提供给两个选项，一个是imagers文件夹，另一个是imager.gpg。选择imagers，imagers文件夹里面的imager.gpg的文件了，保存一下看看效果。

在浏览器中这两张图片都完美的展现出来了。

最后来看一下相对路径里面的。上级路径使用的符号是点点杠。上级路径又应该怎么理解？也就是图像文件是位于当前这个 hd ml文件的上一集。

在练习文件夹里新增一个名为 hd ml的文件夹，打开vs code，选择刚刚新增的文件夹，选择新建文件，这里需要新增一个 hd ml文档。在当前 hd ml文档中，如果想要调用上一级的 image 点 j p g 的图片应该怎么做？在 sr c 属性里面使用点点杠。

这里 vs code提供了上一集路径中存在的文件，选择 image 点 j p g，在浏览器中看下效果，此时图片也是正常显示的。如果hd ml文件藏得更深一些，把当前的文件复制一份，新增一个hd ml文件夹，将复制的文档粘贴一下，打开刚刚复制的文档，修改sr c属性里面的值，使用点点杠。

此时是没有找到 amage 点 j p g 的文件，这个时候就需要重复刚刚的操作，点点杠就能找到需要到的 amage 点 jbg 的文件了，保存一下看看效果。这里可以看到图片还是正常显示出来了。

本期视频主要了解了相对路径的三种分类，一个是同级路径，一个是下级路径，还有一个是上级路径。希望小伙伴们下来可以好好练习一下，这对于后期的内容非常重要。下期再来聊聊绝对路径。本期的内容到此结束，感谢观看，下期再见。

SCode中有一些快捷编辑HTML的方法，能大大提高工作效率，在这里分享给大家，权当抛砖引玉，欢迎有更多的朋友分享更多的技术知识。

1.输入html:5，然后按tab键或回车（Enter）键，效果如下：

注：输入感叹号"!"，然后按Tab键或者回车（Enter）键也可以生成html骨架。

2.输入link:css引入css样式文件，link:favicon引入网站logo，输入script:src引入js

3.输入标签名自动补齐

直接输入标签名后回车

4.使用"#“输入id，”.“输入class，”[]"输入属性

<!-- 输入div#main回车 -->
<div id="main"></div>
<!-- 输入div.content回车 -->
<div class="content"></div>
<!-- 输入div#main.content回车 -->
<div id="main" class="content"></div>
<!-- img[src=1.jpg][alt=pic1] -->
<img src="1.jpg" alt="pic1">

5.使用">“输入嵌套标签，”+" 输入并列的兄弟标签，"^"上级元素

<!-- 输入div#parent>div#child回车 -->
<div id="parent">
        <div id="child"></div>
</div>

<!-- 输入div#bro1+div#bro2回车 -->
<div id="bro1"></div>
<div id="bro2"></div>

<!-- 输入div#sup>div#child+div#bro^div#sub回车 -->
<div id="sup">
  <div id="child"></div>
<div id="bro"></div>
</div>
<div id="sub"></div>

6.使用{}输入标签中的文本

<!-- div#main{input sth here} -->
<div id="main">input sth here</div>

7.使用"()"对标签分组及使用"*"生成多个相同的标签

<!-- (div#list1>ul>li*2)+(div#list2>ul>li*3) -->
<div id="list1">
  <ul>
  	<li></li>
		<li></li>
	</ul>
</div>
<div id="list2">
  <ul>
  	<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

8.使用自增符号$

<!-- $ 自增符号 -->
<!-- ul>li*3>img[src=./imgs/$.jpg][alt=img$] -->
<ul>
  <li><img src="./imgs/1.jpg" alt="img1"></li>
	<li><img src="./imgs/2.jpg" alt="img2"></li>
	<li><img src="./imgs/3.jpg" alt="img3"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$.jpg][alt=img$$] -->
<ul>
  <li><img src="./imgs/01.jpg" alt="img01"></li>
	<li><img src="./imgs/02.jpg" alt="img02"></li>
	<li><img src="./imgs/03.jpg" alt="img 03"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$$.jpg][alt=img$$$] -->
<ul>
  <li><img src="./imgs/001.jpg" alt="img001"></li>
	<li><img src="./imgs/002.jpg" alt="img002"></li>
	<li><img src="./imgs/003.jpg" alt="img003"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt=img$$@4] -->
<ul>
  <li><img src="./imgs/04.jpg" alt="img04"></li>
	<li><img src="./imgs/05.jpg" alt="img05"></li>
	<li><img src="./imgs/06.jpg" alt="img06"></li>
</ul>

依此类推……

以上这些快捷操作是因为VS Code自带有Emmet插件。

Emmet插件非常强大，还有很多用法，大家还知道哪些呢，期待大家的分享。

输入URL到页面加载的过程涉及多个步骤，包括**DNS解析、TCP连接、发送HTTP请求、服务器处理请求、浏览器解析渲染页面以及断开连接**。具体如下：

1. **DNS解析**：当你在浏览器中输入一个URL时，浏览器首先需要将域名转换为IP地址。这个过程称为DNS解析。DNS服务器负责将人类可读的域名（如www.example.com）转换为机器可读的IP地址。

2. **TCP连接**：一旦浏览器获得了目标服务器的IP地址，它就会尝试与服务器建立TCP连接。这个过程通常被称为TCP三次握手，它确保了数据的可靠传输。

3. **发送HTTP请求**：TCP连接建立后，浏览器会向服务器发送一个HTTP请求，请求中包含了它想要获取的资源（如HTML文件、图片、CSS或JavaScript文件等）。

4. **服务器处理请求**：服务器接收到请求后，会根据请求的内容进行处理。这可能涉及到查询数据库、执行服务器端脚本等操作。处理完成后，服务器会将请求的资源作为一个HTTP响应返回给浏览器。

5. **浏览器解析渲染页面**：浏览器接收到服务器返回的数据后，会开始解析HTML文档，并根据HTML、CSS和JavaScript指令渲染页面。这个过程涉及到构建DOM树、计算样式、布局以及绘制页面内容等子步骤。

6. **断开连接**：一旦页面加载完成，浏览器和服务器之间的TCP连接通常会被关闭。这个过程称为TCP四次挥手，它标志着数据传输的结束。