垦荒学园

简体中文

English

简体中文

English

切换主题

HTML 实体和符号 ​

什么是 HTML 实体？ ​

HTML 实体是用于在 HTML 文档中显示特殊字符的代码。某些字符在 HTML 中具有特殊含义（如 <、> 和 &），如果要在页面上显示这些字符，需要使用 HTML 实体。

实体语法 ​

HTML 实体有两种表示方式：

  1. 实体名称：&entity_name;
  2. 实体编号：&#entity_number;

例如：

  • &lt; 或 &#60; 表示 <
  • &gt; 或 &#62; 表示 >

保留字符 ​

必须使用实体的字符 ​

显示实体名称实体编号说明
<&lt;&#60;小于号
>&gt;&#62;大于号
&&amp;&#38;和号
"&quot;&#34;双引号
'&apos;&#39;单引号（撇号）

示例 ​

html
<p>如果 a &lt; b 且 b &gt; c，那么 a &lt; c</p>
<p>公司名称：Smith &amp; Johnson</p>
<p>他说：&quot;你好！&quot;</p>

显示结果：

如果 a < b 且 b > c，那么 a < c
公司名称：Smith & Johnson
他说："你好！"

空格字符 ​

显示实体名称实体编号说明
&nbsp;&#160;不换行空格
&ensp;&#8194;半角空格
&emsp;&#8195;全角空格
&thinsp;&#8201;窄空格

示例 ​

html
<p>普通空格：Hello World</p>
<p>不换行空格：Hello&nbsp;&nbsp;&nbsp;World</p>
<p>全角空格：Hello&emsp;World</p>

常用符号 ​

货币符号 ​

显示实体名称实体编号说明
¢&cent;&#162;分
£&pound;&#163;英镑
¥&yen;&#165;日元/人民币
€&euro;&#8364;欧元
$-&#36;美元

数学符号 ​

显示实体名称实体编号说明
×&times;&#215;乘号
÷&divide;&#247;除号
±&plusmn;&#177;加减号
≠&ne;&#8800;不等于
≤&le;&#8804;小于等于
≥&ge;&#8805;大于等于
∞&infin;&#8734;无穷大
∑&sum;&#8721;求和
√&radic;&#8730;平方根
∫&int;&#8747;积分

希腊字母 ​

显示实体名称实体编号说明
α&alpha;&#945;阿尔法
β&beta;&#946;贝塔
γ&gamma;&#947;伽马
δ&delta;&#948;德尔塔
π&pi;&#960;派
Σ&Sigma;&#931;西格玛（大写）
Ω&Omega;&#937;欧米伽（大写）

箭头符号 ​

显示实体名称实体编号说明
←&larr;&#8592;左箭头
→&rarr;&#8594;右箭头
↑&uarr;&#8593;上箭头
↓&darr;&#8595;下箭头
↔&harr;&#8596;左右箭头
⇐&lArr;&#8656;双线左箭头
⇒&rArr;&#8658;双线右箭头

标点符号 ​

显示实体名称实体编号说明
©&copy;&#169;版权符号
®&reg;&#174;注册商标
™&trade;&#8482;商标
§&sect;&#167;章节符号
&para;&#182;段落符号
•&bull;&#8226;项目符号
…&hellip;&#8230;省略号
′&prime;&#8242;分（角度）
″&Prime;&#8243;秒（角度）

引号和撇号 ​

显示实体名称实体编号说明
"&ldquo;&#8220;左双引号
"&rdquo;&#8221;右双引号
'&lsquo;&#8216;左单引号
'&rsquo;&#8217;右单引号
«&laquo;&#171;左书名号
»&raquo;&#187;右书名号

其他常用符号 ​

显示实体名称实体编号说明
°&deg;&#176;度数符号
¼&frac14;&#188;四分之一
½&frac12;&#189;二分之一
¾&frac34;&#190;四分之三
‰&permil;&#8240;千分号
†&dagger;&#8224;剑号
‡&Dagger;&#8225;双剑号
♠&spades;&#9824;黑桃
♣&clubs;&#9827;梅花
♥&hearts;&#9829;红心
♦&diams;&#9830;方块

表情符号（Emoji） ​

现代浏览器支持 Unicode 表情符号：

html
<p>😀 &#128512; 笑脸</p>
<p>❤️ &#10084; 红心</p>
<p>⭐ &#11088; 星星</p>
<p>🎉 &#127881; 庆祝</p>
<p>👍 &#128077; 点赞</p>

实用示例 ​

版权声明 ​

html
<footer>
    <p>&copy; 2024 我的网站。保留所有权利。</p>
</footer>

数学公式 ​

html
<p>勾股定理：a&sup2; + b&sup2; = c&sup2;</p>
<p>圆的面积：A = &pi;r&sup2;</p>
<p>温度：25&deg;C</p>

价格显示 ​

html
<p>价格：&yen;99.99</p>
<p>折扣：&frac12; 价格</p>

引用文本 ​

html
<p>他说：&ldquo;这是一个很好的主意！&rdquo;</p>
<p>书名：&laquo;HTML 教程&raquo;</p>

完整示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 实体示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        
        .example {
            background-color: #f4f4f4;
            padding: 15px;
            margin: 10px 0;
            border-left: 4px solid #333;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        th {
            background-color: #333;
            color: white;
        }
    </style>
</head>
<body>
    <h1>HTML 实体和符号示例</h1>
    
    <div class="example">
        <h2>特殊字符</h2>
        <p>小于号：&lt; 大于号：&gt; 和号：&amp;</p>
        <p>引号：&quot;Hello&quot; 撇号：&apos;World&apos;</p>
    </div>
    
    <div class="example">
        <h2>数学符号</h2>
        <p>2 &times; 3 = 6</p>
        <p>10 &divide; 2 = 5</p>
        <p>x &le; 10 且 x &ge; 0</p>
        <p>&pi; &asymp; 3.14159</p>
    </div>
    
    <div class="example">
        <h2>货币符号</h2>
        <p>美元：$100</p>
        <p>欧元：&euro;50</p>
        <p>人民币：&yen;200</p>
        <p>英镑：&pound;75</p>
    </div>
    
    <div class="example">
        <h2>版权信息</h2>
        <p>&copy; 2024 我的公司&reg;</p>
        <p>产品名称&trade;</p>
    </div>
    
    <div class="example">
        <h2>箭头和符号</h2>
        <p>导航：&larr; 上一页 | 下一页 &rarr;</p>
        <p>评分：&starf;&starf;&starf;&starf;&star;</p>
        <p>项目列表：&bull; 项目1 &bull; 项目2 &bull; 项目3</p>
    </div>
</body>
</html>

最佳实践 ​

  1. 使用 UTF-8 编码：在 HTML 文档中使用 <meta charset="UTF-8">，可以直接输入大多数特殊字符
  2. 保留字符必须转义：始终对 <、>、&、" 等字符使用实体
  3. 提高可读性：对于常用符号，使用实体名称比编号更易读
  4. 考虑兼容性：某些旧浏览器可能不支持所有实体
  5. 使用语义化：在适当的地方使用正确的符号（如版权符号、商标符号）

总结 ​

HTML 实体是在网页中显示特殊字符的重要工具。掌握常用的 HTML 实体可以帮助你创建更专业、更准确的网页内容。记住要对保留字符进行转义，并根据需要使用适当的符号和字符。