垦荒学园
  • 中文

      • 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;单引号（撇号）

      示例

      <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;窄空格

      示例

      <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 表情符号：

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

      实用示例

      版权声明

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

      数学公式

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

      价格显示

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

      引用文本

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

      完整示例

      <!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 实体可以帮助你创建更专业、更准确的网页内容。记住要对保留字符进行转义，并根据需要使用适当的符号和字符。