📚 课程目录第2章 HTML基础

HTML基础：文档结构、常用标签、属性与实体字符

HTML（HyperText Markup Language，超文本标记语言）是Web世界的基石。无论是静态的企业官网，还是复杂的单页应用（SPA），最终呈现在浏览器中的内容都是由HTML承载的。对于计算机二级Web程序设计考试而言，HTML基础不仅是理论考点，更是后续学习CSS（层叠样式表）和JavaScript的必备前置知识。本章将从HTML文档的骨架结构出发，系统拆解常用标签的语义与使用场景，并深入解析属性与实体字符的底层逻辑，帮助您建立严谨的标记语言思维。

2.1 HTML文档结构：从声明到渲染的骨架

核心原理：标准模式与文档树

HTML文档的本质是一个层级嵌套的节点树。浏览器解析HTML时，会依据文档类型声明（DOCTYPE）决定使用“标准模式”还是“怪异模式”渲染页面。标准模式下，CSS布局遵循W3C规范；怪异模式则模拟旧版浏览器的非标准行为，常导致盒模型计算偏差。因此，<!DOCTYPE html> 必须置于文档第一行，它告诉浏览器以最新的HTML5标准解析文档。

一个完整的HTML文档由三个顶级区域构成：

DOCTYPE声明：非标签，仅用于触发标准模式。
<html>根元素：包裹所有内容，通过 lang 属性声明页面主要语言（如 lang="zh-CN"），利于屏幕阅读器和搜索引擎识别。
<head>与<body>：head存放元数据（字符集、标题、样式、脚本引用），body存放用户可见的页面内容。

操作流程：搭建标准文档骨架

新建文本文件，命名为 index.html。
输入 <!DOCTYPE html> 声明文档类型。
创建 <html lang="zh-CN"> 根元素。
在根元素内依次添加 <head> 和 <body> 子元素。
在head中设置 <meta charset="UTF-8"> 防止中文乱码，并添加 <title> 定义浏览器标签页标题。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，Web世界！</h1>
</body>
</html>

经验提醒：在VS Code中，输入英文感叹号 ! 后按Tab键，可快速生成HTML5标准骨架，避免手动输入遗漏。

案例拆解：head中的关键元数据

以下代码展示了head区域常见的配置项及其作用：

标签/属性	作用	示例
<meta charset>	声明字符编码	<meta charset="UTF-8">
<meta name="viewport">	移动端响应式适配	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>	浏览器标签页标题	<title>计算机二级备考指南</title>
<link>	引入外部CSS文件	<link rel="stylesheet" href="#" aria-disabled="true" data-keke-missing-local-link="1" onclick="return false">
<script>	引入或编写JavaScript	<script src="app.js" defer></script>

常见误区：将 <script> 放在 <head> 中且未使用 defer 属性，会阻塞页面渲染。建议将脚本放在 <body> 末尾，或使用 defer 延迟执行。

2.2 常用标签：语义化构建页面内容

核心原理：标签的语义与嵌套规则

HTML5强调语义化标签，即用标签名称表达内容的含义，而非仅关注外观。例如 <h1> 表示一级标题，<nav> 表示导航区域。语义化不仅利于SEO（搜索引擎优化），还能提升代码的可维护性与无障碍访问性。标签必须正确嵌套：先开始的后结束，形成“洋葱结构”。

分类详解：六大常用标签族

1. 标题标签 <h1>~<h6>：从大到小共六级，用于定义页面层级。一个页面通常只使用一个 <h1> 作为主标题，避免搜索引擎权重分散。

2. 段落与文本标签：<p> 定义段落，浏览器自动在段落前后添加间距。行内文本标签包括 <strong>（加粗强调）、<em>（斜体强调）、<br>（换行）、<span>（无语义行内容器）。

3. 列表标签：无序列表 <ul> 配合 <li> 展示并列信息，默认使用圆点符号；有序列表 <ol> 展示顺序信息，默认使用数字编号；自定义列表 <dl> 配合 <dt>（术语名）和 <dd>（术语描述）用于名词解释。

4. 超链接标签 <a>：通过 href 属性指定跳转地址，target="_blank" 在新标签页打开。锚点链接通过 href="#id" 定位页面内元素。

5. 图像标签 <img>：自闭合标签，src 指定图片路径，alt 提供图片加载失败时的替代文本，同时利于SEO和无障碍阅读。

6. 表格与表单标签：表格由 <table> 包裹，内部按 <tr>（行）、<th>（表头单元格）、<td>（数据单元格）嵌套。表单使用 <form> 包裹，内部包含 <input>、<textarea>、<select> 等输入控件。

案例拆解：构建一个课程信息展示模块

以下代码综合运用了标题、列表、表格和超链接标签，模拟一个课程信息卡片：

<h2>Web程序设计课程大纲</h2>
<p>本课程共 <strong>30章</strong>，覆盖前端开发核心技能。</p>

<h3>课程特色</h3>
<ul>
    <li>理论结合实战，每章配备案例</li>
    <li>提供在线编程练习环境</li>
    <li>配套 <a href="https://www.example.com" target="_blank">题库系统</a></li>
</ul>

<h3>第2章知识点分布</h3>
<table border="1" cellpadding="6">
    <tr>
        <th>知识点</th>
        <th>难度</th>
        <th>考试占比</th>
    </tr>
    <tr>
        <td>文档结构</td>
        <td>低</td>
        <td>10%</td>
    </tr>
    <tr>
        <td>常用标签</td>
        <td>中</td>
        <td>60%</td>
    </tr>
    <tr>
        <td>属性与实体</td>
        <td>中高</td>
        <td>30%</td>
    </tr>
</table>

  实战要点：表格的 border 属性在HTML5中已废弃，建议使用CSS的 border 样式替代。考试中若要求纯HTML实现，可保留该属性，但需知道其局限性。

2.3 属性与实体字符：控制标签行为与特殊符号

核心原理：属性的两种形式与实体字符的转义机制

属性用于为标签提供附加信息，分为两类：全局属性（适用于所有标签，如 id、class、style）和局部属性（仅适用于特定标签，如 <img> 的 src）。属性值建议使用双引号包裹，若值本身包含双引号，则使用单引号。

实体字符（Entity Characters）用于在HTML中显示被保留的字符（如 <、>、&）或无法直接输入的特殊符号（如版权符号 ©）。实体以 & 开头，以分号 ; 结尾。浏览器解析时会将实体转换为对应字符，避免与标签语法冲突。

判断方法：何时必须使用实体字符

显示 < 或 > 时，必须使用 < 和 >，否则会被误认为标签开始或结束。
显示 & 时，必须使用 &，否则浏览器会尝试将其解析为实体开头。
显示连续空格时，使用  （不换行空格），因为HTML默认合并多个空格为单个。

案例拆解：在网页中展示代码片段

假设需要在页面中展示一段HTML代码，若直接写入，浏览器会将其解析为标签。此时必须使用实体字符转义：

<p>以下是一段HTML代码示例：</p>
<pre>
    &lt;h1&gt;标题&lt;/h1&gt;
    &lt;p&gt;段落内容&lt;/p&gt;
</pre>

上述代码在浏览器中的渲染结果为：

    <h1>标题</h1>
    <p>段落内容</p>

常见实体字符速查表

显示结果	实体名称	实体编号	说明
<	<	<	小于号
>	>	>	大于号
&	&	&	和号
			不换行空格
©	©	©	版权符号
®	®	®	注册商标

易错点：实体编号（如 <）是十进制Unicode编码，实体名称（如 <）是记忆性别名。两者效果相同，但实体名称可读性更强。考试中若忘记名称，可使用编号兜底。

2.4 综合实战：制作个人简介页面

场景与目标

假设您需要为班级网站制作一个个人简介页面，要求包含：头像、个人简介段落、技能列表、教育经历表格、以及一个简单的联系表单。页面必须通过HTML5标准验证，且中文显示正常。

实施步骤

搭建骨架：创建HTML5文档，设置 lang="zh-CN" 和 charset="UTF-8"。
页面头部：使用 <h1> 作为姓名标题，<img> 插入头像，设置 alt 属性。
内容分区：用 <h2> 划分“个人简介”“技能清单”“教育背景”“联系我”四个区域。
技能列表：使用 <ul> 展示HTML、CSS、JavaScript等技能。
教育表格：使用 <table> 列出时间、学校、专业。
联系表单：使用 <form> 包含姓名输入框、邮箱输入框和提交按钮。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>张三的个人主页</title>
</head>
<body>
    <h1>张三</h1>
    <img src="avatar.jpg" alt="张三的头像照片" width="120">
    
    <h2>个人简介</h2>
    <p>我是一名热爱前端开发的在校大学生，擅长 <strong>HTML5</strong> 和 <strong>CSS3</strong>。</p>
    
    <h2>技能清单</h2>
    <ul>
        <li>HTML / HTML5</li>
        <li>CSS / CSS3</li>
        <li>JavaScript 基础</li>
    </ul>
    
    <h2>教育背景</h2>
    <table border="1">
        <tr><th>时间</th><th>学校</th><th>专业</th></tr>
        <tr><td>2023-2027</td><td>XX大学</td><td>计算机科学与技术</td></tr>
    </table>
    
    <h2>联系我</h2>
    <form action="/submit" method="post">
        <label>姓名：<input type="text" name="name"></label><br>
        <label>邮箱：<input type="email" name="email"></label><br>
        <input type="submit" value="发送">
    </form>
    
    <p>&copy; 2025 张三 版权所有</p>
</body>
</html>

复盘与优化

此案例覆盖了本章所有核心知识点。实际开发中，建议将 border="1" 替换为CSS样式，并将表单的 action 指向真实的后端接口。若图片缺失，alt 属性会显示替代文字，避免页面出现破损图标。

  考试提示：计算机二级考试常要求补全HTML代码或指出错误。重点检查：标签是否闭合、属性值是否加引号、实体字符是否遗漏分号、<img> 是否包含 alt 属性。

2.5 常见误区与总结复盘

误区清单

忽略DOCTYPE：导致页面进入怪异模式，盒模型计算异常。
标签错误嵌套：如 <p><div></p></div>，浏览器虽能容错，但会破坏文档结构。
滥用 <div>：过度使用无语义标签，降低代码可读性。
忘记alt属性：图片无法加载时显示空白，且不利于无障碍访问。
实体字符缺少分号：如 &copy 在某些浏览器中无法正确解析。

知识结构总览

模块	核心要点	常见应用
文档结构	DOCTYPE、html、head、body	标准页面骨架
标题与段落	h1~h6、p、br、strong	内容层级划分
列表	ul、ol、li、dl	导航菜单、排行榜
超链接与图像	a、img、href、src、alt	页面跳转、图片展示
表格与表单	table、tr、td、form、input	数据展示、用户交互
属性与实体	全局属性、局部属性、实体字符	样式控制、特殊符号显示

掌握HTML基础是Web开发的起点。建议您在学习过程中，每学一个标签就动手在浏览器中验证效果，并查看开发者工具中的“元素”面板，观察浏览器如何解析您的代码。下一阶段，您将学习CSS如何为这些结构赋予视觉表现力，但在此之前，请务必确保HTML结构本身是清晰、语义化且符合标准的。