HTML內(nèi)聯(lián)元素和塊級元素

94250 閱讀 0 評論 1 點(diǎn)贊

HTML 標(biāo)簽（元素）可以分為兩個(gè)類別，分別是塊級元素和內(nèi)聯(lián)元素（也叫行內(nèi)元素）。

一、內(nèi)聯(lián)元素（inline）

1. 內(nèi)聯(lián)元素的概念

內(nèi)聯(lián)元素(html規(guī)范中的概念)英文:inline element，其中文叫法有多種，如：內(nèi)聯(lián)元素、內(nèi)嵌元素、行內(nèi)元素、直進(jìn)式元素等。基本上沒有統(tǒng)一的翻譯。另外提到內(nèi)聯(lián)元素，通常會涉及到的屬性是display:inline;這個(gè)屬性能夠修復(fù)著名的IE雙倍浮動邊界問題。

2. 內(nèi)聯(lián)元素的特性

①和相鄰的內(nèi)聯(lián)元素在同一行;

②寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變;

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

④內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

對于行內(nèi)元素的使用，需要注意如下幾點(diǎn)：

? 設(shè)置寬度 width 無效；

? 設(shè)置高度 height 無效，但可以通過 line-height 來設(shè)置行高；

? 可以設(shè)置 margin 外邊距，但只對左右外邊距有效，上下無效；

? 設(shè)置 padding 內(nèi)邊距時(shí)，只有左右 padding 有效，上下則無效，需要注意的是元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的；

? 可以通過 display 屬性將元素在行內(nèi)元素和塊級元素之間進(jìn)行切換。

3. HTML標(biāo)簽中常見的內(nèi)聯(lián)元素

a	錨點(diǎn)
abbr	縮寫
acronym	首字母縮略詞
b	粗體
bdo – bidi override	用來覆蓋默認(rèn)的文本方向
big	大字體
br	換行
cite	引用
code	計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
dfn	定義字段
em	強(qiáng)調(diào)
font	字體設(shè)定(不推薦)
i	斜體
img	圖片
input	輸入框
kbd	定義鍵盤文本
label	表格標(biāo)簽
q	短引用
s	中劃線(不推薦)
samp	定義范例計(jì)算機(jī)代碼
select	項(xiàng)目選擇
small	小字體文本
span	常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
strike	中劃線
strong	粗體強(qiáng)調(diào)
sub	下標(biāo)
sup	上標(biāo)
textarea	多行文本輸入框
tt	電傳文本
u	下劃線
var	定義變量

二、塊級元素（block）

1. 塊級元素的概念

塊級元素(block element)，和其對應(yīng)的是內(nèi)聯(lián)元素(inline element)，都是html規(guī)范中的概念。塊元素和內(nèi)聯(lián)元素的基本差異是塊元素一般都從新行開始，相鄰的塊級元素將會在不同行顯示。

2. 塊級元素的特性

①總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;

②寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;

③如果省略塊級元素的寬度，那么它的寬度默認(rèn)為當(dāng)前瀏覽器窗口的寬度；

④塊級元素中可以包含其它的內(nèi)聯(lián)元素和塊級元素。

3. HTML標(biāo)簽中常見的塊級元素

address	地址
blockquote	塊引用
center	居中對齊塊
dir	目錄列表
div	常用塊級容器，也是css layout的主要標(biāo)簽
dl	定義列表
fieldset	form控制組
form	交互表單
h1	大標(biāo)題
h2	副標(biāo)題
h3	3級標(biāo)題
h4	4級標(biāo)題
h5	5級標(biāo)題
h6	6級標(biāo)題
hr	水平分隔線
isindex	input prompt
menu	菜單列表
noframes	frames可選內(nèi)容，(對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容)
noscript	可選腳本內(nèi)容(對于不支持script的瀏覽器顯示此內(nèi)容)
ol	排序表單
p	段落
pre	格式化文本
table	表格
ul	非排序列表(無序列表)