計算機二級 Web —— HTML 全面精講（含真題實戰）

例題來源: web.code2ji.cn
在這里插入圖片描述

0. HTML 基礎與全局常識

0.1 HTML 是什么

HTML（HyperText Markup Language）是網頁結構語言，用“標簽”描述內容、層次與含義。

0.2 基本文檔骨架（必須熟練）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>頁面標題</title>
</head>
<body>可見內容……
</body>
</html>

0.3 全局屬性（多數標簽可用）

id（唯一標識，評分腳本常靠它/或 name）
class（樣式分組）
title（懸浮提示）
lang（語言，如 zh-CN）
dir（文字方向：ltr/rtl）
hidden（隱藏）
tabindex（鍵盤 Tab 順序）
兼容考試：某些舊題仍用內聯屬性如 align、bgcolor，按題干寫即可。

1. 文檔與 `<head>` 區域標簽

1.1 `<!DOCTYPE html>`

作用：聲明 HTML5，避免“怪異模式”。
易錯：漏寫導致渲染差異、考試評分點丟分。

1.2 `<html>`

根元素；常用屬性：lang="zh-CN"。
示例：

<html lang="zh-CN">…</html>

1.3 `<head>`

放不直接顯示的信息：編碼、標題、描述、樣式、圖標等。

1.4 `<meta>`

常考：
- 字符集：<meta charset="UTF-8">（防中文亂碼）
- 視口：<meta name="viewport" content="width=device-width, initial-scale=1">
- 描述：<meta name="description" content="一句話概述">
舊題可能出現：http-equiv="refresh" 自動刷新/跳轉（了解即可）。

1.5 `<title>`

瀏覽器標簽頁標題；務必與題意匹配。

1.6 `<link>`

外鏈資源（常見是 CSS、圖標）：

<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">

1.7 `<style>`

內聯樣式容器（考試頻繁給出）：

<style>table { border-collapse: collapse; }
</style>

1.8 `<base>`（了解）

設置文檔內相對 URL 的基準：

<base href="https://example.com/">

2. `<body>` 與文本排版標簽

2.1 `<body>`

頁面可見內容都在這里。

2.2 標題 `<h1> ~ <h6>`

含義：層級標題，<h1> 最重要、全頁建議僅一個。
示例：

<h1>二級 Web 復習提綱</h1>
<h2>一、HTML 基礎</h2>

2.3 段落 `<p>`

自動上下留白；不要用一堆 <br> 代替段落。

<p>這是一個標準段落。</p>

2.4 換行 `<br>` 與水平線 `<hr>`

行一<br>行二
<hr>

<br> 行內換行；<hr> 主題分隔線。

2.5 內聯文本語義（考試常見）

<strong> 強調、語義加權（比 <b> 更推薦）
<em> 語氣強調（斜體語義）
<b> 粗體（無語義）
<i> 斜體（無語義）
<u> 下劃線（注意：考試可能出現，但不建議濫用）
<mark> 高亮
<small> 較小字體
<sup> 上標、<sub> 下標
<code> 行內代碼、<kbd> 鍵盤、<samp> 程序輸出、<var> 變量
<abbr title="超文本標記語言">HTML</abbr> 縮略詞
<q> 行內引用、<blockquote> 塊級引用（常與 cite 屬性結合）

2.6 預格式化 `<pre>` 與代碼塊 `<pre><code>`

<pre><code>&lt;h1&gt;標題&lt;/h1&gt;</code></pre>

保留空格與換行（展示代碼時用得上）。

2.7 `<address>`（聯系信息）、`<time>`（時間語義）

<address>作者：某某 | 郵箱：test@example.com</address>
<time datetime="2025-08-13">2025年8月13日</time>

3. 結構與語義化分區

3.1 容器：`<div>`（塊級）與 `<span>`（行內）

布局/分組常用；有語義更優先用語義標簽。

3.2 語義分區（HTML5 常考識別）

<header> 頁眉/區塊頭部
<nav> 導航
<main> 主內容（頁面中僅一個）
<section> 主題分段
<article> 獨立成文的內容（文章、卡片）
<aside> 側欄/補充
<footer> 頁腳
<figure> 獨立媒體單元，配 <figcaption> 說明

<figure><img src="bmi.png" alt="BMI區間圖"><figcaption>BMI 區間說明（示意）</figcaption>
</figure>

4. 列表標簽

4.1 無序列表 `<ul>` 與有序列表 `<ol>`

<ul><li>HTML</li><li>CSS</li>
</ul><ol><li>理解題目</li><li>按步驟作答</li>
</ol>

<li> 只能直接作為 <ul>/<ol> 子元素（易錯）。
<ol> 常用屬性：start="3" 起始編號；type="A|a|I|i|1" 編號樣式（舊式，了解）。

4.2 定義列表 `<dl> / <dt> / <dd>`

<dl><dt>BMI</dt><dd>體重(kg)/身高(m)^2</dd>
</dl>

5. 超鏈接與錨點

5.1 `<a>`

核心屬性：href、target="_blank" 新開、download 下載、rel="noopener" 安全
郵件/電話：mailto:test@example.com、tel:010-12345678

<a href="#bmi">跳到 BMI 表單</a>
<a id="bmi"></a>

5.2 `<base>`（見 1.8）

僅在需要統一相對路徑基準時使用。

6. 圖片與媒體（考試以 `<img>` 最常見）

6.1 `<img>`

核心：src、alt（可訪問與評分要點）、width/height

<img src="bmi.png" alt="BMI 區間圖示" width="240">

6.2 `picture`/`source`（了解）

響應式圖片場景；二級考試罕見。

6.3 `audio`/`video`/`track`（了解）

語法掌握即可，考試主攻結構標簽。

7. 表格家族（高頻且易失分）

7.1 結構標簽

<table> 整表
<caption> 表標題（常設得分點）
<thead> / <tbody> / <tfoot> 分區（便于樣式和語義）
<tr> 行、<th> 表頭單元格、<td> 數據單元格
單元格跨行/列：rowspan / colspan
表頭可加 scope="col|row"（可訪問性加分）

7.2 示例

<table border="1" width="450"><caption>BMI 區間對照表</caption><thead><tr><th scope="col">區間</th><th scope="col">評價</th></tr></thead><tbody><tr><td>≤18.4</td><td>偏瘦</td></tr><tr><td>18.5–23.9</td><td>正常</td></tr><tr><td>24.0–27.9</td><td>超重</td></tr><tr><td>≥28.0</td><td>肥胖</td></tr></tbody>
</table>

7.3 舊式屬性（按題干照寫）

border、cellspacing、cellpadding、bgcolor、align……
現代寫法推薦 CSS，但考試若給舊式屬性，務必原樣寫。

8. 表單家族（重點中的重點）

8.1 `<form>`

常考屬性：action（目標）、method="get|post"、name/id、target、autocomplete="off"、enctype
評分器取值常靠 name（和題干一致是硬性要求）。

8.2 `<label>`

與控件綁定：<label for="height">身高</label> + 控件 id="height"
點擊文字聚焦輸入框，有分！

8.3 `<input>`（高頻類型與屬性）

常見類型：text、password、number、email、url、tel、search、radio、checkbox、file、submit、reset、button、hidden、date、color、range……
高頻屬性：name、value、placeholder、required、min / max / step、maxlength、checked、readonly、disabled、size

<input name="weight" type="number" placeholder="70" min="1" max="500" step="0.1" required>

8.4 其他控件

<textarea rows="4" cols="30">多行文本</textarea>
<select> + <option> / <optgroup>
<button type="submit|reset|button">（可替代 input 按鈕）
<fieldset> + <legend>（分組，有語義與樣式）
<datalist>（輸入建議）、<meter>（刻度量表）、<progress>（進度）、<output>（計算結果占位——展示而非邏輯）

8.5 常見扣分

題干指定的 name/id 改錯或漏寫。
label for 與控件 id 未對應。
必填項漏 required（若題干要求）。
單選一組 name 不一致導致不互斥。

9. 嵌入與外部內容（了解）

9.1 `<iframe>`

內嵌外部頁面：src、width、height、name
舊題偶見。

9.2 `<embed>` / `<object>` / `<param>`

舊式多媒體/插件嵌入（了解即可）。

10. 兼容性與舊式寫法（遇到給分點就按題干來）

<center>、<font>、<big>、<marquee> 等已廢棄，但老題仍出現。
align、bgcolor、bordercolorlight、bordercolordark 等舊屬性同理。
原則：題干給什么就寫什么；日常項目則用 CSS 現代寫法。

11. 注釋與實體

HTML 注釋：（考試常提示“在此處添加代碼”）
必會實體：< <、> >、& &、  空格

12. 實戰：BMI 表單（純 HTML 結構版，便于練習表格+表單）

將以下代碼粘貼到編輯器（比如 web.code2ji.cn），點擊調試即可看到考試風格的渲染。此版不含 JS，專注標簽與結構；若題干要求自動計算，再按題干補 JS。

<h2 id="bmi">BMI 計算表單</h2>
<form name="BMI" method="post" action="#"><table border="1" width="450"><caption>基本信息</caption><tr><th><label for="weight">體重(kg)</label></th><th><label for="height">身高(cm)</label></th><th><label for="bmi">健康值</label></th><th><label for="comment">電腦評價</label></th><th>操作</th></tr><tr><td><input id="weight" name="weight" type="text" placeholder="70"></td><td><input id="height" name="height" type="text" placeholder="175"></td><td><input id="bmi" name="bmi" type="text" readonly></td><td><input id="comment" name="my_comment" type="text" size="20" readonly></td><td><input type="button" value="確 定"><input type="reset" value="取 消"></td></tr></table>
</form>

13. 題目還原:BMI 計算器

下面這段是你給的歷年風格題（包含舊式屬性與事件），我們按“**該填什么**”逐空說明（JS 細節不展開，只點出**事件屬性**與**表單字段**對 HTML 的要求）。

題干片段（節選）：

<table border="1" bordercolorlight="#808080" cellspacing="1" bordercolordark="#FFFFFF" ______="#00FFFF" width="450">
…
<td align="center" width="65"><input TYPE="reset" VALUE="取 消" onClick="______(this.form)"></td>
…
<td width="65" ______="changeto('#FF0000')" ______="changeback('white')"><input TYPE="button" VALUE="確 定" onClick="______(this.form)">
</td>

這些空在 HTML 側應這樣理解/填寫：

______="#00FFFF" → bgcolor="#00FFFF"
- 舊式表格背景色屬性，考試常見。現代寫法應當用 CSS background，但按題干寫。
onClick="______(this.form)" （在重置按鈕上） → onClick="ClearForm(this.form)"
- 這是事件屬性（HTML 提供掛載點），函數名由題干給定；你只需確保按鈕寫了 onClick 并保留原樣。
單元格上的 ______="changeto('#FF0000')" 與 ______="changeback('white')"
→ 分別是 onMouseOver="changeto('#FF0000')" 與 onMouseOut="changeback('white')"
- 鼠標懸停/移出事件，舊題常出現大小寫混用（HTML 不區分大小寫）；按題干寫即可。
“確定”按鈕的 onClick="______(this.form)" → onClick="computeform(this.form)"
- 點擊觸發計算。再次強調：HTML 負責事件掛接；函數邏輯屬于 JS。

此外，表單字段的 NAME="bmi"、NAME="my_comment"、NAME="weight"、NAME="height" 等要與題干一字不差，否則評分腳本讀不到值（這點是 HTML 側最容易丟分的地方）。

溫馨提示：把完整題目粘貼進 web.code2ji.cn，點擊“調試”，可以直接看到呈現效果；若你粘貼了腳本，也能用類似考試的評分與解析校驗結果。

14. 復習清單（按題型速記）

文檔骨架：<!DOCTYPE>、<html lang>、<meta charset>、<title>
文本結構：h1~h6、p、br、hr、strong/em、code/pre
語義分區：header、nav、main、section、article、aside、footer、figure/figcaption
列表：ul/ol/li、dl/dt/dd
鏈接與媒體：a、img(alt!)
表格：table、caption、thead/tbody/tfoot、tr/th/td、rowspan/colspan
表單：form(action, method, name)、label for、input（name/required 等）、textarea、select/option、button、fieldset/legend
舊式與事件：bgcolor/align 等舊屬性；onClick/onMouseOver/onMouseOut 等事件屬性作為掛載點（函數名按題干）。