HTML中div span 與label


1. 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是一個小容器,大容器當然可以放下一個小容器啦)

 

2.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通過for屬性綁定了單選按鈕yes和no,那么效果就是如果點擊label上的文字時,那么所綁定的單選按鈕就會被選中。

 

label注意

  1.accessKey屬性所設置的快捷鍵不能與瀏覽器的快捷鍵沖突,否則將優先級或瀏覽器的快捷鍵。

  2.如果用戶單擊 LABEL,則會先觸發 LABEL 上的 onclick 事件,然后觸發由 htmlFor 屬性所指定的控件上的 onclick 事件。按下 LABEL 設定的快捷鍵將設置焦點但並不觸發 onclick 事件。


 


免責聲明!

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



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