今天筆記網頁相對/絕對路徑&語意化標籤。

Tsung-Yu

·

Follow

Published in

Tom’s blog

·

3 min read

·

Apr 19, 2019

--

Share

剛接觸網頁程式語言時，務必要清楚相對/絕對路徑，不然很可能在實作時會出現找不到檔案路徑而無法呈現網頁的情況。之前就是因為使用本地端的根目錄，導致上傳至Github上的專案無法正常呈現，只好把檔案路徑都重改一次QQ。

目錄  相對路徑  絕對路徑  路徑結語  語意化標籤    什麼是語意化標籤?    主要六大架構    結構分布

相對路徑

是相對於現在目錄的路徑表示，換言之就是你現在這個檔案在哪裡，這個目錄的路徑起始點就在哪裡，所以每個檔案的相對路徑起始點都可能會不同。

範例:

page.html => 同層目錄中的 html 檔

./css/all.css => 同層目錄中的 css 資料夾，裡面的 css 檔

../img/logo.png => 上一層目錄中的 img 資料夾，裡面的圖檔

絕對路徑

是一個絕對位置，不隨著檔案位置的變換而改變他的路徑。

這個檔案在本機端或是網路上的絕對位置。

範例:

file:///c:/img/logo.png => 電腦C槽下的一張圖片

https://www.yahoo.com.tw/img/logo.png => 一個網址下的圖片

/img/logo.png => 根目錄下的一張圖片

路徑常見開頭

1. . ：同層，也可不寫，代表目前所在目錄，以當下檔案目錄為起始點。
2. ..：上一層，若目前已經是根目錄則依然為目前所在目錄。
3. / ：在各個目錄名稱之間的分隔符號，若放置在路徑之前則代表根目錄。

結語

1. 絕對不要用自己的電腦路徑:

網頁還在自己的電腦裡面時，在顯示上暫時還不會有問題；但是如果要上傳到網路的空間的時候，就會出現抓不到檔案的狀況。因為網路空間的電腦配置跟我們自己個人電腦的配置一定不同。

2.如果是檔案路徑是一個網址的話就採絕對路徑，直接選整段網址。

3. 架設在Server上的網頁以及開發時的檔案用相對路徑:

因不知道未來將會把這個檔案放置於何處，故很容易發生在實際建置網頁的時候找不到檔案的情況，所以將要放在網頁裡面的物件（相片、音樂、影片等）以及網頁本身都放在同一個資料夾裡面。在這個資料夾中可另外開新的資料夾替這些檔案做分類，但是這些檔案都務必要放在同一個資料夾裡面。

     回目錄

語意化標籤

什麼是語意化標籤?

簡單來說就是較容易理解的標籤語言。

網站是由許多標籤所建立的文件架構。在HTML5中新增了語意化標籤(Semantic Elements)。

目的:

為了讓標籤(Tag)更具意義，以加強文件的結構化，讓搜尋引擎或是其他軟體工具，可以更清楚地了解網頁中每個區塊的設計目的，提升網頁的資訊交流，更便於分享、查詢。

好處

1. 快速抓到網頁架構和每個區塊的位置，助於理解該區塊的功能。
2. 有助於SEO(搜尋引擎優化)。
3. 語意標籤取代掉部分不具意義的HTML標籤。

HTML5的語意標籤六個最主要架構

其他語義化標籤

<main> 網頁的主要內容

<time> 日期時間

<mark> 如黃色螢光筆的方式畫出重點，強調一小塊內容

<details> 文章的細節

<figure> 圖像

<figcaption> 圖像標題

結構分布

範例(可視情況調整)

     回目錄