首頁 >web前端 >html教學 >span標籤的作用

span標籤的作用

藏色散人
藏色散人原創
2020-03-03 09:32:2010703瀏覽

span標籤的作用

span標籤的作用

#推薦:《html教學

定義和用法

45a2772a6b6107b401db3c9b82c049c2 標籤被用來組合文件中的行內元素。

提示與註解:

提示:請使用 45a2772a6b6107b401db3c9b82c049c2 來組合行內元素,以便透過樣式來格式化它們。

註解:span 沒有固定的格式表現。當對它套用樣式時,它才會產生視覺上的變化。

範例

<p><span>some text.</span>some other text.</p>

範例解釋

如果不對 span 應用樣式,那麼 span 元素中的文字與其他文字不會任何視覺上的差異。儘管如此,上例中的 span 元素仍然為 p 元素增加了額外的結構。

可以為 span 應用 id 或 class 屬性,這樣既可以增加適當的語意,又便於對 span 套用樣式。

可以對同一個 45a2772a6b6107b401db3c9b82c049c2 元素套用 class 或 id 屬性,但更常見的情況就是只套用其中一個。這兩者的主要差異是,class 用於元素組(類似的元素,或可以理解為某一類元素),而 id 用於標識單獨的唯一的元素。

提示:事實上,您也許已經注意到了,W3School 網站上有一些文字的樣式與其他文字是不同的。例如「提示」使用了粗體的橘紅色。雖然實現這種效果的方法非常多,但是我們的做法是:使用「提示」使用span 元素,然後對這個span 元素的父元素,即p 元素應用class,這樣就可以對這個類別的子元素span 應用相應的樣式了。

HTML:

<p class="tip"><span>提示:</span>... ... ...</p>

CSS:

p.tip span {
font-weight:bold;
color:#ff9955;
}

註:所有瀏覽器都支援 45a2772a6b6107b401db3c9b82c049c2 標籤。

以上是span標籤的作用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn