html行內元素和區塊內元素分別有哪些？ html行內元素和區塊內元素的特點介紹

html行內元素有哪些？ html塊內元素有哪些？本文介紹了哪些是行內元素，哪些是區塊級元素，他們的特徵和差異。

HTML行內元素（inline element）的特性：

行內元素也叫內聯元素或內嵌元素。行內元素和其他元素都在一行上，高度、行高、內邊距和外邊距都無法改變。寬度是它文字或圖片的寬度，也是不可改變的。行內元素只能容納文字或其他行內元素。

之前文章中講到的 a,img,br是行內元素。

區塊層級（block）元素的特性：

①總是在新行開始；

②高度，行高以及外邊距和內邊距都可控制；

③寬度缺省是它的容器的100%，除非設定一個寬度；

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

內聯（inline）元素的特徵：

①和其他元素都在一行上；

②高，行高及外邊距和內邊距離不可改變；

③寬度就是它的文字或圖片的寬度，不可改變；

④內聯元素只能容納文字或其他內聯元素。

關於行內元素和區塊狀元素的說明：

#根據CSS規範的規定，每一個網頁元素都有一個display屬性，用於確定該元素的類型，每個元素都有預設的display屬性值，例如div元素，它的預設display屬性值為“block”，成為“區塊級”元素(block-level)；而span元素的預設display屬性值為“inline”，稱為“行內”元素。 div這樣的區塊級元素，就會自動佔據一定矩形空間，可以透過設定高度、寬度、內外邊距等屬性，來調整的這個矩形的樣子；與之相反，像「span」「a」這樣的行內元素，則沒有自己的獨立空間，它是依附於其他區塊級元素存在的，因此，對行內元素設定高度、寬度、內外邊距等屬性，都是無效的。

行內、區塊狀元素差異：

   (1).區塊級元素會獨佔一行，其寬度會自動填滿其父元素寬度

#        行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裡，知道一行排不下，才會換行，其寬度隨元素的內容而變化

#   (2). 一般情況下，區塊級元素可以設定width, height屬性，行內元素設定width,  height無效

         (注意：區塊級元素即使設定了寬度，仍獨佔一行的)

   (3) .區塊級元素可以設定margin 和padding.  行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是垂直方向的padding-top,padding-bottom, margin-top,margin-bottom都不會產生邊距效果。 （水平方向有效，垂直方向無效）

行元素和區塊元素分別有哪些：

區塊元素(block element)

address - 位址

blockquote - 區塊引用

center - 舉中對齊區塊

dir - 目錄清單

#div - 常用區塊等級容易，也是css layout的主要標籤

dl - 定義清單

fieldset - form控制群組

form - 互動表單

h1 - 大標題

h2 - 副標題

h3 - 3級標題

#h4 - 4級標題

h5 - 5級標題

#h6 - 6級標題

hr - 水平分隔線

menu - 選單清單

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

noscript - 可選腳本內容（對於不支援script的瀏覽器顯示此內容）

#ol - 排序表單

p - 段落

##pre - 格式化文字

able - 表格

ul - 非排序清單

內聯元素(inline element)（行內元素）

#a - 錨點

abbr - 縮寫

acronym - 首字

b - 粗體(不推薦)

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

【相關推薦】

HTML5是什麼，HTML5有哪些特性和優缺點？
#

html的基礎元素，讓你零基礎學習HTML

以上是html行內元素和區塊內元素分別有哪些？ html行內元素和區塊內元素的特點介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！