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

html html教學

naiomidaphne 2024-05-03 09:55:09 ‧ 942 瀏覽

分享至

最外層

<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 }} |

直播中

2 則留言

davidchen0117

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

謝謝分享

回應
檢舉

登入發表回應

犬千賀

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> 繪圖的元素