emmet语法 - html/css 快速开发

  • 时间:
  • 来源:互联网
  • 文章标签:

emmet 语法

注意

1.这只是我自己看到的总结,不代表就是对的 ,有不对的还望指出
2.手册上能查到的,我就不做搬运工了,2333
3.这只是我目前用到的,用不到的 ,就没有总结了(能应对大部分了)
4.大部分编辑器都内置支持了 emmet 语法

官网教程
	https://docs.emmet.io/customization/snippets/
官方文档
	https://docs.emmet.io/cheat-sheet/
离线文档手册(以上两个需要科学上网)
	链接:https://pan.baidu.com/s/1LYYh9aGCOcQ5rUTj4hONvA 
	提取码:2333 

格式

1. 注意下面的命令,敲完之后,要加上tab 键 ,
2. emmet 不能带有空格 :因为空格是Emmet停止缩写解析的停止符号

关系

注意
	缩写不是模板语言,它们不必“可读”,而必须“可快速扩展和删除”。
    构造一个复杂的缩写比构造语句 比 键入一些简短的缩写要慢得多并且容易出错。


// 出现符号 () > * +  ^ . # [] $  @ {}     :


标签名
	标签名
分组
	()
父子标签
	a>b
兄弟标签
	a+b
上级标签
	a>b>c^li  /*li 会和 c 的父级标签在同一级别*/ 

乘法
    标签名*n  /* 有 n 个相同的兄弟标签 */
自增
	// 用于class id 之类的 ,解释前面的内容
	默认:	$*4      1 到 4
	正序: $@1*4    1 到 5
	倒序: $@-1*4	 5 到 1
	// 超过一个的 $ 表示一个 0 占位
	$$$@1*4    001 到 005



文本 {}
	标签带有内容 {}
	div{233}  ===>  <div>233</div>
	p>{text}+a  /*<p>text<a></p></p> , 这里 {text } 看成一个标签(其实并不不是),和 a 是兄弟*/ 
	/* p 有三个孩子 click 、 <a>here</a> 、 continue*/
	p>{Click }+a{here}+{ to continue}
	
	
优先级解读
1	()					
2    >   + 
3    *  ^ . # [] $  @ {}   :  依附于最近的左边元素
注意
	1. ()>  不能出现,但是可以 a>(a+p)
	 2. * 会延迟到 > + 的代码块最后执行重复操作
解读
	/*块状代码,从左到右 , 最近归属 、*/
	div+div>p>span+em^bq
	`1   2 `
    语义化解读
        div1 有一个兄弟结点div2 ,兄弟结点有一个孩子 p , p 有一个孩子 span , span 有一个兄弟结点 em 
        就构成可代码块 div1 和 div2 , bq 是最近左边标签的父节点的同级别元素
    就得到如下结构
    <div></div>
    <div>
        <p><span></span><em></em></p>
        <blockquote></blockquote>
    </div>





多层嵌套
    span > div*3 > section  注意这个是 3 个 div 均包含 section
	 .box1+.box2+...       带 class="box" 的 n 个 div 兄弟标签

属性

1. 特殊隐性标签
    div // 即书写属性的时候,不写标签名,就是值 div 的属性
2. id
    p#id值				// id值一般只设置 1 个
3. class
	p.类名值1.类名值2.类名值3 ...  生成多个class 的 p 标签,可为 1 个
4. 自定义
    // 是以空格来区分不同的属性名的,所以属性值有空格的都要带上引号
    // 虽然属性值没有空格可以不加引号,但是最好加上
    // 不设置属性值的, ="属性值" 可以省略,默认为 ""

    p[属性名="属性值" 属性名="属性值" ...]
    p[color]

5. 快捷默认属性
	/*这个是需记忆的,但是有规律*/ 
    // 淡出打个 a 会快捷出现一个标签  a:link 就是其默认出现属性名的属性值
    a  		|  <a href=""></a> 
    a:link	|  <a href="http://"></a>

隐性标签

// Emmet会尝试在其内部扩展缩写词的地方获取父上下文
	页面中省略的,就默认是 div  
    .name  --> div.name

// li 一定是在 ul  或者 ol 中,所以 ul>.item  等价于 ul>li.item
li为ul和ol
tr为table,tbody,thead和tfoot
td 对于 tr
option为select和optgroup

// 一些隐性标签
em>.info    ==》  em>span.info

lorem自动填充

// 使用“ Lorem ipsum”伪文本来测试其HTML模板与真实数据的外观
// 比如你 设置了 <p></p> 的样式的时候,需要在标签之间写个数据,测试外观,就不用自己编数据了
// 每次使用 lorem 时,它都会生成一个30字的虚拟文本,并分成几个句子。


// 会在 p 标签之间生成一个 10 个单词的伪文本
p>lorem10  

// 当元素是自重复元素时,lorem生成器会使用隐式标签名称解析器
ul>lorem10.item     // <ul>Lorem, ipsum.</ul>
ul>lorem10.item*3    // 等价于 ul>li*3>lorem10

	  // vscode 测试

css

基础

CSS模块使用模糊搜索来查找未知的缩写,
	ov:h == ov-h == ovh == oh
找不到缩写,则进行转化
	属性名称:foo-bar  →  foo-bar:|;
缩写前面加上连字符以产生供应商前缀
	供应商前缀属性:-foo

机制

// Emmet唯一可以做的就是提供CSS属性的简写 , 通过其自身一个特殊的CSS解析器,可将此类缩写扩展为完整的CSS属性
// 可以用来自定义。。。
为了提供最佳的用户体验,解析程序未引入任何特殊的值分隔符:键入m5比起来要快得多m:5。因此,它需要找到一个值界限:数字或连字符的首次出现被视为一个值界限。在m10示例中,m是属性部分和10是数值部分。

找到属性部分后,解析程序将在中搜索代码段定义snippets.json。对于m零件,它将找到"m": "margin:|;"定义(|当代码段展开时,字符用作插入符号位置参考)。

代码段定义看起来像CSS属性(这非常重要!),因此Emmet能够将其拆分为CSS属性和值,并将转换后的值部分放置在插入符号位置(|字符)。

单位提供值

默认单位
	整数 : px    m10 -> margin:10px
    浮点数 :em    m1.6 -> margin:1.5em
自定义单位
	// 只需在值后面紧跟任何字母字符即可显式提供单位名称
	m10foo -> margin:10foo;
	// 明确定义单位,则不再需要使用连字符来分隔值
	m10px24px -> margin:10px 24px;
无单位
	// 一些CSS属性被定义为无单位的
	z-index,line-height,opacity和font-weight
	lh2 -> lineheight:2;

单位值
	// 属性值个数
	一个值: m10 -> margin:10px
    多个值 : m10-20  -> margin:10px 20px;  // 使用连字符将它们分开
	均负值 : m-10--20 -> margin:-10px -20px  // 第一个值前面加上连字符,所有其他值前面加上双连字符

值别名
	p → %
    e → em
    x → ex

颜色值

// Emmet支持十六进制颜色值 , 会自动补全
#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

重要修饰符

p!  --> padding !important

html

所有不知道的缩写都会转化为一对标签
	foo + tab  --> <foo></foo>

标签:是默认属性值
a + tab
	默认出来 <a href=""></a>  
a:link  link 就是 href 的属性值

本文链接http://www.taodudu.cc/news/show-1944569.html