路径与字符实体

约 803 字大约 3 分钟

布欧-Lewyon

2026-05-16

首页 › HTML › HTML 基础 › 路径与字符实体

文件路径

HTML 中引用外部资源（图片、链接、CSS、JS 等）时，需要指定路径。理解路径是 HTML 的基本功。

绝对路径

包含完整 URL（从协议开始）：

<a href="https://www.example.com/page.html">绝对路径链接</a>
<img src="https://www.example.com/images/photo.jpg" alt="照片">

特点：

指向网络上的固定位置，换服务器后需要修改
适合引用外部资源（如 CDN）

相对路径

相对于当前文件所在目录的路径：

<!-- 同目录下 -->
<img src="photo.jpg" alt="照片">
<img src="./photo.jpg" alt="照片">     <!-- ./ 表示当前目录 -->

<!-- 子目录下 -->
<img src="images/photo.jpg" alt="照片">

<!-- 上级目录 -->
<img src="../photo.jpg" alt="照片">    <!-- ../ 表示上级目录 -->
<img src="../../images/photo.jpg" alt="照片">  <!-- 上两级 -->

<!-- 根相对路径（以 / 开头，相对于站点根目录） -->
<img src="/images/photo.jpg" alt="照片">

路径对照表

项目结构：
project/
├── index.html
├── images/
│   └── logo.png
├── pages/
│   ├── about.html
│   └── team/
│       └── member.html
└── assets/
    └── doc.pdf

当前文件	目标文件	相对路径
`index.html`	`images/logo.png`	`images/logo.png`
`pages/about.html`	`images/logo.png`	`../images/logo.png`
`pages/team/member.html`	`images/logo.png`	`../../images/logo.png`
`index.html`	`assets/doc.pdf`	`assets/doc.pdf`
`index.html`	`pages/about.html`	`pages/about.html`

锚点链接

链接到页面内某个元素（使用 id）：

<!-- 定义锚点 -->
<h2 id="section2">第二节</h2>

<!-- 跳转到锚点 -->
<a href="#section2">跳转到第二节</a>

<!-- 跳转到其他页面的锚点 -->
<a href="about.html#team">关于我们 - 团队</a>

字符实体

在 HTML 中，某些字符有特殊含义（如 < > &），不能直接作为文本显示。需要用字符实体（Entity）替代。

常用字符实体

显示结果	描述	实体名	实体编号
`<`	小于号	`<`	`<`
`>`	大于号	`>`	`>`
`&`	和号	`&`	`&`
`"`	双引号	`"`	`"`
`'`	单引号	`'`	`'`
	不断行空格	` `	` `
`©`	版权符号	`©`	`©`
`®`	注册商标	`®`	`®`
`™`	商标	`™`	`™`
`×`	乘号	`×`	`×`
`÷`	除号	`÷`	`÷`

使用示例

<p>使用 &lt;p&gt; 标签定义段落。</p>
<p>版权所有 &copy; 2026</p>
<p>HTML &amp; CSS &amp; JavaScript</p>
<p>价格：&yen;99.99</p>
<p>保留&nbsp;不&nbsp;换&nbsp;行&nbsp;文本</p>

显示效果：

使用 <p> 标签定义段落。
版权所有 © 2026
HTML & CSS & JavaScript
价格：¥99.99
保留 不 换 行 文本

不断行空格 ` `

普通空格在 HTML 中会被折叠，  不会被折叠：

<!-- 普通空格 → 只保留一个 -->
<p>hello     world</p>
<!-- 显示：hello world -->

<!-- &nbsp; 不会被折叠 -->
<p>hello&nbsp;&nbsp;&nbsp;&nbsp;world</p>
<!-- 显示：hello    world（保留 4 个空格） -->

何时必须用实体

<!-- ❌ 错误：浏览器会把 < 和 > 解析为标签 -->
<p>HTML 标签 <p> 用于段落。</p>

<!-- ✅ 正确 -->
<p>HTML 标签 &lt;p&gt; 用于段落。</p>

<!-- ❌ 错误：& 会触发实体解析 -->
<p>Tom & Jerry</p>
<!-- 浏览器尝试将 &Jerry; 解析为实体，但不存在 → 显示异常 -->

<!-- ✅ 正确 -->
<p>Tom &amp; Jerry</p>

小结

路径类型	示例	说明
绝对路径	`https://...`	完整 URL
相对路径	`images/pic.jpg`	相对于当前文件
上级目录	`../file.html`	返回上级目录
根相对路径	`/images/pic.jpg`	相对于站点根目录
锚点	`#section2`	页面内跳转

实体	含义	记忆方法
`<`	`<`	less than
`>`	`>`	greater than
`&`	`&`	ampersand
` `	空格	non-breaking space
`©`	©	copyright