2026年1月14日 星期三

HTML 最核心的指令

 這份教材將 HTML 最核心的指令（標籤）進行分類整理，並提供一個可以實際運行的入門範例。

一、 HTML 核心標籤整理

1. 結構與排版

標籤說明備註
<h1> ~ <h6>標題 (Heading)h1 最大（通常一個頁面只有一個），h6 最小。
<p>段落 (Paragraph)兩段文字之間會自動產生間隔。
<br>強制換行單一標籤，不需要結束標籤。
<hr>水平分隔線用於區分不同主題。
<div>區塊 (Division)網頁排版最常用的容器，用於群組內容。

2. 內容強化與多媒體

標籤說明關鍵屬性
<a>超連結href (目標網址)
<img>圖片src (路徑)、alt (替代文字)
<ul> / <li>無序清單顯示點狀符號。
<ol> / <li>有序清單顯示數字編號。

二、 屬性 (Attributes) 的概念

標籤可以擁有「屬性」來提供更多資訊。格式通常是：名稱="值"。

例如：<a href="https://google.com">前往 Google</a>

這裡的 href 是屬性名稱，網址則是它的值。

三、 入門綜合範例：我的個人主頁

你可以將下方的代碼複製到電腦的「記事本」中，存檔為 index.html，然後用瀏覽器打開。

HTML
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>我的第一個網頁</title>
</head>
<body>

    <h1>歡迎來到我的小站</h1>
    <p>這是我的第一個 <strong>HTML</strong> 練習網頁。</p>
    
    <hr>

    <h2>關於我</h2>
    <p>我正在學習網頁前端開發，我的目標是：</p>
    <ul>
        <li>學好 HTML 結構</li>
        <li>掌握 CSS 樣式</li>
        <li>學會 JavaScript 互動</li>
    </ul>

    <p>你可以透過 <a href="https://www.google.com" target="_blank">Google</a> 找到更多關於我的資料。</p>

    <h3>我的最愛</h3>
    <img src="https://via.placeholder.com/150" alt="範例圖片" width="150">

</body>
</html>

四、 給初學者的建議工具

  1. 程式碼編輯器：推薦下載 VS Code (Visual Studio Code)，它有自動補全功能，會讓你寫起來輕鬆很多。

  2. 觀摩他人：在任何網頁按下 F12（或右鍵 > 檢查），你就能看到該網頁背後的 HTML 結構，這是最快的進步方式。


沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)