Html基本10個主題

HTML 基礎教學：10 個必學主題

點擊「複製程式碼」可快速複製片段；「預覽」僅渲染片段；「詳解」則顯示完整 HTML 檔案與概念說明。

1. 標題 (Headings)

簡要說明

使用 <h1> ~ <h6> 建立層級分明的標題。

<h1>這是 H1 主標題</h1> <h2>這是 H2 次標題</h2> <h3>這是 H3 小標題</h3>

2. 段落 (Paragraphs)

簡要說明

<p> 用於段落文字，瀏覽器會自動換行並在段落間留白。

<p>HTML 是描述網頁結構的標記語言。</p> <p>學會正確的標籤用法，可讓內容更具有語意。</p>

3. 連結 (Links)

簡要說明

使用 <a> 建立可點擊的超連結。

<a href="https://developer.mozilla.org/" target="_blank">前往 MDN 文件</a>

4. 圖片 (Images)

簡要說明

<img> 需搭配 src 與 alt。

<img src="https://via.placeholder.com/200" alt="示意圖">

5. 清單 (Lists)

簡要說明

用 <ul>/<ol> 搭配 <li>。

<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <ol> <li>早餐</li> <li>午餐</li> <li>晚餐</li> </ol>

6. 表格 (Tables)

簡要說明

<table> 由列 <tr>、表頭 <th>、儲存格 <td> 組成。

<table border="1"> <tr><th>姓名</th><th>年齡</th></tr> <tr><td>小明</td><td>12</td></tr> </table>

7. 表單 (Forms)

簡要說明

<form> 搭配各種輸入欄位收集資料。

<form> 名稱：<input type="text" name="username"><br> <button type="submit">送出</button> </form>

8. 音訊與影片 (Audio & Video)

簡要說明

多媒體標籤可直接播放音訊或影片。

<audio controls> <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> </audio> <video width="320" height="180" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video>

9. Iframe 嵌入 (Inline Frame)

簡要說明

<iframe> 可在頁面內嵌入其他網頁或資源。

<iframe src="https://example.com" width="300" height="200"></iframe>

10. 語義元素 (Semantic Elements)

簡要說明

語義化標籤如 <header>、<section>、<article>、<footer> 提升可讀性與 SEO。

<article> <header> <h2>新聞標題</h2> <p>發布日期：2025-06-14</p> </header> <section> <p>這裡是新聞內容摘要……</p> </section> <footer>作者：小編</footer> </article>