“一键”生成HTML——Emmet插件常用语法
Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒)。
我个人惯用的是sublime,因此下文介绍的语法仅在sublime测试通过,不过其它平台应该也不会有什么出入。
使用Emmet前提:设置当前为HTML语法模式
在sublime中启用Emmet,必须把当前代码的语法模式改为HTML
,如果本来就是.html
文件那就没问题;如果是新建的文件还没有保存过的,则需要手动先设置为HTML:
在sublime右下角点击
Plain Text
,弹出菜单,选择HTML
。按下
Ctrl + Shift + P
,打开命令控制台,输入“HTML”,选择Set Syntax:HTML
即可。
快捷键
Emmet使用Tab
和Ctrl + e
作为自动生成HTML代码的触发器。
如上图所示,输入完生成HTML的语句后,按下Tab
或Ctrl + e
,即可生成对应的HTML代码:
Emmet常用语法
Emmet的语法有很多,还为了进一步提高效率而为比较长的标签都设置了缩写,我个人认为记住常用的语法即可,缩写什么的真的是学习成本太高了。
生成HTML结构:!
输入!
按下Tab
,即可生成标准的HTML5结构:
实际上也是可以生成HTML4的结构的,但毕竟已经过时了,这里按下不表。
后代:>
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
兄弟:+
div>label+input
<div><label for=""></label><input type="text"></div>
分组:()
当我们需要写一些比较复杂的HTML结构时,有两种方式能实现,其一是上级^
,但是我觉得有点逆推的意味,思路上比较绕,不好用;另外一种就是分组()
了,这是程序员普遍具有的分治
思想的体现。
div>(ul>li)+(ol>li)
<div>
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
</div>
重复多个:*
div>ul>li*5
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
ID:#
,类:.
ID和类可以同时使用也可以分别独立使用:
div#article.container
<div id="article" class="container"></div>
div#article
<div id="article"></div>
div.container
<div class="container"></div>
属性:[attr="val"]
label[for="passwd"]<label for="passwd"></label>
文本内容:{}
div>a{点这里跳转}<div><a href="">点这里跳转</a></div>
唯一比较常用的缩写:input:type
在<input>
里,type
属性是必定要填的(你忽略type="text"
我就鄙视你),而且各个type
都还满常用的,因此这个缩写可以记一下:input:type
等价于input[type="type"]
。
因为type
属性可以取的值太多了,这里仅列出几个常用的作为示例:
input:text
<input type="text" name="" id="">
input:radio
<input type="radio" name="" id="">
input:checkbox
<input type="checkbox" name="" id="">
参考资料
本文转载于:“一键”生成HTML——Emmet插件常用语法
“一键”生成HTML——Emmet插件常用语法的更多相关文章
- Emmet常用语法
Emmet常用语法1.输入!和html:5(不能大写),按下TAB 键,快速生成一个 HTML5 的标准文档初始结构. html:xt 生成 HTML4 过渡型 html:4s 生成 HTML4 严格 ...
- Sublime Text 2 安装emmet插件和常用快捷键
一.先安装package control1.按Ctrl+`调出console,输入以下命令然后回车 import urllib2,os; pf='Package Control.sublime-pac ...
- Emmet插件比较实用常用的写法
看了一些关于Emmet插件写法的文档,港真,怎么可以写这么长啊.其实知道几个大概要点加上实践基本就能上手写了啊 杂话 我前面有一篇[今天发现新大陆:haml和Emmet ],其实一开始的想法是写给自己 ...
- 前端emmet插件的一些常用用法
以下是在webstorm中简单使用emmet插件,注意一点就是当编写完emmet命令后一定要把光标移动到命令的结尾处,不然生成的代码会不一样 <!DOCTYPE html> <htm ...
- sublime课程3 emmet插件中的常用符号有哪些
sublime课程3 emmet插件中的常用符号有哪些 一.总结 一句话总结:emmet插件中的符号和css选择器里面哪些符号的意思很像. 1.+是干嘛的? 组合 2.{}是干嘛的? 标签里面的inn ...
- 一键生成mapper、mapperxml等文件——MybatisX插件的使用
本文首发于西二blogs:一键生成mapper.mapperxml等文件--MybatisX插件的使用 搬运请务必转载出处. MybatisX插件使用--为快速开发而生 前言:其实很久以前我就非常厌恶 ...
- JQuery插件之【jqGrid】常用语法整理
jqGrid常用语法整理,包含数据获取.常用函数.触发事件等 jqGrid表格数据获取相关语法 获取表格所有数据 $("#grid").jqGrid("getRowDat ...
- Emmet插件使用方法总结
Emmet插件使用方法总结 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...
- Emmet插件详解
http://www.ithao123.cn/content-10512551.html (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器 [摘要:Emmet的前身 ...
随机推荐
- Python:使用piecewise与curve_fit进行三段拟合
x = np.array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ,11, 12, 13, 14, 15,16,17,18,19,20,21], dtype=float) y = ...
- 通过IP访问公司公共资源库(共享文件)
今天,公司发通知说公司内部共享资源库已搭建完成,给了一个IP地址说可以访问了,那么如何去查看其他电脑的共享文件,下面以Windows7为例进行说明: 1:点击开始-运行(如图),或者快捷键(Win+R ...
- appium滚动查找屏幕外的控件
嗯,还是把自己做的实验保存一下 Appium1.12.1+python2.7 实验滚动,查找屏幕外控件以及控制seekbar scroll() 是根据页面中两个元素位置之间的距离进行滑动. 滑动寻找屏 ...
- Java有了synchronized,为什么还要提供Lock
摘要:在Java中提供了synchronized关键字来保证只有一个线程能够访问同步代码块.既然已经提供了synchronized关键字,那为何在Java的SDK包中,还会提供Lock接口呢? 本文分 ...
- centos7下rsync+inotify脚本实现文件同步,.NET CORE客户端文件更新后自动重启服务
源服务器IP:192.168.8.51 目标服务器IP:192.168.8.79 安装前源服务器及目标服务器均需关闭FIREWALLD\SELINUX防火墙 sestatus | grep statu ...
- 面试题 正则表达式 验证邮箱 Pattern.matches
故事背景 今天面试遇到这道题,对正则表达式还是有些懵,面试完回家复盘实现一下.这里使用到了 Pattern 这个类来校验正则表达式. 正则表示式分析: ^([a-z0-9A-Z]+[-|\\.]?)+ ...
- 30 面向对象编程 抽象类 abstract 修饰符可以用来修饰方法也可以修饰类
抽象类 概念 abstract 修饰符可以用来修饰方法也可以修饰类, 如果修饰方法,那么该方法就是抽象方法: 如果修饰类,那么该类就是抽象类. 抽象类中可以没有抽象方法,但是有抽象方法的类一定要声明为 ...
- 一比一还原axios源码(六)—— 配置化
上一章我们完成了拦截器的代码实现,这一章我们来看看配置化是如何实现的.首先,按照惯例我们来看看axios的文档是怎么说的: 首先我们可以可以通过axios上的defaults属性来配置api. 我们可 ...
- 6. 堪比JMeter的.Net压测工具 - Crank 实战篇 - 收集诊断跟踪信息与如何分析瓶颈
目录 堪比JMeter的.Net压测工具 - Crank 入门篇 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml 堪比JMeter的.Net压测工具 - Crank 进阶篇 ...
- npm vue项目的创建
一.创建项目之前需要先下载一个node.js 官方网址:https://nodejs.org/en/ 二.创建 (1)建一个文件夹,进入这个文件夹输入cmd打开小黑窗: Vue.js文档:https ...