1. 程式人生 > >HTML/CSS: 淺談標籤及偽類選擇器

HTML/CSS: 淺談標籤及偽類選擇器

1.基礎知識

“超連結可以是一個字,一個詞,或者一組詞,也可以是一幅影象,您可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。” —HTML連結

而對於超文字,簡單的說便是通過一個特定的識別符號,定位到文字所在的地方,然後將其連結到本頁面中。詳細請參考:什麼是超文字

相對路徑:就是指由這個檔案所在的路徑引起的跟其它檔案(或資料夾)的路徑關係。簡單的說便是以當前檔案為參考點而繼續補充的路徑。例如:在apple資料夾中有index.html、image資料夾,image資料夾下有apple.gif。那麼,在index.html中apple.gif的相對路徑即為
image/apple.gif

而無需重複apple資料夾:/apple/image/apple.gif(絕對路徑)

絕對路徑:絕對路徑是指目錄下的絕對位置,直接到達目標位置。

URL: Uniform Resource Locator,統一資源定位符,是對可以從網際網路上得到的資源的位置和訪問方法的一種簡潔的表示,是網際網路上標準資源的地址。網際網路上的每個檔案都有一個唯一的URL,它包含的資訊指出檔案的位置以及瀏覽器應該怎麼處理它。URL主要包含三部分:協議域名路徑.

在HTML中,<a>標籤可以實現超連結,它的語法非常簡單(不加屬性):

<a href="url">Link text
</a>

href的鍵值可以是相對路徑,可以是絕對路徑,也可以是URL。

相對路徑與絕對路徑的區別由上文的定義便可輕易區分開來,顯然是選擇相對路徑。也許你會有疑惑:伺服器一般是通過絕對路徑來獲取相應文件,那麼為什麼相對路徑也能實現這一目標呢?原因很簡單,這是瀏覽器的功勞—瀏覽器在後臺會根據相對路徑和所單擊頁面的路徑建立一個絕對路徑。

搞明白了相對路徑與絕對路線,又有一個問題出現了:是採取URL路徑呢還是使用相對路徑方便呢?

規則:在web中,相對路徑只用來連結同一網站內的頁面,而URL通常用來連結其它網站。

因為,如果全部是URL,會有以下問題:
(1)URL很長,不容易編輯,而且也會影響HTML的可讀性;
(2)當以URL的形式連結A網站時,如果改變了A網站的地址,一旦有多處該連結,那麼需要改動的地方就有很多,大大增加了工作量。但是如果使用的是相對路徑,那麼有些情況下對原始碼的影響幾乎為0.

接下來談談<a>標籤的另一個屬性:target
使用target屬性可以實現在新視窗開啟該連結:

<a href="url" target="_blank">

target的鍵值不一定是“_blank”,也可以是其他的內容。例如設定的鍵值是“page1”,那麼所有設定target鍵值為“page1”的超連結都會在同一個視窗開啟。

2.應用

瞭解完基礎知識,我們來了解它的應用。在此處我主要是想闡述“把圖片作為連結”的兩種實現方法:

方法一:巢狀標籤

<a href="url"><img src="xxx.gif" /></a>

方法二:設定背景(css)

a{
    display:block; // 將<a>標籤變成塊狀元素,這樣設定才能顯示完整背景
    width:100px; // 寬度自定義
    height:100px; //高度自定義
    background-image: url("xxx.gif");
}

3.偽類選擇器

什麼是偽類?偽類就是與類一樣能夠定義樣式,但卻不是真正意義上的類。
不是真正意義上的類?也就是說你可以在css中定義它的樣式,就像定義類一樣,但是你在HTML中不能找到該偽類的蹤影。
HTML中沒有偽類的蹤影,那它是如何實現樣式的呢?瀏覽器會在後臺向這些偽類增加和刪除元素。

對於<a>元素,我們可以用“多重人格”來形容它。對於該標籤,它一共有五種狀態:link, :visited, :hover, :focus, :active.

“:link”可以用於宣告未訪問狀態連結的樣式;
“:visited”可以用於宣告已經訪問連結的樣式;
“:hover”可以用於宣告滑鼠懸停在連結上的樣式;
“:focus”可以用於宣告瀏覽器焦點懸停在連結上的樣式(通過鍵盤選擇連結);
“:active”可以用於宣告瀏覽器點選連結的樣式。

注意:冒號前後不要出現空格。

以上內容皆為本人觀點,歡迎大家提出批評和指導,我們一起探討!