vscode怎么写原生h5页面

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> 适合能独立分发的内容（如博客正文、新闻条目），不是每个卡片都得套一层

VS Code 中调试 H5 页面时，console.log 不输出？

不是代码错了，大概率是没打开开发者工具，或者 js 脚本加载顺序有问题。原生 H5 页面没有打包流程，JS 执行时机全靠位置和属性控制。

• 确保 <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

移动端适配不是加个 viewport 就完事

原生 H5 最容易被忽略的坑：写了 <meta name="viewport" content="width=device-width, initial-scale=1.0">，但字体小到看不清、按钮点不中、横向滚动停不下来。这是因为 viewport 只是起点，不是终点。

• 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

最麻烦的其实是 iOS Safari 的 input 聚焦自动缩放、fixed 定位抖动、click 300ms 延迟这些细节，它们不会报错，但会让页面“感觉不对”。原生 H5 的复杂点不在语法，而在这些浏览器行为的逐个对齐。