结论：纯index.html+style.css即可上线可访问、可分享、SEO友好的作品集，但必须通过HTTP协议托管（如GitHub Pages），禁用file://协议；语义化结构、相对路径、全小写文件名、图片max-width:100%和alt属性是核心要求。
直接说结论：用纯 index.html + style.css 就能上线一个可访问、可分享、搜索引擎能抓取的作品集，不需要框架、不依赖 Node.js、也不必部署到复杂服务器——但必须走 HTTP 协议（比如 GitHub Pages），否则别人打不开。
为什么双击打开的 index.html 在别人电脑上是白屏？
本地双击运行 index.html 时，浏览器地址栏显示的是 file:///xxx/index.html。这个协议下：mailto: 链接失效、./images/ 路径可能被拦截、跨域限制导致部分 CSS/JS 不加载，且搜索引擎完全无法访问。
- 测试阶段可用 VS Code 插件
Live Server或 Python 命令python3 -m http.server 8000启一个本地 HTTP 服务 - 正式对外发布，必须推送到支持 HTTP 的托管平台：GitHub Pages（免费）、Vercel（免费）、Cloudflare Pages（免费）
- GitHub Pages 要求仓库名是
username.github.io，且index.html必须在根目录、文件名全小写
HTML 结构怎么写才不算“乱搭”？
语义化不是为了炫技，而是让屏幕阅读器、搜索引擎和你自己半年后还能看懂页面逻辑。别用一堆 <div> 套娃。<ul>
<li>
<code><header></header> 放站点标题 + 导航（如“首页｜作品｜关于｜联系”）
<main></main> 包住所有核心内容，比如作品卡片列表、个人简介段落<article></article> 包裹，内部含 <h2></h2>（项目名）、<img src="./images/project1.jpg" alt="电商后台管理系统界面截图">、<p></p>（一句话说明）<footer></footer> 放邮箱链接 <a href="mailto:me@example.com"></a>、GitHub 地址（必须带 https://）、备案号（国内需填）CSS 布局踩坑最多的地方在哪？
新手常以为“用 Flex 就高级”，结果在旧版 Safari 或 IE11 上直接错位。作品集首要目标是“稳”，不是“炫”。
立即学习“前端免费学习笔记（深入）”；
- 图片必须加
max-width: 100%; height: auto;，否则高分辨率图会撑破容器 - 作品卡片推荐用
display: inline-block+ 固定宽度（如width: 300px），比 Flex/Grid 兼容性更广，手机端再用媒体查询切单列 - 文字溢出用
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;控制单行截断，避免长标题把布局顶歪 - 别在
style.css里写@import，它会阻塞渲染；所有样式写在一个文件里，或内联关键 CSS 到中
部署前必须检查的三处硬伤
很多作品集上线后“看起来没问题”，但 HR 点开就 404 或图片全红叉，问题往往藏在这几个地方：
-
<img src alt="如何通过index.html构建在线作品集：HTML展示类网站设计" >和<link href>路径是否全为相对路径？例如./css/style.css，而不是css/style.css（缺./在某些服务器下会失败） - 外链是否带完整协议？
https://github.com/xxx不能写成github.com/xxx，否则浏览器当成站内路径拼接 -
<title></title>是否唯一且简洁？首页建议格式：张三｜前端作品集 - 响应式与无障碍优先（≤60 字符），别写index.html或堆砌关键词
最易被忽略的一点：所有 HTML 文件名必须全小写（index.html、about.html），GitHub Pages 对大小写敏感，About.html 会被当成 404。
