菜谱步骤必须用<ol>语义化标记，每个步骤用<li>包裹并支持图片、段落等嵌套；图文对齐推荐Flexbox；长步骤用<details>/<summary>原生展开；打印时用@media print优化输出。
用 <ol> 而不是 <div> 组织步骤顺序
菜谱步骤本质是有序过程，语义上必须用 <ol> —— 不仅让屏幕阅读器正确播报“第1步、第2步”，还能天然支持 CSS 计数器（比如自定义 step-1、step-2 样式），避免手写编号出错或响应式错位。
常见错误是用一堆 <div> + 手动加 “1.” “2.” 文本，结果复制粘贴时编号断裂，或缩放后数字和文字错行。
- 每个步骤用
<li>包裹，内部可嵌<img>、<p>、<strong> - 不要给
<ol>设style="list-style: none"后再用伪元素模拟序号——绕过语义，得不偿失 - 若需跳过某步编号（如“小贴士”插在中间），改用
<li value="5">显式指定，别删<li>
图片和文字对齐用 display: flex，别依赖 float 或 vertical-align
菜谱里常出现“左图右文”或“上图下文”布局，但 float 在现代布局中易导致父容器塌陷，vertical-align 对块级元素无效且行为难预测。
实操建议直接用 Flexbox：
立即学习“前端免费学习笔记（深入）”；
<li class="step-item">
<img src="chop.jpg" alt="切葱花">
<div class="step-text">
<p>葱洗净，切成细末</p>
</div>
</li>
CSS 中设 .step-item { display: flex; align-items: flex-start; gap: 1rem; }，align-items: flex-start 确保图文顶部对齐，gap 控制间距，比用 margin 更可控。
- 图片加
alt属性——不只是 SEO，视障用户依赖它理解操作动作 - 避免给图片设固定
height，优先用max-width: 100%; height: auto防止拉伸变形 - 若需“图在上、文在下”，改用
flex-direction: column，不用额外 wrapper
移动端步骤展开/收起用 details/summary，不写 JS
长菜谱在手机上容易信息过载，用户需要点开才看某一步细节（比如“酱汁调法”）。这时候别急着写 toggle 类 JS —— 原生 <details> 支持开合、语义清晰、自带过渡（配合 CSS 可增强）、键盘可访问（Enter / Space 触发）。
示例结构：
<li>
<details>
<summary>调制酱汁（点击展开）</summary>
<p>生抽 2 勺、蚝油 1 勺、糖 1 小勺、清水 3 勺混合</p>
<img src="sauce.jpg" alt="酱汁混合特写">
</details>
</li>
-
<summary>必须是<details>的第一个子元素，否则不生效 - 默认展开？加
open属性：<details open> - 想隐藏原生箭头？用
summary::marker { content: "" }，但保留可访问性（别删<summary>）
打印时隐藏非必要元素，用 @media print 控制
用户可能想打印菜谱带去厨房，但导航栏、广告、背景图、交互按钮全打出来就浪费纸还干扰阅读。纯 CSS 即可解决，无需后端生成 PDF。
关键点：只隐藏真正无用的，保留步骤序号、图片（尤其食材/成品图）、关键文字。
- 在 CSS 末尾加
@media print { .header, .ads, .nav { display: none; } } - 强制图片显示：
img { max-width: 100% !important; height: auto !important; }（防止打印驱动强制压缩） - 步骤编号若用伪元素生成（如
ol li::before），确保它没被其他display: none规则意外屏蔽
测试方法：Chrome 里按 Ctrl+P，选“另存为 PDF”，看是否干净、图文比例是否合理——很多样式问题只在 print 媒体里暴露。
