2024-09-02|閱讀時間 ‧ 約 22 分鐘

HTML入門-Day2：基本語法與文檔結構

HTML

基本語法

HTML（HyperText Markup Language）是一種用來建立網頁的標記語言。它包含一系列的標籤，這些標籤告訴網頁瀏覽器如何顯示內容。基本的HTML文檔結構包括以下部分：

<!DOCTYPE html>：聲明文檔類型和版本，這是HTML5的聲明。
<html>：這個標籤包含了整個網頁的內容，是所有其他HTML標籤的容器。
<head>：包含了文檔的元數據（metadata），如編碼、標題、鏈接到樣式表和腳本等。
<title>：指定了網頁的標題，這在瀏覽器標籤上顯示。
<body>：包含了網頁的主要內容，如文字、圖片、視頻等。

一個基本的HTML範例：

<!DOCTYPE html>
<html>
<head>
    <title>我的首頁</title>
</head>
<body>
    <h1>歡迎來到我的網頁</h1>
    <p>這是一個段落。</p>
</body>
</html>

HTML結構類型

HTML文件的基本結構是相對固定的，包含一些核心元素來構建網頁的框架。這些元素確保網頁能在瀏覽器中正確顯示和操作。以下是一些基本的HTML結構及其變體：

標準HTML5結構

這是最常見的HTML5文件結構，適用於大多數現代網頁：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <header>
        <!-- 頭部內容 -->
    </header>
    <nav>
        <!-- 導航連結 -->
    </nav>
    <main>
        <!-- 主要內容 -->
    </main>
    <footer>
        <!-- 頁腳內容 -->
    </footer>
</body>
</html>

簡化結構

對於一些簡單的網頁或初學者的練習項目，可以使用更簡化的結構：

<!DOCTYPE html>
<html>
<head>
    <title>簡單的頁面</title>
</head>
<body>
    <h1>標題</h1>
    <p>段落文字。</p>
</body>
</html>

HTML4 傳統結構

在HTML5成為標準之前，HTML4和XHTML常用的結構略有不同，特別是DOCTYPE和元素使用上的一些區別：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<http://www.w3.org/TR/html4/loose.dtd>">
<html>
<head>
    <title>舊版HTML文檔</title>
</head>
<body>
    <div>
        <h1>歷史標題</h1>
        <p>內容描述。</p>
    </div>
</body>
</html>

HTML5語意化增強結構

為了更好地描述網頁內容和結構，HTML5引入了更多語意化標籤：

<!DOCTYPE html>
<html>
<head>
    <title>語意化結構</title>
</head>
<body>
    <article>
        <header>
            <h1>文章標題</h1>
        </header>
        <section>
            <h2>章節標題</h2>
            <p>內容...</p>
        </section>
        <footer>
            <p>版權信息</p>
        </footer>
    </article>
</body>
</html>

這些結構展示了HTML文件的多種可能形式，從基礎到高級，涵蓋不同需求和技術標準。對於學習和實踐，了解這些結構的差異及其適用情況非常重要。

常見標籤

HTML文檔由各種標籤組成，這些標籤定義了網頁的結構。以下是一些基本而常見的HTML標籤：

<h1>到<h6>：這些標籤用於標題，<h1>是最高層級，通常用於主標題，而<h6>是最低層級。
<p>：用於段落，是最常用的文本標籤。
<a>：用於創建超連結，通過href屬性指向其他網頁或站點。
<img>：用於嵌入圖片，src屬性指定圖片的來源，alt屬性提供圖片內容的文字說明。
<ul>、<ol>、<li>：分別用於無序列表、有序列表和列表項目。

註解

在HTML中添加註解是一種好習慣，可以幫助開發者理解代碼的意圖，而這些註解不會在瀏覽器中顯示。HTML的註解以結束。例如：

<!-- 這是一個註解，它不會在網頁中顯示 -->
<p>這是一個可見的段落。</p>

註解可以放置於HTML的任何位置，用來解釋代碼或臨時禁用代碼。

透過這些基礎知識的介紹，學生可以了解HTML的結構和常用標籤，為進一步學習和實踐打下基礎。

分享至

成為作者繼續創作的動力吧！

討論區

追蹤

HTML入門-Day2：基本語法與文檔結構

基本語法

HTML結構類型

標準HTML5結構

簡化結構

HTML4 傳統結構

HTML5語意化增強結構

常見標籤

註解

作者的相關文章

Michael楊的其他內容

你可能也想看

發表回應

HTML入門-Day2：基本語法與文檔結構

基本語法

HTML結構類型

標準HTML5結構

簡化結構

HTML4 傳統結構

HTML5語意化增強結構

常見標籤

註解

作者的相關文章

Michael楊 的其他內容

你可能也想看

發表回應

Michael楊的其他內容