纯HTML个人中心应使用语义化标签（header/main/aside）分区，CSS用flex或grid布局防遮挡与错位，表单用grid对齐字段，个人信息用figure实现无障碍，保存状态需localStorage反馈。
纯 HTML 管理系统里的「个人中心」不需要后端路由或框架组件，核心是用语义化标签搭出清晰分区 + CSS 控制视觉流，重点防住侧边栏遮挡、响应式错位、表单字段对不齐这三类高频问题。
用 <header> + <main> + <aside> 划分主体区域
别用一堆 <div class="container"> 堆砌。HTML5 语义标签直接定义功能角色：<header> 放用户头像和欢迎语，<main> 包裹所有可编辑内容（基本信息、安全设置、通知偏好），<aside> 放快捷入口（修改密码、绑定邮箱、导出数据）——注意不是所有浏览器都默认给 <aside> 加 margin，得手动写 aside { float: right; width: 240px; } 或用 flex 布局兜底。
- 如果后台已有左侧菜单栏，
<aside>必须加position: relative防止被侧边栏的z-index盖住 -
<main>内部不要再嵌套<section>做二级标题区，直接用<h2>+<hr>更轻量，避免 DOM 层级过深导致 CSS 选择器失效 - 移动端下
<aside>建议直接隐藏（@media (max-width: 768px) { aside { display: none; } }），信息全收进<main>垂直流里
<form> 表单字段对齐必须靠 display: grid 而不是表格
用 <table> 做表单布局在现代 HTML 中是反模式：语义错误、响应式难调、屏幕阅读器识别混乱。正确做法是给 <form> 设 display: grid; grid-template-columns: 1fr 2fr;，每组 <label> + <input> 包进一个 <div>，grid 自动对齐两列。常见坑：
-
<input type="file">在 Safari 下高度异常，需额外加height: auto; padding: 8px; - 密码强度提示条（如“强度：中”）不能塞进
<label>，得单独放<small>并设grid-column: 2;占满右侧列 - 提交按钮必须用
<button type="submit">，禁用<input type="submit">—— 后者在部分安卓 WebView 里会触发两次 submit 事件
个人信息卡片用 <figure> + <figcaption> 而非 <div>
头像、姓名、职位、部门这类强关联信息，语义上属于「一个可独立引用的媒体单元」，<figure> 天然支持 caption 定位和无障碍朗读。示例结构：
立即学习“前端免费学习笔记（深入）”；
<figure class="profile-card">
<img src="avatar.jpg" alt="张三的头像" width="80" height="80">
<figcaption>
<h3>张三</h3>
<p>前端工程师</p>
<p>技术部</p>
</figcaption>
</figure>
关键点：
-
alt属性必须写实名，不能是“头像”这种泛称，否则屏幕阅读器念出来毫无意义 - 卡片内文字行高设为
1.4，避免小字号下字距过紧；<h3>和<p>之间不要用<br>换行，用 margin 控制间距 - 如果头像支持点击上传，
<img>外层包<label>并隐藏原生<input type="file">，比 JS 绑定 click 事件更可靠
最易被忽略的是「修改保存后状态反馈」——纯 HTML 没有接口调用，但至少要用 localStorage 记录上次编辑时间，并在页面顶部显示「已保存于 10:23」这样的提示，否则用户根本不确定操作是否生效。
