iT邦幫忙

1

所有常用HTML標籤的層級和用途

  • 分享至 

  • xImage
  •  

最外層

  • <html>:整個網頁的結構
  • <head>:網頁的標題、元資料、外部資源等
  • <body>:網頁的內容

文章標題

  • <h1>, <h2>, ..., <h6>:定義標題的層級

文字或連結

  • <p>:定義段落
  • <a>:定義超連結
  • <span>:定義行內元素,常用於設置特殊樣式或JS操作
  • <img>:定義圖片

列表

  • <ul>:無序列表
  • <ol>:有序列表
  • <li>:列表項

表單元素

  • <form>:定義表單
  • <input>:定義輸入框
  • <button>:定義按鈕
  • <select>:定義下拉選單

表格

  • <table>:定義表格
  • <tr>:定義表格的行
  • <th>:定義表格的標題行
  • <td>:定義表格的資料行

網頁結構

  • <header>:定義網頁的頂部
  • <footer>:定義網頁的底部
  • <nav>:定義導覽欄

這樣分類後,你應該更容易理解各個標籤在網頁結構中的位置和用途了。

這些標籤包含了 HTML 中的一些常見和常用的標籤,但並不是全部的標籤。這些標籤涵蓋了網頁結構、文本內容、列表、表格、表單等常見元素。以下是一些常見的其他 HTML 標籤:

  • <b>:粗體文字
  • <i>:斜體文字
  • <strong>:強調文字
  • <em>:強調斜體文字
  • <br>:換行
  • <hr>:水平線
  • <sub>:下標
  • <sup>:上標
  • <blockquote>:引用區塊
  • <cite>:引用標題
  • <code>:程式碼
  • <pre>:預格式化的文字
  • <abbr>:縮寫
  • <del>:刪除的文字
  • <ins>:新增的文字
  • <iframe>:內嵌框架
  • <audio>:音頻
  • <video>:視頻

這些標籤覆蓋了更多的內容和功能,但在結構和用途上與前面提到的標籤類似。

最外層 次層 內層 用途 外層限制標籤
html head, body - 定義整個網頁的結構 -
head title, meta, link - 定義網頁的標題、元資料、外部資源等 html
body header, footer, nav - 定義網頁的結構、導覽等 html
header - h1, h2, h3, h4, h5, h6 定義網頁的頂部 body
footer - - 定義網頁的底部 body
nav - a, ul, li 定義導覽欄 body
- - p, a, span, img 定義內文、連結、圖片等 body
- ul, ol, dl li, dt, dd 定義列表或定義列表 body
- form input, button, select, ... 定義表單元素 body
- table tr, th, td 定義表格 body
- b, i, strong, em - 定義文字樣式 任何內容都可以
- br, hr - 定義換行、水平線 任何內容都可以
- sub, sup - 定義下標、上標 任何內容都可以
- blockquote, cite - 定義引用 任何內容都可以
- code, pre - 定義程式碼、預格式化的文字 任何內容都可以
- abbr, del, ins - 定義縮寫、刪除、新增的文字 任何內容都可以
- iframe - 定義內嵌框架 任何內容都可以
- audio, video - 定義音頻、視頻 任何內容都可以

這樣就能清楚地知道哪些標籤不能再被包裹在特定的標籤內層了。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
davidchen0117
iT邦新手 4 級 ‧ 2024-05-06 09:54:24

謝謝分享

3
犬千賀
iT邦新手 3 級 ‧ 2024-05-09 13:27:47

這是學習筆記嗎?
作為教學有點~稍過於簡化結構特性,而且列了好多不常用的tag... ^ - ^a

<table> 底下要習慣加 <tbody><tr> 對前端比較好喔 (他的兄弟還有<thead>,<tfooter>)
<script> 也是滿重要的一個標籤,擺放位置也是一門學問。
<title> 頁面標題
<div>, <section> 是常用的 Container,section 屬網頁結構-內文區段
<mark> 文字加底色(螢光筆效果)
<label> Input elements 的標籤
<option> Selector 的選項 另外可再包 <optgroup> 成為Group option
<textarea> 多行輸入
<svg>, <canvas> 繪圖的元素

以上是常見的幫你補一下。
雖然有些忽略也網頁可以運作,但其實都是Browser自動腦補完成的。而這會導致你下js時,常常抓不到你的結構的element。所以要培養好好習慣喔 =D

算是加強我的印象的學習筆記,因為當時我很好奇標籤外層是否有哪些限制,又好奇 <div> 標籤是不是都通用的情況下,研究製作了這個學習表格。

也謝謝大大的補充說明!

我要留言

立即登入留言