先看例子，我们可以在里面填写样式属性，就能实现修改就当前页面的样式UI，比如：
大家可以试着改变里面css属性，就马上看到效果，是不是觉得很神奇，这是如何实现的呢？其实只是一个style的标签就可以搞定，代码如下：
<style contenteditable style="display: block;width: 100%; white-space: pre;">
html{
background: #f1f2f3;
}</style>是不是很简单。
简单说明：
<style> 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
contentEditable是html中的一个属性。设置html的contentEditable="true"时，即可开启该元素的编辑模式。
white-space:pre的作用是保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和<br/>标签。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！