<picture>是解决不同视口下加载不同分辨率或裁剪尺寸图片的唯一标准方案，它通过<source>的media属性在HTML解析阶段即选择最优图源，避免小屏下载大图浪费流量，而<img>仅靠CSS缩放无法控制实际下载体积。
HTML 标签本身不带响应式能力，但部分原生标签的语义、默认行为和可扩展属性，能显著降低 CSS 适配成本——关键在于用对标签，而不是靠 CSS 硬撑。
为什么 <picture> 比单纯 <img> 更适合响应式图片
<picture> 不是“高级替代”，而是解决「不同视口下加载不同分辨率/裁剪尺寸图片」的唯一标准方案。单靠 max-width: 100% 只控制显示大小，不解决带宽浪费或错位裁剪问题。
-
<source>的media属性直接挂钩 CSS 媒体查询逻辑，比如media="(min-width: 768px)"，浏览器在解析 HTML 阶段就决定加载哪张图，无需等 CSS 加载完成 -
srcset+sizes组合让浏览器根据设备像素比（dpr）和容器宽度自主选图，<img src="low.jpg" srcset="high.jpg 2x"这种写法在高 DPR 小屏上仍可能加载大图，而sizes="(max-width: 480px) 100vw, 50vw"才真正声明「这个 img 在小屏占满视口，在桌面只占一半」 - fallback 到
<img>标签必须存在且含src，否则无图渲染；它的alt也仅由<img>提供，<source>不参与可访问性
<video> 的 width 和 height 属性在响应式中该不该删
该删。这两个 HTML 属性会强制设置内联宽高，覆盖 CSS 的 width: 100% 和 aspect-ratio，尤其在 Safari 中导致高度塌陷或黑边。
- 保留
<video>标签，但移除所有width="640"、height="360"类属性——它们是为固定布局设计的遗存 - 用 CSS 控制：必须同时设
width: 100%、height: auto和aspect-ratio: 16 / 9（注意空格），三者缺一不可；旧版 Safari 可加padding-top: 56.25%+position: relative容器兜底 - autoplay 行为受限制：移动端需加
muted才可能自动播放，且多数浏览器会强制全屏，无法禁用——这不是 CSS 能改的，是平台策略
<table> 的 border-collapse 和 table-layout 如何影响响应式表现
默认 table-layout: auto 是响应式表格的最大障碍：它让列宽由内容撑开，百分比设置完全失效。而 border-collapse 虽不直接控制尺寸，但影响盒模型计算，间接决定是否溢出。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
table-layout: fixed，否则<col width="30%">或th { width: 30% }全部被忽略 -
border-collapse: collapse能消除单元格边框双倍间距，让总宽度更可控；若用separate，必须额外算上border-spacing，容易在小屏触发横向滚动 - 长文本溢出不是样式问题，是表格机制问题：
word-break: break-word或overflow-wrap: break-word必须作用于td/th，且父级不能有white-space: nowrap
为什么 <main>、<section> 这类语义标签对响应式没直接帮助
它们不改变布局行为，也不触发任何媒体查询逻辑。所谓“辅助”，仅体现在与 CSS 自定义属性、clamp() 或 JS 检测配合时，能提升选择器意图清晰度。
- 写
main { font-size: clamp(1rem, 4vw, 1.25rem); }比写div.content { ... }更易维护，因为语义明确，重构时不会误删规则 - 用 JS 监听
resize并动态切换 class 时，document.querySelector('main')比靠 class 名查找稳定得多，尤其 CMS 输出不可控 HTML 时 - 但若只写
<main></main>不加任何 CSS 或 JS，它和<div></div>在渲染结果上完全一致
真正容易被忽略的点是：HTML 标签的“响应式价值”永远附着在它与 CSS/JS 的协作链路上。单独看一个 <picture> 或删掉 width 属性没意义，必须确认其上下游是否闭环——比如 <source> 的 media 是否与你实际断点一致，aspect-ratio 是否被降级方案兜住，table-layout: fixed 是否和父容器宽度形成有效参照。
