是解决不同视口下加载不同分辨率或裁剪尺寸图片的唯一标准方案，它通过的media属性在HTML解析阶段即选择最优图源，避免小屏下载大图浪费流量，而仅靠CSS缩放无法控制实际下载体积。

HTML 标签本身不带响应式能力，但部分原生标签的语义、默认行为和可扩展属性，能显著降低 CSS 适配成本——关键在于用对标签，而不是靠 CSS 硬撑。

为什么 比单纯 更适合响应式图片

不是“高级替代”，而是解决「不同视口下加载不同分辨率/裁剪尺寸图片」的唯一标准方案。单靠 max-width: 100% 只控制显示大小，不解决带宽浪费或错位裁剪问题。

• 的 media 属性直接挂钩 CSS 媒体查询逻辑，比如 media="(min-width: 768px)"，浏览器在解析 HTML 阶段就决定加载哪张图，无需等 CSS 加载完成
• srcset + sizes 组合让浏览器根据设备像素比（dpr）和容器宽度自主选图， 这种写法在高 DPR 小屏上仍可能加载大图，而 sizes="(max-width: 480px) 100vw, 50vw" 才真正声明「这个 img 在小屏占满视口，在桌面只占一半」
• fallback 到 标签必须存在且含 src，否则无图渲染；它的 alt 也仅由 提供， 不参与可访问性

的 width 和 height 属性在响应式中该不该删

该删。这两个 HTML 属性会强制设置内联宽高，覆盖 CSS 的 width: 100% 和 aspect-ratio，尤其在 Safari 中导致高度塌陷或黑边。

• 保留 标签，但移除所有 width="640"、height="360" 类属性——它们是为固定布局设计的遗存
• 用 CSS 控制：必须同时设 width: 100%、height: auto 和 aspect-ratio: 16 / 9（注意空格），三者缺一不可；旧版 Safari 可加 padding-top: 56.25% + position: relative 容器兜底
• autoplay 行为受限制：移动端需加 muted 才可能自动播放，且多数浏览器会强制全屏，无法禁用——这不是 CSS 能改的，是平台策略

的 border-collapse 和 table-layout 如何影响响应式表现

默认 table-layout: auto 是响应式表格的最大障碍：它让列宽由内容撑开，百分比设置完全失效。而 border-collapse 虽不直接控制尺寸，但影响盒模型计算，间接决定是否溢出。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 必须显式声明 table-layout: fixed，否则

或 th { width: 30% } 全部被忽略

border-collapse: collapse 能消除单元格边框双倍间距，让总宽度更可控；若用 separate，必须额外算上 border-spacing，容易在小屏触发横向滚动

长文本溢出不是样式问题，是表格机制问题：word-break: break-word 或 overflow-wrap: break-word 必须作用于 td/th，且父级不能有 white-space: nowrap

为什么

、

这类语义标签对响应式没直接帮助

它们不改变布局行为，也不触发任何媒体查询逻辑。所谓“辅助”，仅体现在与 CSS 自定义属性、clamp() 或 JS 检测配合时，能提升选择器意图清晰度。

• 写 main { font-size: clamp(1rem, 4vw, 1.25rem); } 比写 div.content { ... } 更易维护，因为语义明确，重构时不会误删规则
• 用 JS 监听 resize 并动态切换 class 时，document.querySelector('main') 比靠 class 名查找稳定得多，尤其 CMS 输出不可控 HTML 时
• 但若只写
  不加任何 CSS 或 JS，它和
  在渲染结果上完全一致

真正容易被忽略的点是：HTML 标签的“响应式价值”永远附着在它与 CSS/JS 的协作链路上。单独看一个 或删掉 width 属性没意义，必须确认其上下游是否闭环——比如 的 media 是否与你实际断点一致，aspect-ratio 是否被降级方案兜住，table-layout: fixed 是否和父容器宽度形成有效参照。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！