首頁 > web前端 > html教學 > html span標籤是什麼意思? span標籤的作用詳解

html span標籤是什麼意思? span標籤的作用詳解

寻∝梦
發布: 2018-08-22 13:58:29
原創
58592 人瀏覽過

html span標籤是什麼意思?這篇文章將為大家介紹關於span標籤的作用以及html span標籤的使用方法和html span標籤的屬性,以下就讓我們一起來看看這篇文章的詳細內容吧

# html span標籤的定義與功能:

span標籤是超文本標記語言(HTML)的行內標籤,被用來組合文件中的行內元素。 span沒有固定的格式表現。當對它套用樣式時,它會產生視覺上的變化。

標籤本身並不會產生任何視覺效果。

它只是提供一個途徑,讓你可以引用文件中的一部分。

這樣,你便可以引用部分文本,並對它們設定樣式,或用JavaScript對它們進行處理。

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

這有例子:

<p><span>some text.</span>some other text.</p>
登入後複製

例子解釋:

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

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

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

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

HTML:
<p><span>提示:</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
登入後複製

html span標籤的使用方法:

在行內定義一個區域,也就是一行內可以被分割成好幾個區域,從而實現某種特定效果。 本身沒有任何屬性。

在CSS定義中屬於一個行內元素,而

是區塊級元素,我們可能通俗地理解為
為大容器,大容器當然可以放一個小容器了,就是小容器。

這還有例子:

<html><body><script>
function setspan{if( id==1){a.innerText="设置文字"};
if( id==2){a.innerHTML="<font color=red size=7>设置代码</font>"};}
</script><span id=a></span>
<a href=javascript:setspan(1)>设置span的文字</a></br>
<a href=javascript:setspan(2)>设置span的代码</a></br>
</body></html>
登入後複製

如:

<span id=&#39;span_slide_container&#39; style=&#39;display:block; overflow-y: auto; overflow-x: auto; height: 500px;&#39;>
登入後複製

這裡display:block; 一定要加上,否則,span不起作用

如果要定義span標籤居中,必須先讓span成塊級元素顯示,也就是說,要先定義span的display:block;屬性,然後再給span添加邊距屬性margin:0px auto;這樣就能達到你想要的效果了。 span的屬性很多,幾乎所有標籤的屬性都可以定義在span上,只是很多屬性都必須在span成塊級元素時才起作用,span本身只是為了補充a標籤的作用,是一個輔助標籤,一般只能辨識對文字的樣式的你故意,所以如果想給span標籤定義更多的其他樣式屬性,你就必須先給span加上塊級屬性,也就說添加display:block;屬性,這樣以後你的樣式就可以起作用了

html span標籤的核心屬性:

#DTD欄表示哪種文件類型支援此屬性。 S=Strict,T=Transitional,F=Frameset。

標籤支援以下核心屬性:

html span標籤是什麼意思? span標籤的作用詳解

#在後面寫個,可以隨意加入樣式。

style只是span的屬性,還有這些,其中滑鼠動作屬性只列舉了onclick,還有很多其他滑鼠動作屬性。

文字內容

提示與註解:

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

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

以上就是關於html span標籤的意思和作用以及使用方法詳解了,如果還有問題歡迎在下面提問。

【相關推薦】

html font標籤怎麼設定字體樣式?利用CSS控製文字大小的方法

html em標籤的作用是什麼? 標籤的差異

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板