[前端]Emmet 基本语法快查
2024-08-27 20:48:37
Emmet 是一种快速写html的语法,通过几个简单的缩写,就可以拓展成html标签,工作中写html多多少少会有一些,使用的语法都是基础语法,这里总结下最常用的几个,备查。 这个插件支持非常多的IDE和编辑器,值得学学。
>
代表下一级标签(child)
h2>h3>p>span
展开
<h2>
<h3>
<p><span></span></p>
</h3>
</h2>
*
代表复制多少份
ul>ul*3
展开
<ul>
<ul></ul>
<ul></ul>
<ul></ul>
</ul>
+
平级标签,兄弟标签
p+span+button
展开
<p></p>
<span></span>
<button></button>
^
往上一级标签,一般用在带有下级标签的比较复杂的标签块
div>h2>p+button^h3
展开,h3和h2平级
<div>
<h2>
<p></p>
<button></button>
</h2>
<h3></h3>
</div>
也可往上多级
div>h2>p+button^^h3
<div>
<h2>
<p></p>
<button></button>
</h2>
</div>
<h3></h3>
( )
不同语句块可以用 括号来分隔, 也叫分组
div.checkbox>(lable>input[type="checkbox"])*2
对应的html
<div class="checkbox">
<lable><input type="checkbox"></lable>
<lable><input type="checkbox"></lable>
</div>
- 标签属性 id,class和其他属性,有点类似jquery
span#age+span#name+span#size
展开 id属性
<span id="age"></span>
<span id="name"></span>
<span id="size"></span>
span.age+span.name+span.size
展开 class属性
<span class="age"></span>
<span class="name"></span>
<span class="size"></span>
input#name.user-name[type="text" name="username" data="xx"]
展开 其他属性,自定义属性等
<input type="text" id="name" class="user-name" name="username" data="xx">
多个class怎么处理呢
div.form-group.lable.lable-primary
展开
<div class="form-group lable lable-primary"></div>
- html内容 用大括号(用的比较少)
h2{16年欧洲杯法国打进决赛}>p{ 北京时间上午3点中进行的欧洲半决赛中..}
展开之后
<h2>16年欧洲杯法国打进决赛
<p> 北京时间上午3点中进行的欧洲半决赛中..</p>
</h2>
这个插件还有很多高级的用法,用的很少了啦,有兴趣请去官网查看。
最新文章
- org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):
- iOS中RSA加密详解
- ubuntu 上安装字体
- SVN服务器搭建和使用(二)
- [WPF]DataGridHyperlinkColumn网址过长TextTrimming无效
- 文本深度表示模型Word2Vec
- java单例-积木系列
- 今天执行grep命令差点把服务器搞崩
- Codeforces Round #352 (Div. 2) D. Robin Hood
- App的token机制
- PHP学习之[第05讲]PHP5.4 循环结构、系统函数和自定义函数
- 关于laravel框架的Auth::attempt验证失败
- zabbix 启用分区表后需要关闭Housekeeper
- [ An Ac a Day ^_^ ] CodeForces 680A Bear and Five Cards
- php-fpm配置优化
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
- 2018-2019-2 网络对抗技术 20165308 Exp1 PC平台逆向破解
- python之函数递归
- C#反射の反射泛型
- 《JavaScript设计模式与开发》笔记 7.单例模式
热门文章
- 2016-wing的年度总结
- Linux 虚存 linux2.6内核特性
- 有没有最好的学习Angularjs2的视频入门体验?
- Android Studio精彩案例(四)《DrawerLayout使用详解仿网易新闻客户端侧边栏 》
- Excel 数据验证宏
- 统计处理包Statsmodels: statistics in python
- android SlidingmMenu的入门介绍
- [tornado]websocket 最简单demo
- scala模式匹配的使用
- FFmpeg的H.264解码器源代码简单分析:解码器主干部分