一路成長：HTML 基本說明

 

作者 - chatGPT

HTML：網站的骨架

網頁的基本結構

HTML（超文本標記語言）是構建網頁的基礎，它確定了網站的結構和內容。當一個網頁只包含 HTML 結構時，它會展示所有元素，但缺乏額外的樣式或互動功能。這意味著文本、鏈接、圖片等會以瀏覽器的預設樣式顯示，沒有額外的顏色、排版或動畫效果。這就是網站最基本的形態。

HTML 元素

HTML 的核心是一系列元素，由開始標記和結束標記定義，如 <div></div>。有些標記，如 <img/>，是自閉合的。這些元素具有各種屬性，用以描述它們的功能和特性。

元素類型

Block Elements：這類元素通常佔據整個容器的寬度，形成一個“塊”，並在視覺上從新行開始和結束。例如：<div>， <p>， <h1>～<h6>。

Inline Elements：這些元素不會導致文本換行，通常出現在段落中。例如：<span>，<a>，<img>。

Inline-Block Elements：結合了 inline 和 block 兩者特性的元素。它們不會導致換行，但可以設置寬度和高度。例如：<button>，<input>。

屬性（Attributes）

屬性提供了關於 HTML 標記的更多信息，出現在開始標記中，通常以名稱/值對的形式，如 name="value"。屬性用於指定樣式、指向資源、設定元素行為等。

常用 HTML 標籤

• <p>: 段落 (block)

• <ul>, <ol>, <li>: 無序/有序列表及其項目 (block)

• <span>: 用於組織內聯元素，無語意 (inline)

• <strong>, <em>: 文本強調 (inline)

• <form>: 表單，用於收集用戶輸入 (block)

• <table>, <tr>, <td>: 表格及其相關元素 (block)

• <header>, <footer>: 頁面或章節的頭部和尾部 (block)

• <nav>: 導航鏈接的部分 (block)

• <article>: 獨立的內容區塊 (block)

常用 HTML 屬性

• class: 指定 CSS 類別

• id: 唯一標識符，用於 CSS 和 JavaScript

• src: 用於 <img> 標籤，指定圖片來源

• href: 用於 <a> 標籤，指定超鏈接目標

• alt: 用於 <img> 標籤，提供圖片的替代文字

• type: 用於 <input> 標籤，指定輸入類型（如 text, password, submit）

• placeholder: 用於 <input> 和 <textarea>，提供未輸入內容時的提示文字

• value: 用於 <input> 標籤，指定輸入控件的初始值

• name: 用於表單元素，定義表單提交時的名稱

這些基本元素和屬性是學習網頁開發的基石，理解它們對於建立有效且功能豐富的網站至關重要。