html查看程序

作者：灭世杀发布日期:2025-03-13 浏览:374

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 查看程序</title>
</head>
<body>
    <h1>HTML 查看程序示例</h1>
    <p>这是一个简单的 HTML 页面，用于展示如何查看 HTML 代码。</p>

    <!-- 下面是一个按钮，点击后可以查看当前页面的 HTML 代码 -->
    <button onclick="viewSource()">查看源代码</button>

    <script>
        // JavaScript 函数，用于打开一个新的浏览器窗口并显示当前页面的 HTML 源代码
        function viewSource() {
            var originalPage = document.documentElement.outerHTML;
            var newWindow = window.open("", "_blank");
            newWindow.document.write("<pre>" + escape(originalPage) + "</pre>");
            newWindow.document.close();
        }
    </script>
</body>
</html>

解释说明：

HTML 结构：此页面包含一个标题 (<h1>) 和一段文字 (<p>)。
按钮：页面中有一个按钮，点击该按钮会触发 viewSource() 函数。
JavaScript 函数：viewSource() 函数会获取当前页面的完整 HTML 代码，并在新窗口中显示它。为了确保代码能够正确显示，使用了 escape() 函数对 HTML 进行转义处理。
<pre> 标签：在新窗口中使用 <pre> 标签来保持代码的格式化输出。

这样用户就可以通过点击按钮查看当前页面的 HTML 源代码。

上一篇：在线 html

下一篇：html语言中代表网页标题的标签是