HTML5 與 CSS3 速查表：標籤、屬性，以及如何使用線上 HTML 檢視器預覽 HTML 頁面
正為記不清特定 HTML 標籤或 CSS 屬性而苦惱？這份終極指南正是為您準備。這份終極 HTML 速查表 涵蓋了最必備的 HTML5 標籤與 CSS3 屬性，並附有實用的程式碼片段。是否曾疑惑 如何預覽 HTML 頁面 而無需本機伺服器？透過我們整合的 線上 HTML 檢視器，即可立即測試並視覺化每一個範例，享受更快速、更有效率的工作流程。
終極 HTML5 標籤列表：架構您的網頁內容
HTML (HyperText Markup Language) 是每個網頁的基礎。HTML5 引入了語義元素，為您的內容提供更清晰的意義，同時提升可存取性 (accessibility) 和 SEO。以下是您最常使用的標籤分類。
核心文件結構與中繼資料
這些標籤構成了任何 HTML 文件的骨架，為瀏覽器和搜尋引擎提供必要資訊。
| 標籤 | 功能說明 |
|---|---|
<!DOCTYPE html> | 宣告文件類型為 HTML5。 |
<html> | HTML 頁面的根元素。 |
<head> | 包含關於文件的中繼資訊。 |
<title> | 指定瀏覽器分頁和搜尋結果的標題。 |
<meta> | 提供中繼資料，例如字元集、視窗設定和描述。 |
<link> | 連結到外部資源，最常見的是 CSS 樣式表。 |
<script> | 嵌入或連結可執行的 JavaScript 程式碼。 |
<body> | 包含可見的頁面內容。 |
語義區塊與分組元素
使用這些標籤來邏輯性地組織您的內容，為頁面佈局的不同部分賦予意義。
| 標籤 | 功能說明 |
|---|---|
<header> | 代表區塊或整個頁面的介紹性內容。 |
<nav> | 包含導覽連結。 |
<main> | 指定文件的主要、主導內容。 |
<article> | 定義一個獨立的組成部分（例如，部落格文章、論壇帖子）。 |
<section> | 代表文件的一個獨立區塊。 |
<aside> | 定義與主要內容並列的內容（例如，側邊欄）。 |
<footer> | 代表區塊或整個頁面的頁尾。 |
<div> | 用於流程內容的通用容器，沒有語義意義。 |
文字層級語義與超連結
這些標籤用於格式化文字並賦予其意義，從標題、段落到連結。
| 標籤 | 功能說明 |
|---|---|
<h1> to <h6> | 標題層級，<h1> 最重要。 |
<p> | 定義一個段落。 |
<a> | 建立超連結。href 屬性指定 URL。 |
<strong> | 表示具有強烈重要性的文字（通常是粗體）。 |
<em> | 表示強調的文字（通常是斜體）。 |
<span> | 用於短語內容的通用內嵌容器。 |
<br> | 插入單一換行符。 |
<blockquote> | 定義一個引用自其他來源的區塊。 |
表單、輸入與互動元素
表單對於使用者互動至關重要。這些標籤可讓您獲取使用者輸入。
| 標籤 | 功能說明 |
|---|---|
<form> | 用於建立 HTML 表單以供使用者輸入的容器。 |
<input> | 最通用的表單元素；type 屬性定義其類型（例如 text, password, checkbox, submit）。 |
<textarea> | 定義多行文字輸入控制項。 |
<label> | 為 <input> 元素定義標籤。 |
<button> | 定義可點擊按鈕。 |
<select> | 建立下拉式選單。 |
<option> | 定義 <select> 選單中的選項。 |
媒體、嵌入與外部內容
透過圖片、影片和其他嵌入式內容讓您的頁面活起來。
| 標籤 | 功能說明 |
|---|---|
<img> | 嵌入圖片。需要 src (來源) 和 alt (替代文字) 屬性。 |
<video> | 嵌入影片播放器。 |
<audio> | 嵌入音訊內容播放器。 |
<iframe> | 指定一個內嵌框架，用於將另一份文件嵌入目前的 HTML 文件中。 |
列表與表格：有效組織資料
透過列表和表格清晰地組織相關項目或表格資料。
| 標籤 | 功能說明 |
|---|---|
<ul> | 定義無序（項目符號）列表。 |
<ol> | 定義有序（數字）列表。 |
<li> | 定義 <ul> 或 <ol> 中的列表項目。 |
<table> | 定義表格。 |
<tr> | 定義表格中的列。 |
<th> | 定義表格中的標頭儲存格。 |
<td> | 定義表格中的標準資料儲存格。 |
<caption> | 定義表格標題。 |
必備 CSS3 屬性列表：專業風格化您的網頁
CSS (Cascading Style Sheets) 使您的 HTML 活起來，控制佈局、顏色、字體和整體視覺外觀。這份 CSS 速查表 涵蓋了您掌握任何設計所需的屬性。
CSS 選擇器與權重
選擇器用於選取您想樣式化的 HTML 元素。理解它們是有效使用 CSS 的第一步。
| Selector | Example | 功能說明 |
|---|---|---|
| Type | p | 選取所有 <p> 元素。 |
| Class | .my-class | 選取所有具有 class="my-class" 的元素。 |
| ID | #my-id | 選取具有 id="my-id" 的單一元素。 |
| Attribute | [href] | 選取所有具有 href 屬性的元素。 |
| Descendant | article p | 選取 <article> 內的所有 <p> 元素。 |
| Pseudo-class | a:hover | 當使用者將滑鼠移到連結上方時選取該連結。 |
方塊模型與尺寸屬性
頁面上的每個元素都是一個矩形方塊。方塊模型定義了其尺寸、內距、邊框和外距如何協同工作。
| Property | Example Values | 功能說明 |
|---|---|---|
width | 100px, 50%, auto | 設定元素的寬度。 |
height | 100px, 50vh, auto | 設定元素的高度。 |
padding | 10px, 5px 10px | 設定內容與邊框之間的空間。 |
border | 1px solid black | 設定邊框寬度、樣式和顏色的簡寫屬性。 |
margin | 10px, 5px 10px | 設定邊框外部、元素之間的空間。 |
box-sizing | border-box | 更改 width 和 height 的計算方式，包含內距和邊框。 |
文字排版與樣式
控制文字外觀，以建立可讀且美觀的內容。
| Property | Example Values | 功能說明 |
|---|---|---|
font-family | "Arial", sans-serif | 指定元素的字體。 |
font-size | 16px, 1.2em, 1rem | 設定文字大小。 |
font-weight | normal, bold, 700 | 設定字體粗細。 |
color | black, #333, rgb(0,0,0) | 設定文字顏色。 |
text-align | left, center, right | 在元素內對齊文字。 |
line-height | 1.5 | 設定文字行間距離。 |
使用 Flexbox 進行彈性佈局
Flexbox 是一種一維佈局模型，用於以列或行的形式排列項目。它使得建立響應式佈局變得直觀。
| Property (Container) | Example Values | 功能說明 |
|---|---|---|
display | flex | 啟用 Flexbox 佈局模型。 |
flex-direction | row, column | 定義主軸的方向。 |
justify-content | center, space-between | 沿主軸對齊項目。 |
align-items | center, stretch | 沿交叉軸對齊項目。 |
flex-wrap | nowrap, wrap | 允許項目換行到多行。 |
使用 CSS Grid 進行網格佈局
CSS Grid 是一個強大的二維佈局系統，可讓您同時控制欄和列。
| Property (Container) | Example Values | 功能說明 |
|---|---|---|
display | grid | 啟用 Grid 佈局模型。 |
grid-template-columns | 1fr 1fr 100px, repeat(3, 1fr) | 定義網格的欄。 |
grid-template-rows | auto 100px | 定義網格的列。 |
gap | 10px | 設定網格儲存格之間的間隙大小。 |
背景、邊框與陰影
使用這些裝飾性屬性為您的元素增加深度和風格。
| Property | Example Values | 功能說明 |
|---|---|---|
background-color | lightblue, #f0f0f0 | 設定元素的背景顏色。 |
background-image | url('image.jpg') | 設定背景圖片。 |
border-radius | 5px, 50% | 使元素的邊框圓角化。 |
box-shadow | 10px 5px 5px black | 在元素的框架周圍添加陰影效果。 |
過渡、變形與動畫
透過流暢的視覺效果創造動態且互動的使用者介面。
| Property | Example Values | 功能說明 |
|---|---|---|
transition | all 0.3s ease-in-out | 在給定持續時間內實現屬性平滑變更。 |
transform | rotate(45deg), scale(1.2) | 對元素應用 2D 或 3D 變形。 |
animation | slide-in 1s forwards | 套用具名動畫的簡寫屬性。 |
為什麼 Html Viewer 是您的首選線上 HTML 編輯器與檢視器
擁有一份絕佳的速查表是一回事，但能夠立即應用並看到結果，這才是真正加速學習和開發的關鍵。這時，像 Html Viewer 這樣的 線上 HTML 編輯器 就成為您最強大的盟友。
即時預覽，快速實驗
複製本指南中的任何程式碼片段，貼到我們的編輯器中，即可即時看到渲染結果。無需儲存檔案、切換視窗或重新整理瀏覽器。該功能建立的即時回饋循環非常適合完善 CSS 屬性設定，或理解新的 HTML 標籤如何架構您的內容。您可以立即 測試這些程式碼片段，親眼見證神奇效果。
輕鬆編輯、美化和壓縮程式碼
我們的工具不僅僅是檢視器。它是一個完整的工作流程解決方案。如果您從不同來源收集了程式碼，只需點擊我們的「美化」按鈕（代碼格式優化按鈕），即可將其格式化為乾淨、易讀的結構。當您準備好部署時，「壓縮」功能（代碼壓縮功能）會壓縮您的程式碼，優化以加快頁面載入速度。這種一站式功能可簡化您的整個編碼流程。
隨時隨地存取：無需任何設定
忘掉安裝龐大的 IDE 或設定複雜的本機環境吧。這個線上 HTML 編輯器完全在您的瀏覽器中執行。無論您是在咖啡館臨時辦公的筆記型電腦上，還是在實驗室的共用電腦上，您的強大 HTML 和 CSS 沙盒環境始終只需一串 URL 的距離，隨時準備好迎接靈感的到來。
更快掌握網頁開發：您的必備 HTML 與 CSS 速查表
將此頁面加入書籤，作為您掌握 HTML5 和 CSS3 基礎知識的終極指南。利用它快速找到正確的標籤或屬性，理解其語法，並自信地建構您的專案。更重要的是，將這些知識與我們工具的實用功能結合。這裡的每一個程式碼片段都是實驗和學習的機會。立即前往 HtmlViewer.cc 編輯器，讓這份速查表活起來，並改變您今天的編碼流程。
關於 HTML 與 CSS 速查表的常見問題
如何快速檢視網站或本機檔案的 HTML 程式碼？
最簡單的方法是使用線上 HTML 檢視器。透過我們的工具，您可以直接貼上程式碼、上傳 HTML 檔案，甚至輸入 URL 來擷取並 「檢視 HTML 原始碼」(原始碼) 自現有網站。載入後，您可以並排檢視程式碼及其視覺預覽，非常適合學習和除錯。
什麼是 HTML 與 CSS 速查表？它有什麼用處？
HTML 與 CSS 速查表是一個簡潔的參考指南，列出了常用標籤、屬性、語法和概念。它對所有級別的開發者都非常有幫助，因為它可以節省時間，無需記住所有細節，並可作為快速、可靠的資源，用於疑難排解和高效地建構網頁。
我可以立即線上測試這些 HTML5 和 CSS3 程式碼片段嗎？
當然！這正是我們的平台所設計的目的。您可以複製本指南中的任何範例，貼到我們 首頁 的編輯器中，並立即在即時預覽面板中看到結果。自由地實驗，並真正掌握不同的程式碼組合如何產生效果。
如何確保我的 HTML 和 CSS 具有可存取性且結構良好？
首先，正確使用語義 HTML5 標籤（<main>, <nav>, <article>），因為它們提供了固有的意義。對於 CSS，請確保足夠的色彩對比度，並使用響應式單位（如 rem）來設定字體大小。一個很好的做法是將您的程式碼貼入我們的編輯器，並使用「美化」功能。這會以正確的縮排格式化您的程式碼，使其更容易審查結構並發現潛在問題。