HTML网页制作实验报告是Web前端开发学习过程中不可或缺的实践环节，旨在通过动手操作深入理解HTML（HyperText Markup Language，超文本标记语言）的核心语法与结构。本实验报告将系统记录从页面规划到代码实现再到效果验证的完整流程，为后续学习CSS（层叠样式表）和JavaScript奠定坚实基础。以下为实验报告的规范化内容呈现。
一、实验目的：本实验旨在使学生掌握HTML基础语法，能够熟练运用常用标签构建网页结构；理解HTML文档基本框架、头部信息设置以及语义化标签的合理使用；同时培养学生通过手工编码解决实际页面布局问题的能力，并初步建立Web标准意识，为后续动态网页开发做准备。
二、实验环境：本实验在Windows 11操作系统下完成，使用Visual Studio Code作为主要代码编辑器，该编辑器支持语法高亮、智能提示及实时预览功能。浏览器选用Google Chrome进行页面效果调试，同时利用Chrome开发者工具进行DOM结构检查和响应式布局验证。实验过程中不依赖任何CSS框架或JavaScript库，仅使用纯HTML实现页面结构与内容展示。
三、实验内容与步骤：实验主要围绕五个核心模块展开，每个模块均通过代码编写、效果预览、问题排查三个环节完成。
（一）HTML文档基础框架的搭建：首先创建一个新的HTML文件，输入文档类型声明<!DOCTYPE html>，随后建立根元素<html>，并在其中设置头部区域<head>与主体区域<body>。头部区域内通过元数据标签<meta charset="UTF-8">指定字符编码，以支持中文字符正常显示。此外，设置了页面标题<title>，该标题会显示在浏览器标签栏中。通过此步骤，深刻理解了HTML嵌套结构的层级关系。
（二）文本与段落标签的应用：在主体区域中使用标题标签<h1>至<h6>构建信息层级，其中<h1>用于主标题展示。通过段落标签<p>包裹实验简介文本，利用换行标签<br>实现句内强制换行。同时使用了文本格式化标签，包括加粗标签<strong>、强调标签<em>、插入标签<ins>和删除标签<del>，这些语义化标签不仅呈现特定视觉效果，更重要的是表达了文本语义权重，有利于搜索引擎优化和屏幕阅读器解析。
（三）超链接与多媒体嵌入：实现页面间跳转使用锚点标签<a>，其href属性指向目标URL，设置target属性为_blank实现新窗口打开。为增强交互体验，创建了页面内锚点链接，通过#id定位到当前页面指定位置。在多媒体嵌入方面，使用图像标签<img>插入本地图片，设置alt属性提供替代文本描述，确保图片加载失败时仍能传达信息。同时使用音频标签<audio>和视频标签<video>嵌入媒体资源，并配置controls属性显示播放控件。
（四）表格与列表的构建：创建语义化表格时，使用了表格标签<table>、行标签<tr>、表头单元格标签<th>和标准单元格标签<td>。通过colspan属性实现跨列合并，通过rowspan属性实现跨行合并，这一操作充分训练了表格结构的灵活控制能力。在列表构建方面，分别使用无序列表标签<ul>搭配列表项标签<li>制作导航菜单，使用有序列表标签<ol>展示实验步骤编号。
（五）表单元素的综合运用：构建用户注册表单页面，使用表单标签<form>作为数据提交容器，设置action属性指定提交地址，method属性采用post方式进行数据传输。表单内部集成多种输入控件：文本输入框<input type="text">、密码输入框<input type="password">、单选按钮<input type="radio">、复选框<input type="checkbox">以及下拉选择框<select>。每个控件均配备label标签建立文本关联，点击标签文字即可聚焦到对应控件，极大提升了表单可用性。最后使用提交按钮<input type="submit">和重置按钮<input type="reset">完成用户交互闭环。
四、实验结果与分析：在Chrome浏览器中打开所编写的HTML文件，各模块均呈现预期效果。在文本与段落模块中，标题层级视觉区分明显，正文段落排列整齐，格式化标签渲染正确。在超链接模块中，点击链接能够准确跳转至指定页面，锚点定位功能实现页面内无缝滚动。在多媒体模块中，图片正常展示并带有清晰的替代文本，音频和视频均可通过原生控件进行播放控制。在表格模块中，合并单元格后的表格结构清晰，数据对齐准确。在表单模块中，所有输入控件均可正常交互，数据校验提示能够通过浏览器默认机制触发。通过Chrome开发者工具检查DOM结构，所有标签均正确嵌套，未出现标签未闭合或属性拼写错误等常见问题。
五、遇到的问题与解决方案：在实验过程中遇到若干典型问题。首个问题是中文乱码，原因是缺少<meta charset="UTF-8">声明，补充该元数据后中文显示恢复正常。第二个问题是图片路径错误，导致图片无法显示，通过检查相对路径与绝对路径的区分，确认当前图片位于与HTML文件同级的images目录下，修改为src="images/logo.jpg"后解决。第三个问题是锚点链接跳转位置不准确，原因是目标元素的id属性未被正确设置，为对应标题添加匹配的id后定位精准。第四个问题是表单下拉框默认选项未被选中，通过为期望选项添加selected属性得以解决。
六、实验总结与心得：通过本次HTML网页制作实验，系统掌握了网页开发基础技能，深刻认识到HTML语义化不仅是代码规范要求，更是Web可访问性和SEO优化的重要前置条件。实验过程中体会到标签嵌套如同搭建积木，需要严格的层级逻辑和开闭对应。同时也意识到，仅仅依靠HTML标签属性控制页面表现具有很大局限性，这正是引入CSS进行样式分离的价值所在。在后续学习中，将重点研究CSS布局技术如Flexbox和Grid，并结合JavaScript实现更丰富的动态交互效果。此外，代码注释习惯和规范命名对于团队协作具有重要意义，应在日常编码中持续保持并强化。
查看详情
查看详情
