应优先使用HTML5语义化标签搭建结构，删除冗余class和内联样式；确保外链路径正确、viewport与UTF-8 meta声明完整且顺序正确；所有图片必须带alt属性，JS置于</body>前。
直接用语义化标签搭骨架，别先写CSS
HTML 模板不是拿来“套”的，是拿来“拆”和“填”的。很多人一上来就找带炫酷动画的模板，结果改个导航栏颜色都要翻三页 CSS，最后卡在 nav 里嵌套了两层 div 却找不到对应样式类名。
真正快的路径是：只保留 HTML5 语义结构，删掉所有冗余 class 和内联样式。比如把一段含 class="header-wrapper__inner" 的代码，直接简化成 <header><h1>张三</h1><nav><ul><li><a href="#about">关于</a></li></ul></nav></header>。
- 优先使用
header、nav、main、section、footer，它们自带浏览器默认流式布局，不用立刻写display: flex - 避免用
div模拟语义标签（如用<div id="nav">代替<nav>），否则后期加 ARIA 或 SEO 优化会多出一倍工作量 - 每个
section加一个明确的id（如id="skills"），方便后续锚点跳转和 JS 绑定，也利于调试时快速定位 DOM 节点
外链资源必须校验路径和协议，404 是建站第一拦路虎
复制粘贴模板时最常出问题的不是 HTML 结构，而是 <link rel="stylesheet" href="css/style.css"> 这类路径。本地双击打开 index.html 时，浏览器用的是 file:// 协议，而很多模板默认假设你跑在本地服务器（如 VS Code Live Server）上。
现象是：页面文字全显示，但没样式、图标不出现、JS 不执行——控制台报一堆 net::ERR_FILE_NOT_FOUND。
立即学习“前端免费学习笔记（深入）”；
- 检查路径是否真实存在：在文件管理器里手动打开
./css/style.css，确认文件夹名拼写（css≠CSS≠styles） - 若用 CDN（如 Font Awesome），确保链接是 HTTPS（
https://cdnjs.cloudflare.com/...），HTTP 链接在现代浏览器中会被主动拦截 - JS 文件务必放在
</body>前，且不要依赖window.onload——多数模板里的document.querySelector('.menu-btn').addEventListener(...)会因 DOM 未加载完而报Cannot read property 'addEventListener' of null
viewport 和字符集必须手敲，别信模板自带的
有些模板的 <head> 里漏了 <meta name="viewport" content="width=device-width, initial-scale=1.0">，或者用了过时写法如 user-scalable=no。结果就是：手机上页面缩成一团，左右滑动才能看全，用户第一眼就关掉。
另一坑是字符集声明位置错误或缺失：<meta charset="UTF-8"> 必须是 <head> 中第一个标签（紧随 <title> 之后），否则中文可能乱码，特别是从记事本复制内容进来时。
-
<meta charset="UTF-8">和<meta name="viewport" ...>两行必须都有，且顺序不能颠倒 - 不要写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">——这是 HTML4 写法，HTML5 只认charset属性 - 如果用了中文标点、emoji 或生僻字，在保存
index.html时，编辑器必须设为 UTF-8 编码（Notepad++ 要选“编码 → UTF-8”，VS Code 看右下角状态栏）
图片和 alt 文本不是可选项，是加载失败时的救命稻草
模板里常见 <img src="images/avatar.jpg">，但实际路径可能是 ./assets/images/avatar.jpg 或根本没放图。浏览器加载失败不会报错，只会留一个空白方块，用户不知道缺了啥。
更隐蔽的问题是：没写 alt 属性。这不仅影响无障碍访问（屏幕阅读器读不出图内容），还会在图片加载失败时，让那个空白方块变成一段有意义的文字提示，帮你快速发现路径错了。
- 每张
<img>标签都必须带alt，哪怕只是alt="张三头像"或alt="网站 Logo" - 本地测试时，故意把
src改错（如src="x.jpg"），看是否显示alt文字——这是验证路径和alt是否生效的最快方式 - 图标类图片（如社交媒体小图标）若纯作装饰，可用
alt=""，但必须显式写出，不能省略
真正拖慢建站速度的，从来不是写多少行代码，而是反复刷新后发现导航不跳转、图片不显示、手机上看不清——这些问题几乎都卡在路径、协议、meta 声明和 alt 四个地方。把它们一次性理清，后面加内容就像填空，而不是破案。
