博客列表 >Ement语法,元素属性及布局标签

Ement语法,元素属性及布局标签

星辰的博客
星辰的博客原创
2021年12月22日 17:32:33553浏览

一、Ement 常用语法

  • 1、Tab键或者Enter键为生成键
  • 2、输入! 或者 html:5 可快速生成 html 结构
  • 3、生成带 class 和 id 的标签
    标签省略默认为 div 标签
    div.class 或 .class 可生成:<div class="class"></div>
    div#ID 或 #ID 可生成:<div id="ID"></div>

  • 4、生成同级(兄弟)标签
    h2+p 生上下级(父子)标签
    ul>li可生成<ul><li></li></ul>

  • 5、标签层级关系
    ul>li>a^p^div可生成
    1. <ul>
    2. <li><a href=""></a></li>
    3. <p></p>
    4. </ul>
    5. <div></div>
  • 6、生成标签属性及内容
    标签{内容}[属性]
    div{内容}[title=属性] 生成 <div title="属性">内容</div>

  • 7、生成重复标签
    标签名*重复次数 $生成序号(默认1开始)@起始数 -倒序
    ul>li*3{内容$@5}可生成

    1. <ul>
    2. <li>内容5</li>
    3. <li>内容6</li>
    4. <li>内容7</li>
    5. </ul>
  • 8、标签分组使用()
    div>(ul>li*2)+p 生成如下代码
    1. <div>
    2. <ul>
    3. <li></li>
    4. <li></li>
    5. </ul>
    6. <p></p>
    7. </div>

二、实例演示元素四类属性

  • 1、通用属性 class, id, style 等
  • 2、预置属性(私有属性) img的src属性,a标签的href属性等
    <img src="" alt="">
    <a href=""></a>
  • 3、事件属性 on+事件(onclick/ondblclick/onmouseover)
    <button onclick="alert('提交成功')">确定</button>
  • 4、自定义属性 data-自定义属性名(data-email)
    <div data-email="admin@php.cn">用户信息</div>

三、实例演示布局标签并分析 dic+css 与 html5 语义化标签的优缺点

html5语义化优点:

  • 代码更简洁,更加高效
  • 便于团队维护开发
  • 数量有限
    1. <header>header</header>
    2. <main>main</main>
    3. <footer>footer</footer>

    div+class优点

  • 标签可以自定义,数量无限制。
  • 便于搜索引擎收录
  • 兼容性更高
    1. <div class="header"></div>
    2. <div class="main"></div>
    3. <div class="footer"></div>
上一条:Emmet语法下一条:Ement常用语法总结
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议