HTML中空格需用 等实体或标签原样显示,引号可用“”等实体或配合quotes属性实现弯引号,特殊字符常用、&、"、 五个实体。
HTML 里怎么让空格原样显示出来
浏览器默认会把连续多个空格、换行、制表符都压缩成一个空格,所以直接敲 或者连打空格没用。
真正起作用的是: (不间断空格)、 (半角空格宽度)、 (全角空格宽度),或者用 <pre class="brush:php;toolbar:false;"></code> 包裹整段文本。</p>
<ul>
<li><code> </code> 最常用,适合单个空格占位,比如“姓名:<code> </code>张三”</li>
<li><code><pre class="brush:php;toolbar:false;">内容</pre> 适合多行缩进或代码块,但会继承等宽字体和额外上下边距
margin、padding 或 text-indent 更可靠引号显示成 “” 而不是 "" 怎么办
英文直角引号 " 和 ' 在网页里直接写就显示成直角,但中文用户常想要弯引号「“」和「”」,这得靠 HTML 实体或 CSS 自动替换。
- 手动写实体:
“(左双引号)、”(右双引号)、‘(左单引号)、’(右单引号) - CSS 可以用
quotes属性 +<q></q>标签自动套用,但要注意浏览器默认引号风格不统一(比如 Firefox 和 Safari 对zh-CN的处理不同) - 别混用:写了
“hello”就别再套<q></q>,否则可能嵌套错位
常见 HTML 特殊字符实体速查(别背,记这几个就够)
大部分特殊符号不用查表,记住下面五个覆盖 90% 场景:
- 空格:
- 小于号:
(写 <code> 会被当成标签开头) - 大于号:
> - 与符号:
&(写&容易被解析成实体开头) - 版权符号:
©(其他如®、™也常用)
其余像 ©、®、→、• 这类,可以直接复制粘贴 Unicode 字符,只要页面声明了 <meta charset="UTF-8"> 就没问题;比记实体名更省事。
立即学习“前端免费学习笔记(深入)”;
为什么有些实体写了也不显示,反而出现乱码
本质是编码或解析层级错了。最常见三种情况:
- HTML 文件本身不是 UTF-8 编码,却写了中文符号或 Unicode 字符 → 用编辑器确认并转存为 UTF-8 无 BOM
- 在 JavaScript 字符串里拼 HTML,用了
u201c却忘了加引号或转义,导致 JS 解析失败 → 改用"\u201c"或直接写字符串 - 框架(如 React、Vue)自动转义,你写了
“结果被当普通文本渲染成字面量 → 改用{String.fromCharCode(8220)}或框架对应的 unsafe 插入方式
实体不是万能的,它只在 HTML 解析阶段生效;进了 JS、进了 CSS、进了属性值,规则全不一样。










