嗨，我正在演示CSS3中的新html标签，我正在制作一个文档，以便在比较源代码和输出时轻松查看和解释。而且它真的很难让我去源代码然后选择文件并在浏览器上浏览
如果我可以在同一个 html 页面上查看源代码和输出，那就太好了。
例如（我在下面附上的页面上说话）如果我选择源代码，则源代码必须显示在屏幕上或任何文本编辑器中。
我不知道是否可以这样做，如果可以的话，如果你们中的任何人能指导我，那就太好了。
user1551334
问问题
895 次
2 回答
2
要仅获取一个元素的来源，请执行以下操作：
HTML: <div id="one"><span id="two"></span></div>
JS:
document.getElementById('one').innerHTML // returns <span id="two"></span>
document.getElementById('one').outerHTML // returns <div id="one"><span id="two"></span></div>
要获取整个页面的来源，请执行以下操作：
document.doctype + document.documentElement.outerHTML
document.doctype返回文档类型，并document.documentElement.outerHTML返回标签的<html>代码和其中的所有内容。
于 2012-08-16T11:16:16.157 回答
1
使用所有现代浏览器中的开发工具（最先进的是 Chrome 和 Firefox）。
您通常使用 Ctrl-Uppercase-i 快捷方式打开此类工具集。
然后你就有了很多有用的工具，就像这里描述的 Chrome或这里的 Firefox一样。
其中之一似乎正是您所需要的。例如，在 Chrome 中，第一个选项卡称为“元素”，它向您展示了包含很多好东西的源代码（解释了带有原因的 css、鼠标悬停时显示的元素、搜索等）。
我建议您花时间阅读链接的文档，因为这是任何 Web 开发人员必不可少的工具。一旦您深入了解 javascript 或 css，您将无法停止使用这些工具。
于 2012-08-17T14:42:02.283 回答