嘍大家好，我是胖達。本期視頻來看看路徑相關的內容。我們知道在網頁中存在很多的圖片，如果把這些圖片和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四次揮手，它標志著數據傳輸的結束。