ASCII码 ASCII码

20220418 emmet语法 笔记

发布于:2022-04-19 16:39:32  栏目:技术文档

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 200px; width: 200px; / w200 / background-color: red; background-color: red; / bgc / } </style> </head> <body> <!-- id,class --> <!-- 一键注释:先选中代码按ctal+k,再ctal+c --> <!-- 一件取消注释:先选中代码按ctrl+k,再ctrl+u,也可以再按一次ctrl+k+u/ctrl+k+c --> <!-- id,class也可以再按一次ctrl+k+u/ctrl+k+c --> <!-- -------------- --> <div id="box"></div> <!-- 上一行是手打的,一下都是使用emmet语法写的 --> <div id="box"></div> <!-- #box --> <div class="box"></div> <!-- div.box --> <div class="actie"></div> <!-- .actie --> <!-- -------------- --> <p>hello world</p> <!-- 上一行是手打的,一下都是使用emmet语法写的 --> <p>hello world</p> <!-- p{hello woeld} --> <!-- -------------- --> <!-- 下面是层级快速生成 --> <div> <p> <a href=""></a> </p> </div> <!-- 以上是手打的,一下都是使用emmet语法写的 --> <div> <p><a href=""></a></p> </div> <!-- div>p>a 上下级--> <div></div> <p></p> <a href=""></a> <!-- div+p+a 兄弟平级 --> <div> <p></p> </div> <a href=""></a> <!-- div>p^a 在上下级里面 写出上级的兄弟级 --> <!-- 下面是重复标签快速生成 --> <!-- 重复*n --> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <!-- a*5 --> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <!-- a{link}*5 --> <ul> <li> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> </li> </ul> <!-- ui>li>a{link}*5 --> <!-- -------------- --> <!-- 下面是属性快速写入 --> <a href="https//www.baidu.com">baidu</a> <!-- a[href="https//www.baidu.com"]{baidu} 属性内容用中括号--> <div id="header"></div> <!-- div#header --> <div id="header"></div> <!-- #header --> <div id="header"></div> <!-- div[id="header"] --> <!-- 下面是序号$快速写入 --> <ui> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ui> <!-- ui>li{item$}*5 此为正序--> <ui> <li><a href="">link1</a></li> <li><a href="">link2</a></li> <li><a href="">link3</a></li> <li><a href="">link4</a></li> <li><a href="">link5</a></li> </ui> <!-- ui>li*5>a{link$} --> <ui> <li><a href="">link01</a></li> <li><a href="">link02</a></li> <li><a href="">link03</a></li> <li><a href="">link04</a></li> <li><a href="">link05</a></li> </ui> <!-- ui>li*5>a{link$$} 前导0--> <ui> <li><a href="">link5</a></li> <li><a href="">link6</a></li> <li><a href="">link7</a></li> <li><a href="">link8</a></li> <li><a href="">link9</a></li> </ui> <!-- ui>li*5>a[link$@5] 从某个数字开始--> <ui> <li><a href="">link9</a></li> <li><a href="">link8</a></li> <li><a href="">link7</a></li> <li><a href="">link6</a></li> <li><a href="">link5</a></li> </ui> <!-- ui>li*5>a{link$@-5} 倒序--> </body></html>

相关推荐
阅读 +