資訊專欄INFORMATION COLUMN
摘要：最近在看前端開發最佳實踐，看到有一個小節的標題是過時的塊狀元素和行內元素，之前聽到的關于標簽的嵌套規范一直在講，甚至面試的時候還被問到，但是自己在之前的工作中，的的確確用標簽包過塊元素，為了能有一個更好的用戶體驗，模擬的一個按鈕。
最近在看《web前端開發最佳實踐》，看到有一個小節的標題是 過時的塊狀元素和行內元素 ，之前聽到的關于HTML標簽的嵌套規范一直在講，甚至面試的時候還被問到，但是自己在之前的工作中，的的確確用標簽包過塊元素，為了能有一個更好的用戶體驗，模擬的一個按鈕。那個時候就有困惑，不是行內元素不能嵌套塊元素么？直到看到這段才大概了解了一些，因為我用的文檔申明是HTML5的，所以解析結構會按照HTML5的標準。
這是我之前匯總的一些標簽嵌套規范：
ul,li/ol,li/dl,dt,dd擁有父子級關系的標簽；ul、ol下都只能跟li，dl下只能跟dt.dd。
p,dt,h標簽里面不能嵌套塊元素；
a標簽不能嵌套a；
行內元素不能嵌套塊元素；
看一下下面這段結構，據說是來自facebook的代碼：
很明顯，不符合上面嵌套規則最后一條，因為它在內聯元素元素中嵌套了塊元素元素 頁面元素的兩個基本類型：行內元素和塊狀元素，在HTML5新規范中，已經淡化了元素的這兩種分類，取而代之的方案是更具有語義的HTML元素的分類方式。 因為在構建HTML的過程中，首先要考慮的是語義，判斷使用的元素合適與否，就是要判斷元素對應的標簽是否符合當前元素所表達的語義，而不是元素的樣式是不是更符合當前的UI設計。 為了消除塊元素和行內元素這兩個概念引起的混淆（到底什么時候用行內元素，什么時候用塊元素，其中元素又那么多，怎么分？），HTML5中的分類比HTML 4.01中的分類更具體，總共分為7類，每種元素并不限于某一類型，有可能某個元素屬于多個類型。
這個分類基本上包含了HTML 4.01中的塊狀元素和行內元素。
基本上等同于HTML 4.01中行內元素的范圍
嵌入式元素是引用或插入到文檔中其他資源的元素。
交互式元素是專門用于與用戶交互的元素。 希望大家有時間可以去看一下這篇《HTML標簽嵌套規則》，我也是參考了很多，而且在文章的最后總結中，驗證了我之前匯總的規則中的一處錯誤，即：在 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。 轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50836.html 摘要：提升視野的方式有很多，最重要的一點在于自己主動動腦思考，去想的越多，收獲也就會越多。相關文章鏈接我與前端因興趣起源
HTML5學堂（碼匠）：在自學WEB前端或者任何一種技術的過程中，視野都是極其重要的影響因素，視野決定著我們努力的方向，縱然我們多么努力，走錯了方向也是枉然。
視野的重要性 (我與前端系列-02)
1.書籍問題導致自學效率不高
通過一段時間的自學，已經清晰了解了HTML與...
Flow（流式元素）:
a， abbr， address， area（如果它是map元素的后裔）， article， aside， audio， b， bdi， bdo，
blockquote， br， button， canvas， cite， code， command， datalist， del， details， dfn， div，
dl，em， embed， fieldset， figure， footer， form， h1， h2， h3， h4， h5， h6， header， hgroup，
hr， i， iframe， img， input， ins， kbd， keygen， label， map， mark， math， menu， meter，nav，
noscript， object， ol， output， p， pre， progress， q， ruby， s， samp， script， section， select，
small， span， strong， style（如果該元素設置了scoped屬性）， sub， sup， svg， table，textarea， time，
u， ul， var， video， wbr， text
Heading（標題元素）:
h1， h2， h3， h4， h5， h6， hgroup
Sectioning（章節元素）:
article， aside， nav， section
Phrasing（段落元素）:
a（如果其只包含段落式元素）， abbr， area（如果它是map元素的后裔）， audio， b， bdi，
bdo， br， button， canvas， cite， code， command， datalist， del（如果其只包含段落式元素），
dfn， em， embed， i，iframe， img， input， ins（如果其只包含段落式元素）， kbd， keygen， label，
map（如果其只包含段落式元素）， mark， math， meter， noscript， object， output， progress， q，
ruby， s， samp， script，select， small， span， strong， sub， sup， svg， textarea，
time， u， var， video， wbr， text
Embedded（嵌入元素）:
audio， canvas， embed， iframe， img， math， object， svg， video
Interactive（交互元素）:
a， audio（如果設置了controls屬性）， button， details， embed， iframe， img（如果設置了usemap屬性），
input（如果"type"屬性不為hidden狀態）， keygen， label， menu（如果"type"屬性為toolbar狀態），
object（如果設置了usemap屬性）， select， textarea， video（如果設置了controls屬性）
Metadata（元數據元素）:
base，command，link，meta，noscript，script，style，title
最后
~
元素內嵌入等元素所有瀏覽器可以解析正常。
相關文章
我與前端 | 視野的重要性
發表評論
0條評論
閱讀 2653·2023-04-25 15:22
閱讀 2823·2021-10-11 10:58
閱讀 1043·2021-08-30 09:48
閱讀 1850·2019-08-30 15:56
閱讀 1728·2019-08-30 15:53
閱讀 1088·2019-08-29 11:16
閱讀 1047·2019-08-23 18:34
閱讀 1637·2019-08-23 18:12
