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

原文地址:https://www.cnblogs.com/yy95/p/10054779.html