菜品详情页需语义化结构：用<article>包裹，含<h1>菜名、<figure><img>主图、<ul>配料、<ol>步骤、<dl>规格参数（非<table>），移动端用<details>折叠次要信息，图片用max-width:100%响应式。
菜品详情页不是堆文字加图就行，关键得让访客三秒内抓住「这道菜是什么、怎么吃、值不值得点」——结构语义化、信息分层清晰、移动端可操作，静态页就能做到。
用 <article> 包住整道菜，别用 <div> 硬套
浏览器和爬虫靠标签理解内容本质。<article> 天然表示独立、可复用的内容单元（一道菜就是一个实体），自带语义权重。如果全用 <div class="dish">，SEO 弱、屏幕阅读器读不出层级、后续加微数据（如 itemprop="recipe"）也难对齐。
必须包含：
-
<h1>或<h2>（菜名，不可省） -
<figure>+<img>（主图，loading="lazy"必加） -
<ul>（配料表，无序） -
<ol>（制作步骤，有序） -
<dl>（规格参数，如“份量：2人份”“烹饪时长：25分钟”）
<dl> 用来写规格参数，比 <table> 更轻、更语义
学生作业常把“热量：320kcal”“辣度：中辣”“推荐搭配：米饭”塞进 <table>，但表格是为二维关系数据设计的（比如多道菜横向对比），单道菜的属性是键值对，<dl> 才是标准解法。
立即学习“前端免费学习笔记（深入）”；
<dl> 的结构天然支持无障碍朗读（屏幕阅读器会把 <dt> 当作术语、<dd> 当作解释），且 CSS 控制灵活：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<dt>写属性名（如“份量”），建议加font-weight: bold -
<dd>写值（如“2人份”），可用margin-left或grid对齐 - 避免用
<table>做规格展示——它会让键盘 Tab 流混乱，且移动端缩放后易错位
移动端优先折叠次要信息，用 <details> + <summary> 而非 JS
“营养成分”“小贴士”“替代食材”这类信息，在手机屏上占空间又非刚需。别写一堆 <div class="toggle"> + jQuery，纯静态页就该用原生方案。
<details> 默认收起，点击展开，支持空格/回车触发，无需 JS：
<details>
<summary>营养成分（每份）</summary>
<ul>
<li>热量：320kcal</li>
<li>蛋白质：18g</li>
</ul>
</details>
兼容性已不是问题：Chrome 12+、Firefox 49+、Safari 17.4+、Edge 79+ 全支持（2026 年可视为全覆盖）。唯一要注意的是，<summary> 里别放 <h3> 等标题标签——它本身不是语义标题，嵌套会破坏大纲层级。
图片与文字比例失衡？用 max-width: 100% + height: auto 而非固定宽高
很多页面在手机上出现图片溢出、留白过大或拉伸变形，根因是给 <img> 设了 width: 300px; height: 200px 这类固定值。响应式第一原则：图片容器不设固定高宽。
正确写法只有两行 CSS：
img { max-width: 100%; height: auto; }- 若需限制最大尺寸，只加
max-height，且配合object-fit: cover防裁切错位 - 别信“用
<picture>就能解决一切”——单张主图场景下，<img srcset>+sizes已足够，<picture>反增复杂度
真正容易被忽略的是：规格参数里的单位（如“g”“ml”“℃”）要不要加空格？要不要用 <span class="unit"> 单独包裹？这些细节影响可读性，但多数人只顾堆内容，忘了用户是在真实设备上快速扫读，不是在审校论文。
