[HTML5]:快捷开发—emmet语法的使用方式
2017-09-12 17:49
761 查看
emmet语法使用方式
使用emmet可以快速地构建HTML代码,语法看起来和CSS选择器差不多,只要写好emmet的缩写格式,然后用tab键执行既可扩展为完整代码。当然,前提是你的网页文本编辑器支持emmet插件,在这里我使用的是编辑神器vs code,默认自带emmet提示,还提供大量插件,非常好用。1.快捷生成HTML5文档结构,为元素增加id和class属性。
2.嵌套操作
>后代
+兄弟(相邻)
^上一级
*乘法(生成数量)
<!-- 生成相应后代和元素数量--> div>ul>li*3 <!-- 生成相邻元素 --> div+ul+p+input <!-- 元素放到上一级 --> div+ul>li^p{处于上一级}
3.属性操作
使用[attribute]为指定元素包含属性,可以指定属性值。并且属性可以自定义。
<!-- 添加多个class属性 和一个type属性--> <input type="" id="in" class="cla-1 cla-2 cla3"> <!-- 同时添加多个属性,可以指定属性值--> <input type="text" name="user" value=""> <!-- 自定义属性,没多大意义 --> <p a="s" q="sd"></p>
4.自增操作
$:自增符号,从1作为起始点。
<!-- 类名自增 div>ul>li.demo$*3 --> div>ul>li.demo$*3 <!-- ID自增 p#aa$*3 --> p#aa$*3
5.文本内容操作
{}:使用花括号往元素中添加内容
<!-- ul>li.test-$*3{文本内容} --> ul>li.test-$*2{文本内容} <!-- p#aa*3>strong{内容 $} --> p#aa$*3>strong{内容 $} <!-- div#demo>ul>li.li-$*3>p{测试P $} --> div#demo{div内容}>ul>li.li-$*2>p{测试P $}
关于emmet语法使用就介绍到这里,平常也用不了太多语法,毕竟不是专业前端的...,有空闲的话,会在后面更新一些使用技巧。想了解更多使用方式请查看官网文档:emmet官方文档 。
相关文章推荐
- 使用适合自己的html5 开发方式
- HTML5与微信开发(1)-HTML标签语法变化和使用概念
- Emmet的HTML语法(敲代码的快捷方式)
- Eclipse在开发android程序时使用的常见快捷方式
- 使用PowerShell操作快捷方式
- 控件开发时两种JS嵌入资源方式的使用方法
- 使用Asphyre开发游戏的方式
- Visual Studio 2005 IDE 技巧和窍门-我最喜欢使用的键盘快捷方式
- 使用javascript创建快捷方式
- InstallShield Developer 8 使用手记之《创建卸载应用的快捷方式》
- ABAP--使用SLIN事务码进行ABAP程序扩展语法检查,提高程序开发的质量
- Wince开发之桌面快捷方式
- 使用javascript创建网页快捷方式
- N-Tiers开发方式(为何使用COM+组件的撰写商业逻辑层)
- ABAP--使用SLIN事务码进行ABAP程序扩展语法检查,提高程序开发的质量
- Myeclipse快捷方式使用
- 控件开发时两种JS嵌入资源方式的使用
- 使用普通asp.net编程方式开发WAP应用的可行性
- [ajax开发工具]使用JSLint完成JavaScript语法检查
- ABAP--使用SLIN事务码进行ABAP程序扩展语法检查,提高程序开发的质量