美文网首页
Emmet语法

Emmet语法

作者: 梧桐芊雨 | 来源:发表于2019-07-20 20:57 被阅读0次

et Emmet是一款可以提高前端代码书写效率的插件,可以不需要一行行的写html标签等,只需要写一行就可以生成完整的html解构,大部分编辑器都有,但若没有可以自行百度安装。

其实,大家可以查看此处:https://docs.emmet.io/cheat-sheet/,语法介绍很详细。而且通俗易懂,可以花十几分钟看看。

1.快速生成一个html结构

语法解构特简单,只需要输入!号后,按键盘上的【tab】或【enter】既可以生成


image.png

生成后代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

2.生成5个类名为item的div
语法:

image.png

生成代码:


image.png

3.生成一个类名为item,每个item数值递增div内容也递增。

语法:

image.png

生成代码:

  <div class="item item01">内容 01</div>
  <div class="item item02">内容 02</div>
  <div class="item item03">内容 03</div>
  <div class="item item04">内容 04</div>
  <div class="item item05">内容 05</div>

相关文章

  • Emmet语法

    Emmet:一款强大的编辑器插件 Emmet的常用语法 点击这里查看链接 Emmet全部语法 链接图片

  • 前端入门03 -- Emmet,复合选择器,显示模式,背景

    Emmet语法 Emmet语法可提高html/css的编写速度,VSCode内部已经集成了该语法; 快速生成Htm...

  • html5和css3进阶----01

    emmet语法 vscode内置emmet语法结构,点击!+Tab可以生成。想生成什么标签直接输入名字。 父子关系...

  • Emmet语法

    使用Emmet语法可快速生成html框架和标签,以及css代码 ps~本人使用的vscode编辑器 Emmet语法...

  • Emmet语法

    1.Emmet语法 Emmet语法的前身是Zen coding,它使用缩写,来提高html/CSS的编写速度,Vs...

  • 前端Emmet语法文档

    Emmet语法 https://www.w3cplus.com/tools/emmet-cheat-sheet.h...

  • Emmet语法

    是不是你已经厌烦了输入减括号等html语法,给你推荐一个速录的插件,这个插件支持的编辑器非常广泛,语法很简单输入缩...

  • emmet语法

    实例 ul>li>span+p^li>span#id1.class1[titile="title1" colspa...

  • Emmet 语法

    孩子节点 > 兄弟节点 + 上级节点 ^ 倍增 * ID属性 # CLASS属性 . 自定义属性 文本 {} 组 ...

  • emmet语法

    原文:https://www.w3cplus.com/tools/emmet-cheat-sheet.html 语...

网友评论

      本文标题:Emmet语法

      本文链接:https://www.haomeiwen.com/subject/qwtplctx.html