二、HTML文檔結構詳解詳情 - 前端 SouthRosefinch 博客

2.1 html基礎入門
- 2.1.1 標籤、元素與屬性
- 2.1.2 基礎語法
- 2.1.3 文檔模式
2.2 文檔核心骨架
- 2.2.1 DOCTYPE聲明與作用
- 2.2.2 <html>根元素與lang屬性
- 2.2.3 <head>頭部
- 2.2.4 <body>主體
- 2.2.5 註釋與代碼可讀性
2.2 頭部head元素詳解
- 2.2.1 <title>元素與SEO基礎
- 2.2.2 <meta>元數據詳解
- 2.2.3 引入外部資源
- 2.2.4 <base>元素基準鏈接
2.4 HTML元素與全局屬性簡介
- 2.4.1 主體結構元素
- 2.4.2 非主體結構元素
- 2.4.3 全局屬性

CSDN: https://blog.csdn.net/South_Rosefinch/article/details/158811336

2.1 html基礎入門

2.1.1 標籤、元素與屬性

標籤：標籤是HTML中最基礎的標記符號，用於告知瀏覽器內容的類型。它們由尖括號 <和 >包裹。標籤主要分為兩種形式：
- 成對標籤：由開始標籤和結束標籤組成，用於包裹內容。例如 <p>是開始標籤，</p>是結束標籤。
```
<元素名稱>要控制的元素</元素名稱>
```
- 單獨標籤（或自閉合標籤）：這類標籤無需包裹內容，也沒有結束標籤。例如用於插入圖像的 <img>標籤，用於換行的 <br>標籤。在現代HTML5中，通常直接寫作 <img>、<br>，其末尾的斜槓 /可以省略。
屬性：屬性為標籤提供額外的信息或配置，總是被放置在開始標籤或單獨標籤內部。
- 其基本語法為 名稱=“值”。例如，在鏈接標籤 <a href=“https://example.com”>中，href就是屬性名，其值指明瞭鏈接的目標地址。
href是 “hypertext reference”（超文本引用）的縮寫，其唯一且確定的作用就是為 <a>（錨點/鏈接）標籤指定目標 URL 地址。瀏覽器在解析到 href屬性時，會嚴格按照標準處理其值，用於導航。
元素：一個完整的HTML元素通常由 開始標籤 + 內容 + 結束標籤 共同構成。元素是網頁內容和結構的實際承載單位。
- 對於成對標籤，元素即從開始標籤到結束標籤的所有部分。例如 <p>這是一段文本。</p>就是一個完整的段落元素。
- 對於單獨標籤，元素就是標籤本身及其屬性。例如 <img src=“photo.jpg”>就是一個圖像元素。

簡單説，標籤是語法符號，而元素是由標籤（及內容）定義的一個完整結構。

2.1.2 基礎語法

書寫HTML時需要遵循以下幾個基礎的語法規則，以確保代碼被瀏覽器正確解析和呈現。

（1）正確嵌套

當使用多個成對標籤時，它們必須像“套娃”一樣被正確地嵌套。核心原則是：後開始的標籤必須先閉合。

正確示例：<p>這是<strong>加粗</strong>的文字。</p>

<strong>：表示內容本身很重要，瀏覽器默認將其顯示為加粗。
<b>：僅表示視覺上加粗，沒有語義上的重要性。

（2）自合標籤的寫法

對於沒有結束標籤的元素（如圖像<img>、換行<br>），在現代HTML5標準中，直接使用單個標籤即可，無需斜槓。早期<img />或<br />的寫法源於XHTML，在HTML5中已被簡化。

HTML5標準寫法：<img src="photo.jpg">， <br>

（3）小寫約定

雖然HTML本身不區分標籤和屬性名的大小寫，但行業通行的最佳實踐是全部使用小寫字母。這能極大提升代碼的規範性和可讀性，是專業開發的必備習慣。

推薦：<body>， <div class="header">
不推薦：<BODY>， <DIV CLASS="header">

2.1.3 文檔模式

為了正確處理不同時代的網頁代碼，瀏覽器內置了不同的文檔渲染模式。模式決定了瀏覽器如何解析HTML和CSS，尤其是如何處理與標準不符的舊代碼。瞭解這些模式，能幫助我們理解為何一個簡單的聲明如此重要。

主要渲染模式簡介:

瀏覽器主要存在三種渲染模式：

怪異模式
- 行為：瀏覽器會模擬1990年代舊瀏覽器（如Internet Explorer 5）的非標準行為進行渲染。
- 問題：此模式下，CSS的盒模型、樣式計算等與現代標準存在顯著差異，導致頁面佈局在現代瀏覽器中表現不可預測、難以控制。
準標準模式
- 行為：幾乎遵循標準模式，但保留了少量舊式瀏覽器的處理方式（主要涉及表格和圖像的垂直間距）。
- 定位：它是向完全標準過渡的中間模式，現已很少需要專門關注。
標準模式
- 行為：瀏覽器將嚴格按照HTML與CSS的現行規範來渲染頁面。
- 目標：此模式能最大程度確保頁面在不同瀏覽器中擁有一致的佈局和樣式表現，是現代網頁開發的唯一目標模式。

<!DOCTYPE>聲明位於HTML文檔的最開頭，它不是一個HTML標籤，而是一個給瀏覽器的指令，專門用於觸發所需的文檔渲染模式。<!DOCTYPE html>指示瀏覽器使用標準模式（或稱“無怪異模式”）來渲染頁面。

2.2 文檔核心骨架

2.2.1 DOCTYPE聲明與作用

（1）DOCTYPE聲明

代碼：<!DOCTYPE html>

作用：這是文檔的第一行，不是一個HTML標籤，而是一個給瀏覽器的指令。它明確告知瀏覽器此文檔遵循 HTML5 標準。瀏覽器據此決定使用標準模式來解析和顯示頁面。省略或錯誤書寫它，可能導致瀏覽器進入“怪異模式”，引發不可預知的佈局和樣式錯誤。

深入理解“html”：聲明中的 html 是一個文檔類型定義（DTD）標識，其核心作用是指定文檔的標記語言類型為HTML。HTML5將此聲明極致簡化為<!DOCTYPE html>，寓意“使用標準的HTML”，這與早期版本複雜冗長的聲明形成鮮明對比。此聲明與文件擴展名無關，是所有HTML文檔的必備開頭。

（2）關於文件擴展名 .html與 .htm：

網頁文件通常以 .html或 .htm作為擴展名，兩者在功能上沒有任何區別，任何現代瀏覽器和Web服務器都能正確識別和處理。

起源差異：
- .html：是“HyperText Markup Language”的完整縮寫，是標準且被廣泛推薦的擴展名。
- .htm：源於早期DOS和Windows 3.x等操作系統對文件擴展名只能使用3個字符的限制。為了兼容這些系統，便產生了 .htm這個簡稱。
現狀與建議：
- 如今，操作系統早已支持長文件名，但 .htm仍被沿用，主要是出於歷史習慣和部分用户的偏好。
- 在實際使用中，兩者完全等價。選擇一個並保持一致即可。
- 通用建議是優先使用 .html，因為它更完整、更清晰地表達了文件性質，也是絕大多數項目和教程的默認選擇。

2.2.2 <html>根元素與lang屬性

<html>元素是整個HTML文檔的“總容器”或“根元素”，文檔中所有其他元素（包括 <head>和 <body>）都必須嵌套在它的內部。它是文檔樹的起點。

其 lang屬性用於聲明文檔內容的主要使用語言，是提升網頁可訪問性和國際化支持的關鍵。

lang屬性的核心價值與用法：

語法：lang=”語言代碼“。語言代碼通常遵循 ISO 語言代碼-國家/地區代碼 的格式。
- zh-CN：簡體中文（中國）
- zh-TW：繁體中文（台灣地區）
- en-US：英語（美國）
- en-GB：英語（英國）
- ja：日語（可省略地區代碼）
重要作用：
- 輔助技術：屏幕閲讀器等工具根據 lang屬性切換髮音規則和語音庫，確保能正確“讀出”內容（例如，對中文和英文使用不同的發音引擎）。
- 搜索引擎優化：幫助搜索引擎識別頁面語言，以便在相應的語言搜索結果中正確索引和呈現。
- 瀏覽器功能：瀏覽器可根據此屬性提供翻譯建議、應用正確的引號樣式，或推薦符合語言的字體。
- 樣式控制：CSS可以通過 :lang()偽類為不同語言的文本應用特定的樣式。

最佳實踐：始終為 <html>元素添加準確、具體的 lang屬性。對於多語言網站，甚至可以在頁面內不同段落使用 lang屬性（如 <span lang=”en“>Hello</span>）進行更細粒度的標註。

2.2.3 <head>頭部

<head>元素是HTML文檔的配置與信息中心，專門用於承載不直接顯示在頁面上的所有元信息。它不包含任何用户可見的內容（如文字、圖片），而是定義了頁面的各類“幕後”屬性、關聯資源及行為指令。

簡單來説，<head>決定了瀏覽器和搜索引擎“如何看待”這個頁面，併為頁面的呈現和執行提供必要的設置。

其內部主要組織和包含以下幾類關鍵信息：

元數據：通過 <meta>標籤定義頁面的基礎信息，如字符編碼、視口設置、頁面描述等。
文檔標題：通過 <title>標籤定義，顯示在瀏覽器標籤頁和搜索結果中。
外部資源鏈接：通過 <link>標籤關聯外部文件，如控制樣式的CSS、網站圖標等。
腳本：通過 <script>標籤直接嵌入或鏈接JavaScript代碼。

簡單比喻：<head>就像一本書的封面、版權頁和目錄——它不構成故事正文，但定義了書的標題、作者、出版社、目錄結構等關鍵信息，指引你如何閲讀和使用這本書。

關於 <head>內部各元素的詳細參數與用法，將在下一節（2.3 頭部 <head>元素詳解）中具體展開。

2.2.4 <body>主體

<body>元素是文檔可見內容的唯一容器。用户在瀏覽器窗口內看到、聽到以及與之交互的一切——文本、圖片、鏈接、按鈕、視頻、音頻、表格、表單等——都必須放置在此。

<body>的核心特點與內容：

可見性：<body>內的所有內容（除了一些通過CSS特意隱藏的元素）默認都會在瀏覽器視口中以某種形式呈現。
結構化與語義化：現代HTML鼓勵在 <body>內使用語義化標籤來構建清晰的結構，例如：
- <header>：頁眉。
- <nav>：主導航。
- <main>：頁面主要內容，每個頁面應只有一個。
- <article>：獨立可分配的內容塊（如博客文章）。
- <section>：文檔中的通用章節。
- <aside>：側邊欄等附屬內容。
- <footer>：頁腳。
交互性：所有的用户交互，如點擊、輸入、滾動等，都發生在 <body>所包含的元素上。

2.2.5 註釋與代碼可讀性

（1）註釋的語法

HTML註釋以結束，註釋內容可以放在單行或多行中：

<!-- 這是一個單行註釋 -->

<!--
  這是一個
  多行註釋
  常用於解釋複雜結構
-->

註釋中的內容不會被瀏覽器渲染顯示，但會在查看頁面源代碼時可見。

（2）註釋的核心價值

代碼解釋：説明某段代碼的意圖、邏輯或特殊處理原因。
區塊劃分：在大型HTML文件中標記主要結構區塊，提高導航效率。
調試輔助：臨時禁用某段代碼而不刪除，便於調試和測試。
團隊協作：為其他開發者（包括未來的自己）提供上下文説明。

（3）註釋的最佳實踐

解釋"為什麼"，而非"是什麼"：好的代碼本身應該清晰表達"是什麼"，註釋應重點説明"為什麼這麼做"。

<!-- 不推薦：重複代碼內容 -->
<!-- 這裏是一個標題 -->
<h1>產品介紹</h1>

<!-- 推薦：解釋特殊邏輯 -->
<!-- 使用h1而非h2，因為這是頁面主要標題，對SEO很重要 -->
<h1>產品介紹</h1>

標記重要區塊：在大型文檔中，用註釋標記主要部分的開始和結束。

<!-- 產品列表開始 -->
<section class="product-list">
    <!-- 產品項 -->
    <article class="product-item">...</article>
    <article class="product-item">...</article>
</section>
<!-- 產品列表結束 -->

使用TODO和FIXME標記：標明需要後續處理的問題。

<!-- TODO: 這裏需要添加搜索功能 -->
<div class="search-placeholder">搜索功能開發中</div>

<!-- FIXME: 移動端佈局需要調整 -->
<div class="responsive-layout">...</div>

保持註釋更新：當代碼修改時，必須同步更新相關注釋，避免"殭屍註釋"誤導他人。

（4）提升代碼可讀性的其他技巧

除了註釋，以下習慣也能顯著提升HTML代碼的可讀性：

一致的縮進與格式

使用空格（推薦2個或4個）而非Tab進行縮進
子元素相對於父元素縮進一級
較長的屬性值可以換行對齊

<!-- 良好的縮進示例 -->
<nav class="main-nav">
    <ul>
        <li><a href="/home">首頁</a></li>
        <li><a href="/products">產品</a></li>
        <li>
            <a href="/about"
               class="active"
               data-section="about">關於我們</a>
        </li>
    </ul>
</nav>

語義化元素與有意義的命名
- 優先使用語義化標籤（<header>, <nav>, <main>, <article>等）
- 為id和class賦予描述性名稱
- 避免使用表現性名稱（如.red-text），使用功能性名稱（如.error-message）

適當的空白行與分組

在邏輯相關的代碼塊之間添加空白行
將相關元素分組，使結構更清晰

<!-- 頁面頭部 -->
<header>...</header>

<!-- 主要內容區 -->
<main>
    <!-- 文章區 -->
    <article>...</article>

    <!-- 側邊欄 -->
    <aside>...</aside>
</main>

<!-- 頁腳 -->
<footer>...</footer>

屬性順序一致性
- 保持屬性的書寫順序一致，建議順序：class→ id→ name→ data-*→ 其他屬性
- 布爾屬性（如disabled, required）放在最後
```
<input type="text"
       class="form-control"
       id="username"
       name="username"
       data-validation="required"
       required>
```

（5）避免的註釋陷阱

過度註釋：不要為顯而易見的代碼添加註釋
過期註釋：及時刪除不再相關的註釋
情緒化註釋：避免在註釋中添加個人情緒或無關信息
註釋掉大段代碼：如需保留舊代碼，應使用版本控制系統而非註釋

2.2 頭部head元素詳解

2.2.1 <title>元素與SEO基礎

代碼: <title>頁面標題</title>

作用: 定義瀏覽器標籤頁或窗口標題欄中顯示的文本。這是用户體驗和搜索引擎優化（SEO）的基石。

核心價值:

用户體驗：幫助用户在多個打開的標籤頁中快速識別您的頁面。
搜索引擎結果：是搜索結果列表（SERP）中最醒目、可點擊的藍色鏈接標題，直接影響點擊率。
書籤默認名：當用户收藏頁面時，此標題常用作默認書籤名。

最佳實踐：標題應簡潔、具有描述性，幷包含核心關鍵詞。建議採用“頁面核心主題 - 網站/品牌名”的格式，例如：<title>HTML頭部元素詳解 - Web開發指南</title>。

2.2.2 <meta>元數據詳解

meta 作前綴則表達“變化”或“超越”的語義，構成metadirectory（元目錄）、meta-key（元鍵）
charset n. 字符集。name n. 名字。content n. 內容
viewport n. 電腦屏幕的視口。description n. 描述。keywords n. 關鍵詞

字符集聲明 (必備)：
```
<meta charset="UTF-8">
```
必須置於 <head>區域的最前面（通常緊隨 <head>開始標籤之後）。它告訴瀏覽器使用 UTF-8 字符編碼來解碼文件，這是支持全球絕大多數文字（包括中文、表情符號）並避免亂碼的關鍵。
視口設置 (移動端必備)：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
這是實現響應式網頁設計的核心指令，控制移動端瀏覽器的視口行為。
- width=device-width：指示視口寬度應與設備屏幕寬度一致。
- initial-scale=1.0：設置頁面初始縮放級別為1（即不縮放）。
- 沒有此聲明，網站在移動設備上通常會顯示為縮小的桌面版，導致體驗極差。
頁面描述 (強烈推薦)：
```
<meta name="description" content="這是一個關於HTML head元素用法的詳細教程頁面，涵蓋title、meta、link等核心標籤。">
```
此描述內容常被搜索引擎用作搜索結果標題下方的摘要。一個準確、吸引人的描述能有效提升點擊率。
關鍵詞 (瞭解即可)：
```
<meta name="keywords" content="HTML, head, meta, title, 教程">
```
注意：此標籤過去用於向搜索引擎提示頁面主題關鍵詞。如今，所有主流搜索引擎的排名算法已基本不再使用此標籤，因此無需花費精力優化它。

2.2.3 引入外部資源

link v. 連接。
rel屬性用於定義當前文檔與所鏈接資源之間的關係，可以視為relationship（n.關係，關聯）的縮寫
style n. 方式，樣式。sheet n.工作表。stylesheet n. 樣式表。

（1）引入CSS樣式表：

<link rel="stylesheet" href="css/style.css">

<link>標籤定義當前文檔與外部資源的關係。rel="stylesheet"指明鏈接的是層疊樣式表，href屬性指定樣式表文件的路徑。樣式表通常在此處引入，以便頁面加載時立即應用樣式。

（2）引入JavaScript腳本：

<script src="js/main.js"></script>

傳統/推薦位置：將 <script>標籤放在 <body>結束標籤（</body>）之前。因為腳本的下載和執行會阻塞HTML的解析和頁面的渲染，放在最後可確保用户先看到已渲染的頁面內容。

放置於 <head>的優化：若必須將腳本放在 <head>中，應使用以下屬性控制其行為，避免阻塞：

async：腳本異步下載，下載完成後立即執行，執行時會阻塞渲染。適用於獨立、不依賴DOM或其他腳本的庫（如統計分析代碼）。
defer：腳本異步下載，但會延遲到文檔解析完成後、DOMContentLoaded事件前按順序執行。適用於需要操作DOM或依賴其他腳本的情況。

asynchronous a. 異步的。defer v. 延期。

2.2.4 <base>元素基準鏈接

代碼：

<base href="https://www.example.com/path/" target="_blank">

作用：

href屬性：為頁面上所有的相對URL（如圖片的 src、鏈接的 href）設置一個統一的基礎地址。例如，設置基礎地址後，一個鏈接寫為 <a href="contact.html">，其實際指向將是 https://www.example.com/path/contact.html。
target屬性：為頁面上所有未明確指定 target的鏈接設置默認的打開目標（如 _blank在新標籤頁打開）。

重要警告：此元素影響力是全局的，一旦使用，會改變頁面內幾乎所有鏈接和資源引用的行為，且通常難以覆蓋。因此，在大多數項目中並不推薦使用，僅在特定場景（如靜態頁面打包）下由構建工具謹慎處理。

target n. 目標。

2.4 HTML元素與全局屬性簡介

這裏列舉一些常用的標籤和簡要描述，詳細會在後續介紹，或者參考網址：

HTML 參考 - HTML（超文本標記語言） | MDN

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference

2.4.1 主體結構元素

主體結構元素用於構建HTML文檔的整體框架和主要內容區域，它們具有明確的語義含義，能清晰地表達文檔的結構。

文檔根容器
- <html>：整個HTML文檔的根元素，所有其他元素都包含在其中。
文檔頭部
- <head>：包含文檔的元信息（metadata），如標題、字符編碼、樣式錶鏈接等，不直接顯示在頁面中。
文檔主體
- <body>：包含所有在瀏覽器中可見的內容，如文本、圖片、鏈接、表單等。
主要內容區塊元素
- <header>：表示頁面或某個區塊的頁眉，通常包含logo、導航、標題等。
- <hgroup>：用於將一組連續的標題元素（如 <h1>到 <h6>）及其子標題（如副標題、標語）包裹成一個邏輯上的整體標題塊。
- <nav>：定義導航鏈接的區塊，將頁面重定向到其他頁面或該頁其他部分，如主導航菜單、麪包屑導航等。
- <main>：表示文檔的主要內容，每個頁面應該只有一個<main>元素。
- <article>：表示一個獨立、完整、可獨立分配或可重複使用的內容塊，如博客文章、新聞報道、論壇帖子等。
- <section>：表示文檔中的一個通用獨立區塊，通常包含一個標題，用於對相關內容進行分組。
- <aside>：表示與頁面主內容間接相關的部分，通常顯示為側邊欄、標註框、廣告等。
- <footer>：表示頁面或某個區塊的頁腳，通常包含版權信息、聯繫方式、相關鏈接等。
分組與內容元素
- <div>：通用的內容容器，沒有特定語義，用於樣式化或腳本操作。
- <h1>-<h6>：六級標題，<h1>級別最高，通常一個頁面只有一個<h1>。
- <p>：表示一個段落。
- <ul>/<ol>/<li>：無序列表/有序列表/列表項。
- <dl>/<dt>/<dd>：定義列表/定義術語/定義描述。

2.4.2 非主體結構元素

非主體結構元素用於處理文本格式化、嵌入內容、表單交互等細節部分，它們豐富了文檔的內容和交互性。

文本級語義元素
- <a>：超鏈接，用於創建到其他頁面、位置或資源的鏈接。
- <stong>：表示內容的重要性，通常顯示為粗體。
- <em>：表示強調的文本，通常顯示為斜體。
- <span>：通用的行內容器，沒有特定語義，用於對行內元素進行樣式化或腳本操作。
- <br>：換行符，在文本中強制換行。
- <hr>：水平分割線，表示主題或段落的分隔。
- <time>：用於定義日期、時間或持續時間。它使機器（搜索引擎、瀏覽器、輔助工具等）能夠明確識別和解析時間信息，而不僅僅是人類可讀的文本。
嵌入內容元素
- <img>：嵌入圖像，通過src屬性指定圖像源。
- <video>/<audio>：嵌入視頻/音頻內容。
- <iframe>：內聯框架，用於在當前文檔中嵌入另一個HTML文檔。
- <canvas>：通過JavaScript繪製圖形、動畫等。
- <svg>：使用SVG（可縮放矢量圖形）語法繪製圖形。
表格元素
- <table>：定義表格。
- <tr>：表格行。
- <th>/<td>：表頭單元格/表格數據單元格。
- <thead>/<tbody>/<tfoot>：表格頭部/主體/腳部。
表單元素
- <form>：定義用户輸入表單，用於收集和提交用户數據。
- <input>：多種類型的輸入控件，如文本框、複選框、單選按鈕等。
- <textarea>：多行文本輸入框。
- <select>/<option>：下拉選擇框/選項。
- <button>：可點擊的按鈕。
- <label>：為表單控件定義標籤，提升可訪問性。

2.4.3 全局屬性

全局屬性是可用於所有HTML元素的屬性，無論它們屬於哪種類別，它們提供了通用的功能和控制。

核心標識屬性
- id：為元素指定在文檔中唯一的標識符。常用於CSS樣式定位、JavaScript操作或錨點鏈接。
- class：為元素指定一個或多個類名，用於CSS樣式化或JavaScript選擇。多個類名用空格分隔。
內容與語言屬性
- style：直接在元素上定義內聯CSS樣式（不推薦大量使用，應優先使用外部樣式表）。
- title：提供元素的額外提示信息，通常鼠標懸停時以工具提示形式顯示。
- lang：定義元素內容的語言代碼（如zh-CN表示簡體中文）。
- dir：設置文本方向，ltr（從左到右）或rtl（從右到左）。
交互與可訪問性屬性
- tabindex：控制元素通過Tab鍵獲取焦點的順序。值為數字，表示順序；-1表示可通過腳本聚焦，但不在Tab順序中；0表示按文檔順序。
- accesskey：為元素指定一個快捷鍵（鍵盤快捷鍵），用於快速聚焦或激活元素。
- contenteditable：布爾屬性，設置元素內容是否可被用户編輯。
- draggable：布爾屬性，設置元素是否可被拖動（用於拖放API）。
- hidden：布爾屬性，表示元素尚未或不再相關，瀏覽器應隱藏該元素。
數據與事件屬性
- data-\*：自定義數據屬性，允許開發者存儲與元素相關的額外信息。*可替換為任何名稱（如data-user-id、data-price）。這些數據可通過JavaScript輕鬆訪問。
- 事件處理屬性：如onclick、onmouseover、onkeydown等，用於直接在HTML中定義JavaScript代碼以響應特定事件（現代開發中更推薦通過JavaScript添加事件監聽器）。
布爾屬性

布爾屬性表示"有/無"的狀態，有該屬性即為真，無需賦值。常見的布爾屬性包括：
- disabled：禁用表單控件或按鈕。
- readonly：設置輸入字段為只讀。
- required：設置表單字段為必填項。
- checked：預選中複選框或單選按鈕。
- selected：預選中下拉列表中的選項。
- <spellcheck>：瀏覽器是否進行拼寫檢查。

全局屬性使用示例：

<div id="main-container" 
     class="container primary" 
     title="主要內容區域"
     data-page="home"
     tabindex="0">
  <p lang="en" dir="ltr">This is an example.</p>
  <input type="text" required disabled>
  <button onclick="alert('Clicked!')">點擊我</button>
</div>

總結：

主體結構元素構建文檔骨架，賦予內容語義和層次。
非主體結構元素填充內容細節，實現豐富的內容呈現和用户交互。
全局屬性為所有元素提供通用的控制和信息存儲能力。

三者協同工作，共同構建出結構清晰、內容豐富、交互性強的現代網頁。掌握這些基礎是深入HTML學習的關鍵第一步。

SouthRosefinch 博客

SouthRosefinch 博客

博客 / 詳情