[HTML5] Emmet
html5 Emmet
2023-09-14 09:00:53 时间
For example we want to generate the code like this:
<a href="#tab1">Tab 1</a><a href="#tab2">Tab 2</a><a href="#tab3">Tab 3</a> <div id="tab1" class="tab"> <h1>Tab 1 Content</h1> </div> <div id="tab2" class="tab"> <h1>Tab 2 Content</h1> </div> <div id="tab3" class="tab"> <h1>Tab 3 Content</h1> </div>
So it is three div, has a id called tab1,2,3 and a class tab. inside the div, has h1 with the content.
We can do:
a[href=#tab$]{Tab $}*3
(#tab$.tab>h1{Tab $ Content})*3
[]: attr
#tab: id--> tab
#tab$: id--> tab with increase interger
.tab: class tab
>: child node
{}: content
(.column.is-10>input#colorInput.input.is-large)+(.column>a#goButton.button.is-large.is-primary)
<!-- Step 2: Goes inside of the div with a "columns" class
<div class="column is-10">
<input
id="colorInput"
class="input is-large"
/>
</div>
<div class="column">
<a id="goButton" class="button is-large is-primary">
Go
</a>
</div> -->
相关文章
- html5 visibilitychange事件「建议收藏」
- html炫酷动态时钟代码,HTML5动态时钟代码
- html5自学教程_html和html5学哪个
- html5 canvas线条合成的爱心动画特效
- HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作代码大全 html5网页设计作业代码
- HTML5语义化标签
- HTML 和 HTML5 有什么区别?
- html5预加载图片的写法详解编程语言
- html5 微信真机调试方法vConsole详解编程语言
- 利用HTML5和MySQL实现数据交换(html5连接mysql)
- 集结 HTML5 与 MySQL,搭建无可抵挡的猛力!(html5与mysql)
- 兼容性探究HTML5与Linux的兼容性(html5与linux)
- HTML5 <progress> 标签
- jQuery中使用data()方法读取HTML5自定义属性data-*实例