旧版ie（ie6–ie8）不识别html5语义标签，需在顶部用document.createelement()提前声明，并配合css设display:block；推荐用html5shiv或手写三行脚本，同时降级css选择器和js api。

旧版浏览器（尤其是 IE6–IE8）根本不会把 <header></header>、<nav></nav>、<main></main> 这类标签当 HTML 元素处理——DOM 里没有节点，CSS 选不到，JS 查不到。想让它们“被看见”，核心就一条：在浏览器开始解析页面前，用 document.createElement() 主动声明这些标签名。

必须在 最顶部执行脚本

IE 的 DOM 解析器遇到不认识的标签会直接跳过，不创建节点。所以声明动作必须发生在它读取 之前。一旦页面结构已渲染，再补调用也无效。

• 脚本要放在 内第一个 <script></script> 标签中
• 不能等 DOMContentLoaded 或 window.onload
• 推荐写法：['header','nav','article','section','aside','footer','main','figure','figcaption','time'].forEach(tag => document.createElement(tag));

声明之后必须重置 display 样式

即使标签被识别，IE8 仍默认将其当作 inline 元素，导致布局塌陷。光有 JS 声明不够，必须配合 CSS 强制设为块级。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 在所有样式表加载前，内联或提前引入这段规则：header, nav, article, section, aside, footer, main, figure, figcaption, time { display: block; }
• 避免只写 header { }，建议加 class 回退，例如 .header, header { }，方便后续维护

用 html5shiv 还是手写？看场景选

html5shiv 是成熟方案，内部做了 createElement + 注入 display 样式 + 触发重绘，CDN 地址推荐：https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js。但企业内网或对稳定性要求高时，手写更可控。

• 手写三行足够：if (!document.createElement('header').nodeName) { ['header','nav','main'].forEach(tag => document.createElement(tag)); }
• 搭配内联 <style></style> 设置 display，并用条件注释包裹：<!--[if lt IE 9]><script>...</script><style>...</style><![endif]-->
• 漏掉 <main></main> 很常见——IE11 以下也不支持，务必包含

注意配套问题：CSS 和 JS 不能只依赖标签名

标签能显示不等于功能完整。旧浏览器对现代语法支持有限，需同步降级。

• CSS 选择器别只靠 nav a，可加 class 如 .nav-link 保证命中
• JS 查询别用 document.querySelector('header')（IE7 不支持），改用 document.getElementById('header') 或 getElementsByClassName
• 避免依赖 flexbox、data-* 属性（需用 getAttribute）、localStorage（IE7 及以下需回退到 userData 或 cookie）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！