个人资料页应使用语义化html：用包裹整体，承载元信息，定义键值对，实现响应式头像，联系信息用mailto/tel链接，表单字段须正确设置type和name。
用 HTML 写个人资料页，核心不是堆标签，而是让结构有意义、内容可访问、后续好扩展。纯靠 <div> 堆出来看着像，但搜索引擎抓不到重点，屏幕阅读器读不出逻辑，改个头像字段都得翻三遍代码。
<h3>用语义化标签代替 <code><div> 套娃
<p>很多人一上来就写一堆 <code><div class="profile-card"><div class="avatar">…，视觉上没问题，但丢掉了 HTML 最基本的表达能力。浏览器和辅助工具不认 class 名，只认标签含义。
<p>实际该这么组织：</p>
<ul>
<li>
<code><article></article> 包裹整个资料页（它是独立、自包含的内容单元）
<header></header> 放头像、昵称、简介——不是为了“顶部”，而是因为它承载页面元信息<dl></dl>（定义列表）配 <dt></dt>/<dd></dd> 写「城市」「职业」「邮箱」这类键值对，比用表格或 div 更准确<a href="mailto:xxx"></a> 或 <a href="tel:+86..."></a>，否则只是静态文本，点不了也搜不到
<picture></picture> + <img> 处理头像响应式
头像在手机上常被裁成圆角小图，在桌面端可能要横幅展示。只用 <img src="avatar.jpg"> 会导致同一张大图在小屏也下载，浪费流量，且无法控制裁剪方式。
正确做法是用 <picture></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"> @@##@@ </source></source></picture>
注意三点：
-
<source></source>必须在<img src="avatar-fallback.jpg" alt="用户头像" style="max-width:90%" style="max-width:90%">前面，否则忽略 -
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></dl> 不是替代表格的技巧，是语义上唯一适合描述性数据的标签。漏掉这些，后期加 SEO、做自动化测试、接入无障碍工具，全得返工重写。
