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

智應今天又遇到了一個技術難題,知道很多程序員都被同樣的問題困擾,于是智應在此將搜索到的答案告訴大家:

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

div:指定渲染HTML的容器

span:指定內嵌文本容器

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

div是一個塊級元素,用來為HTML文檔內大塊的內容提供結構和背景 span是行內元素,在行內定義一個區域(也就是一行內可以被劃分好幾個區域)

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

span與label

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

label標簽主要用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點 span則是對普通的文本的一種容器。

例子:

Did you visited my blog

Yes

NO

(Press the text "Yes" or "No" not the radio)

Your Name:

Did you visited my blogYesNO(Press the text "Yes" or "No" not the radio)

Your Name:

作者: yeiqing000

鏈接:http://www.imooc.com/article/11271

來源:慕課網

運行結果:

有一個問題是:

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

標簽不允許嵌套。

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

此元素是內嵌元素。

此元素需要關閉標簽

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,837評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,196評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,688評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,654評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,456評論 6 406
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,955評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,044評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,195評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,725評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,608評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,802評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,318評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,048評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,422評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,673評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,424評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,762評論 2 372

推薦閱讀更多精彩內容

  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,285評論 1 41
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,781評論 18 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,774評論 1 92
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,605評論 25 708
  • 夢中痛醒 你曾說你屬于我 永不褪色 可你現在 卻讓我痛得 不想活 西醫說 要切除 醫療技術已經發達 沒有心也一樣能...
    虛龍寨主閱讀 145評論 2 1