width 和 height 是 标签的原生 html 属性，核心作用是在页面加载初期为图像预留渲染空间以避免布局偏移（cls），提升 lighthouse 评分与用户体验；其值必须为纯数字像素（如 width="320"），不支持百分比，且与 css 的 width/height 语义不同。
width 和 height 是 <img> 标签的原生 HTML 属性，核心作用是**在页面加载初期就为图像预留渲染空间**，从而避免布局偏移（CLS），同时辅助可访问性与 SEO。
为什么必须显式设置 width 和 height？
浏览器解析 HTML 时，若未声明 width 和 height，就无法预知图片尺寸。图像资源加载完成前，该位置高度为 0，等图片一到，页面突然“往下顶”，造成视觉跳动——这就是 CLS（Cumulative Layout Shift）的典型来源，直接影响 Lighthouse 评分和用户体验。
- 只设
width或只设height：浏览器会按原始宽高比自动推算另一个值，安全且常用 - 两个都设但比例不对：图片会被拉伸或压缩，失真
- 两个都不设：布局抖动风险最高，
alt文本可能短暂撑开容器
width/height 的单位和取值限制
HTML5 规范中，width 和 height 的值必须是**纯数字像素值**（如 width="320"），不带单位，也不支持百分比或 em 等 CSS 单位。这点常被误用：
-
width="100%"是无效写法，会被浏览器忽略，退回到无尺寸状态 - 想实现响应式缩放，请用 CSS：
style="width: 100%; height: auto;" - 百分比行为仅存在于旧版 HTML4，现代项目中不应依赖
动态设置 width/height 容易踩的坑
用 JavaScript 动态写入 width/height 属性时，常见错误是操作了错误的对象：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 写了
new Image().width = 300：这只是内存中一个图像实例，不影响 DOM 中的真实<img>元素 - 没等 DOM 加载完就调用
document.getElementById("myImg").setAttribute("width", "300")：元素还不存在，报Null错误 - 用
style.width替代setAttribute("width", ...)：前者是 CSS 样式，不提供 HTML 原生尺寸语义，对 SEO 和屏幕阅读器帮助极小
正确做法是在 DOM ready 后，对真实 <img> 元素调用 element.setAttribute("width", "300") 或 element.width = 300（注意不是 element.style.width）。
和 CSS width/height 的关键区别
HTML width/height 属性 ≠ CSS width/height 声明：
- 前者是**HTML 属性**，影响初始布局预留、SEO 解析、无障碍树构建
- 后者是**样式规则**，仅控制最终渲染效果，无法阻止布局抖动（除非配合
aspect-ratio或 padding-top 技巧） - 两者共存时，CSS 会覆盖 HTML 属性的显示效果，但 HTML 属性仍保留在 DOM 中，供爬虫和辅助技术读取
真正要兼顾性能、SEO 和响应式，推荐组合使用：width + height 填原始尺寸（或等比单边值），再用 CSS 控制响应式行为，比如 max-width: 100%; height: auto;。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
