HTML 小知識 - 區塊元素 vs 行內元素

發表於 | 分類於

前言

使用那麼多次 HTML 元素卻很少去了解它屬於什麼元素，所以來記錄一下我們常見的區塊元素和行內元素

順便也能了解一些元素之間的小禁忌

區塊元素(block)

區塊元素（或稱區塊層級元素），可以設置 width、height，在一般默認下的區塊元素，寬度會跟隨父層寬度，故而不允許其他元素佔據其相同水平空間，對應的 display 為 block；區塊元素的矩形結構稱之為盒模型( box model )，由 content、padding、border、margin所組成

區塊元素包含

  • 文字
    • p - 段落
    • h1, h2, h3, h4, h5, h6 - 標題
  • 列表
    • dl - 定義列表-清單
    • dt - 定義列表-項目
    • dd - 定義列表-描述
    • ol - 有排序之編號清單
    • ul - 未排序之項目符號清單
    • li - 清單中之列表項目
  • 其他區塊元素
    • address - 地址
    • blockquote - 塊引用
    • div - 區塊
    • menu - 菜單列表
    • main - 主體內容
    • npscript - script 的替代內容（對于不支持 script 的瀏覽器顯示此內容）
    • pre - 預先格式化文字
    • figure - 有標題的獨立內容，常使用於插圖、圖表或程式片段等，標題是放在其內的 figcaption 元素裡。
    • header - 文章標題內容
    • nav - 導覽
    • aside - 側邊欄
    • article - 文章內容
    • section - 段落
    • footer - 頁尾
    • form - 表單
    • fieldset - 表單群組
    • canvas - 定義圖形
    • hgroup - 群組文章標題
    • table - 表格
    • tfoot - 表格腳尾
    • video -嵌入媒體播放器
    • audio -嵌入音頻播放器
  • 空元素
    • hr - 水平分隔線

只有開始標籤而沒有結束標籤的就稱為空元素

行內元素(inline)

又稱內聯元素，和其他元素都在一行上，相臨的行内元素会排列在同一行；無法設置 width 、 height ，只能靠內容撐起來，上下的 padding 和 margin 設置會無效，但左右的有效，對應的 display 為 inline

上下的 padding、margin 為 padding-top ,padding-bottom, margin-top, margin-bottom

行內元素包含

  • a - 連結
  • 短語元素
    • abbr - 縮寫標記
    • acronym -首字母縮寫
    • b - 文字加粗
    • bdo - 覆蓋當前文字方向
    • cite - 引用文字
    • dfn - 定義術語/專業行話
    • em - 強調文字(斜體)
    • i - 斜體
    • strong - 加重文字
    • q - 短引用
    • label - input 文字標籤
    • samp - 標示電腦程序輸出
    • small - 字體變小
    • span - 常用行內元素，定義文字內區塊
    • sub - 下標
    • sup - 上標
  • 電腦術語元素
    • code - 程式碼的片段
    • kbd - 定義鍵盤文字
    • var - 定義變量
  • 其他元素
    • output - 表單輸出
    • select - 項目選單
    • textarea - 多行文本輸入框
  • 空元素
    • br - 換行
    • img - 圖片
    • input - 輸入框

可變元素

可變元素為根據上下文語境決定該元素為區塊元素或者行內元素

可變元素包含

  • applet - java applet
  • button - 按鈕
  • del - 刪除
  • iframe - 嵌入框架的應用
  • ins - 定義標記插入的部份
  • map - 圖片區塊
  • object - object對象
  • script - 嵌入或引用要執行的程式碼

特例規則

基本上區塊元素可以包含行內元素和某些區塊元素，行內元素不能包含區塊元素，只能包含行內元素，但有些小特例，例如:

  • a 連結幾乎都能包含，不能包含 a 連結

    1
    2
    3
    4
    //錯誤示範
    <a href="#">
        <a href="#">test</a>
    </a>

  • p 段落不能包含區塊元素

    1
    2
    3
    4
    5
    6
    7
    //錯誤示範
    <p>
     <div></div>
    </p>  
    <h1>
      <p>test</p>
    <h1>

  • li 標籤可以包含 div 以及他的父元素 ul, ol

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ol>
      <li>
        <div>
          <ul>
            <li>123</li>
            <li>456</li>
            <li>789</li>
          </ul>
        </div>
      </li>
    </ol>

結論

如果有區塊或者行內元素想改變元素也可以使用 CSS 的 display，例如 li 區塊元素改成水平的時候；或者當純只是想要水平並列但一樣想要保持是區塊的話就能使用 inline-block 或者 flex，這又是另外一種坑惹XD