emmet 默认不生成已废弃的 align 属性，正确做法是用 css 控制图片对齐；可通过 class（如 .float-right、.text-center）配合现代布局实现左/右/居中等效果，而非依赖内联属性或过时 html 特性。
Emmet 里 img 缩写默认不带 align 属性，别硬套老习惯
HTML5 已废弃 align 属性（如 <img align="right">），浏览器虽可能兼容，但校验报错、语义错误、CSS 覆盖混乱是常态。Emmet 默认生成的 img 缩写（比如 img[src=logo.png]）压根不会输出 align，不是 Emmet 漏了，是它尊重标准。
真正该做的是用 CSS 控制图片对齐——Emmet 可以帮你快速写出带 class 的 img，再配对应样式。
-
img.logo-right→ 生成<img src="" alt="" class="logo-right"> -
img@center不生效；img[style="float:right"]虽能强制出内联样式，但难维护、不可复用 - 想靠 Emmet 一键生成「居中图片」？得配合 CSS 的
text-align: center或margin: auto，而不是指望align
用 Emmet 快速生成响应式图片布局的正确姿势
对齐本质是布局问题，不是图片自身属性。Emmet 最实用的配合方式，是生成带语义 class 的结构，再用现代 CSS 实现左/右/居中/环绕等效果。
-
div.img-wrap>img[src=photo.jpg].float-right+ p.caption→ 快速搭出浮动图文混排结构 -
section.flex-center>img[src=icon.svg].icon→ 生成 Flex 容器 + 图片，后续加display: flex; justify-content: center即居中 - 需要图片宽度自适应？用
img.w-100（class 名可按你项目 CSS 框架定），别写width="100%"内联属性 - 注意：Emmet 不解析 class 名含义，
.pull-left和.text-end对它没区别，最终效果全看你的 CSS 是否定义了这些 class
常见对齐需求对应的 Emmet + CSS 组合写法
用户搜“图片对齐”，实际要的往往是“文字绕图”“图片居中”“头像右对齐”这类场景。Emmet 做不了判断，但能精准输出你指定的结构。
- 文字环绕图片（左图右文）：
div.clearfix>img[src=avatar.jpg].float-left+ p，再确保 CSS 有.float-left { float: left; margin-right: 1rem; } - 卡片内头像右上角：
div.card>div.avatar-wrap>img[src=avatar.png].avatar，然后用.avatar-wrap { position: relative; } .avatar { position: absolute; top: 0.5rem; right: 0.5rem; } - 全宽 banner 图居中：
header.hero>img[src=banner.jpg].hero-img，CSS 设.hero-img { display: block; margin: 0 auto; max-width: 100%; } - 切记：Emmet 不会自动补
alt，但可写img[alt="描述"][src=xxx]强制添加，避免无障碍问题
为什么你写的 Emmet 缩写总“对齐失效”？检查这三点
不是 Emmet 不行，而是缩写和渲染逻辑被混淆了。对齐失效通常卡在这几个环节：
- 写了
img[align=right]—— 浏览器忽略该属性，控制台可能报Attribute align is obsolete - 用了
img.float-right但全局 CSS 没定义.float-right { float: right; }，class 白挂 - 在 Flex 或 Grid 容器里还用
float，导致布局冲突，此时应改用justify-content或margin-left: auto - 图片父容器没设
width或overflow，导致float元素塌陷，文字不环绕——这时得加.clearfix::after或用display: flow-root
Emmet 是个高效打字工具，不是布局引擎。它生成什么，取决于你敲什么；它不管浏览器怎么渲染，那得你来管 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
