上一篇
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">
显示效果：<input type=”text”>
常见转义字符对照表
| 原始字符 | HTML实体 | 用途 |
|---|---|---|
| < | < |
小于号 |
| > | > |
大于号 |
| & | & |
和号 |
" |
双引号 | |
' |
单引号 |
为什么必须转义？
浏览器解析HTML时，会将<和>识别为标签起始符,若不转义：
<!-- 错误示例 --> <p>直接写标签： <div> </p> <!-- 结果：<div>会被解析为元素 -->
最佳实践总结
- 单行标签：直接使用
<和>实体 - 多行代码：用
<pre>包裹转义后的内容 - 属性值：额外转义引号（
"） - 框架场景：Vue/React中需结合
{` `}语法或v-html指令
