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 語法。