【前端】HTML__內聯元素與塊元素

守望者發表於2019-02-16

在HTML4.0時代,HTML的元素型別分內聯元素(inline element)和塊元素(block-level element)。

第一、內聯元素

內聯元素是是一種基於語義級的基本元素,一般只能容納文字和其他內聯元素。

下面的元素都是內聯元素:

b(字型加粗) 
kbd(代表文字從鍵盤錄入) 
q(引用文字) 
big(字號比周圍字型大一號) 
strong(重要文字,在盲文閱讀裝置中,會重點讀,介面顯示效果為加粗) 
script(指令碼)
i(文字斜體)
samp(極少用,連字元)
span(用於組合其他內聯元素)
small(比周圍字型小一號)
time(html5中的新標籤,用於標記時間,目前瀏覽器都不支援)
sub(定義下標文字,顯示為其他文字高度一半)
tt(告訴瀏覽器,字型必須等寬)
var(告訴瀏覽器,這是變數)
sup(定義上標文字)
abbr(代表是長單詞或短語的縮寫)
a(超連結)
button(按鈕)
acronym(縮寫,HTML5中已棄用,請使用abbr替代)
bdo(可定義文字方向)
input(基本輸入框)
cite(定義引用的文件)
br(換行符)
label(文字標籤,但是有個牛逼的特性,利用for屬性,可以繫結其他元素,使得滑鼠點選該標籤時,被繫結元素獲得焦點)
code(定義原始碼文字)
img(圖片文字)
select(下拉選擇元件)
dfn(definition and usage,定義一個概念的定義處,一般的在一個文件中最先出現的地方)
map(定義一個客戶端的圖形對映)
textarea(文字輸入框)
em(定義需要強調的文字,一般用斜體表示)
object(定義一個嵌入的物件)

第二 塊元素

塊元素一般是其他元素的容器元素,用於佈局,需要放在body標籤裡面。

下面都是塊元素:

address(定義了文章擁有者的聯絡資訊)
figure(定義獨立的流內容,例如圖片、視訊)
noscript(定義如果瀏覽器不支援指令碼語言時顯示的內容)
article(定義文章內容)
footer(定義文件底部)
ol(ordered list)
aside(aside content,可用做側欄)
form(input form)
output(定義form的輸出)
blockquote(定義引用於別處的內容)
h1,h2,h3,h4,h5,h6(標題)
p(段落)
canvas(畫布)
header(頁首)
pre(preformatted text,定義預格式化內容)
dd(definition description)
hgroup(對標題進行組合)
section(定義頁首的區域)
div(文件分割)
hr(定義分割線)
table(表格)
dl(definistion list)
li(list item)
tfoot(table footer)
fieldset(field set label)
main(contains the central content to this document)
ul(unordered list)
figcaption(figure caption)
nav(contains navigation links)
video(video player)

第三 內聯與塊元素的區別

  • 預設,塊元素會新起一行,而內聯元素會在行內

  • 通常,塊元素的內部結構要比內聯元素複雜,塊元素內部可能包含內聯元素和其他塊元素。

相關文章