例题来源: 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 等事件属性作为挂载点（函数名按题干）。