html07 塊狀元素和內聯元素(行內元素)

2021-07-23 12:29:46 字數 1630 閱讀 9576

一、含義

①塊狀元素:一般是其他元素的容器,可以容納內聯元素和塊狀元素,塊狀元素排斥其他元素與其同一行,width和height起作用,常見的有div和p;

②內聯元素:只能容納文字和其他內聯 元素,它允許其他元素和他位於同一行,width和height不起作用,常見的有a和span。

二、區別

獨佔一行

能設定寬高

豎直方向的margin,padding

水平方向的margin,padding

塊狀元素:是是

有,可以設定

有,可以設定

內聯元素:否否

不可以有,可以設定

三、常見的塊狀和內聯元素

塊狀元素

內聯元素

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 - 無序列表

li 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 - 下劃線

var - 定義變數 

四、相互轉化

轉化為塊狀元素:display:block;  

轉化為內聯元素:display:inline;

一般導航欄會把塊級元素轉換為內聯元素,類似的還有製作水平選單。

HTML 塊狀元素 內聯元素

塊狀元素 內聯元素 address 位址 blockquote 塊引用 center 居中對齊 dir 目錄列表 div 常用塊級容易,也是css layout的主要標籤 dl 定義列表 fieldset form控制組 form 互動表單 h1 大標題 h2 副標題 h3 3級標題 h4 4級標題...

行內元素 塊狀元素 內聯塊狀元素

行內元素 div,h1 h6,p,pre,ul,ol,li,form,table等 常見的行內元素 無法自動換行,無法設定寬高 有 a,img,span,i 斜體 em 強調 sub 下標 sup 上標 label等。常見的內聯塊狀元素 擁有內在尺寸,可設定高寬,不會自動換行 有 button,in...

html中的塊狀元素和內聯元素

大多數 html 元素被定義為塊級元素或內聯元素。塊級元素在瀏覽器顯示時,通常會以新行來開始 和結束 可以設定width和height,可以設定margin和padding。常見的塊狀元素 h1 h6 p div table form ul ol dl dt blockquote address c...