相對路徑
是相對於現在目錄的路徑表示,換言之就是你現在這個檔案在哪裡,這個目錄的路徑起始點就在哪裡,所以每個檔案的相對路徑起始點都可能會不同。
範例:
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 => 根目錄下的一張圖片
路徑常見開頭
.
:同層,也可不寫,代表目前所在目錄,以當下檔案目錄為起始點。..
:上一層,若目前已經是根目錄則依然為目前所在目錄。/
:在各個目錄名稱之間的分隔符號,若放置在路徑之前則代表根目錄。
結語
- 絕對不要用自己的電腦路徑:
網頁還在自己的電腦裡面時,在顯示上暫時還不會有問題;但是如果要上傳到網路的空間的時候,就會出現抓不到檔案的狀況。因為網路空間的電腦配置跟我們自己個人電腦的配置一定不同。
2.如果是檔案路徑是一個網址的話就採絕對路徑,直接選整段網址。
3. 架設在Server上的網頁以及開發時的檔案用相對路徑:
因不知道未來將會把這個檔案放置於何處,故很容易發生在實際建置網頁的時候找不到檔案的情況,所以將要放在網頁裡面的物件(相片、音樂、影片等)以及網頁本身都放在同一個資料夾裡面。在這個資料夾中可另外開新的資料夾替這些檔案做分類,但是這些檔案都務必要放在同一個資料夾裡面。
回目錄
語意化標籤
什麼是語意化標籤?
簡單來說就是較容易理解的標籤語言。
網站是由許多標籤所建立的文件架構。在HTML5中新增了語意化標籤(Semantic Elements)。
目的:
為了讓標籤(Tag)更具意義,以加強文件的結構化,讓搜尋引擎或是其他軟體工具,可以更清楚地了解網頁中每個區塊的設計目的,提升網頁的資訊交流,更便於分享、查詢。
好處
- 快速抓到網頁架構和每個區塊的位置,助於理解該區塊的功能。
- 有助於SEO(搜尋引擎優化)。
- 語意標籤取代掉部分不具意義的HTML標籤。
HTML5的語意標籤六個最主要架構
其他語義化標籤
<main> 網頁的主要內容
<time> 日期時間
<mark> 如黃色螢光筆的方式畫出重點,強調一小塊內容
<details> 文章的細節
<figure> 圖像
<figcaption> 圖像標題
結構分布
範例(可視情況調整)
回目錄