根據元素的顯示(能不能在同一行)型別劃分
1.1塊元素又名塊級元素(block element),
其特點是:
①總是在新行上開始;
②高度,行高以及外邊距和內邊距都可控制;
③寬度預設時,它佔他父元素寬度的100%,除非設定乙個寬度。
④它可以容納內聯元素和其他塊元素
1.2常用的塊元素
address - 位址
blockquote - 塊引用
center - 居中對齊塊
dir - 目錄列表
div - 常用塊級容器,也是css layout的主要標籤
dl - 定義列表
fieldset - form控制組
form - 互動表單
h1 - 大標題
h2 - 副標題
h3 - 3級標題
h4 - 4級標題
h5 - 5級標題
h6 - 6級標題
hr - 水平分隔線
isindex - input prompt
menu - 選單列表
noframes - frames可選內容,(對於不支援frame的瀏覽器顯示此區塊內容)
noscript - 可選指令碼內容(對於不支援script的瀏覽器顯示此內容)
ol - 排序表單
p - 段落
pre - 格式化文字
table - **
ul - 非排序列表(無序列表)
2.1內聯元素(inline element)
其特點是:
①和其他元素都在一行上;
②高,行高及外邊距和內邊距不可改變;
③寬度由他內部的文字或撐起來,不可改變
④內聯元素只能容納文字或者其他內聯元素
2.2常見的內聯元素
a - 錨點、鏈結
abbr - 縮寫
acronym - 首字
b - 粗體(不推薦)
bdo - bidi override
big - 大字型
br - 換行
cite - 引用
code - 計算機**(在引用原始碼的時候需要)
dfn - 定義字段
em - 強調
font - 字型設定(不推薦)
i - 斜體
img -
input - 輸入框
kbd - 定義鍵盤文字
label - **標籤
q - 短引用
s - 中劃線(不推薦)
samp - 定義範例計算機**
select - 專案選擇
small - 小字型文字
span - 常用內聯容器,定義文字內區塊
strike - 中劃線
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文字輸入框
tt - 電傳文字
u - 下劃線
根據元素的內容(是否瀏覽器會替換掉元素)型別劃分
元素本身沒有實際內容,瀏覽器根據元素的型別和屬性來決定顯示具體的內容。如
img標籤,裡面沒有實體,看到的只是它的src,瀏覽器根據src來顯示;
input標籤,瀏覽器根據input的type值來選擇顯示input是輸入框還是選擇框還是其他型別。
常見的替換元素有img, input,iframe,video,audio,embed,canvas, object等
和替換元素相反,元素本身是有實際內容的,瀏覽器會直接將其內容顯示出來,而不需要根據元素的型別和屬性來判斷到底顯示什麼內容。如
p標籤,瀏覽器會直接顯示p標籤裡的內容。
常見的非替換元素有div,p,pre,h1-h6,ul,a,form,table,span,label,strong等
1.跟其他行內級元素在同一行顯示
2.可以設定寬高
常見的行內級替換元素有img,input,iframe,video,audio,object,canvas,embed等
非替換元素和替換元素
學習資料 元素是文件結構的基礎,在css裡面,每個元素生成了包含內容的框 box 大家都叫 盒子 但是不同的元素顯示方式是不同的,有佔據一整行的,有水平乙個挨著乙個的。比如 div 與span的方式不一樣。什麼是替換元素與非替換元素 替換元素 替換元素是瀏覽器根據其標籤的元素與屬性來判斷顯示具體的內...
CSS 替換元素和非替換元素 行內非替換元素
html元素也可以分為替換元素和非替換元素 1.替換元素 替換元素是由瀏覽器根據表示的元素和屬性決定顯示的內容。例如 如果text換成其他的屬性值,input會顯示不同的樣子,這也是有input和type屬性值決定顯示內容的。像2.非替換元素 html中大多數都是非替換元素,瀏覽器直接顯示標籤元素的...
CSS 替換元素和非替換元素
元素是文件結構的基礎,在css裡面,每個元素生成了包含內容的框 box 大家都叫 盒子 但是不同的元素顯示方式是不同的,有佔據一整行的,有水平乙個挨著乙個的。比如 div 與span的方式不一樣。什麼是替換元素與非替換元素 替換元素 替換元素是瀏覽器根據其標籤的元素與屬性來判斷顯示具體的內容。比如 ...