企业官网建设流程全解析

如果有人问我，HTML 结构该从哪个页面开始练，我的答案一直没变过：做一张自我简介网页。不是个人主页那种要塞进作品集、博客、留言板的大工程，就是一张朴素的、"讲清楚我是谁"的单页。它看起来简单到有点不起眼，但真动手写一遍就会发现，HTML 里最常用的那批标签、head 里必须写对的那几行、语义化分区的方式，全都能在这一张页面上跑一遍。

我见过两种典型路线。一种是上来就抄商城首页，几百行div叠在一起，改一个间距要顺着缩进数半天；另一种是老老实实从"你好，我叫某某"开始，半天做完一页，然后拿着这页来问"为什么我的中文是乱码""为什么手机上字小得像蚂蚁"。走得远的往往是后一种。自我简介网页的内容是你自己写的，标签是你自己选的，出错也是你自己撞上的，这种反馈闭环比抄一份漂亮代码强太多。

这篇内容写给三类人：完全没碰过 HTML 但想做第一个页面的人；会抄代码却说不清<!DOCTYPE html>在干嘛的人；还有要帮社团、班级、家里孩子做招新页和介绍页的人。从文档骨架、语义分区、内容块的标签选择，一路讲到乱码自查、手机适配、文件组织和交付前检查。全程用一张真实的自我简介网页当例子，代码可以照着写。

1. 自我简介网页为什么值得当成第一个完整 HTML 项目

1.1 它天然覆盖了 HTML 最常用的那批标签

一张自我简介网页的信息类型非常"齐全"：有一个总的标题，有几段自我介绍的文字，有一张头像，有一组技能条目，有若干条经历，有邮箱和社交链接。这些内容对应的标签刚好就是 HTML 日常使用频率最高的那一批——h1到h3、p、img、ul/li、a、section、footer。

换句话说，你不需要人为地往页面里塞标签，内容本身就逼着你把这些标签用一遍。这比"为了练习而练习"的例页效率高得多。表格、表单这些相对低频的东西可以等以后需要时再学，先把高频的吃透。

1.2 一份可以直接照着填的内容大纲

写代码之前我习惯先把内容列成清单。很多新手卡住不是因为标签不会，而是因为不知道页面上该放什么。下面这份大纲我用了很多次，改改就能用：

这张表的好处是：填完之后页面的结构基本就定下来了，你甚至能大致猜出每一块对应哪些标签。内容先行的做法在真实项目里也一样成立，产品经理给的文案越完整，前端返工越少。

1.3 先写内容还是先写标签，我站前者

有个东西叫占位文本，就是那串看起来像拉丁文的假文字。很多教程用它来演示排版，结果新手养成了一个坏习惯：先把结构搭好，里面的字随便填。等到真要换成中文，才发现原来那串假文字的长度和自己写的完全不一样，整个页面高度全乱了。

我的做法是反过来的。先在编辑器里老老实实用中文把自我介绍写完，标点符号都用全角，一句话该多长就多长。然后再决定哪个段落用p、哪组词用li。中文和英文在排版上差别不小：中文没有词间空格，换行规则不同，同样的容器宽度能塞进去的字数完全不一样。用真内容做布局，一次到位。

提示：自我介绍别写"热爱生活、积极向上"这种谁都能用的话。写具体的事——"每周跑三次五公里""在做一个记录城市里的树的小项目"，读者记得住，页面也不空。

2. 从<!DOCTYPE html>到</html>：骨架里每一行到底在干什么

2.1<!DOCTYPE html>不是标签，是给浏览器的模式开关

很多人把第一行当成一句仪式化的咒语，删掉似乎页面也能跑。其实它决定的是浏览器的渲染模式。写了它，浏览器进入标准模式，按当前规范计算盒子的宽高；不写或者写错，浏览器可能退回一种叫"怪异模式"的兼容状态，此时给一个盒子设宽度，内容的 padding 和 border 可能被算进宽度里，也可能不算。

这个差别在小页面上不一定立刻看得出来，等以后做多栏布局、设百分比宽度，你会莫名其妙地发现两个本该等宽的盒子不一样宽。根源可能就在你当初顺手删掉了第一行。所以这行的写法我建议背下来，全小写、无空格：

<!DOCTYPE html>

2.2<html lang="zh-cn">这行经常被删，代价比想象中大

lang属性告诉浏览器和辅助工具"这个页面的主要语言是什么"。它影响好几件事：屏幕阅读器用哪种语言的声音朗读，浏览器选哪套字体来渲染汉字，翻译工具判断是否需要提示翻译，还有一些断词、连字的处理规则。

我见过的最典型场景是：页面在自己电脑上看着正常，别人的浏览器打开却是另一个字体的宋体，或者用朗读软件读出来带着奇怪的音调。查半天 CSS，最后发现是lang没写或写成了en。

简体的写法是zh-cn，也可以写zh-CN，属性值大小写不敏感。繁体是zh-tw，如果要面向多个地区，还可以用zh-Hans这类更细的标记。日常单页用zh-cn就够了。

2.3charset必须靠前，乱码问题的根就在这一行

<meta charset="utf-8">的作用是声明这个文件的字符编码方式。关键在于位置：浏览器需要在前 1024 个字节内读到这条声明，才来得及切换解码方式。所以它必须放在head的开头，紧跟<head>之后，不要被注释、长注释或者一堆其他 meta 挤到后面去。

为什么位置这么要紧？因为浏览器在读文件时是边读边解析的，如果还没读到编码声明就先遇到了中文字节，它会先用一个默认编码去猜。猜错了，这段中文就被解成了乱码，而且后续即使读到了正确的声明也无法回头修正，因为它已经按错的编码解析过一遍了。所以乱码不是"显示问题"，是解析阶段就分错了家。

编码本身的选择：现在一律用 UTF-8，别用 GBK。UTF-8 能装下世界上几乎所有文字，和各类工具、版本管理、跨平台环境的兼容性都更好。如果你的文件本身存成了 GBK 却在 head 里声明 UTF-8，照样乱码——文件保存的编码和声明的编码必须一致。这一点后面第 6 章还会细说。

2.4viewport决定手机上好不好看，title决定别人怎么记住你

这两条 meta 是我在实际项目里最不愿看到被省掉的。<meta name="viewport" content="width=device-width, initial-scale=1">的意思是：让页面的布局宽度等于设备的物理宽度，初始缩放比例为 1。少了它，手机会假装自己的宽度是 980 像素左右，然后把整个页面缩小塞进屏幕，结果就是字小得像蚂蚁，用户得两根手指放大才能读。

<title>的写法也有很多讲究。它出现在四个地方：浏览器标签页、收藏夹、搜索结果标题、分享出去的卡片标题。所以别写"我的网页""新建文本文档"这种。格式我一般用"姓名 - 一句话定位"，比如"林小满 - 后端开发 / 喜欢折腾命令行工具"。这样在书签列表里几十条记录排在一起，别人一眼就能认出哪条是你的。

把上面几件事拼起来，一份可以拿来就用的 head 长这样：

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="林小满的自我简介：后端开发，关注命令行工具与自动化脚本。"> <title>林小满 - 后端开发 / 喜欢折腾命令行工具</title> </head>

注意meta name="description"这一条不是必须的，但它经常被搜索引擎和分享卡片抓取，写一句 60 到 120 字的人话，比空着好。

3. body 的结构设计：用语义标签把"我是谁"讲清楚

3.1header里该放什么、不该放什么

header是一个语义标签，表示"引导性内容"的区域。在自我简介网页里，它最自然的用法是把姓名、一句话定位、头像放进去。它不等于"页面顶部横幅"这个视觉效果——虽然通常顶在最上面，但那只是常见结果，不是它的定义。

有个边界要划清：header里不要塞整段自我介绍。自我介绍是页面的主体内容，应该放在main里。header只负责让读者在两秒内知道你叫什么、做什么，剩下的交给后面的区块。区分方法很简单，问自己："这段话如果被单独摘出来，还算不算页面的主要内容？"算，就不该放在header。

另外，header是可以出现多次的。比如你后面给每条经历写一个小卡片，卡片里也可以有自己的header放职位和时间。这种用法在语义上是允许的。

3.2main用section切成三块，脑子里要有一张地图

<main>表示页面的主要内容区，一个页面里只应该有一个，而且不能放在header、footer、article里面。它最大的价值是给辅助技术提供"跳过导航直接读正文"的入口。

main里面我用section切成三块，分别对应"我是谁""我会什么""怎么找我"。这三块的顺序有讲究：先让人知道你是谁，再展示能力，最后给联系方式。倒过来写——先甩一堆邮箱和链接——读者会一脸茫然。

写section时建议给它一个可读的id，比如id="about"、id="skills"、id="contact"。这样以后加导航锚点、加"回到顶部"、加分享链接都方便，而且id本身就是很好的文档注释。

3.3 标题层级：h1只能有一个，而且不能跳级

这是我最常在批改作业时纠正的一点。页面上应该只有一个h1，就是你的名字或页面主标题。往下每个section的标题用h2，如果某个section内部还要再分小组，才用h3。

不要因为"觉得 h3 的字号好看"就跳过 h2 直接用 h3。标题层级不是字号选择器，它是文档结构。屏幕阅读器用户可以按标题在页面里跳转，层级错乱会让这套导航失效。字号大小的事交给 CSS 去做，标签只负责表达从属关系。

对照关系大致是：

3.4footer与联系方式，顺手把版权年写对

footer放页面末尾的信息，比如联系方式、更新时间、版权声明。有个小细节值得顺手做对：版权年份写当前年份或者用一段脚本动态生成，别一直挂着"2020"。我之前维护一个社团页面，三年没人改过页脚，来咨询的人看到 2020 会觉得这个社团已经不活跃了。

把上面几步拼起来，body 的骨架大概是这样：

<body> <header> <img src="assets/avatar.jpg" alt="林小满的头像" width="120" height="120"> <h1>林小满</h1> <p>后端开发 / 喜欢折腾命令行工具</p> </header> <main> <section id="about"> <h2>关于我</h2> <p>写一段 80 到 150 字的具体介绍。</p> </section> <section id="skills"> <h2>我在做的事</h2> <ul> <li>Python 脚本自动化</li> <li>接口性能排查</li> <li>写作与文档整理</li> </ul> </section> <section id="contact"> <h2>联系我</h2> <p>邮箱：<a href="mailto:hi@example.com">hi@example.com</a></p> </section> </main> <footer> <p>本页最后更新于 2024 年。内容由本人维护。</p> </footer> </body>

4. 内容块的落地写法：头像、技能、联系方式各自的标签取舍

4.1 头像：alt不是装饰，宽高属性也不是可选项

<img>至少要写三个属性：src、alt、width和height。alt是替代文本，图片加载失败时显示它，屏幕阅读器读它，搜索引擎也看它。写"头像"这种词等于没写，因为它对读者没有任何信息量。写"林小满在书架前的照片"就具体得多。如果这张图纯属装饰、没有任何信息含义，可以写alt=""，空值明确表示"这是装饰，跳过它"，这比不写alt更好——不写的话，一些工具可能会去读文件名。

width和height的作用常被低估。它们不是用来"缩图"的，虽然看起来像。真正的作用是让浏览器在图片还没下载完的时候，就按这两个值预留出位置，避免图片一加载、整页内容猛地往下一跳。这个跳动在慢网络下非常明显，用户在点链接的瞬间页面错位，很容易点错。所以哪怕图片本身是 800×800，你也可以写width="120" height="120"，让浏览器先占好 120×120 的位置。

注意：写成width="120"时不要带单位，不能写120px，那是 CSS 的写法。HTML 属性只写数字。

4.2 技能清单：ul还是table，看数据有没有"表头"

新手很容易把所有排得整齐的东西都塞进table。判断标准只有一条：有没有一组字段名同时适用于每一行。技能清单只有一列内容，没有表头，用ul加li最合适。如果改成"技能名称 / 使用年限 / 熟练程度"三列，而且每行都按这三列填，那才是table。

ul前面的那个圆点如果不想要，用 CSS 的list-style: none去掉，不要因为"不想要圆点"就换成div加换行符。标签的选择权在内容的性质，样式的事留给样式表，这条原则在整个 HTML 学习里都成立。

如果清单里的条目有明确顺序——比如"阅读顺序""操作步骤"——那就用ol。自我简介里的经历列表，如果按时间从近到远排，用ol是合理的；如果只是"我喜欢的几件事"，彼此没有先后，用ul。

4.3 联系方式：a标签的href有讲究

给邮箱做链接时，href="mailto:hi@example.com"能让点击的人直接打开邮件客户端。链接文字建议直接把邮箱地址显示出来，别写成"点这里发邮件"——后者的可访问性很差，屏幕阅读器读所有链接时无法区分哪个是哪个。

外部链接要不要加target="_blank"是个有争议的话题。我的做法是：站内链接不加，站外链接可以加，加了就要顺手带上rel="noopener"。原因是从安全角度说，不加rel="noopener"时，新开的页面能通过一个引用关系操作原页面，虽然现代浏览器已经默认处理了大部分情况，但写上不吃亏。

还有个小坑：邮箱写在 HTML 源码里是明文，会被爬虫抓走发垃圾邮件。个人介绍页通常无所谓，如果你介意，可以把邮箱写成图片或者用一小段脚本拼接后再插入页面。这个属于进阶话题，第一次做页面不用纠结。

4.4 经历列表与定义列表：dl什么时候用

dl是定义列表，由dt（术语）和dd（描述）组成。它在自我简介页里其实挺有用，比如专门做一块"联系方式"，用dt写"邮箱"、dd写地址，语义上比一堆p更准确。

不过我要提醒一句：dl的语义是"名称与值的配对"，滥用会让人困惑。如果你只是想让两列文字对齐，用 CSS 的网格布局更合适。判断方法和前面一样——看内容本身是不是配对关系，不是看长相。

5. 用少量 CSS 让结构"显影"，重点在盒子与换行

5.1 为什么我坚持先把 HTML 写完再写样式

边写 HTML 边调样式，是新手最常掉进去的坑。因为浏览器默认样式会干扰判断：你以为标签写错了，其实是默认的margin；你以为布局崩了，其实是一个没闭合的标签把后面的内容吞了进去。

把 HTML 写完，先在浏览器里裸着看一眼：内容顺序对不对、层级是不是你想要的、有没有哪里挤成一坨。这一步的检查对象是结构，不是外观。结构确认无误之后再去写 CSS，出问题就一定是 CSS 的问题，排查范围小一半。

5.2 一个够用的样式骨架：容器、字体栈、行高

CSS 我不打算写很复杂，自我简介页需要的其实就是几件事：把内容限制在一个舒服的阅读宽度、设一套适合中文的字体、让行距不那么挤。

:root { --ink: #22262b; --muted: #667085; --line: #e4e7ec; } body { margin: 0; padding: 0 20px; font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 17px; line-height: 1.75; color: var(--ink); background: #fff; } main, header, footer { max-width: 720px; margin: 0 auto; } header { padding: 48px 0 24px; border-bottom: 1px solid var(--line); } section { padding: 32px 0; border-bottom: 1px solid var(--line); } h1 { font-size: 30px; margin: 16px 0 4px; } h2 { font-size: 21px; margin: 0 0 12px; } ul { padding-left: 20px; } li { margin-bottom: 6px; } img { border-radius: 50%; display: block; } a { color: #1a5fb4; }

这里有三处值得单独说。font-family那一串是一个字体栈：浏览器从左往右找第一个存在的字体。system-ui让页面用系统默认界面字体，在苹果设备上会落到苹方，在 Windows 上落到微软雅黑，看起来和系统一致，比指定单一字体自然得多。line-height: 1.75对中文段落很关键，中文笔画密集，行距太小读起来会糊成一片。max-width: 720px是为了控制阅读行长，一行字太长眼珠扫回来会串行，720 像素左右的容器配上 17 号字，一行大概三十多个汉字，是比较舒服的区间。

margin: 0 auto是水平居中的经典写法，但它生效的前提是元素有确定宽度。max-width加上它是成立的；如果只写width: auto，元素撑满整行，居中就没有意义了。

5.3 响应式只加一个媒体查询就够了

自我简介页内容量小，不需要复杂的响应式方案。真正需要处理的只有一件事：小屏幕上把横向并排的元素改成上下堆叠。如果前面用了max-width加auto居中，这一步基本已经白拿了——容器在小屏上会自然收到屏幕宽度内。

真要写媒体查询，一条就够：

@media (max-width: 520px) { body { font-size: 16px; } h1 { font-size: 26px; } header { padding-top: 32px; } }

注意这里调的是字号和间距，不是"隐藏某个区块"。小屏幕上把内容删掉是很多人的第一反应，但自我介绍页最该做的事恰恰是让手机上的人也能读到完整信息。宁可让它长一点，也不要藏起来。

6. 自查清单：乱码、改了没反应、标签没闭合这三类问题

6.1 打开是乱码或者直接看到一堆尖括号

这两件事单独说，因为成因完全不同。

打开页面看到一串问号和方块，是编码问题。排查顺序是：第一，文件真的以 UTF-8 保存了吗？多数编辑器右下角或状态栏会显示当前编码，不是 UTF-8 就另存一次。第二，<meta charset="utf-8">写了吗？位置足够靠前吗？第三，声明和实际保存的编码一致吗？三者都对了，乱码不可能还出现。

打开页面直接在浏览器里看到源代码文本，比如满屏的<html>，那通常是文件后缀不对。文件名可能是index.html.txt，Windows 默认隐藏已知扩展名，你在文件夹里看到的是index.html，实际却是文本文件。解决办法是把扩展名显示打开，重新命名。另一个可能是你在浏览器里打开了错误的路径，比如从一个本地应用里带过来的临时路径。

6.2 改了代码刷新却没变化

这个坑我踩过不止一次，原因通常是缓存。浏览器会缓存 CSS 和图片，改完后看到的还是旧版本。最暴力的处理是按强制刷新，或者临时在链接后面加个问号带随机串，比如style.css?v=2，让浏览器以为是新文件。

另一个原因是路径大小写。在 Windows 上文件名不区分大小写，Avatar.jpg和avatar.jpg都能找到；但部署到大多数服务器上之后就区分了，本地好好的图片到了线上全是裂图。我的习惯是从一开始就全部用小写加连字符，比如avatar.jpg、my-resume.html，跨平台永远不会出错。

还有一种情况比较隐蔽：你改的是 A 文件，但页面里链接的是 B 文件。目录里同时存在style.css和styles.css的时候很容易发生。解决办法是让link标签里的文件名和实际文件逐字比对一遍。

6.3 标签没闭合的连锁反应，比想象的严重

HTML 有容错能力，少写一个</p>浏览器往往也能猜出来。但容错是有代价的：后来的标签可能被塞进了错误的父级里，于是页面结构在你完全没察觉的情况下变了样。典型表现是"某个区块整个跑到了别的地方""后面所有内容的缩进莫名其妙深了一层"。

排查方法不是一行行看，而是用工具。编辑器里装一个 HTML 校验插件，保存时直接标出未闭合的标签；或者把代码贴进在线的标签配对检查工具里跑一遍。更实用的办法是养成先写开标签和闭标签再填内容的习惯：

<section id="skills"> <h2></h2> <ul> <li></li> </ul> </section>

把骨架先敲完，再一个一个回到中间去填。这个习惯在写嵌套结构时能省下大量排错时间。

还有一类是自闭合标签。HTML 里img、br、hr、meta、link、input这些是空元素，不需要闭合标签。写成<img ... />或者<img ...>都行，但千万别写成<img></img>，那会把后面的内容搞乱。

6.4 无意义的div嵌套是怎么长出来的

写着写着，你可能会发现自己在用div一层层包内容，只为了让某段文字往右挪一点。这是结构开始腐化的信号。div本身没有任何语义，用一两层做布局容器可以接受，但一旦出现三层以上，基本可以确定有些标签选错了。

我的自查方法是：把页面里的div全部念一遍，问"这块内容的本质是什么"。是一段话就是p，是一组条目就是ul，是页面的主要部分就是section。换完之后你会发现div只剩下很少几个，专门用来做纯粹的视觉分组。

7. 让页面多走一步：可访问性、分享卡片和一小段脚本

7.1 读屏软件眼里的你的页面

前面提过的lang、alt、标题层级，其实就是可访问性的核心。除此之外还有几个成本很低但收益明显的做法。

一是链接文字要有信息量。"点这里"这类文字在视觉上没问题，因为周围的人能看出上下文；但读屏用户常常是一次性列出页面上所有链接，此时满屏"点这里""更多"就完全没法用了。二是键盘可操作性：用 Tab 键在页面上走一圈，看能不能走到每一个链接，走到的时候有没有明显的焦点样式。浏览器默认会给焦点加轮廓线，如果你为了好看用 CSS 去掉了它，记得补一个替代的样式，比如给:focus-visible加一层描边。

三是颜色对比。正文文字和背景的对比度不足，在阳光下看手机基本读不了。深灰字配白底是比较稳的组合，避免浅灰字配白底这种"看起来很高级但读不清"的搭配。

7.2 分享卡片里的那一行字

当你的页面链接被发到聊天工具里，平台往往会抓取页面头部的一些信息来生成卡片：标题、描述、可能还有一张缩略图。标题来自<title>，描述来自<meta name="description">，缩略图通常需要一个额外的声明。

<meta property="og:title" content="林小满 - 后端开发"> <meta property="og:description" content="写脚本、查性能、整理文档。"> <meta property="og:image" content="assets/share.png">

这些不是硬性要求，但对一张要被发给别人的自我简介页来说，加上的人明显更"被认真对待"。分享出去的卡片有标题有描述，点开率会高不少。分享图建议做成横向的，宽高比接近 1.91:1，尺寸太小会被裁得很奇怪。

7.3 一段十行的"回到顶部"

页面如果内容偏长，加一个回到顶部的按钮体验会好很多。最省事的写法是用锚点，在页面顶部给body或者header加一个id="top"，然后放一个链接指过去：<a href="#top">回到顶部</a>。这个方案不需要一行脚本，兼容性也没问题，缺点是它是瞬间跳转，没有平滑滚动。

想要平滑效果，加一小段 CSS 就够：html { scroll-behavior: smooth; }。真要用脚本控制，一般是监听滚动、超过一定距离后再显示按钮，代码大概长这样：

// 超过 400 像素再显示回到顶部按钮 const btn = document.querySelector("#backToTop"); window.addEventListener("scroll", () => { btn.hidden = window.scrollY < 400; }); btn.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" }); });

这里要注意两点。一是脚本要放在</body>之前，或者加上defer属性，否则执行时按钮元素可能还没被解析出来，querySelector会返回空值，后面就会报错。二是按钮的hidden属性只是一个开关，它还需要 CSS 里定位成固定在角落，否则隐藏和显示都看不出来。至于那种一打开页面倒计时几秒后自动关闭窗口的脚本，我建议不要用在自我简介页上——访客想多看两眼都不行，体验很差。

8. 文件组织与交付：别让一个跑得通的页面死在路径上

8.1 目录结构从一开始就分好

一个单页也会长东西：样式表、脚本、几张图片。我的习惯是第一天就分好目录，别全部堆在根目录里。

profile/ ├── index.html ├── style.css ── assets/ ├── avatar.jpg ── share.png

index.html这个文件名是有约定的：多数静态托管服务会把目录下名为index.html的文件当成默认首页。图片和附件统一收进assets，以后要换图、要清理都不会误删代码。如果脚本只有几十行，我倾向直接内联写在 HTML 里，减少一个请求和一个文件；超过一百行再单独拆出main.js。

8.2 三种预览方式各自会遇到的坑

第一种是直接在文件夹里双击index.html。这是最顺手的方式，但它用的是file://协议，有些依赖网络请求或者模块化的功能在这里跑不起来。如果你只是做一张静态简介页，这种方式完全够用。

第二种是在项目目录下起一个本地静态服务。好处是地址看起来和线上一致，模拟了真实的请求路径。坏处是每次想看效果都要先启动一次，略麻烦。做纯静态页其实不必上这套。

第三种是编辑器自带的实时预览插件。它的优点是保存即刷新，写 CSS 调间距的时候效率高很多。缺点是它对路径的处理有时和你直接打开不一致，比如大小写不敏感，导致本地看着好好的、部署后图片全裂。所以我一般在最后交付前，一定用第一种方式（直接双击）在另一个浏览器里完整过一遍，确认没有依赖编辑器环境。

提示：交付前把浏览器窗口拖窄到手机宽度，再从头到尾滚一遍。很多问题只有在这个宽度的最后一段内容上才会露出来，比如长邮箱地址撑破了容器。

8.3 交给别人之前我会做的三件事

第一件是换一台设备看。手机、平板、别人的笔记本，至少看两个。字体、圆角、间距在不同系统上的观感差别比想象中大。

第二件是把所有人的名字、邮箱、图片版权过一遍。用别人的照片做头像是很常见的疏忽，如果是帮社团做页面，图要么自己拍、要么用明确可以商用的素材。

第三件是留一行"最后更新"的日期，并写清楚维护人是谁。自我简介页最尴尬的状态不是难看，而是三年没动过，联系方式还是早就弃用的邮箱。我自己的做法是在页脚放一个更新日期，每次改动顺手改掉它，成本三秒钟。

我个人在反复做这类页面的过程中，最有用的一个体会是：把页面的每一块内容先在纸上列成一句话，再决定用什么标签。想清楚了再敲键盘，返工次数会少很多。而那些"先搭一堆 div 再往里塞字"的做法，最后往往要花更多时间去拆掉重来。如果你正准备做自己的第一张自我简介页，别纠结配色和动画，先把<!DOCTYPE html>、lang、charset、viewport这四行写对，把内容分进header、main、footer三个区，剩下的都是可以慢慢补的细节。