html本身不负责美化，只定义结构；多媒体与视觉控制由语义化标签（如video、audio、picture）配合css属性（如object-fit、filter）实现；错误使用width/height属性或旧写法会导致变形、模糊、不响应甚至报错。
直接说结论：HTML 本身不负责“美化”和“视觉创意”，它只管结构；真正做多媒体嵌入和视觉控制的是 <video></video>、<audio></audio>、<picture></picture> 这些语义化标签，配合 CSS 的 object-fit、filter、transform 等属性才起效。用错地方或混用旧写法（比如 <font></font> 或内联 style 写死尺寸）反而会让页面难维护、不响应、甚至在新浏览器报错。
为什么 <img> 加了 width/height 属性后图片变形或模糊
这是最常踩的坑：HTML 的 width 和 height 属性是强制拉伸像素尺寸，不保持宽高比。浏览器会强行缩放图像数据，导致失真。
- 正确做法是只写
src和alt，把尺寸控制交给 CSS，例如：img { max-width: 100%; height: auto; } - 如果要裁剪适配容器，用
object-fit: cover或contain，但必须搭配明确的宽高（CSS 设置width/height或父容器限制） - 旧式写法如
<img style="max-width:90%" style="max-width:90%">在 HTML5 中虽未废弃，但已失去语义，且无法响应式
<video></video> 标签播放失败或显示空白的常见原因
不是代码没写完，而是漏掉了关键兼容层或路径/格式问题。
- 确保至少提供一个 MP4 源：
<source src="clip.mp4" type="video/mp4"></source>—— 大多数浏览器只认这个 -
controls是布尔属性，写成controls="controls"或controls=""都行，但不能写成controls="true" - 本地测试时，Chrome 会因安全策略拒绝加载本地
file://视频，必须用本地服务器（如 VS Code 的 Live Server 插件） - 如果视频静音自动播放失败，加
muted属性：<video autoplay muted loop></video>
用 <picture></picture> 做响应式图片却没生效
核心问题在于浏览器根本没“看到”你写的 <source></source> 条件 —— 因为 <img> 标签没放在 <picture></picture> 最后，或者 media 查询写错了单位。
-
<picture></picture>必须以<img>结尾，且该<img>必须有src和alt，它是兜底项 -
media值里不能漏掉单位，比如(max-width: 768px)正确，(max-width: 768)无效 -
srcset里的路径必须真实存在，且建议用相对路径（如./img/photo-small.jpg），避免斜杠开头导致 404 - 别在
<source></source>上写alt—— 它不支持，只有最后的<img>才需要
CSS 滤镜和过渡动画加不上，或只在部分元素生效
滤镜（filter）和过渡（transition）不是“贴上就动”，它们对渲染层有隐式要求。
-
filter在<img>或<video></video>上生效没问题，但在<div> 包裹的图文混合块上可能被遮挡 —— 检查是否触发了层叠上下文（比如父级有 <code>opacity 或 <code>transform） -
transition要生效，目标属性必须是“可动画的”，比如opacity、transform可以，height或margin在内容高度不确定时容易卡顿 - 悬停效果写成
a:hover { filter: brightness(1.2); }没问题，但若父容器设了overflow: hidden，滤镜溢出部分会被裁剪
真正难的不是写几行 <video></video> 或调个 blur(2px)，而是理解每个标签和属性背后的渲染机制——比如 <picture></picture> 是资源选择器，<video></video> 是媒体加载器，而 CSS 的 transform 会触发 GPU 合成层。这些细节不厘清，再“简单”的教程也只会让你复制粘贴后反复报错。
