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 事件。