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