VS Code新建index.html即可运行原生HTML5页面，无需插件或构建工具；关键需添加、正确路径、语义化标签合理使用、script置于/body前或加defer、viewport配置完备并处理iOS兼容细节。
VS Code 里新建 index.html 就是原生 H5 页面
不用装插件、不用配置构建工具，VS Code 本身就是一个轻量但完全胜任的 HTML 编辑器。你新建一个 index.html 文件，写上标准的 和 <code>，浏览器一打开就是原生 HTML5 页面——它不依赖 React、Vue 或任何框架，就是浏览器原生解析的 HTML。
常见错误现象：页面空白、中文乱码、样式不生效，90% 是因为没加 <meta charset="UTF-8"> 或路径写错（比如 CSS 引入写成 ./css/style.css，但实际文件在 css/style.css）。
- 新建文件必须以
.html结尾，不能是.htm或无后缀 - 保存时编码选
UTF-8（右下角点击编码名可切换），否则中文注释或内容可能变问号 - 用 VS Code 自带的
Live Server插件点「Go Live」启动本地服务，比直接双击打开更可靠（避免file://协议下 Ajax/CORS 问题）
HTML5 语义化标签该用哪些，不是越多越好
原生 H5 的核心优势之一是语义化，但很多人一上来就堆 <header></header>、<nav></nav>、<main></main>、<section></section>、<article></article>、<aside></aside>、<footer></footer>，结果结构混乱、嵌套过深。语义标签的关键是「表达内容意图」，不是「凑够 HTML5 标签数」。
-
<main></main>全局只能有一个，且不能嵌套在<article></article>或<aside></aside>里 -
<section></section>必须有标题（<h1>–<h6></h6> </h1>），否则语义不成立；纯样式分块请继续用<div> <li> <code><article></article>适合能独立分发的内容（如博客正文、新闻条目），不是每个卡片都得套一层 - 确保
<script></script>标签放在前，或加defer属性，否则 DOM 还没加载完就执行 JS，document.getElementById返回null - 检查控制台是否有
Uncaught ReferenceError或Uncaught SyntaxError，这类错误会中断后续 JS 执行，导致console.log看不到 - 别在 VS Code 内置终端里运行 HTML——它不解析 HTML，
node index.html或python -m http.server都不是正确方式，要用浏览器打开或Live Server -
initial-scale=1.0在 iOS Safari 下可能被缩放拦截，建议补上user-scalable=no（仅限 WebApp 场景，否则影响可访问性） - 用
rem或vw/vh做响应式单位前，先确认根字体大小是否被重置（比如某些手机浏览器默认font-size: 16px，但微信内置浏览器可能强制放大） - 避免固定宽高（如
width: 375px），优先用max-width: 100%+box-sizing: border-box
VS Code 中调试 H5 页面时，console.log 不输出？
不是代码错了，大概率是没打开开发者工具，或者 JS 脚本加载顺序有问题。原生 H5 页面没有打包流程，JS 执行时机全靠位置和属性控制。
移动端适配不是加个 viewport 就完事
原生 H5 最容易被忽略的坑：写了 <meta name="viewport" content="width=device-width, initial-scale=1.0">，但字体小到看不清、按钮点不中、横向滚动停不下来。这是因为 viewport 只是起点，不是终点。
最麻烦的其实是 iOS Safari 的 input 聚焦自动缩放、fixed 定位抖动、click 300ms 延迟这些细节，它们不会报错，但会让页面“感觉不对”。原生 H5 的复杂点不在语法，而在这些浏览器行为的逐个对齐。
