Emmet语法
程序员文章站
2022-05-01 21:53:01
...
<!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>元素的属性</title></head><body>emmet语法 .aaa 默认div 内容用{}<div class="aaa"></div><!-- p.first --><p class="first"></p><!-- p#first --><p id="first"></p><!--这是什么，一个注释 --><p class="active"></p><p class="first"></p><p id="last"></p><div class="title"></div><!-- ctrl+/ 快捷键注释 --><!--父子：div>p>a--><div><p><a href=""></a></p></div><!--兄弟；+ div+p --><div></div><p></p><!-- ^ div>p^a 向上一级 --><div><p></p></div><a href=""></a><!-- ul>li>a*4 重复 * --><ul><li><a href=""></a><a href=""></a><a href=""></a><a href=""></a></li></ul><!-- 分组：（） .cart>h2{购物车}+(ul>li*4>a{商品})+p{总计：3件}--><div class="cart"><h2>购物车</h2><ul><li><a href="">商品</a></li><li><a href="">商品</a></li><li><a href="">商品</a></li><li><a href="">商品</a></li></ul><p>总计：3件</p></div><!-- 分组：（） .cart>h2{购物车}+(ul>li*4>a{商品})+p{总计：3件} --><!-- ul.list>li.item*5>a{item$} --><ul class="list"><li class="item"><a href="">item1</a></li><li class="item"><a href="">item2</a></li><li class="item"><a href="">item3</a></li><li class="item"><a href="">item4</a></li><li class="item"><a href="">item5</a></li></ul><!-- ul.list>li.item*5>a{item$@6} --><ul class="list"><li class="item"><a href="">item6</a></li><li class="item"><a href="">item7</a></li><li class="item"><a href="">item8</a></li><li class="item"><a href="">item9</a></li><li class="item"><a href="">item10</a></li></ul><!-- ul>li.item.item$*5>a{item$} --><ul><li class="item item1"><a href="">item1</a></li><li class="item item2"><a href="">item2</a></li><li class="item item3"><a href="">item3</a></li><li class="item item4"><a href="">item4</a></li><li class="item item5"><a href="">item5</a></li></ul><style>.item3 {background-color: red;}</style><!-- ul.list>li.item*5>a{item$@-1} --><!-- <ul class="list"><li class="item"><a href="">item5</a></li><li class="item"><a href="">item4</a></li><li class="item"><a href="">item3</a></li><li class="item"><a href="">item2</a></li><li class="item"><a href="">item1</a></li></ul> --><!-- ul.list>li.item{demo}*3 --><ul class="list"><li class="item">demo</li><li class="item">demo</li><li class="item">demo</li></ul><!-- ul.list>.item{demo}*3 //li可以省略的，默认ul下就是了--><ul class="list"><li class="item">demo</li><li class="item">demo</li><li class="item">demo</li></ul><!-- tag[属性] --><!-- a[href="baidu.com"]{baidu} --><a href="baidu.com">baidu</a><!-- 1.通用属性 class id style --><!-- style表示样式，id和class选择标签 --><div class="top">top</div><div class="" id="header">header</div><div style="color: red">Hello</div><!-- 2.预置属性 --><a href="baidu.com"></a><img src="1.jpg" alt="" /><link rel="stylesheet" href="" /><!-- 3.事件属性 --><button onclick="alert('提交成功')">确定</button><!-- 4.自定义属性 --><div><input type="text" oninput="this.nextElementSibling.textContent = this.value" /><p>实时显示输入的内容</p></div><div data-email="123@qq.com">用户信息</div><button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">获取用户邮箱</button><p>这里显示用户邮箱</p></body></html>