[HTML5] Emmet
html5 Emmet
2023-09-14 08:59:19 时间
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> -->
相关文章
- 跨平台移动APP开发进阶(二):HTML5+、mui开发移动app教程[通俗易懂]
- 前端常见的6种HTML5错误用法
- EditPlus下载图文教程:EditPlus怎么添加html5标签关键词设置
- HTML5表单及其验证详解编程语言
- 高级HTML5 移动应用框架 Ionic v2.2.0 发布详解编程语言
- 体验使用HTML5开发Kinect体感游戏详解编程语言
- html5 placeholder兼容ie11详解编程语言
- HTML5与Redis的完美结合:Web应用程序的高效处理(html5redis)
- HTML5 <progress> 标签
- HTML5和Redis技术的应用和优势(html5redis)
- JavaScript使用HTML5的window.postMessage实现跨域通信例子
- 一个html5播放视频的video控件只支持android的默认格式mp4和3gp