个人资料页应使用语义化HTML：用<article>包裹整体，<header>承载元信息，<dl>定义键值对，<picture>实现响应式头像，联系信息用mailto/tel链接，表单字段须正确设置type和name。
用 HTML 写个人资料页，核心不是堆标签，而是让结构有意义、内容可访问、后续好扩展。纯靠 <div> 堆出来看着像，但搜索引擎抓不到重点，屏幕阅读器读不出逻辑，改个头像字段都得翻三遍代码。
用语义化标签代替 <div> 套娃
很多人一上来就写一堆 <div class="profile-card"><div class="avatar">…，视觉上没问题，但丢掉了 HTML 最基本的表达能力。浏览器和辅助工具不认 class 名，只认标签含义。
实际该这么组织：
-
<article>包裹整个资料页（它是独立、自包含的内容单元） -
<header>放头像、昵称、简介——不是为了“顶部”，而是因为它承载页面元信息 -
<dl>（定义列表）配<dt>/<dd>写「城市」「职业」「邮箱」这类键值对，比用表格或 div 更准确 - 邮箱、电话等联系信息必须套
<a href="mailto:xxx">或<a href="tel:+86...">，否则只是静态文本，点不了也搜不到
<picture> + <img> 处理头像响应式
头像在手机上常被裁成圆角小图，在桌面端可能要横幅展示。只用 <img src="avatar.jpg"> 会导致同一张大图在小屏也下载，浪费流量，且无法控制裁剪方式。
立即学习“前端免费学习笔记（深入）”；
正确做法是用 <picture> 提供多尺寸+多格式选项：
<picture> <source media="(min-width: 768px)" srcset="avatar-lg.webp" type="image/webp"> <source media="(max-width: 767px)" srcset="avatar-sm.webp" type="image/webp"> <img src="avatar-fallback.jpg" alt="用户头像" width="120" height="120"> </picture>
注意三点：
-
<source>必须在<img>前面，否则忽略 -
width/height属性必须写，防止布局偏移（CLS） -
alt文本不能写“头像”，要描述人，比如“张三，前端工程师”，这对无障碍至关重要
表单类信息（如编辑页）必须加 name 和 type
如果资料页带编辑功能，哪怕只是原型，<input> 标签漏掉 name 或乱设 type，后端根本收不到数据，或者把邮箱当普通文本处理。
常见错误和对应写法：
- 邮箱输入框写成
<input type="text" name="email">→ 应为<input type="email" name="email">（触发手机邮箱键盘、基础校验） - 生日用
type="text"→ 改成<input type="date" name="birthday">（原生日期选择器，无需 JS） - 性别用三个
<input type="radio">，但没统一name→ 所有同组单选按钮name必须完全一致，否则互斥失效 - 隐藏字段（如用户 ID）别用
<input type="hidden">却忘了写name，否则提交时这个值直接消失
结构化不是为了“看起来专业”，而是让每个标签承担它该干的活。头像不是装饰图，是身份标识；邮箱不是字符串，是可交互的联系通道；<dl> 不是替代表格的技巧，是语义上唯一适合描述性数据的标签。漏掉这些，后期加 SEO、做自动化测试、接入无障碍工具，全得返工重写。
