html span標籤是什麼意思？ span標籤的作用詳解-html教學-PHP中文網

首頁

web前端

html教學

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

寻∝梦

Aug 22, 2018 pm 01:58 PM

html span

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標籤的作用詳解