HTML5网页发布只需三步：确认服务器环境、整理静态文件、上传至正确路径；需用相对路径、注意大小写、设好默认首页，并通过公网URL测试。
HTML5网页怎么发布到线上服务器
发布 HTML5 网页本质就是把本地文件上传到能被公网访问的 Web 服务器，不是“编译”或“打包”成某种新格式。
关键动作只有三步：确认服务器环境 → 整理静态文件 → 上传到正确路径。多数异常其实卡在第二、三步。
- 确保
index.html是根目录下默认首页（Apache/Nginx 默认识别index.html，但有些虚拟主机要求是default.html或需后台设置） - 所有资源路径用相对路径，比如
C:\project\images\logo.png或绝对 URL - 上传时别漏掉子目录（
css/、js/、fonts/），且大小写要和代码里完全一致（Linux 服务器区分大小写） - 上传后直接访问
https://yourdomain.com/index.html测试，不要双击本地index.html开浏览器看——那走的是file://协议，很多 API（如fetch、localStorage在某些上下文）会受限或行为不同
IE8 及更旧浏览器打不开 HTML5 标签咋办
根本原因是 IE8 及以下不识别 、 这类语义化标签，DOM 解析失败，样式无法应用，甚至 JS 获取不到元素。
最轻量解法是加 html5shiv：一段仅在旧 IE 下运行的脚本，动态创建这些标签并让 CSS 能选中它们。
立即学习“前端免费学习笔记（深入）”；
- 只对 IE ≤ 9 生效，其他浏览器完全跳过，不影响性能
- 必须放在
里，且要在任何 CSS 和自定义 JS 之前加载 - CDN 地址推荐用：
https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js - 引入方式要套条件注释（IE 特有语法）：
旧浏览器报错 “Object doesn't support property or method 'addEventListener'”
这是 IE8 及更早版本不支持 W3C 标准事件绑定，只认 attachEvent。直接调 element.addEventListener() 就崩。
别手写兼容逻辑——现代项目应优先用工具链降级，或最小化补丁。
- 如果只是少量交互，改用
onclick="doSomething()"行内写法（简单粗暴，适合静态页） - 如果要用 JS 绑定，封装一个兼容函数：
function addEvent(el, type, fn) { if (el.addEventListener) { el.addEventListener(type, fn, false); } else if (el.attachEvent) { el.attachEvent('on' + type, fn); } } - 更稳妥的做法：用
Babel+@babel/preset-env配置targets: { ie: "8" }，让 ES6+ 语法自动转译，同时注入必要 polyfill（注意别漏配core-js/stable）
页面在旧浏览器里样式全乱，flex/grid 完全失效
display: flex 和 display: grid 在 IE10+ 才有部分支持，IE9 及以下完全没实现。强行写只会被忽略，回退到 display: block，布局彻底垮掉。
别指望“兼容写法”让老 IE 支持 Flexbox——它真没这个能力。得换思路：
- 用
float+margin或inline-block写一套基础布局，再用@supports (display: flex)包裹新版样式做覆盖 - 避免依赖
grid-template-areas这类高阶语法；IE10–11 只支持旧版 Grid 语法（display: -ms-grid），但写起来极难维护，不推荐 - 检测是否需要降级：用
document.documentMode判断 IE 版本（document.documentMode === 7表示 IE7 模式），再动态加载备用 CSS - 底线思维：明确告知用户“建议使用 Chrome/Firefox/Edge”，比花三天适配 IE8 更实际
真正麻烦的从来不是“怎么加兼容”，而是判断哪些旧浏览器还值得投入——比如内部系统要支持 IE8，就得接受技术债；对外官网，统计显示 IE8 用户低于 0.1%，那 html5shiv 就是全部需要做的。
