应使用 <main> 包裹简历核心内容，仅出现一次且不嵌套于 <header> 或 <footer> 中；搭配 <section> 等语义化子元素，提升可访问性、SEO 与代码自解释性。
用 <main> 包住核心内容，别让 <div> 滥用成习惯
面试官扫简历网页时，第一眼不是看样式，而是看结构是否“一眼能懂”。<main> 是 HTML5 明确语义：这是页面唯一主体内容区。把工作经验、教育、技能这些真正要读的部分全塞进 <main>，比堆 5 个 <div class="section"> 更有说服力——它说明你真理解语义化不只是为了好看，而是为了可访问性、SEO 和代码自解释性。
常见错误是把整个 <body> 当 <main>，或者在 <header> 或 <footer> 里嵌套 <main>（浏览器会静默忽略）。正确做法只出现一次，且不嵌套在其他结构性标签内。
-
<main>必须直接子元素是<section>、<article>或标题等语义块，别放纯<p> - 如果用了
<nav>做侧边导航，它必须在<main>外，否则屏幕阅读器会误判主次 - 中文简历建议
lang="zh"写在<html>标签上，不是zh-CN——后者反而可能触发某些语音引擎的冗余播报
print 媒体查询里删掉背景色和浮动，PDF 导出才不糊
面试官很可能把你的 HTML 简历打印出来带进会议室。这时候 @media print 就不是可选项，而是临场表现分项。默认 CSS 里的 background-color、box-shadow、float 在打印时几乎全失效，还常导致文字重叠或留白错乱。
实操建议写一段极简的打印样式，加在 <style> 或独立 CSS 文件末尾：
立即学习“前端免费学习笔记（深入）”；
@media print {
* { background: transparent !important; color: #000 !important; text-shadow: none !important; }
body { margin: 0; padding: 0; font-size: 12pt; }
a { text-decoration: none; color: #000; }
img, .avatar { max-width: 100% !important; height: auto !important; }
.no-print { display: none !important; }
}关键点：不要试图“完美还原屏幕样式”，而要确保信息密度和层级清晰。比如技能栏用 <ul> 而非 Flex 横排，打印时才不会挤成一行。
用 rel="noopener noreferrer" 写所有外部链接，安全细节藏不住
项目链接、GitHub、作品集跳转，只要 href 指向站外，就必须加 rel="noopener noreferrer"。这不是“加分项”，而是前端工程师的基本肌肉记忆。漏掉它，等于告诉面试官：你没碰过真实部署环境，不了解 window.opener 可能被恶意站点利用劫持当前页。
更隐蔽的加分点是：如果链接指向自己托管的静态页（比如 GitHub Pages），顺手加上 referrerpolicy="no-referrer"。这说明你关注隐私边界，也熟悉现代浏览器对 referrer 的默认策略变化。
- 别用
target="_blank"单独出现，必须配rel，否则 Chrome 控制台会报 warning - 内部锚点（如
#skills）不用加rel，加了反而多余 - 用
<link rel="canonical" href="https://yourname.dev/resume.html">防止镜像站抓取后 SEO 冲突
把 viewport 的 initial-scale 设为 1.0，不是 1
移动端适配最易被忽略的细节之一。很多模板写 content="width=device-width, initial-scale=1"，看着没问题，但 iOS Safari 在某些缩放状态下会误判为“允许双指缩放”，导致字体忽大忽小。写成 initial-scale=1.0（带小数点）才是 Safari 实际识别的稳定值。
这个点小，但很典型：它不靠炫技，而是暴露你是否真在真机上反复调试过。顺带一提，user-scalable=no 别加——现在主流招聘方都用 iPhone 查简历，禁缩放反而影响可读性，还可能被 ATS 工具降权。
完整推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
其中 shrink-to-fit=no 是 Safari 特有，防止页面加载瞬间被强制压缩，尤其对含 SVG 图标的技能栏很关键。
