1. 程式人生 > >關於HTML(含HTML5)的塊級元素和行級(內聯)元素總結

關於HTML(含HTML5)的塊級元素和行級(內聯)元素總結

1.首先我們要知道什麼是塊級元素和行級(內聯)元素?

   塊級(block)元素的特點:

 ①總是在新行上開始;

   ②高度,行高以及外邊距和內邊距都可控制;

   ③寬度預設是它的容器的100%,除非設定一個寬度;

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

   內聯(inline)元素的特點:

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

   ②高,行高及外邊距和內邊距不可改變;

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

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

2.好的,我們來看看塊級元素:

div:文件節
section:文件節
nav:導航
header:頁首
article:文章
aside:文章側欄
footer:頁尾
details:元素的細節
summary:details元素可見的標題
dialog:對話方塊視窗
h1,h2,h3,h4,h5,h6:標題
p:段落
ul:無序列表
ol:有序列表
dir:目錄列表
li:專案
dl:列表
dt:列表專案
dd:專案描述
menu:命令的選單,列表
menuitem:選單專案
command:命令按鈕
form:表單
fieldset:圍繞元素的邊框(可用於表單內元素分組)
legend:在邊框上的標題
select:選擇列表(內聯元素)
optgroup:組合選擇列表選項
option:選擇列表選項(也可做datalist選項)
datalist:下拉列表(id要與input中list屬性值繫結)
table:表格
caption:表格標題
thead:組合表頭內容(th)
tbody:組合主體內容(td)
tfoot:組合表注內容(td)
tr:表格行
th:表頭單元格
td:表格單元
col:表格列屬性;(空標籤)
colgroup:表格格式化列組;
iframe:內聯框架
figure:媒介內容分組
figcaption:figure標題
map:影象對映
area:影象區域
canvas:圖形容器(指令碼來繪製圖形)
video:視訊
source:媒介源
track:文字軌道
audio:聲音內容
br:換行(空標籤)
hr:水平分割線(空標籤)
pre:格式文字
blockquote:塊引用
address:文件聯絡資訊
center:居中文字(不贊成使用)
spacer:在水平和垂直方向插入空間(空元素) 

3.接下來,我們來看看行級(內聯)元素:

span:內聯容器
abbr:縮寫
em:強調
strong:粗體強調
mark:突出顯示的文字
b:粗體
i:斜體
bdi:文字方向
bdo:文字方向
big:大字型
small:小字型
sup:上標
sub:下標
del:被刪除的文字
strike:刪除線
s:刪除線
ins:被插入的文字
u:下劃線
nobr:禁止換行
wbr:單詞換行時機(空標籤)
tt:打字機文字
kbd:鍵盤文字
time:日期/時間
cite:引用
q:短引用("")
font:字型設定(不常用)
acronym:縮寫(html5不支援)
dfn:欄位(不常用)
a:錨點
img:圖片
embed:內嵌(空標籤)
label:input標記(點選文字觸發控制元件)
input:輸入框
button:按鈕
keygen:生成祕鑰(空標籤)
textarea:多行文字輸入框
output:輸出結果
ruby:中文註音
rt:註音
rp:瀏覽器不支援ruby元素顯示的內容
progress:進度條
meter:度量
var:定義變數
code:計算機程式碼文字
samp:計算機程式碼樣本
select:下拉列表