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

一、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可生成

  
   <ul>
      <li><a href=""></a></li>
      <p></p>
    </ul>
    <div></div>
  

• 6、生成标签属性及内容
  标签{内容}[属性]
  div{内容}[title=属性] 生成 <div title="属性">内容</div>

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

  
  <ul>
    <li>内容5</li>
    <li>内容6</li>
    <li>内容7</li>
  </ul>
  

• 8、标签分组使用（）
  div>(ul>li*2)+p 生成如下代码

  
  <div>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <p></p>
   </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="[e-mail]">用户信息</div>

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

html5语义化优点:

• 代码更简洁，更加高效
• 便于团队维护开发
• 数量有限

  
  <header>header</header>
  <main>main</main>
  <footer>footer</footer>
  

  div+class优点

• 标签可以自定义，数量无限制。
• 便于搜索引擎收录
• 兼容性更高

  
  <div class="header"></div>
  <div class="main"></div>
  <div class="footer"></div>