HTML Entities 实体-代码号

概述

HTML 实体字符是以和号（&）开头、分号（;）结尾的特殊文本片段，用于在网页中显示保留字符、不可见字符以及难以通过标准键盘输入的符号。实体字符的使用确保了浏览器能够正确解析和显示这些特殊字符，避免与HTML标签语法产生冲突。

保留字符与实体表示

HTML 保留字符具有特殊含义，浏览器会将其解析为代码指令而非普通文本。为了正确显示这些字符，需要使用对应的实体名称或数字编码。

常用保留字符实体对照表

符号	描述	实体名称	数字编码
"	双引号	`"`	`"`
'	单引号	`'`	`'`
&	和号	`&`	`&`
<	小于号	`<`	`<`
>	大于号	`>`	`>`

实体字符使用方法

基本语法

实体字符可通过两种方式引用：

&实体名称;    <!-- 使用实体名称 -->
&#实体数字;   <!-- 使用数字编码 -->

示例：显示HTML标签代码

<!DOCTYPE html>
<html>
<head>
    <title>HTML实体字符示例</title>
</head>
<body>
    <h3>显示HTML标签代码</h3>
    <p>要在页面中显示div标签，需使用：</p>
    <code>&lt;div id="container"&gt;内容区域&lt;/div&gt;</code>
</body>
</html>

常用特殊字符实体

符号类实体

字符	描述	实体名称
≥	大于等于	`≥`
©	版权符号	`©`
€	欧元符号	`€`
®	注册商标	`®`
™	商标符号	`™`

示例：特殊字符展示

<!DOCTYPE html>
<html>
<head>
    <title>特殊字符示例</title>
</head>
<body>
    <h3>常用特殊字符展示</h3>
    <p>版权信息：&copy; 2023 <a href="https://www.ebingou.cn/">代码号</a></p>
    <p>数学符号：2 &times; 3 &ge; 6</p>
    <p>货币单位：价格：50 &euro;</p>
    <p>注册商标：产品名称&reg;</p>
</body>
</html>

非断行空格 (Non-breaking Space)

概念与应用

非断行空格（ ）用于创建不会换行的空格，确保相连的词语或数字在同一行显示。同时可防止浏览器合并多个连续空格。

使用场景示例

<!DOCTYPE html>
<html>
<head>
    <title>非断行空格示例</title>
</head>
<body>
    <h3>非断行空格应用</h3>
    <p>时间表示：2:00&nbsp;PM</p>
    <p>速度单位：300&nbsp;km/h</p>
    <p>产品型号：iPhone&nbsp;14&nbsp;Pro</p>
    <p>多个空格：开始&nbsp;&nbsp;&nbsp;&nbsp;结束</p>
</body>
</html>

附加符号与变音标记

变音符号使用

变音符号是附加在字母上的修饰标记，用于改变发音或创建新的字符组合。

符号	基础字符	组合结果	实体表示
̀	a	à	`a&grave;`
́	a	á	`a´`
̂	a	â	`a&circ;`
̃	a	ã	`a&tilde;`

示例：变音符号应用

<!DOCTYPE html>
<html>
<head>
    <title>变音符号示例</title>
</head>
<body>
    <h3>变音符号展示</h3>
    <p>法语：caf&eacute;</p>
    <p>西班牙语：ni&ntilde;o</p>
    <p>德语：f&uuml;r</p>
</body>
</html>

通过CSS content属性使用实体

CSS中的实体应用

<!DOCTYPE html>
<html>
<head>
    <style>
        .custom-list li:before {
            content: "➤ ";
            color: #3498db;
            margin-right: 8px;
        }
        .quote:before {
            content: "“";
            font-size: 2em;
            color: #e74c3c;
        }
        .quote:after {
            content: "”";
            font-size: 2em;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <h3>CSS content属性使用实体</h3>
    <ul class="custom-list">
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
    </ul>
    <p class="quote">这是一段引用的文本内容</p>
</body>
</html>

本节课程实践建议

在显示HTML代码时，务必使用 < 和 > 替代尖括号
对于重要文本中的空格，考虑使用   确保排版稳定
优先使用实体名称，因其更易记忆和理解
在需要确保特殊符号正确显示的场合，使用实体字符而非直接输入
对于复杂的数学公式或特殊符号，考虑使用MathML或专业库
在使用实体字符时，注意与周围文本的样式协调
定期验证实体字符的浏览器兼容性，特别是最新的Unicode字符

通过合理运用HTML实体字符，可确保网页内容的准确显示和跨浏览器兼容性，提升网站的专业性和用户体验。

本文标签：

HTML Entities 实体

概述