Java Web期末复习：HTML核心知识点与高频考点全解析-代码聚汇网

Java Web期末复习：HTML核心知识点与高频考点全解析

半张老头·2026-09-04·阅读 22 GEO检测（免费）

HTMLJava WebServlet

|难度：普通|阅读约 39 分钟

1. 为什么Java Web复习要先啃HTML

说实话，很多同学在准备Java EE（Java Web）这门课的期末考试时，都会下意识把重心全压在Servlet、JSP、框架这些“看起来像后端”的内容上，觉得HTML嘛，不就是几个标签，考前扫一眼就行。结果真上了考场，反而是在HTML的选择题、读代码题上丢分，有的甚至连最简单的页面结构题都写不全。这不是个别现象，我带过的学生里，栽在HTML上的比例相当高。

这门课叫Java Web，但Web两个字本身就意味着你离不开前端三件套——HTML、CSS、JavaScript。尤其是HTML，它是整个Web应用的骨架。你在Servlet里通过request.getParameter("username")拿到的数据，源头就是HTML表单里那个<input name="username">标签；你JSP页面里所有动态内容的容器，也全是HTML标签。换句话说，HTML不是你Java代码的对手，而是你Java代码的载体。理解不了HTML，后面学JSP、学EL表达式、学MVC，全都是空中楼阁。

这篇文章是我整理的Java Web期末复习系列第三节，专门针对HTML部分做一个完整、应试导向的知识点串讲。我会把HTML里常考的核心概念、标签分类、表单细节、语义化标签以及高频考点一一拆开讲，每一个知识点都会解释清楚“为什么考”“怎么考”“易错点在哪”。不管你是刚开始复习、脑子里一团浆糊，还是已经过了一遍教材、想查漏补缺，这篇文章都能帮你把HTML这部分的分数稳稳攥在手里。

那咱们直接开始。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. HTML文档结构与基础框架考点

很多复习资料会把HTML的知识点罗列成一张又一张的标签表，让你背。背当然要背，但如果只是孤立地背标签，考试时给你一个残缺的HTML文档，让你判断哪里写错了，你照样做不对。因为HTML的核心不在于单个标签，而在于文档的组织结构。

2.1 文档类型声明与版本演进

HTML文档的开头第一行必须是<!DOCTYPE html>，这个声明在HTML5时代已经简化到了极致。老版本的HTML里，DOCTYPE声明又长又难记，比如HTML 4.01的过渡型声明要写一长串DTD的URL，XHTML也类似。到了HTML5，直接一句<!DOCTYPE html>搞定。这个点几乎每次考试都会以选择题或判断题的形式出现，问法通常是“以下哪个是HTML5的文档类型声明”。

为什么需要这个声明？因为浏览器要用它来决定以什么模式来渲染页面。如果没有DOCTYPE，浏览器会进入怪异模式（Quirks Mode），页面渲染的规则跟标准模式差别很大，最典型的就是盒模型的解析方式不同。对于Java Web开发人员来说，你写的页面最终要跑在用户的浏览器里，如果渲染模式不对，你在CSS里调好的样式可能完全错位。所以，考试里如果判断题写着“DOCTYPE声明可以省略”，那这道题一定是错的。

还有一个版本相关的考点：HTML5相比HTML 4.01取消了哪些标签。最典型的是<font>、<center>、<big>这类纯样式标签被废弃，取而代之的是<span>加CSS控制样式。考试如果问“以下哪个标签在HTML5中已被废弃”，看到<font>基本可以直接选。

2.2 html、head、body三大区域的职责划分

一个标准的HTML文档可以拆成三块：<html>是整个文档的根元素，<head>是文档头，<body>是文档主体。这个结构几乎是送分题，但里面有几个容易忽略的细节。

<head>里放的内容不会直接显示在页面上，它承载的是文档的元信息。最常考的是以下几个子标签：

<meta charset="UTF-8">：声明字符编码，这个必须写，否则中文会出现乱码。在Java Web开发里，这一行还跟后端的编码设置有关，如果你页面声明的是UTF-8，而Servlet里用的是request.setCharacterEncoding("GBK")，那用户名里的中文就全乱了。考试有时候会把前端编码和后端编码一起考，考的是你有没有全局意识。
<title>：定义浏览器标签页上显示的标题，同时它也是搜索引擎抓取页面时最重要的信息之一。有些同学会把<title>写到<body>里去，这属于严重的结构错误。
<meta name="keywords" content="...">和<meta name="description" content="...">：用于SEO，考试中只需知道它们属于<head>区域即可。

<body>区域放的是所有用户可见的内容：文本、图片、表格、表单等等。这里有一个常考概念区分：<head>里的内容是为浏览器和搜索引擎服务的，<body>里的内容才是为用户服务的。答题时先判断这个标签的功能是“描述页面信息”还是“展示页面内容”，就能快速区分该放在哪里。

2.3 HTML注释与代码书写规范

注释在HTML里写成，考试会考注释的符号。这里有个易错点：很多同学会把其他语言的注释风格带进来，写成//或者/* */，这在HTML里都是非法的。

此外，HTML的书写规范虽然不是直接考点，但会影响你在读代码题时的判断。规范的HTML应该注意几点：标签要正确嵌套，比如<p>文字<b>加粗</b></p>是合法的，而<p>文字<b>加粗</p></b>就是错误嵌套；属性值建议用双引号括起来；标签名小写（HTML5虽然不区分大小写，但XHTML风格要求小写，考试中统一按小写处理）。这些规范在后面的JSP学习中同样适用，因为JSP页面上嵌的依然是HTML标签，如果写得不规范，Java开发工具做代码检查时会报出一堆警告。

3. 文本、结构标签与文档流核心概念

文本标签是HTML里最基础、考得最多的内容，但也是很多同学的丢分重灾区。原因很简单：标签太多，各自用途不同，有的侧重语义，有的侧重样式，混在一起就容易记串。

3.1 标题标签h1到h6的层级逻辑

<h1>到<h6>是HTML里的六级标题，从大到小。这里的核心考点有两个。

第一个考点是：<h1>在一个页面里理论上只能有一个，因为它代表页面的主标题，多个<h1>会削弱页面语义的清晰度。这个知识点在考试里可能以“优化建议”的形式出现，比如给出一段页面代码，问你其中哪处语义结构不合理，你就要能看出来页面里堆了多个<h1>。

第二个考点是：标题标签自带加粗和换行的视觉效果，但它的本质是语义，不是样式。也就是说，你选<h1>不是因为你想让文字变大变粗，而是因为这段文字确实是这一节的标题。这句话理解透了，才能真正区分标题标签和后面要讲的<b>、<big>等纯样式标签。

3.2 段落、换行、水平线的区别与应用场景

<p>是段落标签，用来包裹一段独立的文本。浏览器在解析<p>时，会自动在段落前后添加一定的外边距，所以多个<p>之间会自然产生间距。<br>是换行标签，它不产生额外间距，只是单纯地让后续内容换到下一行。<hr>是水平线标签，常用来做内容区域的分隔。

这三个标签在一起考，最常见的题型是让你分析某段代码在浏览器里的展示效果。比如下面这段代码：

html复制<p>第一行内容</p>
<p>第二行内容</p>

和另一段：

html复制第一行内容<br>
第二行内容

前者的两行之间会有明显的垂直间距，后者的两行基本是紧紧挨着的。理解了<p>是“块级盒子”而<br>只是“行内换行”，这类题就不会错。

这里要专门提一个考试冷门但工作中常见的坑：<br>在旧式写法里是<br/>，XHTML要求自闭合标签必须写斜杠，HTML5里写不写都合法。如果判断题里说“<br>和<br/>效果完全一样”，从HTML5标准看是对的，但如果拿XHTML标准对照，就必须写<br/>。做题时先看题目默认基于哪个版本标准，一般教材默认HTML5，写不写斜杠都算对。

3.3 块级元素与行内元素的判别方法

这是HTML里最重要的底层概念之一，而且它直接决定了你对CSS的理解深度。考试喜欢给出一堆标签，让你分类哪些是块级、哪些是行内。

块级元素（Block-level）的特点：默认独占一行，宽度默认填满父容器，可以设置宽度和高度，常见的块级元素有<div>、<p>、<h1>到<h6>、<ul>、<ol>、<li>、<table>、<form>。

行内元素（Inline-level）的特点：不会独占一行，多个行内元素可以排在同一行，宽度由内容决定，设置宽高无效，常见的行内元素有<span>、<a>、<b>、<i>、<img>（注意，img是特殊行内元素，它能设置宽高，属于替换元素）、<input>。

考试还特别喜欢考一个标签：<div>和<span>。一句话总结就是：<div>是块级容器，用来做页面布局分块；<span>是行内容器，用来在文本中圈出一段做样式处理。延伸出去还会考到HTML5新增的语义化标签替代<div>的问题，后面专门讲。

3.4 特殊字符转义实体对照表

HTML解析器会把<和>当成标签的边界符号，所以如果你在页面正文里想展示5 < 10这段文字，直接写5 < 10就会出问题，浏览器会尝试把< 10解析成标签。这时必须使用字符实体（Entity）。

常考的字符实体有这些：

显示结果	实体写法	说明
空格（不断行）	` `	多个连续空格在HTML里默认合并成一个，想要多个空格得用它
<	`<`	less than
>	`>`	greater than
&	`&`	ampersand
"	`"`	双引号
©	`©`	版权符号

这几个实体在JSP页面中也会反复用到，尤其是 ，实际开发里经常用它来实现简单的间距控制。

4. 超链接、图片与路径定位核心细节

超链接和图片是HTML里最常用的两个非文本标签，它们的共同特征在于都需要引用外部资源，而引用就一定会涉及路径问题。考试中这个部分除了考属性参数，最喜欢考的就是相对路径和绝对路径的判断。

4.1 超链接a标签的完整属性拆解

<a>标签的核心属性是href，它决定点击链接后跳转的目标。考试常考以下几种href取值：

绝对URL：<a href="https://www.example.com">，跳转到外站。
相对URL：<a href="login.html">，跳转到当前目录下的login.html。
锚点链接：<a href="#section1">，跳转到当前页面中id="section1"的位置。
空链接：<a href="#">，点击不跳转，常用于开发占位。
邮件链接：<a href="mailto:test@example.com">，唤起邮件客户端。
下载链接：HTML5里可以在href指向文件的同时加download属性，提示浏览器下载而不是打开。

另一个高频考点是target属性。_self代表在当前窗口打开，是默认行为；_blank代表在新窗口或新标签页打开。如果你想做“点击当前页面的链接，保留当前页面不动”的效果，就必须写<a href="..." target="_blank">。

还有一个细节容易被忽略：<a>标签的title属性，鼠标悬停时会显示提示文字。它在可访问性上有意义，考试偶尔会在填空题里问“哪个属性用于设置鼠标悬停提示”，答案就是title。

4.2 img标签与图片路径问题

<img>标签有两个必需属性：src（图片资源的路径）和alt（图片加载失败时显示的替代文本）。

alt属性的存在意义经常被考到，它不只是给读屏软件用的，在图片因网络等原因加载失败时，用户也能从替代文本里知道这个位置原本要展示什么。开发规范里甚至会要求每张图片必须写alt。

图片路径的问题要重点展开，因为它跟Java Web的目录结构强相关。在一门Java Web课程里，你的页面可能放在web目录下，图片可能放在web/images目录下，那HTML里写<img src="images/logo.png">就是指当前页面所在目录的下级目录images里的logo.png。

判断相对路径可以记一个口诀：./是当前目录，../是上一级目录。考试里如果给你一个目录树，问你“位于pages/index.html的页面要引用位于images/logo.png的图片，src应该怎么写”，答案就是../images/logo.png，因为要从pages目录往上一层回到根目录，再进入images目录。

这个知识点在后面的Servlet转发、JSP引用CSS时也会反复出现，所以现在花点时间搞清楚目录结构，对复习后面的章节很有帮助。

4.3 图片与超链接的组合用法

图片本身可以当作超链接的内容，写法是：

html复制<a href="detail.html">
  <img src="product.jpg" alt="商品图片">
</a>

点击图片就跳转到detail.html。这种写法在电商项目的商品列表页面非常常见。考试可能会问：当图片作为链接内容时，浏览器默认会给图片加什么样式？答案是蓝色的边框（旧版浏览器行为），HTML5里如果要消除这个边框，可以给img设置border="0"或者在CSS里写img { border: none; }。

另外，HTML5里还有<figure>和<figcaption>标签，用于包裹图片和图片说明文字，这属于语义化标签的范畴，后面统一讲。

5. 表格标签的完整知识框架

表格在Java Web开发里用的其实不多，做管理后台时可能用表格展示数据列表，但更常规的做法是用CSS布局加表格实现。可它偏偏是期末考试喜欢出的代码阅读题，因为表格标签嵌套层次深、属性多，既能考标签记忆，也能考你对结构的理解能力。

5.1 表格的基本结构标签层级

一个完整的表格结构从外到内是：

html复制<table>
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>表尾汇总</td>
    </tr>
  </tfoot>
</table>

标签对应关系是：<table>是表格容器，<tr>是行，<td>是标准单元格，<th>是表头单元格（加粗居中），<caption>是表格标题，<thead>是表头区域，<tbody>是主体区域，<tfoot>是表尾区域。

考试里常挖的坑是：<tr>里直接写<td>没问题，但如果问你<td>里能不能再嵌套整个<table>，答案是能。表格的单元格里嵌套一个完整表格是合法行为，这叫表格嵌套。有些读代码题会故意画一个复杂的嵌套表格，问最终展示几行几列，这种题考查的就是你有没有仔细看嵌套结构。

5.2 colSpan、rowSpan合并单元格的判定逻辑

合并单元格是表格章节的大题常客。colspan是列合并，即一个单元格横跨多列；rowspan是行合并，即一个单元格纵跨多行。

遇到这种题，我教你一个不会乱的办法：先把表格画成网格，然后按从左到右、从上到下的顺序数格子。凡是写了colspan="2"的单元格，它在网格中占用两个横向位置；凡是写了rowspan="2"的单元格，它占用两个纵向位置。后面被它覆盖掉的格子就不需要再写<td>了。

举个典型的例子：

html复制<table border="1">
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan="2">4</td>
  </tr>
</table>

第一行有1、2、3三个格子，其中1号格子往下延伸占用了第二行的第一个位置。所以第二行只需要补两个格子，第一个是4号，它横跨了第二和第三个位置。最终效果是一个2行3列的表格。这种题目只要你动笔画一画，基本不会出错。

5.3 表格常用属性与CSS替代

表格的border属性用于设置边框，width和height用于设置尺寸，cellpadding设置单元格内部内容与边框的距离，cellspacing设置单元格之间的距离。align属性在旧代码里用来控制表格或单元格内容的水平对齐方式。

这些属性现在都推荐用CSS代替，但期末考试的读代码题里还是会频繁出现。你要做的就是看到属性时能说出作用，不要求你会手写很复杂的表格，但至少要能看明白别人写的表格最终渲染出来是什么样。尤其是cellpadding和cellspacing，这两个词长得很像，经常在选择题里互换位置来迷惑你，记的时候可以这样区分：padding是“内边距”，属于单元格内部的空间；spacing是“间距”，是单元格之间的空间。

6. 表单标签与前后端数据交互核心逻辑

表单是整个HTML章节里最重要、考试分值最重的内容，没有之一。原因很简单：Java Web的核心业务就是处理用户提交的数据，而用户提交数据的主要入口就是HTML表单。Servlet里那句经典的request.getParameter("username")，拿的就是表单里<input name="username">的值。

6.1 form标签的action、method、enctype三大属性

<form>的action属性用于指定表单数据提交到的服务器地址。对应到Java Web里，这个值通常是一个Servlet的URL映射，比如action="loginServlet"，当然也可以是一个JSP页面地址。

method属性有两个可取值：get和post。这个考点几乎每张卷子都会出现，而且通常结合Servlet一起考。

GET方式的特点是：表单数据会附加在URL的查询字符串里，格式是?username=abc&password=123。所以它有明显的缺点——数据在地址栏可见，不适合提交密码等敏感信息；URL长度有限制，不适合提交大量数据。POST方式的特点是：数据放在请求体中，地址栏不可见，长度限制宽松，适合提交敏感数据和大量数据。

考试常出的场景是：“登录页面提交用户名密码应该用什么方式”，答案是POST。这里我要多说一句，很多同学记住了答案，但没理解为什么。你想，如果登录用GET，密码直接出现在浏览器的地址栏里，你旁边站着的人一瞟就能看到。任何人只要照着这个思路想一遍，就永远不会做错这道题。

enctype属性常见的有两个值：application/x-www-form-urlencoded是默认值，普通表单都用它；multipart/form-data用于文件上传场景，因为文件是二进制数据，不能用URL编码方式传输。如果你在Java Web里做上传功能的Servlet，需要在@MultipartConfig注解配合下，前端表单的enctype也必须设置成multipart/form-data，这个三者配合的考点在后端章节会更详细，但前端这部分的enctype取值你得先记住。

6.2 input标签的type类型全解析

<input>是表单里最核心的标签，它靠type属性切换出不同的输入控件。期末复习建议你把常用的type背熟并理解使用场景：

type值	控件效果	常考要点
text	单行文本输入框	最常用；`name`属性必须有，否则数据不会提交
password	密码输入框	输入内容显示为圆点，但提交时是明文传输
radio	单选按钮	同name的radio互斥；必须设置value
checkbox	复选框	同name的checkbox可多选；必须设置value
file	文件选择	form的enctype必须为multipart/form-data
hidden	隐藏域	用户不可见，但会随表单一起提交
submit	提交按钮	点击后触发表单提交
reset	重置按钮	把表单恢复到初始状态
button	普通按钮	默认无行为，通常配合JavaScript使用
date / email / number 等	HTML5新增输入类型	自带验证和控件样式

这里我要特别强调几个实习和期末项目里经常坑人的点。第一个是：name属性才是提交数据的关键。id属性是用来配合<label>标签或者JavaScript操作DOM的，它不会作为数据的一部分提交到服务器。有些同学给input起了id，没写name，然后后端怎么也拿不到参数，排查半天发现是name丢了。第二个是：radio必须设置value属性，否则同组的单选按钮提交的全部是字符串"on"。第三个是：checkbox在没有勾选时，表单不会提交它的任何数据；只有勾选了的复选框，才会以name=value的形式提交。

6.3 select下拉框与textarea多行文本域

<select>是下拉选择框，它需要配合<option>使用。结构如下：

html复制<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
</select>

提交到服务器的是被选中的那个<option>的value值，而不是显示出来的文本。selected属性用于设置默认选中项。如果你的下拉框允许用户选择多个选项，就加multiple属性，但实际开发中多选下拉框用得较少，考试知道有这么回事就行。

<textarea>是多行文本域，它有rows和cols属性，分别设置可见行数和列数。注意，textarea不是自闭合标签，它必须写结束标签，而且标签之间的内容就是文本域的初始内容。

6.4 label标签与表单可访问性

<label>标签用于将说明文字与表单项关联起来。关联方式有两种：一种是隐式关联，即label包裹input和文字：

html复制<label>用户名：<input type="text" name="username"></label>

另一种是显式关联，通过for属性指向input的id：

html复制<label for="username">用户名：</label>
<input type="text" id="username" name="username">

考试考label的核心目的是可访问性。点击用户名文字时，对应的输入框能够获得焦点，这对鼠标操作不精准的移动端用户特别友好。此外，它也是无障碍访问的基础要求。如果考试问“以下哪个标签可以让点击文字时聚焦到输入框”，选<label>就对。

7. HTML5语义化标签与新版特性高频考点

HTML5这个标签在期末复习里很容易被轻视，因为教材里涉及的内容不算多，但近几年考题越来越喜欢结合HTML5的新特性出选择题，所以这部分不能完全跳过。你不需要会写很复杂的HTML5 API代码，但语义化标签和几个典型API的概念必须理解。

7.1 语义化标签对照传统div布局

HTML5之前，页面的头部、导航、主体、侧边栏、页脚全是用<div>加id或class来区分的：

html复制<div id="header">头部</div>
<div id="nav">导航</div>
<div id="main">主体内容</div>
<div id="footer">页脚</div>

这种写法的问题在于：<div>不携带任何语义，搜索引擎和辅助技术无法判断这个区域是什么。HTML5提供了更语义化的标签：

<header>：页面或区域的头部
<nav>：导航链接区域
<main>：页面主体内容，一个页面理论上只用一个main
<article>：独立的文章内容块
<section>：页面中的一个章节分区
<aside>：侧边栏、补充信息
<footer>：页面或区域的底部

考试题型通常是给一段用<div>写的布局，问你如果改用语义化标签，分别用什么替换。或者反过来，给一段HTML5语义化标签，问你某个标签代表的是哪个区域。

对Java Web课程而言，知道这个对应关系就够了。你在JSP的include页面、模板页面里，看到<header>和<footer>的机会会越来越多，就算不写，也要能读懂。

7.2 HTML5新增表单控件与输入类型

HTML5之前，开发者要做一个带日期选择的输入框，只能引入第三方JavaScript控件库。HTML5原生就支持了这些输入类型，比如<input type="date">会渲染出日期选择器，<input type="email">会校验输入的邮箱格式，<input type="number">只允许输入数字，<input type="range">提供滑块选择。

这些输入类型除了自带校验和交互控件，最大的意义是减少了对JavaScript的依赖。考试常考的是“HTML5中用于日期选择的type值”“用于邮箱格式校验的type值”这类填空选择。复习时把这些类型的名称和用途对上即可。

7.3 HTML5音视频标签与Canvas概念

<audio>和<video>是HTML5原生支持的音视频播放标签，它们通过src属性指定媒体文件路径，通过controls属性显示播放控件。Flash时代结束后，这两个标签就成了网页音视频播放的主力方案。考试最多考到标签名和controls属性的作用。

<canvas>是HTML5的绘图画布，配合JavaScript可以在上面绘制图形、图表、动画，甚至可以做一些简单的Web游戏。Java Web课程一般不会让你手写复杂的canvas代码，但选择题里可能给出定义让你选这是哪个标签。知道<canvas>是“画布”，配合JavaScript使用，即可。

8. 综合应用场景：Java Web项目中的HTML实操要点

到了这一节，我们暂时把教科书放下，切换到实际项目视角。Java Web期末的大作业往往是做一个带登录注册、增删改查的小系统，你需要写几个JSP页面。很多同学在IDE里新建JSP文件时，看到自动生成的HTML代码会一脸懵，这里我给你讲几个实际干活用得上的要点。

8.1 JSP页面中的HTML与Java代码混合规则

JSP页面本质上是一个HTML页面，只是在其中嵌入了Java代码片段、表达式和JSP标签。在写JSP时，你依然要遵守HTML的结构规范。比如下面这个例子：

jsp复制<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户列表</title>
</head>
<body>
<table border="1">
    <tr>
        <th>ID</th>
        <th>用户名</th>
    </tr>
    <%
        // 模拟从Servlet传来的数据
        String[] users = {"张三", "李四"};
        for (String user : users) {
    %>
    <tr>
        <td><%= user %></td>
    </tr>
    <%
        }
    %>
</table>
</body>
</html>

注意这里Java的for循环用<% %>包裹，而循环体里的HTML标签和<%= %>表达式是Java代码和HTML标签的交叉嵌套。考试不一定让你手写这种代码，但读代码题里经常出现，你要能看出循环体里有几行HTML会被重复渲染。

8.2 设置页面编码避免中文乱码

Java Web开发里，HTML页面的编码设置是关系到用户能不能正常看到中文的关键。页面端要确保<meta charset="UTF-8">存在，同时JSP的page指令要设置contentType="text/html;charset=UTF-8"。如果你的Servlet在向浏览器输出内容时没设置编码，浏览器默认按系统编码解析，中文就是一堆问号。

这里还要提一个操作用细节：当你通过Servlet response.getWriter().write()输出一段HTML字符串时，如果字符串中包含<html>、<body>等标签，浏览器会正常解析。所以Servlet里直接输出HTML片段这种旧写法，本质上就是在Java代码里拼接HTML，页面上效果跟JSP一样，只是可维护性差很多。理解了这一点，你就知道为什么JSP和模板引擎会取代这种直接输出的方式。

8.3 用户列表页与表单回显的HTML写法

在期末项目里，注册功能的失败回显是个常见需求。你提交注册表单，后端校验用户名已存在，于是跳回注册页，并且希望用户刚才填写的用户名还在输入框里，而不是被清空。这个需求在纯HTML静态页面里无法实现，必须借JSP的输出表达式：

html复制<input type="text" name="username" value="<%= request.getAttribute("username") == null ? "" : request.getAttribute("username") %>">

这就是HTML标签与Java Web后端交互的典型例子。HTML提供结构，JSP负责动态填入数据。考试做这类读代码题时，你要能翻译出这段代码的逻辑：如果request里有username属性就显示在输入框里，否则就是空的。

9. 高频易错点与考前自查清单

这一节我直接把期末复习中容易踩的坑整理成一个清单，每一行都是同学们的真实错误，也是出题老师的心头好。

9.1 HTML基础部分的六大易错题

第一，块级元素与行内元素混淆。<span>能被设置宽度吗？不能。但<img>可以，因为它是替换元素。判断题里写“所有行内元素都无法设置宽高”，这句话是错的，img就是特例。

第二，form的method值与数据可见性对应关系搞反。只要抓住“GET数据在URL上可见、POST数据在请求体里”这个本质点，就永远不会搞反。

第三，radio必须同name才能互斥。很多同学以为radio是天然互斥的，其实只有一组radio拥有相同的name属性时才互斥。如果两个radio的name不同，它们可以同时被选中。

第四，checkbox未勾选时不提交任何数据。代码里如果后端接收不到checkbox参数，先检查前端是不是忘了加value，再看是不是根本没勾选。

第五，表格嵌套结构数错行列。考试遇到复杂表格时不用心算，直接在草稿纸上画出网格再填数字，绝对比空想靠谱。

第六，路径引用错误。在JSP里引用CSS、JS、图片时，用相对路径容易出错，因为JSP可能被转发到不同目录下。更稳的做法是使用${pageContext.request.contextPath}拼出绝对上下文路径。这个点虽然偏后端，但理解了能帮你在复习后期避免大量路径404问题。

9.2 期末考前HTML自查问题表

问题	自查要点
能否画出HTML基本文档骨架？	html、head、body、meta charset、title是否有遗漏
能否说出至少10个块级元素和8个行内元素？	列出来之后互相交叉验证
能否一眼判断相对路径是否写错？	用`./`、`../`口诀，结合目录树推导
能否准确描述GET和POST的差异？	至少说出三个差异点
能否分析带rowspan和colspan的表格？	画网格验证
能否说清input的type各取值适用场景？	对照type表逐个过
能否说出label for与input id的关联关系？	for等于id，不是name
能否用语义化标签重构一个div布局页面？	header/nav/main/aside/footer对应关系清晰

这七个问题如果你都能在10秒内想出答案，HTML部分基本就过关了。

10. 我个人复习HTML时的一些体会

做了这么多年Java Web相关的教学工作，我见过太多学生在HTML上翻车，也曾跟同事复盘过原因。说到底，翻车不是因为HTML难，而是因为觉得它太简单、没当回事。HTML就像写作文时的标点符号——你觉得自己会用，但真落到卷面上，逗号和句号该用哪个、引号怎么配对，一开始不较真，后面全是要扣的分。

如果你正在紧张备考Java Web期末，我建议你把HTML当成整门课的基石来看待，而不是一个可以跳过的“简单章节”。表格和表单的题目做错一道，影响的可能只是那两分；但如果你连表单提交的原理都没搞懂，后面的Servlet章节学起来就是无源之水。先把HTML吃透，再往后推进，你会发现Servlet里的参数接收、请求转发、中文乱码处理、response重定向，每个知识点都能跟HTML挂上钩，前后端的知识脉络一下子就打通了。

最后再分享一个小技巧：复习HTML的时候不要只看不写，打开记事本或者IDE，手敲一个完整的注册页面，包含文本输入框、密码框、单选按钮、复选框、下拉框、多行文本域，再把表格和超链接加进去，敲一遍比背十遍效果都好。毕竟考试考的不是记忆力，是你对这些标签真实用法的理解程度。

显示结果	实体写法	说明
空格（不断行）	` `	多个连续空格在HTML里默认合并成一个，想要多个空格得用它
<	`<`	less than
>	`>`	greater than
&	`&`	ampersand
"	`"`	双引号
©	`©`	版权符号

显示结果	实体写法	说明
空格（不断行）	` `	多个连续空格在HTML里默认合并成一个，想要多个空格得用它
<	`<`	less than
>	`>`	greater than
&	`&`	ampersand
"	`"`	双引号
©	`©`	版权符号