页面结构采用语义化HTML：用<main>包裹，医生介绍区用<article>承载，含<header><h2>姓名职称</header>及<dl>字段；问诊区为<form id="consult-form">，按症状→检查→联系方式排序，支持多图上传，手机号加type="tel"校验，提交按钮明确写“提交图文问诊”，两模块间设引导提示并根据服务状态动态切换aria-hidden与文案。
问诊表单和医生介绍不是并列模块，而是有明确服务逻辑的上下游关系：用户先了解医生，再决定是否发起问诊。结构上要体现这个动线，不能简单堆砌。
用语义化容器分隔两个功能区
整个页面用 <main> 包裹主体内容，内部用两个独立 <section> 分别承载「医生介绍」和「在线问诊」。
医生介绍区以 <article> 为外层容器，符合“单个独立内容实体”的语义；问诊区用 <form id="consult-form"> 明确表达数据提交意图，不套 div。
医生介绍必须包含可访问、可解析的关键字段
- 姓名职称放在
<header>内，用<h2>标明主标题（如“张明 主任医师”） - 科室、职称、擅长领域用
<dl>结构：<dt>写标签（如“擅长”），<dd>写内容（如“高血压、冠心病长期管理”） - 出诊时间、预约状态等动态信息，统一用
data-*属性携带原始值，例如<div data-availability="available" data-slot="2026072809">周二上午 可约</div> - 头像
<img>必须带alt="张明医生头像"，禁止留空或写“图片”
问诊表单要直击医疗场景刚需
- 表单字段按临床逻辑排序：主要症状 → 相关检查报告（支持多图上传）→ 联系方式（手机号+可选身份证号）
-
<textarea>用于描述症状，比输入框更贴合患者表达习惯 - 文件上传用
<input type="file" accept="image/*" multiple>，包裹在<label>中确保点击区域有效 - 手机号字段加
type="tel"和pattern="[0-9]{11}"做基础校验，但需注明“后端将再次验证” - 提交按钮文字写“提交图文问诊”，不写“确定”或“发送”，降低用户认知成本
两者之间要有自然过渡与状态提示
在医生介绍末尾加一句引导性说明，比如：<p class="consult-prompt">如果您有相关症状，可直接填写下方问诊表单，医生将在24小时内回复。</p>
如果该医生当前不接图文问诊，对应 <form> 应设 aria-hidden="true" 并添加 class="disabled"，同时在 prompt 文案中同步说明：“目前暂未开通图文问诊服务”。
不复杂但容易忽略
立即学习“前端免费学习笔记（深入）”；
