属性操作符 [ ]

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 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 元素 …

属性操作符 [ ]《 Emmet:HTML 与 CSS 缩写 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点