当前位置：首页 > 前端开发 > 正文

如何查看网页上的HTML代码？

admin
前端开发
2025-06-27
7

在网页中显示HTML原文而非解析结果，需将代码中的特殊字符（如、&）转换为HTML实体（如<、>、&），常用方法包括：使用标签包裹代码，或通过JavaScript的textContent属性自动转义，也可借助在线工具或编程语言函数（如PHP的htmlspecialchars）实现转义处理。

在网页上显示HTML原文，需确保代码以纯文本形式呈现而非被浏览器解析执行，以下是详细方法及注意事项，符合百度E-A-T原则（专业性、权威性、可信度）：

核心方法：HTML实体转义

将HTML保留字符（如 <, >, &）转换为对应的实体编码（如 <, >, &）,这是最安全可靠的方式。

如何查看网页上的HTML代码？第1张

步骤示例：

<div class="example">Hello World</div>  <div class="example">Hello World</div>

效果：

<div class="example">Hello World</div>

三种实现方式

手动转义工具

使用在线工具（如 FreeFormatter）快速转义代码。
优点：无需编程,适合单次使用。

服务器端转义（推荐）

PHP示例： <?php echo htmlspecialchars('<div>安全显示HTML原文</div>'); ?>
Python (Django)示例： from django.utils.html import escape escaped_html = escape('<div>安全显示HTML原文</div>')
Node.js示例： const escapeHtml = (str) => str.replace(/[&<>"']/g, char => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[char]));

前端JavaScript转义

function escapeHtml(unsafe) { return unsafe.replace(/[&<>"']/g, char => `&#${char.charCodeAt(0)};`); } document.getElementById("output").innerText = escapeHtml('<script>alert("xss")</script>');

注意：仅用于静态内容,动态内容需配合服务器端转义。

如何查看网页上的HTML代码？第2张

增强可读性：代码高亮

使用开源库实现语法高亮,提升用户体验：

Highlight.js：
Prism.js：类似用法,支持更多语言扩展。

安全警告（关键！）

禁止直接输出未转义代码：
若直接使用 innerHTML 或未转义的模板，会导致XSS攻破漏洞： // 危险！可能执行恶意脚本 element.innerHTML = userInputHtml;
防御建议：
1. 始终优先使用实体转义。
2. 避免 innerHTML，改用 textContent 或 innerText。
3. 对用户提交的内容进行双重验证（前端+后端）。

最佳实践总结

必做转义：服务器端转义为第一道防线。
代码高亮：用Highlight.js/Prism.js提升可读性。
语义化标签：使用 <pre>（保留格式）和 <code>（标记代码块）。
性能优化：高亮库在页面加载后执行,避免阻塞渲染。
移动端适配：添加横向滚动条防止代码溢出： pre { overflow-x: auto; padding: 15px; background: #f5f5f5; }