首頁  >  文章  >  web前端  >  HTML中Div、span、label標籤的區別

HTML中Div、span、label標籤的區別

巴扎黑
巴扎黑原創
2017-06-27 11:38:213049瀏覽

p與span

大家在初學p+css佈局時,有很多困惑,在p與span的使用過程沒覺得有一定的」章法」,覺得兩個差別不大,在w3c的關於p和span的定義:p作為分割文檔結構自然使它最官方的語義,但是這樣的官方語義太讓人迷惑,大的結構還
好,但小的地方到底是用p還是用span仍然讓人迷惑。其實恰恰是《Microsoft MSDN Library》
裡面的定義讓人豁然開朗。

p:指定渲染HTML的容器

span:指定內嵌文字容器

#通俗地講就是如果裡面還有其他標籤的時候就用p ,如果裡面只有文字就應該用span

p是一個區塊級元素,用來為HTML文檔內大塊的內容提供結構和背景

span是行內元素,在行內定義一個區域(也就是一行內可以被劃分好幾個區域)

p標籤中可以鑲嵌span標籤,(p可以看做是一個大容器,span是一個小容器,大容器當然可以放下一個小容器啦)


span與label

由於有了以上關於span的說法,那麼我們就可以對文字進行span的容器操作了,可以定義css樣式什麼的,但是label好像也可以?但是兩者差異有時什麼呢?

label標籤主要用於綁定一個表單元素, 當點擊label標籤的時候, 被綁定的表單元素就會獲得輸入焦點

span則是對普通的文字的一種容器。

範例:



Did you visited my blog

##

#

(Press the text "Yes" or "No" not the radio)< /span>


#


##


運行結果:


##有一個問題是:

accesskey這個屬性不是設定快速鍵的麼?但按鍵1和alt+1都沒有反應,不知道什麼狀況,很是鬱悶,希望高手可以給以解答label標籤accesskey的用法。



#附:label標籤的具體用法:

label標記為標註標記,該標記支援與其他使用者互動式控制項進行綁定,並取代被綁定控制項觸發對應的事件,綁定的方法是:將for屬性值指定為目的控制項(綁定控制項)的ID。一般情況下,在使用單選框和複選框時用label綁定比較常見。
Label中兩個屬性非常有用,一個是for,一個就是accesskey
For屬性:
功能:表示Label標籤要綁定的HTML元素,你點選這個標籤的時候,所綁定的元素將會取得焦點
用法:


Accesskey屬性:
功能:表示存取label標籤所綁定的元素的熱鍵,當您按下熱鍵,所綁定的元素將取得焦點。
用法:
     
限制:accessKey屬性所設定的快速鍵無法與瀏覽器的快速鍵衝突,否則將優先級或瀏覽器的快捷鍵


註解:
要將LABEL 綁定到其它的控件,請將 LABEL 元素的FOR 屬性設定為與該控件的ID 相同。將 LABEL 綁定到控制項的 NAME 屬性毫無用處。但是,要提交表單,你必須為 LABEL 元素所綁定到的控制項指定 NAME。 


有兩種方法為所指定的快速鍵新增下劃線。 LABEL 元素的 rich text 支援可以在 ACCESSKEY 屬性所指定的快速鍵字元兩側加上 U 元素。如果你更願意使用樣式表(CSS)來套用樣式,可以將該字元包含在 SPAN 中,並設定樣式為text-decoration: underline」


如果使用者點選LABEL,則會先觸發LABEL 上的onclick 事件,然後觸發由htmlFor 屬性所指定的控制項上的onclick 事件。按下LABEL 設定的快速鍵將設定焦點但不會觸發onclick 事件。上述版本的HTML 和腳本中可用。 ##

以上是HTML中Div、span、label標籤的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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