搜尋

HTML 元素顯示類型

HTML 的所有元素都有預設的顯示類型,而這些顯示類型是透過 CSS 的 display 屬性進行控制,只有在遇到特殊的網頁版面需求時才需要更動,這篇教學將會介紹 HTML 的元素顯示類型。

快速導覽:

CSS 的 display 內容

根據 W3.org 的 CSS display 規範,display 常用的內容 ( 值 ) 如下表所示:

說明 換行
none 隱藏元素,將該元素從 HTML 結構樹中移除。 X
contents 只顯示元素內容,忽略所有 box 屬性 ( 例如邊界、邊框...等 )。 X
block 「塊級」元素,該元素會強制換行,除非進行 CSS 設定,否則同一個區塊裡,一行只會有一個塊級元素。 O
inline 「行內」元素,該元素會一個接一個連續下去。 X
inline-block 「行內」元素裡「包覆塊級」元素,除了具備塊級元素的特性,也可一個接一個連續下去。 X
inline-table 「行內」元素裡「包覆表格」元素,除了具備表格元素的特性,也可一個接一個連續下去。 X
list-item 「清單項目」元素,該元素作用和 block 類似,並預載清單相關符號樣式。 O
table 「表格」元素,該元素作用和 block 類似。 O
flex 「彈性塊」元素,該元素作用和 block 類似,並可以透過設定,根據外部區塊的尺寸進行彈性縮放。 O
grid 「格狀」元素,,該元素作用和 block 類似,並可以透過設定,進行版面格狀排版。 O

各個元素的顯示類型 ( display value )

HTML 裡每個元素都有各自預設的顯示類型,下表列出各個元素預設的顯示類型 ( display value ):

元素 display
address、article、aside、blockquote、body、dd、details、div、dl、dt、fieldset、figcaption、figure、footer、form、frame、frameset、h1、h2、h3、h4、h5、h6、header、hr、html、iframe、noframes、legend、p、ul、center、dir、menu、nav、ol、pre、summary、section block
map、output、q inline
input、select、img inline-block
area、datalist、head、link、param、title、style、script none
table table
tr table-row
thead table-header-group
tbody table-row-group
tfoot table-footer-group
caption table-caption
col table-column
colgroup table-column-group
td、th table-cell
caption table-caption
li list-item

小結

元素的顯示類型說重要也不是很重要,說不重要但又有相當程度的重要性,總之如果瞭解了元素的顯示類型,在網頁的排版與架構上,都更能得心應手!

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片