如何將屬性添加到HTML標記

HTML語言包含許多元素。 這些包括常用的網站組件,如段落,標題,鏈接和圖像。 還有一些HTML5引入的更新元素,包括標題,導航,頁腳等。 所有這些HTML元素都用於創建文檔的結構並賦予其意義。 為元素添加更多的意義,你可以給他們的屬性。

一個基本的HTML開始標籤以<字符開頭。 隨後是標籤名稱,最後,使用>字符完成標籤。 例如,開頭的段落標籤可以這樣寫:

要為HTML標籤添加一個屬性,首先在標籤名稱之後放置一個空格(在本例中為“p”)。 然後,您將添加您希望使用的屬性名稱,後跟一個等號。 最後,屬性值將被放置在引號中。 例如:

標籤可以有多個屬性。 你會用空格將每個屬性與其他屬性分開。

具有必需屬性的元素

如果您希望它們按預期工作,某些HTML元素實際上需要屬性。 圖像元素和鏈接元素就是這樣的兩個例子。

image元素需要“src”屬性。 該屬性告訴瀏覽器您想在該位置使用哪個圖像。 該屬性的值將是圖像的文件路徑。 例如:

您會注意到我為此元素添加了另一個屬性,即“alt”或替代文本屬性。 這在技術上不是圖像的必需屬性,但最好總是將此內容包含在可訪問性中。 alt屬性值中列出的文本是由於某些原因導致圖像無法加載時顯示的內容

另一個需要特定屬性的元素是錨點或鏈接標記。 這個元素必須包含“href”屬性,這個屬性代表“超文本引用”。這是一種奇怪的方式來表達“這個鏈接應該去哪裡”。就像圖像元素需要知道加載哪個圖像一樣,鏈接標記必須知道它應該在哪裡。下面是鏈接標籤的外觀:

該鏈接現在將使用戶訪問屬性值中指定的網站。 在這種情況下,它是主頁。

作為CSS鉤子的屬性

屬性的另一個用途是它們被用作CSS樣式的“鉤子”。 由於Web標準規定應該將頁面的結構(HTML)與其樣式(CSS)分開,因此可以使用CSS中的這些屬性鉤子來指定結構化頁面在Web瀏覽器中的顯示方式。 例如,你可以在你的HTML文檔中有這樣的標記。

如果您希望該部門的背景顏色為黑色(#000),字體大小為1.5em,則可以將其添加到您的CSS中:

.featured {background-color:#000; font-size:1.5em;}

“精選”類屬性充當了一個鉤子,我們在CSS中使用它來將樣式應用到該區域。 如果我們想要的話,我們也可以在這裡使用ID屬性。 類和ID都是通用屬性,這意味著它們可以添加到任何元素。 它們也可以用特定的CSS樣式來定位,以確定該元素的視覺外觀。

關於Javascript

最後,在某些HTML元素上使用屬性也可以在Javascript中使用。 如果你有一個腳本正在尋找一個具有特定ID屬性的元素,那麼這又是HTML語言常見部分的另一個用法。