最稳妥结构是包整体，放姓名职称，分简介/擅长/排班；排班用配aria标签和data属性，css用flex-wrap+min-width适配多端。
医生详情页用什么 HTML 结构最稳妥
直接用语义化标签组合，别套“万能卡片”模板。核心是让搜索引擎和屏幕阅读器一眼分清「谁、专长、在哪、何时可约」——<article></article> 包医生整体信息，<header></header> 放姓名职称，<section></section> 分块处理简介、擅长、排班，避免全用 <div> 堆砌。
<p>常见错误：把排班表硬塞进 <code><table> 却不加 <code>scope 属性，导致读屏软件读不出“星期一上午对应哪位医生”。实际排班数据动态性高，更推荐用 <ul></ul> + <li> 搭配 ARIA 标签（如 aria-label="周一 8:00-12:00 专家门诊"），既语义清晰又方便 JS 控制显隐。
排班区域怎么写才能适配手机和后台管理
别用固定列数的 CSS Grid 写死“周一到周日”，得留出空档、停诊、临时加号等状态。关键做法是把每条排班当作独立数据项，结构示例：
这样后台改个 data-status="closed" 就能灰掉整行，前端也容易用 JS 批量筛选“本周可约时段”。CSS 侧用 flex-wrap: wrap + min-width 控制单行最多显示 3 个时段，小屏自动折行，比媒体查询写 5 遍更可靠。
- 避免给
.schedule-item设固定高度，不同文字长度会导致对齐错乱 - “停诊”状态必须同时去掉
button的disabled属性和点击事件绑定，光视觉灰掉不可靠 - 如果医院要求显示“剩余号源”，把数字放进
data-remaining="3"，而非塞进文本——方便后续做倒计时或售罄提示
医生照片和资质图标怎么放才不拉慢页面
头像必须用 <img> 的 loading="lazy"，且强制指定 width 和 height 属性（比如 width="120" style="max-width:90%"），否则会触发布局偏移（CLS）。资质图标别用 PNG 堆叠，合并成雪碧图或改用 inline SVG：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<svg class="icon icon-title" width="16" height="16" aria-hidden="true"><use href="#icon-professor"></use></svg>
SVG 图标要加 aria-hidden="true"，否则读屏软件可能误读路径数据。另外，医生简介里的长段落别用多个 <br> 换行，用 <p></p> + margin-bottom 控制间距，否则复制文本时会多出换行符。
为什么本地测试看着正常，上线后排班错位
八成是 CSS 里用了相对单位但没设根字体大小，或者 Flex 容器忘了加 display: flex。重点检查三处：
- 所有排班容器父级是否漏了
display: flex或display: grid，尤其嵌套时子元素的flex-basis依赖父级声明 - 有没有在 CSS 里写了
font-size: 1rem却没在上设font-size: 16px，导致 rem 计算偏差 - 排班按钮的
pointer-events: none是不是只写了 CSS，却没同步禁用 JS 里的 click 监听——用户狂点停诊时段仍可能触发错误请求
真正麻烦的是跨院区排班：同一个医生在 A 院区看上午、B 院区看下午，HTML 里得用 data-campus="A" 区分，否则 JS 合并渲染时会把两个时段挤在同一行。
