search

博客列表 >【HTML】Emmet 语法总结 [html基础]

【HTML】Emmet 语法总结 [html基础]

可乐随笔
可乐随笔原创
2022年11月27日 20:51:33357浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Emmet语法</title>
  8. </head>
  9. <body>
  11.     <!-- 1. 标签与内容 -->
  12.     <h3>html是结构化标签语言</h3>
  13.     <div class="">默认标签div</div>
  15.     <!-- 2. 属性与语法糖 [键值对]{内容} -->
  16.     <!-- [id=app]{app} -->
  17.     <div id="app">app</div>
  18.     <!-- [class="title"]{title} -->
  19.     <div class="title">title</div>
  20.     <!-- #app{app1} -->
  21.     <div id="app">app1</div>
  22.     <!-- .title{title} -->
  23.     <div class="title">title</div>
  25.     <!-- 3. 重复: '*' -->
  26.     <!-- .container{box}*3 -->
  27.     <div class="contarner">box</div>
  28.     <div class="contarner">box</div>
  29.     <div class="contarner">box</div>
  31.     <!-- 4. 父与子: `*` -->
  32.     <!-- ul>li{item}*3 -->
  33.     <ul>
  34.         <li>item</li>
  35.         <li>item</li>
  36.         <li>item</li>
  37.     </ul>
  39.     <!-- 5. 兄弟关系: `+` -->
  40.     <!-- h3{标题}+p{内容} -->
  41.     <h3>标题</h3>
  42.     <p>内容</p>
  44.     <!-- 6. 父级: '^' -->
  45.     <!-- .box>span{text}^h3{小标题} -->
  46.     <div class="box"><span>text</span></div>
  47.     <h3>小标题</h3>
  49.     <!-- 7. 分组: '(...)' -->
  50.     <!-- nav>h3{导航}+ul>li*3>a{link} -->
  51.     <nav>
  52.         <h3>导航</h3>
  53.         <ul>
  54.             <li><a href="">link</a></li>
  55.             <li><a href="">link</a></li>
  56.             <li><a href="">link</a></li>
  57.         </ul>
  58.     </nav>
  60.     <!-- 8. 序号: '$','$@3' -->
  61.     <!-- ul>li{item-$@3}*3 -->
  62.     <ul>
  63.         <li>item-3</li>
  64.         <li>item-4</li>
  65.         <li>item-5</li>
  66.     </ul>
  69. </body>
  70. </html>
上一条：【HTML】渲染方式下一条：【HTML】文档结构与元素，标签，属性的类型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多