HTML页面在浏览器打开显示空白页的问题排查

你贴出的HTML代码不存在会导致整页渲染崩溃的致命语法错误，把img从head移到body的操作是正确的，空白页问题和链接格式调整也没有直接关联，按以下优先级排查即可：

• 先确认文件本身正常：找到你本地存储的这个网页文件，右键用记事本/VS Code打开，确认文件后缀是.html而非.txt或无后缀，同时确认文件内容和你贴出的代码完全一致——如果保存时磁盘写入异常、权限不足，可能导致文件实际是0字节的空文件，打开自然是空白；如果复制代码时误把代码片段外层的<div class="snippet">等容器代码一起存进了文件，也可能导致渲染异常。
• 修正代码里的无效属性：你的img标签错误使用了不存在的length属性定义高度，img标签控制高度的标准属性是height，这个笔误不会导致整页空白，但会让图片无法按你预期的尺寸显示，修正后的img代码如下：

<img
  src="https://media.gettyimages.com/photos/alfonso-castro-caloncho-poses-for-photo-during-a-black-carpet-as-part-picture-id1349969739?s=2048x2048"
  alt="Caloncho at the Vogue Magazine 'Dia de Muertos' Gala - Black Carpet"
  width="455"
  height="682"
/>

• 排除浏览器侧问题：如果之前打开过错误版本的页面，Chrome的强缓存可能会持续加载旧的空白资源，可以按F12打开开发者工具，刷新页面时勾选「禁用缓存」，同时查看控制台的红色报错信息定位具体拦截原因。部分广告拦截、安全防护类浏览器插件可能误拦截带远程图片、iframe嵌入的本地页面，可临时禁用插件后重试。
• 确认打开的是目标文件：不要直接双击文件打开，在VS Code里右键点击当前编辑的文件标签，选择「复制路径」，把路径粘贴到Chrome地址栏访问，避免打开到之前新建的其他空白测试文件。

额外说明：代码里引用的Getty Images图片配置了防盗链，本地打开时大概率会加载失败显示占位碎图；YouTube嵌入的iframe也需要对应网络环境才能正常加载，这两个问题只会影响对应元素的显示，不会导致整页空白，页面的标题、正文介绍、作品列表、官网链接等文本内容都会正常渲染。

内容的提问来源于stack exchange，提问作者jesus-orduno