纯html+css可快速搭建语义化、可访问的作品集首页：用结构，包裹作品，图片加alt与max-width:100%，链接用正确协议和相对路径，文件名全小写，确保404与无障碍可用。
用纯 HTML + CSS 快速搭出作品集骨架
不需要框架、不依赖构建工具，index.html 本身就能撑起一个干净可访问的作品集首页。关键不是“多炫”，而是结构清晰、内容可读、图片能加载、链接不跳错。
实操建议：
- 从语义化标签起步：
<header></header>放标题和导航，<main></main>包作品卡片，<footer></footer>写联系方式 - 每件作品用
@#@#@#@#@#@#@#@#@#@0，不是./project1.html（./在某些服务器下会失效） - GitHub 或外部链接必须带协议：
https://github.com/username/repo，漏掉https://会被当成相对路径，浏览器拼成http://yoursite.com/github.com/... - 邮箱链接用
<a href="mailto:name@example.com"></a>，别写成email:name@example.com（无效协议） - 测试时直接双击打开
index.html文件，Chrome 会禁用file://下的mailto:和部分外链，换用live-server或拖进本地 Web 服务器再验
部署前必须验证的两个隐形坑
本地预览好好的，传到 GitHub Pages 或 Vercel 上就图片裂开、样式消失——大概率是大小写和文件扩展名不一致。
参数差异：Windows 不区分 Project1.JPG 和 project1.jpg，Linux 服务器严格区分
实操建议：
- 统一用小写命名所有文件：
index.html、style.css、assets/screenshot.png，连文件夹名也小写 - 检查
<img src="..." alt="...">这类路径，Assets和实际文件夹名assets不匹配就会 404 - 用浏览器开发者工具的 Network 标签页看哪些资源状态码是 404，直接定位坏链接，别靠肉眼猜
最容易被忽略的是图片的 alt 文本是否真实描述内容——它不只是 SEO 配件，屏幕阅读器、图片加载失败时全靠它传递信息。写“项目截图”不如写“电商后台仪表盘，含实时订单地图和销量折线图”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
