上一篇
HTML如何正确在页面显示标签？
在HTML中显示标签需使用 字符实体转义：` 替换为 > ， 写作 <div> ，避免浏览器解析为元素，常用 或`标签包裹代码块保留格式。
在HTML中直接书写标签（如<div>）会被浏览器解析为元素而非文本，若要在网页上显示标签本身,需对特殊字符进行转义处理：
核心方法：字符实体转义
将尖括号<和>替换为对应的HTML实体：
- < → 显示为 <
- > → 显示为 >
示例：显示一个段落标签
<p>显示标签：<p>这是一个段落</p></p>渲染结果：显示标签：<p>这是一个段落</p>
完整标签显示实践
| 需显示的标签 | HTML转义写法 | 网页效果 |
|---|---|---|
| <div> | <div> | <div> |
| <h1>标题</h1> | <h1>标题</h1> | <h1>标题</h1> |
| <a href="#">链接</a> | <a href="#">链接</a> | <a href=”#”>链接</a> |
进阶场景处理
代码块显示（多行标签）
结合<pre>标签保留格式：
<pre> <!DOCTYPE html> <html> <body> <h1>标题</h1> </body> </html> </pre>
属性中的引号转义
属性值需额外转义引号：
显示效果：<input type=”text”>
常见转义字符对照表
| 原始字符 | HTML实体 | 用途 |
|---|---|---|
| < | < | 小于号 |
| > | > | 大于号 |
| & | & | 和号 |
| " | 双引号 | |
| ' | 单引号 |
为什么必须转义？
浏览器解析HTML时，会将<和>识别为标签起始符,若不转义：
<!-- 错误示例 --> <p>直接写标签： <div> </p> <!-- 结果：<div>会被解析为元素 -->
最佳实践总结
- 单行标签：直接使用<和>实体
- 多行代码：用<pre>包裹转义后的内容
- 属性值：额外转义引号（"）
- 框架场景：Vue/React中需结合{` `}语法或v-html指令
