Ement常用语法、元素四类属性、布局标签、div+class与 html5语义化标签的优缺点

一、Ement常用语法

1. 父子关系:用 “>” 表示

用法:div>ul>li{item$}*3
效果：

    <div>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    </div>

1. 兄弟关系：用 “+” 表示
   用法：div>a{link}+p
   效果：

    <div>
        <a href="">link</a>
        <p></p>
    </div>

2. 上级关系：用 “^” 表示
   用法：div>a{link}^p{我与div平级}
   效果:

    <div>
        <a href="">link</a>
    </div>
    <p>我与div平级</p>

   二、元素四类属性

   四类属性包括：通用、内置、自定义、事件

• 通用属性
• • class
• • id
• • style
    示例：

    <div class="nav" id="navtop" style="color:red">菜单</div>

• 内置属性
• • title
• • src
    示例：

    <a href="htts://php.cn" title="php中文网">
        <img src="images/logo.png" alt="点击打开php中文网">
    </a>

• 自定义属性
  示例：

  <div data-email="admin@php.cn" data-addr="青岛市">个人信息</div>

• 事件
  on + 事件名称（click/change等）
  示例：

  <div data-email="admin@php.cn" data-addr="青岛市" onclick="alert(this.dataset.addr)">个人信息</div>

  三、布局标签

    <div class="container">
      <header>我是头部</header>
      <nav>
        <ul>
          <li>菜单1</li>
          <li>菜单2</li>
          <li>菜单3</li>
        </ul>
      </nav>
      <aside>我是边栏</aside>
      <div class="content">我是内容</div>
      <footer>我是页脚</footer>
    </div>

  四、div+class与 html5语义化标签的优缺点

• div+css
• • 优点：灵活多样、可自定义名称
• • 缺点：不够语义化，对搜索引擎不友好
• html5
• • 优点：语义化标签，适合seo
• • 缺点：数量有限，