欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html基础:Emmet常用语法与布局标签实例

程序员文章站 2022-06-01 20:23:33
...

html 基础:Emmet 常用语法与布局标签实例

Emmet 常用语法

基础代码快速生成

1 如何快速生成 html5 文档结构

  • 使用感叹号“!” + Tab 按键
  • 使用“html:5” + Tab 按键
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>Document</title>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

2 如何快速生成 id 和 class

  • id 可以直接使用“#”,例如:“#item”则生成
    <div id="item"></div>
  • class 则可以直接使用“.”,例如:“.item”则生成
    <div class="item"></div>
  • 由于默认标签为“div” 如需更改为其他标签则在 id 和 class 前加标签即可,例如:“p.item”或“p#item”则生成
    <p class="item"></p>以及<p id="item"></p>

3 “p”标签内如何加文本内容

  • 使用花括号加文本的形式,例如:“p{你好啊}”则生成
    <p>你好啊</p>

各类层级的快速生成

1 包含关系的父子元素使用”>”来表示,例如:“div>p>a”则生成

  1. <div>
  2. <p><a href=""></a></p>
  3. </div>

2 并列关系的兄弟元素使用”+”来表示,例如:“div+p+a”则生成

  1. <div></div>
  2. <p></p>
  3. <a href=""></a>

3 并列关系与父级元素使用”脱字符”来表示,例如:“div>p 脱字符 a”则生成

  1. <div>
  2. <p></p>
  3. </div>
  4. <a href=""></a>

其他分组功能的快速生成

1 重复操作快速生成使用”“来表示,例如:“ul>li3>a{item$}”则生成

  1. <ul>
  2. <li><a href="">item1</a></li>
  3. <li><a href="">item2</a></li>
  4. <li><a href="">item3</a></li>
  5. </ul>

2 分组功能的快速生成使用”()”来表示,例如:“div>h2{购物车}+(ul>li*5>a{item$})”则生成

  1. <div>
  2. <h2>购物车</h2>
  3. <ul>
  4. <li><a href="">item1</a></li>
  5. <li><a href="">item2</a></li>
  6. <li><a href="">item3</a></li>
  7. <li><a href="">item4</a></li>
  8. <li><a href="">item5</a></li>
  9. </ul>
  10. </div>

3 tag[属性]快速生成使用中括号表示,例如:“a[href=”https://bbs.yinliuhui.cn/"]{笔记网}”则生成

  1. <a href="https://bbs.yinliuhui.cn/">笔记网</a>

4 序号的写法使用美元符号表示(通常和层级指令和文本指令组合使用)例如:“ul.list>li.item*3>a{item$}”则生成

  1. <ul class="list">
  2. <li class="item"><a href="">item1</a></li>
  3. <li class="item"><a href="">item2</a></li>
  4. <li class="item"><a href="">item3</a></li>
  5. </ul>
  • 序号前加多个 0 则使用多个美元符号对应“001,002….”例如:“ul.list>li.item*3>a{item$$$}”则生成
  1. <ul class="list">
  2. <li class="item"><a href="">item001</a></li>
  3. <li class="item"><a href="">item002</a></li>
  4. <li class="item"><a href="">item003</a></li>
  5. </ul>

5 若需在某个数字作为起始编号则需要加“@”符号,倒序则再加负号“-”

  • 正序示例:“ul>li{item$@3}*3”则生成:
  1. <ul>
  2. <li>item3</li>
  3. <li>item4</li>
  4. <li>item5</li>
  5. </ul>
  • 倒序示例:“ul>li{item$@-3}*3”则生成:
  1. <ul>
  2. <li>item5</li>
  3. <li>item4</li>
  4. <li>item3</li>
  5. </ul>

元素的属性

1 通用属性 class, id, style 示例:

  1. <div class="top">top</div>
  2. <div id="header">header</div>
  3. <div style="color: red">Hello</div>

2 预置属性:通常用在引用第三方资源的标签上

  1. <a href="https://baidu.com">php.cn</a>
  2. <img src="" alt="" />
  3. <link rel="stylesheet" href="" />

3 事件属性 onclick (on 是前缀,click 是事件)

  1. <button onclick="alert('提交成功')">确定</button>

4 自定义属性 (保存一些信息,当前的状态等…)

  1. <div data-email="admin@php.cn">用户信息</div>

常用布局标签

1 经典版本:

  1. 简写:
  2. #header{header}
  3. #main{main}
  4. #footer{footer}
  5. 示例:
  6. <div id="header">header</div>
  7. <div id="main">main</div>
  8. <div id="footer">footer</div>

2 改进版本:将 id 换成 class,class 权重小于 id,有利于样式复用
快捷修改:Alt+鼠标连选或者 Ctrl + D 快捷键修改

  1. 简写:
  2. .header{header}
  3. .main{main}
  4. .footer{footer}
  5. 示例:
  6. <div class="header">header</div>
  7. <div class="main">main</div>
  8. <div class="footer">footer</div>

3 html5 语义化标签

  1. <header>header</header>
  2. <main>main</main>
  3. <footer>footer</footer>
  4. <article></article>
  5. <nav></nav>
  6. <aside></aside>

但是现在绝大多数的程序猿使用的是 div + class

  • 目前项目 90%以上是基于移动端, 不依赖或不在乎搜索引擎/不需要做 seo,例如拼多多,抖音
  • 语义化的标签数量是有限的,而且语义不如 class 的自定义字符串明确
  • 程序猿的个人习惯导致的

示例:

  1. 语义化:<header>我是文章头部</header>
  2. div+class:<div class="articl-header">我是文章头部</div>
  3. 语义化标签不如直接的articl-headerclass更加明确的语义