我想用图片中这种用快捷键进行HTML和CSS布局应该怎么写

图中的代码只是一个编辑时的未展开的HTML结构，你指的是EMMET吧：

EMMET 是一个前端代码编辑器常用插件，它能快速编辑HTML和css文档，只要明确了结构，可以像你图中的代码那样，先写好标签元素先后、嵌套结构，按下tab键就能写出完整的HTML代码了。


它是类似于代码提示、代码自动完成之类的编辑器插件，按下[TAB]键就自动生成规范的HTML代码行。比较快捷的办法就是：你也给自己的编辑器装EMMET插件，把图中的代码粘贴到编辑器，然后按下[TAB]键就可以了。

基本的语法结构例子：

1.元素。
a  ---<a></a>
2.带样式。
a.item   ---<a class="item" href=""></a>
3.带样式和ID
.grid#header ----<div class="grid" id="header"></div>
4. å¸¦å±žæ€§
img[alt=logo]   ----<img src="" alt="logo"/>

4. 具体可以了解EMMET的文档。

追问

是这种用快捷生成怎么写

插件装了

温馨提示：答案为网友推荐，仅供参考

当前网址：https://verywind.cn/ee/efj2feyyvy3jj7yrfy.html