HTML基礎詳情 - HTML,CSS,html,Java,後端開發肆式青春博客

HTML (超文本標記語言) 是構建所有網頁的基石。它通過一系列標籤來定義網頁的內容和結構，就像搭建房屋的框架一樣。下面這個表格可以幫助你快速把握其核心概覽。

核心方面	要點説明
本質	超文本標記語言，一種用於創建網頁的標準標記語言，而非編程語言。
核心機制	使用標籤（Tag）來“標記”網頁的不同部分（如標題、段落、圖片），從而定義其結構和含義。
文件形式	純文本文件，擴展名為 `.html`或 `.htm`。
學習起點	理解其基本文檔結構和常用標籤是入門的關鍵。

🔧 HTML 文檔結構與常用標籤

基本骨架

每個 HTML 文檔都遵循一個基本結構，這就像是網頁的模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>
    <!-- 所有網頁上能看到的內容都寫在這裏 -->
    <h1>這是一個主標題</h1>
    <p>這是一個段落。</p>
</body>
</html>

<!DOCTYPE html>：聲明文檔類型為 HTML5，確保瀏覽器能正確渲染。
<html>：根元素，包含整個頁面內容，lang屬性建議設置以定義語言。
<head>：頭部，包含頁面的元信息，如字符集 (charset=UTF-8非常重要，用於正確顯示中文)、視口設置（對移動設備友好）、標題（顯示在瀏覽器標籤頁上）等，這些內容通常不會直接顯示在網頁主體中。
<body>：主體，包含所有在瀏覽器中可見的內容，如文本、圖片、鏈接等。

常用內容標籤

在 <body>中，你會使用各種標籤來組織內容：

標籤類別	常用標籤	作用與説明
文本與結構	`h1`- `h6`	標題，重要性從 `h1`到 `h6`遞減。
	`p`	段落，用於包裹一段文字。
	`br`	換行，是一個自閉合標籤（不需要結束標籤）。
	`hr`	水平分割線，用於內容分隔。
	`strong`, `em`	強調，`strong`通常加粗表示重要，`em`斜體表示強調。
媒體內容	`img`	圖像，是自閉合標籤，關鍵屬性包括：`src`（圖片路徑）、`alt`（圖片無法顯示時的替代文本，對無障礙和SEO很重要）。
	`audio`, `video`	音頻和視頻，用於嵌入多媒體內容，`controls`屬性可顯示播放控件。
列表	`ul`/`ol`, `li`	列表，`ul`是無序列表（項目符號），`ol`是有序列表（數字序號），`li`是列表項。
超鏈接	`a`	錨點，用於創建超鏈接。最核心的屬性是 `href`，用於指定鏈接的目標地址（可以是其他網頁、文件或本頁面的某個位置）。`target="_blank"`屬性可以讓鏈接在新標籤頁打開。
佈局容器	`div`, `span`	通用容器，本身無特定語義，主要用於CSS佈局和樣式化。`div`是塊級元素（獨佔一行），`span`是行內元素（僅包裹內容）。

🧩 表格與表單

表格

用於展示行列結構化的數據。

<table border="1"> <!-- border屬性僅為演示，實際樣式建議用CSS控制 -->
  <tr> <!-- 定義一行 -->
    <th>姓名</th> <!-- 定義表頭單元格，通常加粗居中 -->
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td> <!-- 定義標準單元格 -->
    <td>25</td>
  </tr>
</table>

相關標籤：table, tr(行), th(表頭), td(數據) 。

表單

用於收集用户輸入，是實現交互的關鍵。

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">密碼：</label>
  <input type="password" id="password" name="password"><br><br>

  <label>性別：</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label><br><br>

  <input type="checkbox" id="subscribe" name="subscribe" checked>
  <label for="subscribe">訂閲新聞</label><br><br>

  <input type="submit" value="提交">
</form>