元素型別劃分 替換元素 非替換元素

2021-10-04 12:43:55 字數 2044 閱讀 6666

根據元素的顯示(能不能在同一行)型別劃分

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的方式不一樣。什麼是替換元素與非替換元素 替換元素 替換元素是瀏覽器根據其標籤的元素與屬性來判斷顯示具體的內容。比如 ...