运营同学问:后端返回的一串元素标签,我想在网页中显示的时候,将标签中的内容渲染出来,不希望直接显示标签。
回答:bootstrap加模版组织的网页,模版渲染的数据只能渲染字符串,不能转化富文本。
运营同学问:浏览器是怎么区分富文本和字符串?
...
上面的对话其实存在很多问题:
1、浏览器应该是如何区分将一段标签是原样输出,还是渲染标签内容
2、这其实应该是普通文本和超文本(html)的区别
3、那么什么是富文本,富文本和纯文本的关系,和html的关系?
上面的问题解答:
1、dom元素中的内容是一个html即超文本,浏览器就会对内容进行解析渲染,比如p标签就渲染成段落,h1标签就渲染成标题;如果dom元素中的内容是一个普通文本,就会将内容原样输出,即只显示内容,没有样式。
原生js中,可以通过innerText给元素添加文本内容,通过innerHTML给元素添加超文本内容
需要注意的是,文本内容转化成html,浏览器在渲染该内容时,会对该内容进行一个转义的过程,例如:会将<转义成<。
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