HTML网页代码预览器
可以用于学习和实验HTML和CSS，比较方便。源码参考自网络。
功能
实时预览：当你在左侧的“代码编辑器”中输入代码时，右侧的“预览窗口”会实时显示你的网页效果（注意，不能体现嵌入的JavaScript运行效果）。
清空代码：如果你想要重新开始，只需点击页脚的“清空代码”按钮。
屏显切换：想要更大的编辑空间？点击“屏显切换”，如果你想要退出全屏模式，只需再次点击“屏显切换”或者使用浏览器的全屏退出功能。
下面给出一段输入测试代码（你当然可以输入其它网页代码试试）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试</title>
<style>
body {
margin: 0;
padding: 20px;
color: red;
}
.container {
width: 100%;
}
</style>
</head>
<body>
<div>
<p>测试</p>
<img src="test.png" />
<!-- 注释 -->
<ul>
<!-- 注释 -->
<li>项目1</li>
<li>项目2</li>
</ul>
</div>
<div class="container">内容</div>
</body>
</html>
运行效果
这个HTML网页代码预览器，由两个文件组成（请将两个文件在同一个文件夹中）：
(1)html文件源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><title>HTML网页代码预览器</title><link rel="stylesheet" href="./normalize.css"><style>body {font-family: 'Arial', sans-serif;display: flex;height: 100vh;background-color: #f4f4f9;}header {background-color: #6a1b9a;color: white;text-align: center;padding: 1em 0;position: fixed;width: 100%;z-index: 1000;}main {display: flex;width: 100%;margin-top: 5em;padding: 1em;}.code-editor {width: 50%;height: calc(100vh - 12em);padding: 1em;font-size: 16px;resize: none;overflow-y: auto;tab-size: 4;background-color: #fff;border: 1px solid #ddd;outline: none;border-radius: 5px;}.preview-window {width: 50%;height: calc(100vh - 12em);border: 1px solid #ddd;background-color: #fff;border-radius: 5px;margin-left: 1em;}footer {background-color: #6a1b9a;color: white;text-align: center;padding: 0.5em 0;position: fixed;bottom: 0;width: 100%;display: flex;justify-content: center;align-items: center;}button {margin: 0 0.5em;padding: 0.5em 1em;cursor: pointer;background-color: #ffab91;border: none;border-radius: 5px;color: white;}button:hover {background-color: #ef5350;}.toast {position: fixed;top: 10px;left: 50%;transform: translateX(-50%);background-color: #333;color: white;padding: 0.5em 1em;border-radius: 5px;z-index: 1001;opacity: 0;transition: opacity 0.5s ease-in-out;}.design-by {position: absolute;bottom: 10px;right: 10px;font-size: 12px;color: #999;}</style>
</head>
<body><header><h1>HTML网页代码预览器</h1></header><main><textarea id="codeEditor" class="code-editor" placeholder="在此处编写您的HTML代码..."></textarea><iframe id="previewWindow" class="preview-window"></iframe></main><footer><button aria-label="清空代码" onclick="clearCode()">清空代码</button><button aria-label="屏显切换" onclick="toggleFullScreen()">屏显切换</button></footer><div id="toast" class="toast"></div><div class="design-by">设计：</div><script>(function() {const codeEditor = document.getElementById('codeEditor');const previewWindow = document.getElementById('previewWindow').contentDocument.body;const toast = document.getElementById('toast');// 将函数挂载到window对象window.clearCode = clearCode;window.toggleFullScreen = toggleFullScreen;function showToast(message) {toast.textContent = message;toast.style.opacity = 1;setTimeout(() => {toast.style.opacity = 0;}, 3000);}function updatePreview() {try {previewWindow.innerHTML = codeEditor.value;} catch (error) {console.error("预览更新时出错:", error);showToast("预览更新时出错，请检查代码！");}}function clearCode() {codeEditor.value = '';updatePreview();showToast("代码已清空！");}function toggleFullScreen() {if (!document.fullscreenElement) {document.documentElement.requestFullscreen().catch(err => {console.error(`启用全屏模式时出错: ${err.message} (${err.name})`);showToast("启用全屏模式时出错！");});} else {if (document.exitFullscreen) {document.exitFullscreen();}}}codeEditor.addEventListener('input', () => {updatePreview();});window.onload = () => {updatePreview();};})();</script>
</body>
</html>(2) normalize.css文件
上面的html文件用到的normalize.css文件，内容如下：
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {line-height: 1.15;-webkit-text-size-adjust: 100%
}body {margin: 0
}main {display: block
}h1 {font-size: 2em;margin: .67em 0
}hr {box-sizing: content-box;height: 0;overflow: visible
}pre {font-family: monospace,monospace;font-size: 1em
}a {background-color: transparent
}abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted
}b,strong {font-weight: bolder
}code,kbd,samp {font-family: monospace,monospace;font-size: 1em
}small {font-size: 80%
}sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline
}sub {bottom: -.25em
}sup {top: -.5em
}img {border-style: none
}button,input,optgroup,select,textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0
}button,input {overflow: visible
}button,select {text-transform: none
}[type=button],[type=reset],[type=submit],button {-webkit-appearance: button
}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {border-style: none;padding: 0
}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {outline: 1px dotted ButtonText
}fieldset {padding: .35em .75em .625em
}legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal
}progress {vertical-align: baseline
}textarea {overflow: auto
}[type=checkbox],[type=radio] {box-sizing: border-box;padding: 0
}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {height: auto
}[type=search] {-webkit-appearance: textfield;outline-offset: -2px
}[type=search]::-webkit-search-decoration {-webkit-appearance: none
}::-webkit-file-upload-button {-webkit-appearance: button;font: inherit
}details {display: block
}summary {display: list-item
}[hidden],template {display: none
}请按前面所说将两个文件在同一个文件夹中。现在，你可以用浏览器打开html文件，输入测试代码试试了。
