HTML 行內元素 塊級元素 行內塊元素的特點

2021-10-23 17:17:59 字數 2058 閱讀 8886

html標籤按照元素種類可以分為行內元素(display: inline);塊級元素(display:block)和行內塊級元素(display:inline-block)三種。

了解元素種類有利於,我們進行css布局及屬性的使用。

相鄰元素可以在一行顯示直到一行排不下才進行換行。

不可設定寬高、對齊等屬性,寬度隨內容變化。

padding和margin的設定中,水平方向(padding-left...)有效果,垂直方向無效果。

行內元素只能容納文字或則其他行內元素。

常見行內元素:

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 - 定義變數

佔一行或多行。

可設定寬高。

排列從上至下。

可設定padding和margin。

寬度沒設定,預設100%。

可以容納內聯元素和其他塊元素。

常見塊級元素:

address - 位址

blockquote - 塊引用

center - 舉中對齊塊

dir - 目錄列表

div - 常用塊級容易,也是css layout的主要標籤

dl - 定義列表

fieldset - form控制組

form - 互動表單

h1 -h6 標題

hr - 水平分隔線

isindex - input prompt

menu - 選單列表

noframes - frames可選內容,(對於不支援frame的瀏覽器顯示此區塊內容

noscript - 可選指令碼內容(對於不支援script的瀏覽器顯示此內容)

ol - 排序表單

p - 段落

pre - 格式化文字

table - **

ul - 非排序列表

caption - 定義**標題

dd - 定義列表中定義條目

dt - 定義列表中的專案

legend - 為 元素定義標題

li - 定義列表專案

tbody - 標籤**主體(正文)

td - **中的標準單元格

tfoot - 定義**的頁尾(腳注或表注)

th - 定義表頭單元格

thead - 標籤定義**的表頭

tr - 定義**中的行  

不自動換行。

可設定寬高。

排列從左到右。

display:inline;轉換為行內元素

display:block;轉換為塊狀元素

display:inline-block;轉換為行內塊狀元素

1.塊級元素 block 如 div h1 p ul li等,會換行,想在同一行顯示,需浮動或者display: inline

2.行級元素 inline 如 a span b 多個可以併排顯示,預設設定寬度是不起作用,需設定 display: inline-block或者block才行。

HTML行內元素 塊級元素 行內塊級

html標籤按照元素種類可以分為行內元素 display inline 塊級元素 display block 和行內塊級元素 display inline block 三種。了解元素種類有利於,我們進行css布局及屬性的使用。也叫內聯元素或內嵌元素,只能容納文字或其他內聯元素。預設特點 示例 關關雎...

塊級元素,行內元素,行內塊元素

內聯元素 行內元素 內聯元素 inline element 行內塊元素 a 錨點 abbr 縮寫 acronym 首字 b 粗體 不推薦 bdo bidi override big 大字型 br 換行 cite 引用 code 計算機 在引用原始碼的時候需要 dfn 定義字段 em 強調 font ...

塊級元素,行內元素,行內塊元素

獨佔一行,對寬高的屬性值生效 如果不給寬度,預設為瀏覽器的寬度即100 塊標籤 p div ul ol li dl dt dd h1 h6 form 可以多個標籤存在一行,對寬高的屬性值不生效,靠內容撐開 行內標籤 a span em strong b i u label br 結合行內和塊級元素的...