關於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:下拉列表

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章