语义化HTML+CSS即可构建清晰可访问的宠物档案页：用<section>分组、<dl><dt><dd>表达属性值，响应式图片用srcset/sizes，仅可编辑字段用表单控件，重视打印样式。
直接用语义化 HTML + 简单 CSS 就能做出清晰、可访问、易维护的宠物档案页，不需要框架或 JS 驱动。
用 <section> 和 <dl> 组织核心信息结构
宠物档案本质是「属性-值」集合，<dl>（description list）比一堆 <div> 或 <p> 更准确、更利于屏幕阅读器解析。每个字段用 <dt>（term）标名称，<dd>（definition）放值；整块信息（如基本信息、健康记录）用 <section> 包裹并加 aria-labelledby 提升可访问性。
常见错误：用 <table> 排版纯信息页——表格语义是「二维关系数据」，而宠物档案是线性属性列表，反而增加认知和辅助技术负担。
-
<dt>里写「品种」、「绝育状态」、「最后驱虫日期」等明确字段名，别写「详情」或「信息」 - 多个值（如「疫苗：犬瘟热、细小病毒」）用
<ul>嵌在<dd>里，别塞进一个<span>用逗号分隔 - 避免把照片放在
<dl>内部——头像属于独立内容区块，应放在<section>顶部，用<img>+alt描述（如alt="金毛犬Leo，3岁，棕色短毛"）
响应式图片与 srcset 适配不同设备
宠物档案页常含多张高清照片（全身照、侧面、病历特写），但移动端不需加载桌面尺寸图。直接用 <img> 的 srcset 和 sizes 属性即可按视口宽度切换资源，无需 JS 或第三方库。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
容易踩的坑：srcset 只写文件路径不写宽度描述（如 "photo@2x.jpg 2x"），或漏掉 src 作为降级 fallback。
- 基础写法：
<img src="leo-small.jpg" srcset="leo-small.jpg 480w, leo-medium.jpg 768w, leo-large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="..."> - 如果照片有重要细节（如皮肤病区域），加
<figure><figcaption>标注观察重点，别只靠缩略图 - 避免用 CSS
background-image加载档案主图——它无法被打印、不支持右键保存、对爬虫和辅助技术不友好
表单交互仅限「可编辑字段」，其他一律静态输出
宠物档案页多数场景是「查看」而非「编辑」。只有真正需要用户更新的内容（如「下次驱虫预约时间」）才用 <input type="date"> 或 <select>；其余如「出生日期」「品种」应为只读文本——既防误改，也减少 DOM 节点和事件监听开销。
典型错误：全页面套 <form> 标签，每个字段都做成 <input>，还加了无意义的 required 或提交按钮。
- 可编辑字段必须有
name和明确的id，并与<label for="xxx">关联，否则触控设备点击标签无法聚焦输入框 - 日期类字段优先用
type="date"，而非type="text"+ JS 日历插件——原生控件兼容性好、省电量、支持语音输入 - 若需「编辑模式」切换，用 CSS class 控制显示/隐藏（如
.editable-mode .readonly-text { display: none; }），而不是动态插入/删除 DOM
最易被忽略的是打印样式——用户常会 Ctrl+P 导出档案给兽医。加一段 @media print CSS，隐藏无关按钮、背景图、导航栏，并确保 <dl> 的间距在纸面上清晰可读。别假设所有人都用屏幕看这份档案。
