HTML代码无法正常渲染，浏览器直接显示源代码是什么原因？

问题成因 #

导致浏览器直接展示HTML源码的核心原因 #

• 文件保存后缀名错误：在Microsoft Expression Web 4中保存文件时，若后缀名被错误设置为.txt、.txt.html等非HTML标准后缀，浏览器会将文件识别为纯文本文件，直接输出全部内容而不做DOM渲染。请确认保存的文件后缀为.html或.htm。
• 编辑器自动转义/包裹标签：部分旧版本Microsoft Expression Web 4处理用户粘贴的代码时，会自动对<、>等特殊字符做转义处理，或是在代码外层自动包裹<pre>、<code>格式化标签，导致浏览器读取到的内容本身就是转义后的纯文本，直接展示源码。你可以用系统自带的记事本打开已保存的文件，核对内容是否和你粘贴的原始代码完全一致。
• 预览功能MIME类型配置错误：如果是从编辑器内置预览功能跳转打开Edge，部分版本的编辑器会错误将本地预览的MIME类型设置为text/plain而非text/html，导致浏览器按纯文本处理内容。你可以直接找到保存的.html文件，双击用Edge打开，排查是否为编辑器预览功能的问题。

修复源码展示问题后仍无法渲染出预期新标签页的原因 #

你使用的代码是Chrome/Edge内置新标签页的原生源代码，依赖大量浏览器内部专属资源，本地环境无法正常调用：

• 自定义标签<ntp-app>是浏览器内置组件，没有对应JS逻辑注册的前提下，浏览器会将其识别为未知标签，不会渲染对应的新标签页UI
• 代码中引用的chrome://resources/css/text_defaults_md.css、new_tab_page.js、shared_vars.css均为浏览器私有内置资源，本地文件无访问权限，也不存在于你的项目目录中
• 背景容器iframe的src属性为空，无对应逻辑动态赋值，无法加载新标签页的背景资源

内容的提问来源于stack exchange，提问作者Beatrixx