项目正文里开始出现邮箱、版权符号和 HTML 标签名称。问题也随之而来:如果你想在页面上显示 <h1> 这几个字符,浏览器会把它当成真正的标签。HTML 实体可以消除这种歧义。
看下面这段代码:
<p>页面主标题使用 <h1> 标签。</p>我们的本意是展示标签名称,但浏览器会把中间的 <h1> 当作元素开始。要显示小于号和大于号,需要写成实体:
<p>页面主标题使用 <h1> 标签。</p>实体以 & 开始,以 ; 结束。浏览器渲染后,访客看到的仍然是 <h1>。
现代 UTF-8 文档可以直接写许多符号,例如中文和 ©。但 <、& 等会参与 HTML 解析的字符仍然需要转义。
<p>路线主题:河岸 & 老街</p>
<p><small>© 2026 城市漫游指南</small></p> 表示不换行空格。它会把相邻内容连接起来,避免在这个空格处换行:
<p>集合时间:上午 9:00</p>它偶尔适合让单位和数值保持在一起,但不应该连续写很多个来缩进或对齐:
<!-- 不要这样排版 -->
<p> 运河慢行线</p>布局和间距应该由 CSS 处理。用空格“推位置”会在不同屏幕上失效,也会让代码难以维护。
行内代码使用 <code>:
<p>页面主标题使用 <code><h1></code> 元素。</p>多行代码使用 <pre> 保留换行和空格,再在内部使用 <code>:
<pre><code><h1>城市漫游指南</h1>
<p>用一天时间,重新认识这座城市。</p></code></pre>注意这里有两层含义:外层真正的 pre 和 code 负责标记代码块;内层想展示的 <h1> 必须写成 <h1>,否则又会被浏览器解析成元素。
键盘输入可以用 <kbd>:
<p>保存文件后,按 <kbd>Ctrl</kbd> + <kbd>R</kbd> 刷新页面。</p>预格式化的普通文本也可以用 pre,但不要用它替代正常段落布局。
HTML 属性里的 URL 如果带多个查询参数,连接参数的 & 应写成 &:
<a href="search.html?route=canal&day=saturday">查看周六路线</a>浏览器实际请求的地址仍然包含 &。实体只解决 HTML 源代码中的解析问题。
在首页 main 末尾加入一个小练习区:
<section aria-labelledby="learn-title">
<h2 id="learn-title">你正在阅读 HTML</h2>
<p>这个页面的主标题由 <code><h1></code> 元素表示。</p>
<p>链接使用 <code><a></code> 元素,目标地址写在 <code>href</code> 属性中。</p>
然后检查页脚,确保版权符号写法清楚:
<p><small>© 2026 城市漫游指南</small></p>特殊字符问题解决后,正文已经比较稳定。下一章回到每个页面的 head,补上真正适合发布的标题、摘要和图标信息。