千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 快速开发html插件emmet(小白需知)

快速开发html插件emmet(小白需知)

来源:千锋教育
发布人:qyf
时间: 2022-09-14 17:16:48 1663147008

  总是有小伙伴时不时的就会冒出一个来问:

  老师老师,怎么视频中老师的 ul>li*6 能打出来?我的出不来?

  咱先不说为什么出不来,这个我......(点点点就是不想说了)

  我想告诉你的是:它为什么能出来。

  平时我们在做开发的时候

  · 最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等,头疼。

  · 还经常会写一些结构重复的html。如果每个重复的代码都去复制粘贴,就会很麻烦!

  所以就有了一个叫 emmet 的插件,是不是想说你没有安装过?放心这个工具绝大部分的编辑器都内置了。

  例如:hbuilderX、Sublime Text、Notepad++、VS code、Dreamweaver 等等。

  接下来我们来看一下 emmet 这个插件的使用!

  在你的编辑器新建一个html文件,创建基本的html结构代码,然后跟我一起来体验 emmet !

图片 4

  对!没错错,首先就是咱们常用的 html初始结构;这一坨的html初始结构,如果每次要手打,想想都。

  vscode为例:直接一个!然后按 Tab 解决战斗;

  hbuilderX为例:直接一个html 然后回车 解决战斗;

  开始说一说语法规则:

  现在就开始解决开头提出来的问题

  1、后代嵌套

  如果你想写一个ul,ul内部写一个li,li内部写一个span,就可以

  在html文档中输入 ul>li>span,然后按下你的tab键,就会生成以下代码

图片 12

  2、兄弟

  如果你想写一个h2,下面跟着一个p。

  在html文档中输入 h2+p,然后按下你的tab键,就会生成以下代码

图片 11

  3、分组嵌套

  如果你的div中要写一个h2和p。

  在html文档中输入 div>(h2+p),然后按下你的tab键,就会生成以下代码:

图片 10

  4、乘法

  解决你们问题的来喽!!!

  如果你想写一个ul,ul内部写多个li,每个li内部写一个span,那怎么写呢?

  我们在html文档中输入 ul>li*5>span,然后按下你的tab键,就会生成以下代码:

图片 9

  这样是不是很方便?写table表格的时候是不是也很有用?

  还有很多有用的小技巧咱们继续说;

  5、自动增长

  如果你想创建一个ul,里面有5个li,并且li的类名还是类似item-1这的形式

  在html文档中输入 ul>li.item-$*5,然后按下你的tab键,就会生成以下代码:

图片 8

  6、id和类

div#box

<div id="box"></div>

div.box

<div class="box"></div>

  7、文本

div{test}

<div>test</div>

  以上就是emmet的常用语法!

  我补充一句:还需要多加练习!才能得心应手!

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT
开班信息
北京校区
  • 北京校区
  • 大连校区
  • 广州校区
  • 成都校区
  • 杭州校区
  • 长沙校区
  • 合肥校区
  • 南京校区
  • 上海校区
  • 深圳校区
  • 武汉校区
  • 郑州校区
  • 西安校区
  • 青岛校区
  • 重庆校区
  • 太原校区
  • 沈阳校区
  • 南昌校区
  • 哈尔滨校区