一、Ement常用語法

1. 父子關(guān)系:用 “>” 表示

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

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

1. 兄弟關(guān)系：用 “+” 表示
   用法：div>a{link}+p
   效果：

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

2. 上級關(guān)系：用 “^” 表示
   用法：div>a{link}^p{我與div平級}
   效果:

    <div>
        <a href="">link</a>
    </div>
    <p>我與div平級</p>

   二、元素四類屬性

   四類屬性包括：通用、內(nèi)置、自定義、事件

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

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

• 內(nèi)置屬性
• • title
• • src
    示例：

    <a href="htts://php.cn" title="php中文網(wǎng)">
        <img src="images/logo.png" alt="點擊打開php中文網(wǎng)">
    </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">我是內(nèi)容</div>
      <footer>我是頁腳</footer>
    </div>

  四、div+class與 html5語義化標簽的優(yōu)缺點

• div+css
• • 優(yōu)點：靈活多樣、可自定義名稱
• • 缺點：不夠語義化，對搜索引擎不友好
• html5
• • 優(yōu)點：語義化標簽，適合seo
• • 缺點：數(shù)量有限，

批改老師：PHPz

批改狀態(tài)：合格

老師批語：