1. 塊級元素可以巢狀內聯元素及某些替換元素
2. 內聯元素只能包含內聯元素
html各種標籤/元素:要麼是block(塊元素),要麼是inline(內聯元素):
block元素的特點:
inline元素的特點:
通常作為其它元素的容器,它可以容納內聯元素和其它塊元素。
塊元素(block element) html標籤分類明細
一般都是基於語義級(semantic)的基本元素,只能容納文字或者其它內聯元素。
內聯元素(inline element) html標籤分類明細
是基於以上兩者隨環境而變化的,它的基本概念就是根據上下文關係確定該元素是塊元素還是內聯元素。一旦確定了它的類別,它就遵循塊元素或者內聯元素的規則限制
可變元素 html標籤分類明細
button - 按鈕
del - 刪除文字
iframe - inline frame
ins - 插入的文字
map - 區塊(map)
object - object物件
script - 客戶端指令碼
元素是文件結構的基礎,在css中,每個元素生成了乙個包含了元素內容的框(box,也譯為「盒子」)。但是不同的元素顯示的方式會有所不同,例如和就不同,而和也不一樣。
1. 替換和不可替換元素
從元素本身的特點來講,可以分為替換和不可替換元素。
a) 替換元素
替換元素就是瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容。
例如瀏覽器會根據
(x)html中的
瀏覽器會根據元素的標籤型別和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。
b) 不可替換元素
(x)html 的大多數元素是不可替換元素,即其內容直接表現給使用者端(例如瀏覽器)。例如:
段落的內容
段落是乙個不可替換元素,文字「段落的內容」全被顯示。
2. 顯示元素
除了可替換元素和不可替換元素的分類方式外,css 2.1中元素還有另外的分類方式:塊級元素(block-level)和行內元素(inline-level,也譯作「內聯」元素)。
a) 塊級元素
在視覺上被格式化為塊的元素,最明顯的特徵就是它預設在橫向充滿其父元素的內容區域,而且在其左右兩邊沒有其他元素,即塊級元素預設是獨佔一行的。
典型的塊級元素有:、、到,等等。
通過css設定了浮動(float屬性,可向左浮動或向右浮動)以及設定顯示(display)屬性為「block」或「list-item」的元素都是塊級元素。
但是浮動元素比較特殊,由於浮動,其旁邊可能會有其他元素的存在。而「list-item」(列表項),會在其前面生成圓點符號,或者數字序號。
b) 行內元素
行內元素不形成新內容塊,即在其左右可以有其他元素,例如、、等,都是典型的行內級元素。
display屬性等於「inline」的元素都是行內元素。幾乎所有的可替換元素都是行內元素,例如
不過元素的型別也不是固定的,通過設定css 的display屬性,可以使行內元素變為塊級元素,也可以讓塊級元素變為行內元素。
display:inline-block將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內,允許空格。
inline-block的元素特點:
將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內,允許空格。(準確地說,應用此特性的元素呈現為內聯物件,周圍元素保持在同一行,但可以設定寬度和高度地塊元素的屬性)
並不是所有瀏覽器都支援此屬性,目前支援的瀏覽器有:opera、safari在ie中對內聯元素使用display:inline-block,ie是不識別的,但使用display:inline-block在ie下會觸發layout,從而使內聯元素擁有了display:inline-block屬性的表症。從上面的這個分析,也不難理解為什麼ie下,對塊元素設定display:inline-block屬性無法實現inline-block的效果。這時塊元素僅僅是被display:inline-block觸發了layout,而它本就是行布局,所以觸發後,塊元素依然還是行布局,而不會如opera中塊元素呈遞為內聯物件。
HTML元素型別
html元素分為三類 塊元素,內聯元素 行內元素 可變元素 注 html元素也可分為 塊元素,內聯元素,內聯塊狀元素 1.塊元素 常見塊元素 div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,h1,h2,h3,h4,h5,h6,fieldset 塊狀元素特點 a 塊元...
HTML元素型別
大多數 html 元素被定義為塊級元素或內聯元素 行內元素 塊級元素 div p form,ul,li ol,dl,form,address,fieldset,hr,menu,table 內聯元素 span,strong,em,br,img input,label,select,textarea,c...
根據html元素的型別設定元素的值
獲取input select checkbox radio的值 param id param nodeattribute param str valuestr或valuenum 不填預設valuestr function getfromhtml id,nodeattribute,str else e...