博主信息
博文 5
粉丝 0
评论 0
访问量 3477
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
初识前端Emmet与Html
喑哑
原创
495人浏览过

Emmet的常用语法

Emmet的作用

emmet可以快速的生成我们需要的一些代码,使得我们编写代码更加轻便。

Emmet是什么

emmet语法不是说可以直接在前端软件中运用,Emmet是一种插件,大部分编辑器都支持。

Emmet的层级关系

  • 父子关系之间用 ‘>’ 来表示,如div>a>b生成代码为
    1. <div>
    2. <a href="">
    3. <p></p>
    4. </a>
    5. </div>
  • 兄弟关系之间用 ‘+’ 来表示,如div+span生成代码为
    1. <div></div>
    2. <span></span>

    常用的Emmet语法

  • ‘.’号可以生成‘class’属性,例如p.text可以自动生成标签<p class="text"></p>
  • ‘#’号可以生成’id’属性,例如p#text可以自动生成标签<p id="text"></p>
  • ‘{}’号用于生成标签内的内容,例如p{大家好}可以自动生成标签<p>大家好</p>
  • ‘*’号用于重复生成该标签,例如p*3可以自动生成标签
    1. <p></p>
    2. <p></p>
    3. <p></p>
  • ()表示分组,可以划分标签之间的关系,例如.cart>h2{购物车}+(ul>li*3>a{商品})+p{总计: 3 件}
    1. <div class="cart">
    2. <h2>购物车</h2>
    3. <ul>
    4. <li><a href="">商品</a></li>
    5. <li><a href="">商品</a></li>
    6. <li><a href="">商品</a></li>
    7. </ul>
    8. <p>总计: 3 件</p>
    9. </div>
  • ‘$’符号可以用于生成序号,例如ul.list>li.item*5>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. <li class="item"><a href="">item4</a></li>
    6. <li class="item"><a href="">item5</a></li>
    7. </ul>
  • ‘@’号用于选择开始序号,例如ul.list>li.item*5>a{item$@5}将生成代码段
    1. <ul class="list">
    2. <li class="item"><a href="">item5</a></li>
    3. <li class="item"><a href="">item6</a></li>
    4. <li class="item"><a href="">item7</a></li>
    5. <li class="item"><a href="">item8</a></li>
    6. <li class="item"><a href="">item9</a></li>
    7. </ul>
  • ‘@-1’用于表示从倒序开始,例如ul.list>li.item*5>a{item$@-1}将生成代码段
    1. <ul class="list">
    2. <li class="item"><a href="">item5</a></li>
    3. <li class="item"><a href="">item4</a></li>
    4. <li class="item"><a href="">item3</a></li>
    5. <li class="item"><a href="">item2</a></li>
    6. <li class="item"><a href="">item1</a></li>
    7. </ul>

    元素四类属性

  • 通用属性,如class、id、style
    1. <div class="top">top</div>
    2. <div id="header">header</div>
    3. <div style="color: red">Hello</div>
  • 预置属性 rel、href、src
    1. <a href="https://php.cn">php.cn</a>
    2. <img src="" alt="" />
    3. <link rel="stylesheet" href="" />
  • 事件属性 例如onclick,onkeyboard,oninpput
    1. <button onclick="alert('提交成功')">确定</button>
    2. <div>
    3. <input type="text" oninput="this.nextElementSibling.textContent = this.value" />
    4. <p>实时显示输入的内容</p>
    5. </div>
  • 自定义属性,为data-开头的变量,无固定名称
    1. <div data-email="admin@php.cn">用户信息</div>
    2. <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">
    3. 获取用户邮箱
    4. </button>
    5. <p>这里显示用户邮箱</p>

    布局标签

  • 经典的布局标签 - div中设置各种类
    1. <div class="header">header</div>
    2. <div class="main">main</div>
    3. <div class="footer">footer</div>
  • 语义化的布局标签
    1. <header>header</header>
    2. <main>main</main>
    3. <footer>footer</footer>
    4. <article></article>
    5. <nav></nav>
    6. <aside></aside>
  • 语义化布局的优缺点
  1. 目前项目90%以上是基于移动端, 不依赖或不在乎搜索引擎
  2. 语义化的标签数量是有限的,不如class的自定义字符串再精准
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学