problem：浏览器如何区分html超文本和普通文本

运营同学问：后端返回的一串元素标签，我想在网页中显示的时候，将标签中的内容渲染出来，不希望直接显示标签。

回答：bootstrap加模版组织的网页，模版渲染的数据只能渲染字符串，不能转化富文本。

运营同学问：浏览器是怎么区分富文本和字符串？

...

上面的对话其实存在很多问题：

1、浏览器应该是如何区分将一段标签是原样输出，还是渲染标签内容

2、这其实应该是普通文本和超文本（html）的区别

3、那么什么是富文本，富文本和纯文本的关系，和html的关系？

上面的问题解答：

1、dom元素中的内容是一个html即超文本，浏览器就会对内容进行解析渲染，比如p标签就渲染成段落，h1标签就渲染成标题；如果dom元素中的内容是一个普通文本，就会将内容原样输出，即只显示内容，没有样式。

原生js中，可以通过innerText给元素添加文本内容，通过innerHTML给元素添加超文本内容

      div2.innerText = '<a href="#">你好呀</a>'

      div3.innerHTML = '<a href="#">不好也</a>'

      div4.innerHTML = '<a href="#">和呵护</a>'

需要注意的是，文本内容转化成html，浏览器在渲染该内容时，会对该内容进行一个转义的过程，例如：会将&lt转义成<。

2、超文本（html文本）和普通文本的区别？

普通文本（或者说纯文本）：只有内容，没有样式和语义的文本

超文本：html即超文本标记语言，一种用标签来语义化内容的文本，比如p标签代表段落、h1代表主标题等。

超文本内容中包含的标签在浏览器中是看不见的，标签会被浏览器解析渲染。

总结：

也就是通过js我们可以对html页面文档元素进行增删改，使用模版对页面进行数据渲染，实质上也是在通过js对页面中的dom元素进行内容插入（修改）操作，我们常用的都是通过js给dom元素中插入两种类型的内容：文本类型、元素类型（即html类型的内容，html文本会被浏览器解析，文本中包含的标签会被解析成对应的标签元素）　　

3、 那么什么是富文本，富文本和纯文本的关系，和html的关系？

富文本的格式和超文本的格式类似，只不过前者包含了编辑器有编辑的功能，富文本编辑器支持显示内容（文本、图片、链接等），也支持内容样式的显示,纯文本只显示文本内容。

引申问题：

1、从浏览器输入地址到页面展示这个过程都发生了什么

2、浏览器如何解析渲染html

参考资料：

浏览器背后的原理：https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#disqus_thread

html入门（包含超文本和普通（纯）文本的区别的解释）：https://www.kancloud.cn/ask_yang/web-html5/608086

文本、富文本、html：https://www.ibm.com/support/knowledgecenter/zh/SSYJ99_8.5.0/wcm/wcm_dev_elements_text-richtext-html.html

在线富文本编辑器：https://www.layui.com/demo/layedit.html

浏览器解析html的流程：https://tangxiangmin.github.io/2017/02/19/%E6%B5%8F%E8%A7%88%E5%99%A8%E8%A7%A3%E6%9E%90HTML%E7%9A%84%E6%B5%81%E7%A8%8B/

浏览器渲染过程和原理：https://juejin.im/entry/59e1d31f51882578c3411c77

textcontent与innerText、innerHtml的区别：https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent