HTML速記表/Cheat Sheet
HTML Cheat Sheet
1. 基本 HTML 結構
<!DOCTYPE html>
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>2. 標題 (Headings)
| 標籤 | 描述 | 範例 |
|---|---|---|
<h1> ~ <h6> |
定義標題，<h1> 為最高層級 |
<h1>主標題</h1> |
<h2> |
副標題 | <h2>副標題</h2> |
3. 段落與文本
| 標籤 | 描述 | 範例 |
|---|---|---|
<p> |
定義段落 | <p>這是一個段落。</p> |
<br> |
換行符 | 這是一行<br>這是下一行 |
<strong> |
粗體文本 | <strong>重要文字</strong> |
<em> |
斜體文本 | <em>斜體文字</em> |
<blockquote> |
引用文字 | <blockquote>引用的內容</blockquote> |
<hr> |
水平線 | <hr> |
4. 連結與圖片
| 標籤 | 描述 | 範例 |
|---|---|---|
<a> |
超連結 | <a href="https://example.com">點擊這裡</a> |
<img> |
圖片 | <img src="image.jpg" alt="圖片描述"> |
target="_blank" |
新開視窗連結 | <a href="url" target="_blank" rel="noopener">新視窗</a> |
5. 列表
| 標籤 | 描述 | 範例 |
|---|---|---|
<ul> |
無序列表 | <ul><li>項目 1</li><li>項目 2</li></ul> |
<ol> |
有序列表 | <ol><li>第一項</li><li>第二項</li></ol> |
<li> |
列表項 | <li>項目</li> |
<dl> |
定義列表 | <dl><dt>術語</dt><dd>定義</dd></dl> |
6. 表格
| 標籤 | 描述 | 範例 |
|---|---|---|
<table> |
定義表格 | <table></table> |
<tr> |
定義表格行 | <tr></tr> |
<td> |
表格單元格 | <td>資料</td> |
<th> |
表格表頭 | <th>標題</th> |
<thead> |
表格表頭區域 | <thead><tr><th>標題</th></tr></thead> |
<tbody> |
表格主體區域 | <tbody><tr><td>資料</td></tr></tbody> |
colspan |
合併多個欄位 | <td colspan="2">合併欄位</td> |
rowspan |
合併多個列 | <td rowspan="2">合併列</td> |
7. 表單
| 標籤 | 描述 | 範例 |
|---|---|---|
<form> |
定義表單 | <form action="/submit"></form> |
<input> |
輸入框 | <input type="text" placeholder="輸入內容"> |
<textarea> |
多行輸入框 | <textarea rows="4" cols="50"></textarea> |
<select> |
下拉選單 | <select><option>選項1</option></select> |
<button> |
按鈕 | <button>送出</button> |
<label> |
表單標籤 | <label for="name">名稱</label> |
8. 內嵌多媒體
| 標籤 | 描述 | 範例 |
|---|---|---|
<audio> |
嵌入音頻 | <audio controls><source src="audio.mp3" type="audio/mp3"></audio> |
<video> |
嵌入影片 | <video controls><source src="video.mp4" type="video/mp4"></video> |
<iframe> |
嵌入其他網頁內容 | <iframe src="https://example.com"></iframe> |
9. HTML5 新增語義標籤
| 標籤 | 描述 | 範例 |
|---|---|---|
<header> |
頁首 | <header>頁首內容</header> |
<footer> |
頁尾 | <footer>頁尾內容</footer> |
<nav> |
導覽區 | <nav>導覽連結</nav> |
<article> |
文章或內容段落 | <article>文章段落</article> |
<section> |
定義文檔中的區域 | <section>區域內容</section> |
<aside> |
相關內容的側邊區域 | <aside>附加資訊</aside> |
10. 其他有用標籤
| 標籤 | 描述 | 範例 |
|---|---|---|
<div> |
區塊，通用容器 | <div>內容</div> |
<span> |
行內元素，用於文字樣式 | <span>文字</span> |
<meta> |
提供關於文檔的數據 | <meta charset="UTF-8"> |
<link> |
連結外部資源 | <link rel="stylesheet" href="styles.css"> |
<script> |
嵌入 JavaScript | <script src="script.js"></script> |
這份 HTML Cheat Sheet 涵蓋了常見的 HTML 標籤與其用法，對於初學者來說是個快速參考工具，幫助你理解並運用基礎的 HTML 語法。
