语义化HTML简历应使用<section>和<ul><li>组织技能，避免<span>堆砌；用aria-label增强可访问性，CSS控制标签样式，按岗位匹配度排序技能项，确保ATS友好与维护性。
直接用 HTML 写带专业技能标签的简历，核心不是“怎么美化”，而是“怎么让标签语义清晰、可读性强、后期好维护”。纯靠 <div> 堆样式容易翻车，尤其当你要导出 PDF 或适配 ATS（招聘系统）时。
用 <section> 和 <ul> 组织技能块，别用 <span> 堆标签
很多人一上来就写一堆 <span class="tag">React</span><span class="tag">TypeScript</span>，看着紧凑，但问题一堆：没有语义、无法被屏幕阅读器识别、打印时换行错乱、ATS 可能漏抓关键词。
正确做法是把技能归类为逻辑区块，用语义化标签包裹：
<section aria-label="前端开发技能">
<h3>前端技术</h3>
<ul>
<li>JavaScript (ES6+)</li>
<li>React / Next.js</li>
<li>TypeScript</li>
</ul>
</section>
-
<section>表明这是独立内容模块，aria-label显式说明用途，对辅助工具和 ATS 更友好 -
<ul>天然表达“并列技能项”，比用空格或逗号分隔更结构化 - 避免在
<li>里塞多个技术栈（比如<li>Vue, Nuxt, Pinia</li>），拆成多行更利于解析和视觉扫描
CSS 实现“标签”视觉效果，但不破坏 HTML 结构
标签感 ≠ 必须用 <span>。你可以保留语义化的 <li>，只靠 CSS 加圆角、背景色、内边距来模拟标签外观：
立即学习“前端免费学习笔记（深入）”；
section ul li {
display: inline-block;
background: #eef2ff;
color: #444;
padding: 4px 12px;
border-radius: 16px;
font-size: 0.9em;
margin-right: 8px;
margin-bottom: 6px;
}
- 关键点是
display: inline-block，让列表项横向排列又保持块级特性 - 别用
float或绝对定位——会导致打印、缩放、高对比度模式下布局崩溃 - 如果想区分熟练度，用不同 class 而非颜色（色盲用户可能无法分辨），例如：
<li class="skill-pro">Rust</li>，再配合文字标注“熟练”“了解”
技能排序优先按岗位匹配度，不是按熟悉程度或字母顺序
HTML 本身不排序，但你在写 <li> 时的顺序，就是 ATS 和人眼最先捕捉的权重顺序。
- 应聘前端岗，就把
React、TypeScript放在“前端技术”区块最前面；后端经验即使强，也放到对应区块，不混排 - 避免写“熟悉所有主流框架”，这种空泛描述 ATS 不认，人也跳过；换成具体项 + 场景，比如：
<li>用 Next.js 搭建 SSR 电商前台（上线项目 x3）</li> - 如果某技能只在旧项目用过，且与目标岗无关，直接删掉——HTML 简历空间有限，每行都要有信息密度
真正难的不是写出带标签的 HTML，而是判断哪些技能该露、怎么组织才能让人 3 秒内抓住重点。样式可以调，结构一旦写错，改起来比重写还费劲。
