語義化標籤：

1.語義化標籤的作用

1.1 從開發角度考慮是提高程式碼的可讀性可維護性

1.2 網站的釋出者：seo 搜尋引擎優化

2.語義化標籤的相容問題

2.1 IE9以下不支援H5標籤（大部分css3屬性，一些H5的api）

2.2 IE9以下不認識，把這些標籤當做行內元素去看待

2.3 語義化標籤需要動態建立 document.createElement('header') 同時設定塊級元素

2.4 有一款外掛能幫你完成這件事件 html5shiv.js

2.5 必須引入在頭部，在頁面結構之前，提前解析h5標籤

2.6 優化處理：支援H5標籤的不需要載入，IE9以下不支援H5載入

2.7 js判斷客戶的瀏覽器版本可以做到，但是不能做到js提前載入

2.8 條件註釋：網頁的任何地方 根據瀏覽器版本去載入內容（html標籤）

2.9 固定語法 lt 小於 gt 大於 lte 小於等於 gte 大於等於

Stellar外掛

• 描述
  • 視差滾動（Parallax Scrolling）指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術主要核心就是前景和背景以不同的速度移動，從而創造出3D效果。

• 特性
  • 視差滾動效果酷炫，適合於個性展示的場合。
  • 視差滾動徐徐展開，適合於娓娓道來，講故事的場合。
  • 視差滾動容易迷航，需要具備較強的導航功能。

• 原理
  • 傳統的網頁的文字、圖片、背景都是一起按照相同方向相同速度滾動的，而視差滾動則是在滾動的時候，內容和多層次的背景實現或不同速度，或不同方向的運動。有的時候也可以加上一些透明度、大小的動畫來優化顯示。利用background-attachment屬性實現。

• 使用步驟
  • 引用檔案

<script src="jquery/jquery.min.js"></script>
   <script src="jquery.stellar.min.js"></script>
 

• html結構

 <div class="content" id="content1">
       <p>TEXT HERE</p>
   </div>
   <div class="content" id="content2">
       <p>TEXT HERE</p>
   </div>
   <div class="content" id="content3" data-stellar-background-ratio="0.5">
       <p>TEXT HERE</p>
   </div>
   <div class="content" id="content4" data-stellar-background-ratio="0.5">
       <p>TEXT HERE</p>
   </div>
   <div class="content" id="content5" data-stellar-background-ratio="0.5">
       <p>TEXT HERE</p>
   </div>
   <div class="content" id="content6" data-stellar-background-ratio="0.5">
       <p>TEXT HERE</p>
   </div> 

• 基本樣式

.content {
       background-attachment: fixed;
       height: 400px;
  }
   #content1 {
       background-image: url("..");
  }
   #content2 {
       background-image: url("..");
  }
   #content3 {
       background-image: url("..");
  }
   #content4 {
       background-image: url("..");
  }
   #content5 {
       background-image: url("..");
  }
   #content6 {
       background-image: url("..");
  }

• js初始化

   $.stellar({
       horizontalScrolling: false,
       responsive: true
  });

• 引數解釋