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


div與span

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

div:指定渲染HTML的容器

span:指定內嵌文本容器

通俗地講就是如果里面還有其他標簽的時候就用div,如果里面只有文本就應該用span

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

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

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

 

span與label

 

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

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

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

例子:

<div id="divForm">
<div>
<span>Did you visited my blog</span>
<input type="radio" id="radYes" name="visitedblog" checked="checked"/>
<label for="radYes">Yes</label>
<input type="radio" id="radNo" name="visitedblog"/>
<span>
<label for="radNo">NO</label>
(Press the text "Yes" or "No" not the radio)</span>
</div>
<div>
<label accesskey="1" for="textName">Your Name:</label>
<input type="text" id="txtName" value="Press Alt+1"/>
</div>
</div>

運行結果:

 

有一個問題是:

accesskey這個屬性不是設置快捷鍵的么?可是按鍵1和alt+1都沒有反應,不知道什么情況,很是郁悶,希望高手可以給以解答label標簽accesskey的用法。

 

 

 

附:label標簽的具體用法:

label標記為標注標記,該標記支持與其他用戶交互式控件進行綁定,並代替被綁定控件觸發相應的事件,綁定的方法是:將for屬性值指定為目的控件(綁定控件)的ID。一般情況下,在使用單選框和復選框時用label綁定比較常見。
Label中兩個屬性非常有用,一個是for,一個就是accesskey
For屬性:
功能:表示Label標簽要綁定的HTML元素,你點擊這個標簽的時候,所綁定的元素將獲取焦點
用法:
<label for="inputBox">姓名</label>
<input id="inputBox" type="text">
Accesskey屬性:
功能:表示訪問label標簽所綁定的元素的熱鍵,當您按下熱鍵,所綁定的元素將獲取焦點。
用法:<label for="inputBox" accesskey="N">姓名</label>
     <input id="inputBox" type="text">
局限性: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 事件。 


標簽不允許嵌套。 


此元素在 Internet Explorer 4.0 及以上版本的 HTML 和腳本中可用。 


此元素是內嵌元素。 


此元素需要關閉標簽。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM