应使用html实体<、数值引用
如果您在HTML中直接输入小于号（浏览器会将其误认为是标签的开始符号，导致内容无法正常显示或页面结构错乱。以下是实现小于号正确输出的多种方法：
一、使用HTML实体字符 <
HTML预定义了小于号的标准实体表示，通过替换原始字符为对应实体，可确保浏览器将其渲染为可见文本而非解析为标签起始符。
1、在需要显示小于号的位置，输入
2、例如，要显示“a
立即学习“前端免费学习笔记（深入）”；
3、保存HTML文件并在浏览器中打开，可见页面上准确呈现为a 。
二、使用数值字符引用
HTML支持十进制数值引用方式表示Unicode字符，小于号的Unicode码点为U+003C，对应十进制为60，因此可用
1、在HTML源码中需显示小于号处，直接插入
2、例如，表达式“x x 。
3、该方式不依赖命名实体支持，兼容所有HTML版本及解析器。
三、嵌入在或<code>标签内并配合实体转义</h2>
<p>当需批量展示含小于号的代码片段时，结合语义化标签与实体转义可兼顾可读性与安全性，避免意外解析。</p>
<p>1、用<pre class="brush:php;toolbar:false;"><code>包裹代码块，增强格式保留能力。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1218" title="Designs.ai"><img
src="https://img.php.cn/upload/ai_manual/001/431/639/68b7a0c4699e8591.png" alt="Designs.ai" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1218" title="Designs.ai">Designs.ai</a>
<p>AI设计工具</p>
</div>
<a href="/ai/1218" title="Designs.ai" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>2、在code内部所有小于号均替换为<。</p>
<p>3、例如：<br><pre class="brush:php;toolbar:false;"><code>if (a < b) {<br> return true;<br>}</code>
4、浏览器将完整显示为if (a return true;
}，缩进与符号均保持原貌。
四、JavaScript动态插入文本节点
绕过HTML解析阶段，在DOM加载完成后通过脚本创建纯文本节点，从根本上规避转义需求。
1、在HTML中预留一个容器元素，如。
2、在<script>标签内执行：document.getElementById('output').textContent = 'value < 5';</script>
3、由于textContent属性自动将内容作为纯文本处理，value 将原样显示，无需任何实体编码。
五、使用CDATA节（仅限XHTML或XML上下文）
在严格遵循XML语法的文档中，CDATA节允许内部字符免于解析，所有内容包括
1、确保文档类型为XHTML，并以.xml或.xhtml扩展名提供服务。
2、在script或style标签外使用：。
3、注意：在标准HTML5文档中，CDATA节会被忽略或引发解析错误，此方法不适用于常规HTML网页。
