一、Ement常用语法

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

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

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

兄弟关系：用 “+” 表示
用法：div>a{link}+p
效果：
```
 <div>
     <a href="">link</a>
     <p></p>
 </div>
```
上级关系：用 “^” 表示
用法：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
- 缺点：数量有限，

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

一、Ement常用语法

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

二、元素四类属性

三、布局标签

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

更多相关文章

随机推荐