计算机二级 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><h1>标题</h1></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 计算器
题干片段（节选）：
<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，但按题干写。
- 旧式表格背景色属性，考试常见。现代写法应当用 CSS
-
onClick="______(this.form)"（在重置按钮上） →onClick="ClearForm(this.form)"- 这是事件属性（HTML 提供挂载点），函数名由题干给定；你只需确保按钮写了
onClick并保留原样。
- 这是事件属性（HTML 提供挂载点），函数名由题干给定；你只需确保按钮写了
-
单元格上的
______="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等事件属性作为挂载点（函数名按题干）。