學習筆記關於HTML（含HTML5）的區塊元素和行級（內聯）元素總結

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

   塊級（block）元素的特性：

①總是在新行開始；

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

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

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

 

   內聯（inline）元素的特徵：


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


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

②高，行高及外邊距和內邊距不易改變；或圖片的寬度，不可改變；

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

 

 

2.好的，我們來看看塊級元素：

div:文檔節section:文檔節
nav:導覽
header:頁眉
article:文章
aside:文章側邊欄
footer:頁腳
details:元素的細節
summary 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:點字方向
ibige;大字體
small:小字體
sup:上標
sub:下標
del:被刪除的文字
strike:刪除線
s:刪除線
ins:被插入的文字
u:下劃線
nobr:刪除線
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:下拉清單

 

如有錯誤或疏漏之處還請大家指正，謝謝！

 

🎜