HTML 元素分類

2021-08-20 03:00:59 字數 2185 閱讀 9804

一般  html  元素分為兩種,即塊級元素和行內元素。

每個塊級元素預設佔一行高度,一行內新增乙個塊級元素後一般無法新增其他元素(float浮動後除外)。兩個塊級元素連續編輯時,會在頁面自動換行顯示。塊級元素一般可巢狀塊級元素或行內元素;

塊級元素一般作為容器出現,用來組織結構,但並不全是如此。有些塊級元素,如只能包含塊級元素。其他的塊級元素則可以包含行級元素。如。也有一些則既可以包含塊級,也可以包含行級元素。

div 是最常用的塊級元素,元素樣式的  display、block都是塊級元素。它們總是以乙個塊的形式表現出來,並且跟同級的兄弟塊依次豎直排列,左右撐滿。

也叫內聯元素、內嵌元素等;行內元素一般都是基於語義級(semantic)的基本元素,只能容納文字或其他內聯元素,常見內聯元素 「a」。例如文字這類元素,各個字母之間橫向排列,到最右端自動折行。

對行內元素,需要注意如下 

設定寬度width 無效。

設定高度height 無效,可以通過line-height來設定。

設定margin 只有左右margin有效,上下無效。

設定padding 只有左右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 – 無序列表

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

hr -  水平線

區別一:

塊級:塊級元素會獨佔一行,預設情況下寬度自動填滿其父元素寬度

行內:行內元素不會獨佔一行,相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。 

區別二:

塊級:塊級元素可以設定寬高

行內:行內元素不可以設定寬高 

區別三:

塊級:塊級元素可以設定margin,padding

行內:行內元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。 

區別四:

塊級:display:block;

行內:display:inline;

可以通過修改display屬性來切換塊級元素和行內元素

HTML元素分類

面試的時候被問了乙個問題,塊級元素和內聯元素的區別。我想這不是很簡單嗎,就說塊級元素是佔據一整行而內聯元素是乙個乙個緊挨著 用通俗的語言說的,感覺不太專業 然後面試官又問我內聯元素可以使用padding和margin嗎,我就懵了。頓時覺得自己學的東西很不紮實,深入一點的都不是很了解。就表現形式來看 ...

HTML元素分類

html元素分類 根元素標籤 id屬性 以id形式選取元素 class屬性 以class形式選取元素 title屬性 滑鼠懸停的時候顯示的描述文字 style屬性 行內樣式 contentedtable屬性 可編輯的內容區域,一般用來製作富文字編輯器 data 臨時在標籤元素上儲存資料 hidden...

HTML元素分類

html元素分類 根元素標籤 id屬性 以id形式選取元素 class屬性 以class形式選取元素 title屬性 滑鼠懸停的時候顯示的描述文字 style屬性 行內樣式 contentedtable屬性 可編輯的內容區域,一般用來製作富文字編輯器 data 臨時在標籤元素上儲存資料 hidden...