首頁 > web前端 > html教學 > html行內元素和區塊內元素分別有哪些? html行內元素和區塊內元素的特點介紹

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

寻∝梦
發布: 2018-08-14 16:23:04
原創
3786 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板