21、当元素用+连接时,文本{}编写正确后,并不能改变标签的层级关系:
- p>{Click }+a{here}+{ to continue}
将生成:
- <p>Click <a href="">here</a> to continue</p>
对于一些特殊的标签类型,比如:a、img、link、input等带有属性值的标签,在编写Emmet插件时已经为我们编写好了基本的结构。
22、比如a标签,在编辑中输入a,即可解析成一个基本的a标签:
- <a href=""></a>
23、a标签有几个属性值,在编写Emmet代码时可以添加这些值来覆盖默认的属性值:
- a[href="https://www.loveo.cc" title="墨丶水瓶" class="logo"]{墨丶水瓶}
将生成:
- <a href="https://www.loveo.cc" title="墨丶水瓶" class="logo">墨丶水瓶</a>
因为属性值是不可以缩写的,所以看起来编写带属性值是相似的。
24、在许多情况下,你可以跳过输入标签名称和Emmet代码,得到HTML代码,例如下面的例子:
- <div>
- .item
- </div>
- <span>.item</span>
- <ul class="nav">
- .item
- </ul>
将生成:
- <div>
- <div class="item"></div>
- </div>
- <span><span class="item"></span></span>
- <ul class="nav">
- <li class="item"></li>
- </ul>
25、从上面的例子中我们可以看到,插件会根据id或class所在的父级标签生成相应的标签,这种写法也是遵循HTML的编写规则,通过下面的代码你会更明白:
- .wrap>.content div.wrap>div.content
- em>.info em>span.info
- ul>.item*3 ul>li.item*3
- table>#row$*4>[colspan=2] table>tr#row$*4>td[colspan=2]
上面对应的四组代码最终生成的代码对应为:
- <div class="wrap">
- <div class="content"></div>
- </div>
- <em><span class="info"></span></em>
- <ul>
- <li class="item"></li>
- <li class="item"></li>
- <li class="item"></li>
- </ul>
- <table>
- <tr id="row1">
- <td colspan="2"></td>
- </tr>
- <tr id="row2">
- <td colspan="2"></td>
- </tr>
- <tr id="row3">
- <td colspan="2"></td>
- </tr>
- <tr id="row4">
- <td colspan="2"></td>
- </tr>
- </table>
我们应该了解到,CSS选择器在块级元素中默认的HTML标签为div,在内联级元素中为span,而对于HTML一些特殊的标签:ul li、table tr td,将会生成对应的内部标签。
这篇文章介绍了HTML的基本标签在Emmet下的写法,我把它当做学习笔记,可以随时查看,如果对你有帮助就更好。
Emmet编写代码的格式最重要的就是不能有空格,如果有空格将不会完全解析和生成HTML代码。
Emmet最核心的就是缩写,而它也不属于一门语言,编写时也不需要有很强的可读性,最重要的就是能高速的生成HTML代码。只要你多练习,多看下官方的英文文档,很快你将掌握Emmet的编写方式,同时也将大大提高你的前端开发速度。
您可以选择一种方式赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助