首頁 > web前端 > html教學 > 學習筆記關於HTML(含HTML5)的區塊元素和行級(內聯)元素總結

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

WBOY
發布: 2016-08-20 08:47:53
原創
1299 人瀏覽過

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:下拉清單

 

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

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