本文是《100天精通HTML基础入门》专栏第 07 篇,订阅专栏不迷路。
本文目录
-
今日目标
-
概念图解
-
跟做案例
-
新手常见的坑
今日目标
今天结束时,你写的每个网页都会自带"说明书":哪块是导航、哪块是待办、哪段是别人的代码抄来要改的。三个月后你打开自己的旧文件,不用从头猜。
概念图解
注释是写在代码里、但不上页面的文字。语法只有一种:
<!– 注释内容 –>
它像书页边的铅笔批注:印刷出来的正文里没有它,但翻到这页的人(包括未来的你)全靠它知道"这段为什么这么写"。
什么时候写注释?三 occasions 值得:区块开头(这是导航/这是页脚)、待办事项(TODO:换成真实照片)、为什么这么写(这里故意不用 br,因为语义)。
什么时候不用写?代码本身一目了然时。<!– 这是一个段落 –> 放在 <p> 前面,是把噪音当勤奋。
跟做案例
给 Day 01 的名片页装上完整的说明书。注意我用了区块注释和 TODO 两种,各司其职。
<!– 《100天精通HTML基础入门》Day 07 · 平头哥 · 技术改变世界,勤奋改变人生 –>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>带说明书的名片页</title>
<style>
body { max-width: 640px; margin: 40px auto; padding: 0 20px;
font-family: "Microsoft YaHei", sans-serif; background: #f7f5ef; color: #24292f; line-height: 1.75; }
h1 { color: #2563eb; border-bottom: 3px solid #ffd166; padding-bottom: 8px; }
.todo { background: #fff8e1; border: 1px dashed #d9a441; border-radius: 8px;
padding: 12px 16px; font-size: 14px; color: #8a6d1a; }
</style>
</head>
<body>
<!– ============ 主标题区:面试官第一眼看这里 ============ –>
<h1>你好,我是平头哥</h1>
<p>正在用 100 天学会从零写网页。这是第 7 天的成果。</p>
<!– ============ 待办区:每完成一项就删掉一行 ============ –>
<div class="todo">
<p>我的待办:</p>
<!– TODO:Day 09 换成真实照片 –>
<p>- 头像还是占位的灰色方块</p>
<!– TODO:Day 13 排版再打磨一轮 –>
<p>- 间距还没调</p>
</div>
<!–
备忘:这页故意不用 <br> 排版。
原因见 Day 05:分段是 p 的活。
–>
<p>页面下方留白,等后续内容。</p>
</body>
</html>
三个习惯值得抄走:
-
区块注释加分号线 <!– ===== … ===== –>,在长文件里一眼扫出结构。
-
TODO 写具体动作(“换成真实照片”),不写"以后改"这种等于没写的。
-
"为什么"比"是什么"更值钱。"这是段落"不用写;"这里故意不用 br"必须写——三个月后你只记得自己犯过蠢,不记得为什么这么选。
新手常见的坑
注释里再套一个注释,后面的正文会凭空消失。
<!– 《100天精通HTML基础入门》Day 07 · 平头哥 · 技术改变世界,勤奋改变人生 –>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>注释里套注释,正文消失</title>
<style>
body { max-width: 640px; margin: 40px auto; padding: 0 20px;
font-family: "Microsoft YaHei", sans-serif; background: #f7f5ef; color: #24292f; line-height: 1.8; }
.bar { background: #fff3e0; border: 1px solid #e3e0d8; border-radius: 6px;
padding: 8px 14px; font-size: 14px; color: #8a3a28; margin-bottom: 20px; }
.gone { background: #e9a79a; border-radius: 8px; padding: 16px 20px; color: #6e1f12; }
.note { color: #8a3a28; font-size: 14px; margin-top: 14px; }
</style>
</head>
<body>
<div class="bar">作者想"临时注释掉"一段带注释的代码</div>
<!– 这段先注释掉
<!– 内部原有的注释 –>
<p class="gone">被注释的正文</p>
–>
<p>这段是正常正文。</p>
<p class="note">结果:第一个 –> 就把外层注释关掉了,
后面的内容被当成代码,而真正想保留的段落还在"注释"里。</p>
</body>
</html>
原因:浏览器找注释的结束符,只认第一个 –>。外层注释刚开,内部的 –> 就把它闭合了,后面那行 –> 成了正文里的怪字符,而"被注释的正文"到文件尾都没等到结束符——整块不显示。
临时注释掉一段本身带注释的代码,是这个词法陷阱唯一的高频触发场景。处理办法:先把内部注释删掉再注释外层,或者用编辑器的"切换行注释"功能(它知道怎么安全处理)。
第二个坑顺带说一下:从模板复制完忘了删模板里的示例注释。注释不上页面,但会跟着源代码进你的仓库、被面试官右键看到。发版前全局搜一遍 <!– 过一遍,一分钟的事。
课后小任务
把今天的名片页复制下来。第一,在 <head> 后面写一条注释说明这个文件是什么、哪天建的;第二,给 TODO 区加两条你自己的待办;第三,故意在一条注释里嵌套另一条注释,保存刷新,找到"消失"的那段正文,再修回来——现在你知道它去哪了。
明日预告
Day 08 给页面上颜色:color、background、十六进制色值。你会搞懂 #ff6600 里六个字符各管什么、为什么 #f60 是它的缩写、以及"引号打成中文的"这个让样式整个失效的经典翻车。
参考资料
-
MDN: 如何添加注释
-
WHATWG: 注释语法
-
W3C: HTML 与 CSS 概览
