html网页设计实验报告

第一次在浏览器里按下F12，网页看见自己写的设计实验代码变成一排排整齐的彩色文字时，我突然明白，报告网页设计这门课，网页教的设计实验不是代码，是报告秩序。

实验内容其实很简单——用纯HTML搭建一个个人主页。网页没有CSS，设计实验没有JavaScript，报告只有最基础的网页标签。我选了深蓝色背景，设计实验白色文字，报告中间放一张自己拍的网页照片。刚开始写的设计实验时候，满脑子都是报告“这能行吗”的怀疑。但当我敲下<img src="me.jpg">，刷新页面，那张在宿舍楼下拍的照片真的出现在屏幕中央时，那种满足感，比打游戏赢了还爽。

真正让我头疼的是表格布局。老师要求用table做页面框架，左边导航，右边内容。我照着课本敲，发现怎么都对不齐。后来才意识到，<table>里嵌套的<tr>和<td>必须一一对应，少一个闭合标签，整个页面就乱套。那晚我盯着代码看了两个小时，最后发现是少了个</td>。这种低级错误，现在想起来都脸红，但当时确实让我理解了“标签闭合”这四个字的分量。

有个细节特别有意思。当我给文字加上<h1>和<p>标签后，浏览器自动调整了行距和字号。我没写任何样式，但页面看起来就是比纯文本舒服。这就是HTML的底层逻辑——用语义化标签告诉浏览器“这是什么”，剩下的交给浏览器去渲染。后来我试着把<h1>换成<font size="7">，效果居然一样。但老师却说前者更专业。当时不懂，现在明白了，<h1>代表的是“一级标题”这个含义，而<font>只是“变大”这个动作。含义可以复用，动作不行。

做链接的时候又踩了坑。我想让导航栏里的“关于我”跳到页面底部，于是写了<a href="#bottom">，但怎么点都没反应。查了半小时，发现目标位置必须有个<a name="bottom">或者<div id="bottom">才行。这种“锚点”机制，就像给页面贴了个书签。我突然想到，这不就是纸质书里的目录页码吗？HTML的很多设计，其实都是对现实世界信息组织方式的模拟。

提交实验报告前，我把代码里所有没用的空格删掉，把标签缩进对齐。虽然浏览器不在乎这些，但看着舒服。室友路过瞟了一眼，说“你写代码怎么跟写作文似的”。我笑了笑，没告诉他，其实网页设计本质上就是写作——用标签当标点，用属性当修辞，用结构当段落。只不过读者不是人，是浏览器。

最后验收的时候，老师问了一个问题：“如果不用table，你会怎么布局？”我当时答不上来。现在我知道了，那是CSS的领域。但那个问题让我意识到，HTML实验报告的意义不在于证明我会用table，而在于让我开始思考“布局”这件事的本质——如何把信息有逻辑地放在二维平面上。这比任何标签都重要。

(责任编辑：娱乐)