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