HTML网页需浏览器解析才能运行，推荐JSFiddle、CodePen、StackBlitz三个免安装实时预览工具；ATS友好结构须用语义化标签、文本信息、统一时间格式；响应式需viewport元标签、max-width和rem单位；发布用GitHub Pages确保长期可访问。
不能用纯 HTML 在线“运行”简历网页——HTML 本身不执行，它需要浏览器解析渲染；所谓“在线制作”，实际是用在线编辑器写 HTML + CSS，实时预览效果，再导出或部署。
用什么工具在线写并实时看效果
推荐三个真正免安装、改完即见效果的在线环境：
-
JSFiddle：适合带简单交互（如折叠模块）的简历，支持 HTML/CSS/JS 三栏分屏，
fiddle保存后有独立 URL，可直接发给 HR -
CodePen：社区活跃，模板多，搜
resume html css能直接 fork 现成样式；注意免费账户的私有 Pen 有数量限制 -
StackBlitz：更接近本地开发体验，支持文件夹结构（比如把
style.css单独拆出来），适合想后续加响应式或动画的人
别用“XX在线简历生成器”类网站——它们导出的 HTML 常含冗余 JS、内联样式混乱，后期想改排版或适配手机会卡死。
HTML 结构怎么写才不被 ATS（招聘系统）过滤
很多公司用 ATS 扫描简历 PDF 或网页源码提取信息，结构松散或语义错乱会导致姓名、技能、经历被漏读。关键不是“好看”，是“能被机器读懂”：
立即学习“前端免费学习笔记（深入）”；
- 用语义化标签：
<section>包技能，<article>包每段工作经历，<h1>只出现一次且是你的姓名（不是“个人简历”） - 避免纯图片简历：ATS 无法识别图中文字；头像用
<img>标签，但姓名、职位、联系方式必须是真实文本 - 技能栏别写“熟悉 JavaScript / React”，拆成单独
<span>或<li>，例如：<li>JavaScript</li><li>React</li>—— ATS 更容易逐条提取 - 时间格式统一用
2022.03–2024.06或Mar 2022 – Jun 2024，别用“两年半”“近两年”
CSS 怎么写才能手机打开不缩成一团
默认 HTML 在手机上会按桌面宽度渲染，然后整体缩小——这是最常见“简历在微信里看不清”的原因。必须加基础响应式控制：
- 在
<head>里塞这行：<meta name="viewport" content="width=device-width, initial-scale=1"> - 禁用固定像素宽：别写
width: 960px，改用max-width: 960px并配合margin: 0 auto - 字体大小用
rem或em，别全用px；小屏下可用媒体查询微调：@media (max-width: 768px) { body { font-size: 14px; } } - 简历通常单列足够，别折腾 Flex/Grid 多栏布局——手机上反而换行错乱
测试方法：在 Chrome 开发者工具里按 Ctrl+Shift+M（Win）或 Cmd+Shift+M（Mac）切设备模拟，重点看 iOS 微信内置浏览器（常渲染最保守）。
导出后怎么让别人不用点“下载”就能看
在线编辑器生成的页面默认只有临时链接，关掉标签页就失效。要长期有效，得发布成静态网页：
- 从 JSFiddle/CodePen 导出 ZIP，解压后得到
index.html和配套 CSS/JS 文件 - 上传到 GitHub Pages（免费、稳定、支持自定义域名）：建仓库 → 传文件 → Settings → Pages → 选
main分支根目录 → 几秒后生成类似https://username.github.io/resume的地址 - 别用百度云、阿里云盘分享 HTML——它们强制下载，且手机点开常跳转到网盘 App，HR 不会等
最后检查一件事：打开你发布的链接，在手机 Safari 和微信里各点一次，确认不弹“下载”、不闪退、电话邮箱能点击唤起拨号/发信——这些细节漏掉，比排版丑更致命。
