无人机集群多段Dubins路径协同优化实践
2026/11/5 2:43:37
系列专栏：HTML 零基础入门到企业实战全套教程 上一节：2.3 HTML 标签、元素、属性详解 下一节：待更新 阅读建议：动手复制代码，在本地编辑器打开测试，跟着敲一遍，理解会更深刻
前言
写代码的时候，我们经常有两个需求：
- 写一段文字给自己 / 团队看，浏览器不要渲染展示出来，也就是注释；
- 在网页上展示
<、>、多个连续空格、版权符号©、注册商标符号®这类特殊字符，直接写会被浏览器当成 HTML 标签解析，无法正常显示。
这就是本节要讲的HTML 注释和字符转义（实体字符），属于企业开发里必守的基础规范，面试也经常问到。
一、HTML 注释
1. 注释语法
<!-- 这里是注释内容 -->✅ 语法要点：
- 起始：
<!-- - 结束：
--> - 注释中的内容，浏览器不会渲染到页面上，只在源代码里可见
- 注释可以单行，也可以多行
示例：
<!-- 这是单行注释 --> <!-- 这是多行注释 可以写很多说明文字 用来解释这段代码作用、修改记录 -->2. 企业开发注释规范（重点，和自学不一样）
很多新手以为注释就是随便写，企业里有约定俗成的习惯：
- 注释是给人看的，不是给浏览器看的，不要写无意义注释；
- 复杂模块、公用组件、需要后续修改的地方，一定要加注释；
- 不要注释掉大量废弃代码提交到 Git 仓库！不需要的代码直接删除，注释仅用于说明；
- 注释不能嵌套！❌ 错误示例：
<!-- 外层注释 <!-- 里面再写注释 --> 外层结尾 -->HTML 不支持注释嵌套，会出现解析异常，一定要避开。
3. 注释的使用场景
- 页面模块说明：比如导航栏、轮播、底部版权区域
- 标记待完成、待优化的代码
- 团队协作，告诉同事这段代码的逻辑
- 临时屏蔽某一段代码调试（调试完记得清理）
完整演示代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>注释演示</title> </head> <body> <h3>正文内容会显示</h3> <!-- <p>这段被注释的p标签，页面看不到</p> --> <p>这段文字正常展示在页面</p> </body> </html>💡 小提示：VS Code 快捷键 选中代码，
Ctrl + /一键添加 / 取消注释（Windows）；Mac：Command + /
二、HTML 特殊字符转义（实体字符）
为什么需要转义字符？
HTML 里<、>是标签的边界符号，浏览器会默认识别成标签。 如果我们直接写：<p> 欢迎大家 < 前端学习</p>浏览器会把<当成标签开始，页面展示错乱，甚至布局出问题。
另外一个经典问题：HTML 默认会合并连续空格。 在代码里敲 10 个空格，页面上只会显示 1 个空格，想要多个空格，就需要空格实体。
HTML 实体写法有两种：
- 实体名称（可读性好，推荐企业开发用）：
&名称; - 实体编号：
&#数字;
所有实体字符必须以
&开头，以;结尾，分号不能丢！
高频常用实体字符表（日常开发 90% 场景够用）
表格
| 显示效果 | 实体名称 | 实体编号 | 说明 |
|---|---|---|---|
| （空格） | |   | 不换行空格，最常用，不会被浏览器合并 |
| < | < | < | less than 小于号 |
| > | > | > | greater than 大于号 |
| & | & | & | 和号，重点！直接写 & 会识别成实体开头 |
| © | © | © | 版权符号，底部版权栏必备 |
| ® | ® | ® | 注册商标符号 |
| ± | ± | ± | 正负号 |
| × | × | × | 乘号 |
⚠️ 重点坑：
&本身必须转义！ 如果你想页面展示&，不能直接写&，必须写&，否则浏览器会尝试解析实体，造成乱码。
完整实战示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>特殊字符转义演示</title> </head> <body> <p>1. 尖括号展示：<html> 是网页根标签</p> <p>2. 版权信息：© 2026 前端学习站 版权所有 ©</p> <p>3. 注册商标：豆包® 教程</p> <p>4. 多个空格：前端 零基础学习</p> <p>5. 和号展示：a & b 代表a和b</p> <p>6. 数学符号：2 ± 1 = 3 或 1，2 × 3 = 6</p> </body> </html>把这段代码复制到页面，打开浏览器就能看到效果。
企业开发使用建议
- 写代码演示、文档展示标签源码时，
<>一定要转义，这是面试高频考点； - 页面版权声明优先用
©，不要直接粘贴符号，避免编码乱码； - 不要滥用
做页面间距！间距优先用 CSS margin/padding。
很多新手习惯一堆 来拉开文字距离，这是不规范写法，企业项目里会被要求改成 CSS。
只用于文本内部需要保留空格的场景。
三、常见踩坑汇总（避坑清单）
- 注释忘记写
-->闭合，导致后面一大段内容被注释掉； - 实体字符漏写末尾分号
;，比如<而不是<，失效； - 大量使用
代替样式布局； - 直接写
&符号，页面出现诡异乱码； - 注释嵌套，解析异常。
四、本节小结
- HTML 注释：
<!-- 注释内容 -->，浏览器不渲染，用于代码说明、调试；VS Code 支持快捷键注释，禁止嵌套； - 实体转义字符：以
&开头、;结尾，用来在页面正常展示 HTML 保留字符和特殊符号； - 高频记住：
<、>、 、©、&； - 规范底线：排版间距交给 CSS，实体字符只负责文本符号展示。
课后练习（建议动手完成）
- 新建 html 页面，写一段注释，说明页面是【注释 & 转义练习页】；
- 在页面输出一句话：
HTML的根标签是 <html>，符号 & 要转义写成 &； - 写一个底部版权文本：© 2026 前端教程 保留所有权利。
专栏持续更新，从基础语法到企业静态页面实战，跟着连载系统化学 HTML，欢迎收藏、订阅，有疑问评论区留言！