先看例子，我们可以在里面填写样式属性，就能实现修改就当前页面的样式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/>标签。

链接: https://fly63.com/article/detial/12234