emmet html属性,属性操作符 [ ]《 Emmet：HTML 与 CSS 缩写 》

在 Emmet 的缩写语法里，给输出的元素添加 ID ，可以使用 # 号，再加上 ID 的名称 .. 添加类，可以使用 . ，再加上类的名称 …

div#message>div.alert.alert-success

一个 div 标签 … 上面有一个 message 的 ID ，在它里面是一个 div 类型的子元素 … 在这个子元素上，有两个类 … alert … 和 alert-success …

自定义属性

除了元素的 class 和 id 属性，输出其它的属性，可以把属性的名称和值放在一组方括号里 …

比如一个 a 标签 .. 在它上面添加两个属性 … alt 属性 … 还有 title 属性 … 把这些属性放在一组方括号里 … 属性之间用空格分隔开 …

可以先不为属性指定值 …

把光标放在这个句子的最后 … 然后按下 tab …

默认编辑的点会在一个属性值的引号里 .. 下一个编辑点是这个 alt 属性 … 有两个快捷键可以在不同的编辑点之间来回跳转…

跳到下一个编辑点上可以使用 alt+command+→ … windows 应该是 alt+ctrl+→

跳转到上一个编辑点，可以使用快捷键 alt+command+← … windows 上是 alt+ctrl+←

我们也可以直接指定属性的值 …

a[alt=hello title=hello]

在属性名字的后面可以直接指定属性的值 …

表单

再试一个 input 元素 … 可以使用 type 属性，指定它的类型 …

input[type=file]

这样可以在网页上添加一个上传文件的表单元素 … 它还有一个简单的形式 ..

input:file …

这个 input:file 还有一个更简单的形式 … 直接输入 input:f … f 就是 file 的简写 …

同样可以得到一个上传文件的表单元素 …

Emmet 为其它类型的 input 元素也添加了类似的简写形式 …. 比如 input:s … s 表示 submit … 这样会可以添加一个 type 属性是 submit 的 input 元素 …