HTML - 標籤參考
你好，未來的網頁開發者們！我很興奮能成為你們在HTML標籤世界的引路人。作為一個教了多年計算機科學的人，我可以告訴你們，理解HTML標籤就像是學習網頁開發的字母表。那麼，我們就開始吧！
HTML 標籤是什麼？
HTML標籤是網頁的建築基石。它們就像是告訴網絡瀏覽器如何顯示內容的秘密代碼。想像你正在蓋一間房子 - HTML標籤就是給你的網頁提供結構的磚塊、窗戶和門。
舉個例子，我們來看看一個簡單的HTML標籤：
<p>這是一個段落。</p>在這裡，<p> 是開標籤，而 </p> 是閉標籤。它們之間的內容將會在你的網頁上顯示為一段文字。
它們為什麼重要？
HTML標籤之所以重要，是因為它們為你的內容提供了含義和結構。沒有它們，你的網頁將會是一團混亂的文本！它們幫助瀏覽器理解每一塊內容應該是什麼，無論它是標題、段落、圖像還是鏈接。
HTML 標籤列表與範例
讓我們探討一些最常見的HTML標籤。我會為每個類別提供範例和解釋。
HTML 基本標籤
這些是任何HTML文件的基礎。
| 標籤 | 描述 | 範例 |
|---|---|---|
<!DOCTYPE> |
定義文件類型 | <!DOCTYPE html> |
<html> |
HTML頁面的根元素 | <html>...</html> |
<head> |
包含關於文件的元信息 | <head>...</head> |
<title> |
為文件指定標題 | <title>我的第一個網頁</title> |
<body> |
定義文件的體 | <body>...</body> |
這裡有一個基本的HTML結構：
<!DOCTYPE html>
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<h1>歡迎來到我的網站！</h1>
<p>這裡是我所有內容的地方。</p>
</body>
</html>這個結構就像是你的網頁的骨架。我們即將學到的所有內容都會適合這個基本框架。
HTML 格式化標籤
這些標籤幫助你在網頁上格式化文本。
| 標籤 | 描述 | 範例 |
|---|---|---|
<h1> 至 <h6>
|
標題 | <h1>主標題</h1> |
<p> |
段落 | <p>這是一個段落。</p> |
<br> |
行斷 | Line 1<br>Line 2 |
<strong> |
加粗文字 | <strong>重要！</strong> |
<em> |
強調文字 | <em>斜體</em> |
讓我們看看這些標籤是如何工作的：
<h1>歡迎來到我的食譜</h1>
<h2>食譜：巧克力曲奇餅乾</h2>
<p>這些餅乾<Strong>美味</Strong>且<em>容易製作</em>！</p>
<p>材料：<br>
面粉<br>
糖<br>
巧克力豆</p>這個範例展示了如何使用格式化標籤來結構化一個食譜頁面。<h1> 和 <h2> 標籤創建了層次化的標題，而 <strong> 和 <em> 則強調了重要的單詞。
HTML 表單和輸入標籤
表單讓用戶能夠輸入可以發送到伺服器進行處理的數據。
| 標籤 | 描述 | 範例 |
|---|---|---|
<form> |
定義一個HTML表單 | <form>...</form> |
<input> |
輸入控制 | <input type="text" name="username"> |
<textarea> |
多行輸入控制 | <textarea>在此輸入文本...</textarea> |
<button> |
可點擊按鈕 | <button type="submit">發送</button> |
這裡有一個簡單的表單範例：
<form action="/submit-recipe" method="post">
<label for="recipe-name">食譜名稱：</label>
<input type="text" id="recipe-name" name="recipe-name"><br><br>
<label for="ingredients">材料：</label>
<textarea id="ingredients" name="ingredients"></textarea><br><br>
<button type="submit">提交食譜</button>
</form>這個表單讓用戶可以提交食譜名稱和材料。action 屬性指定表單數據應該發送到哪裡，而 method 屬性定義了如何發送。
HTML 圖像標籤
圖像使你的網頁更加視覺吸引人和信息豐富。
| 標籤 | 描述 | 範例 |
|---|---|---|
<img> |
嵌入圖像 | <img src="cookie.jpg" alt="巧克力曲奇餅乾"> |
讓我們在食譜頁面上添加一張圖像：
<h2>巧克力曲奇餅乾</h2>
<img src="cookie.jpg" alt="一個美味的巧克力曲奇餅乾" width="300" height="200">
<p>這個看起來是不是很美味？</p>src 屬性指定了圖像文件，而 alt 提供了屏幕閱讀器使用或圖像加載失敗時的替代文本。
HTML 音頻和視頻標籤
這些標籤讓你可以在網頁中嵌入多媒體內容。
| 標籤 | 描述 | 範例 |
|---|---|---|
<audio> |
嵌入聲音內容 | <audio src="recipe.mp3" controls></audio> |
<video> |
嵌入視頻內容 | <video src="baking.mp4" controls></video> |
這是如何在你
Credits: Image by storyset