PHP 学习之路:第一天——Emmet插件使用教程

202 阅读1分钟

一.Emmet的简介

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML、CSS 的快速编写。

使用Emmet的好处

通过使用Emmet的精简语法,可以加速前端的页面书写布局,提高前端的开发效率。

二. 基本语法

1.使用 Emmet 生成 HTML 的语法详解

生成 HTML 文档初始结构: !+ Tab键

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- code... -->
</body>
</html>

简单总结一下常用的 HTML 结构指令:

  • html:5 或者 ! 生成 HTML5 结构
  • html:xt 生成 HTML4 过渡型
  • html:4s 生成 HTML4 严格型

2.生成标签

  • #aaa 生成 id 为 aaa 的 div 标签
  • span.bbb 生成class 为 bbb 的 span 标签
  • ul#ccc.ddd 生成id 为 ccc 的 class 为 ddd 的 ul 标签
2.1 后代关系:>
  • div.aaa>ul>li

可以生成如下的结构:

<div class="aaa">
    <ul>
        <li></li>
    </ul>
</div>
2.2 兄弟关系:+
  • div+p+bq

可以生成如下的结构:

<div></div>
<p></p>
<blockquote></blockquote>
2.3 上级关系:^
2.4 重复生成多份:
2.5 生成分组:()
2.6 生成自定义属性:[attr]
2.7 对生成内容编号:$

blog.csdn.net/u010268820/…