什么是 HTML 实体,常见的 HTML 实体有哪些用途?

大白话什么是 HTML 实体,常见的 HTML 实体有哪些用途?

什么是 HTML 实体

在 HTML 里,有些字符是具备特殊意义的。像小于号 < 和大于号 > 就被用来标记 HTML 标签。要是你直接在 HTML 文本里写这些字符,浏览器会把它们当成标签的一部分去解析,而非普通文本。另外,有些字符在 ASCII 字符集中没有对应的编码,比如版权符号 ©

为了解决这个问题,HTML 引入了实体(Entities)的概念。实体是一种特殊的代码,用来表示那些在 HTML 里有特殊意义的字符或者无法直接输入的字符。实体以 & 符号开头,以分号 ; 结尾。

常见 HTML 实体的用途

1. 显示特殊字符

有些字符在 ASCII 字符集中没有对应的编码,或者在 HTML 中有特殊用途,这时候就需要用实体来显示它们。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>特殊字符示例</title>
</head>
<body>
    <!-- 显示版权符号 -->
    &copy; 2025 版权所有<br>
    <!-- 显示注册商标符号 -->
    &reg; 已注册商标<br>
    <!-- 显示欧元符号 -->
    &euro; 这是欧元符号
</body>
</html>

在这个例子里,&copy; 代表版权符号 ©&reg; 代表注册商标符号 ®&euro; 代表欧元符号

2. 显示保留字符

小于号 < 和大于号 > 在 HTML 里是用来标记标签的,要是你想把它们当成普通文本显示,就得用实体。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>保留字符示例</title>
</head>
<body>
    <!-- 显示小于号 -->
    5 &lt; 10<br>
    <!-- 显示大于号 -->
    10 &gt; 5
</body>
</html>

这里,&lt; 代表小于号 <&gt; 代表大于号 >

3. 显示空格

在 HTML 里,多个连续的空格会被浏览器解析成一个空格。要是你需要显示多个连续的空格,就得用 &nbsp; 实体。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>空格示例</title>
</head>
<body>
    <!-- 显示多个连续空格 -->
    这是&nbsp;&nbsp;&nbsp;&nbsp;多个连续空格
</body>
</html>

在这个例子中,&nbsp; 代表一个不间断的空格。

总结

HTML 实体是一种特殊代码,用来表示在 HTML 里有特殊意义的字符或者无法直接输入的字符。常见的用途包括显示特殊字符、保留字符以及多个连续的空格。

如何在HTML中正确地使用实体?

在 HTML 中正确使用实体,你需要了解实体的基本语法,并且清楚在不同场景下如何使用合适的实体。下面为你详细介绍使用方法和示例:

基本语法

HTML 实体以 & 符号开始,以分号 ; 结束。实体可以是名称实体(如 &copy;),也可以是数字实体(如 &#169;)。

使用场景及示例

1. 显示特殊字符

当你需要显示那些在 ASCII 字符集中没有对应编码或者有特殊意义的字符时,就可以使用实体。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>特殊字符实体示例</title>
</head>
<body>
    <!-- 使用名称实体显示版权符号 -->
    &copy; 2025 版权所有<br>
    <!-- 使用数字实体显示注册商标符号 -->
    &#174; 已注册商标<br>
    <!-- 使用名称实体显示欧元符号 -->
    &euro; 这是欧元符号
</body>
</html>
2. 显示保留字符

在 HTML 里,像小于号 < 和大于号 > 这类保留字符,如果你想把它们当作普通文本显示,就得使用对应的实体。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>保留字符实体示例</title>
</head>
<body>
    <!-- 使用名称实体显示小于号 -->
    5 &lt; 10<br>
    <!-- 使用数字实体显示大于号 -->
    10 &#62; 5
</body>
</html>
3. 显示空格

在 HTML 中,多个连续的空格会被浏览器解析成一个空格。若要显示多个连续空格,就需要使用 &nbsp; 实体。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>空格实体示例</title>
</head>
<body>
    <!-- 使用名称实体显示多个连续空格 -->
    这是&nbsp;&nbsp;&nbsp;&nbsp;多个连续空格
</body>
</html>

注意事项

  • 大小写敏感 :HTML 实体名称是大小写敏感的,所以必须按照正确的大小写来使用,例如 &copy; 不能写成 &COPY;
  • 分号不能省略 :实体必须以分号 ; 结尾,否则浏览器可能无法正确解析。比如 &copy 不会被识别为版权符号,而 &copy; 才可以。

综上所述,在 HTML 中正确使用实体,关键在于记住实体的基本语法和不同实体的用途,同时要留意大小写和分号的使用。

相关推荐
寅时码1 小时前
React 之死·终章:一个 useRef,把闭包陷阱、依赖数组、漫天 rerender 全送走
前端·react.js·ai编程
不好听6131 小时前
HTML 事件监听机制:从 DOM Level 0 到 React 合成事件
前端·react.js·html
wordbaby1 小时前
为什么刷新页面就 404?聊聊 SPA 路由与 Nginx 的那点事
前端
不好听6132 小时前
React 核心概念:JSX、组件与数据驱动
前端·react.js
触底反弹2 小时前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听6132 小时前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
GuWenyue2 小时前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
前端·数据库·人工智能
GuWenyue2 小时前
传统Agent工具两大痛点!300行代码落地MCP跨语言工具,彻底解耦LLM与工具
前端·人工智能·算法
小林ixn3 小时前
从 onclick 到 React 合成事件,再到完整应用逻辑:一次前端架构的深度剖析
前端·react.js·前端框架
Csvn3 小时前
🧩「找不到模块」排查全记录——Monorepo 下 TypeScript 路径别名的 5 种「不通」与根治方案
前端