淺談H5C3

<一個幼兒園小班的前端的成長隨筆,錯誤與不足之處,望各位大牛批評指點,謝謝!>

HTML5

超文本標籤語言: 用文原本表示帶有特殊標籤的語言

對html5語義化標籤的理解

標籤具備語義的意義

1. 有利更好呈現代碼結構

2. 便於SEO: Search Engine Optimization 搜索引擎優化

3. 提高用戶體驗: [eg: label標籤: 獲取光標焦點]

4. 便於團隊開發維護: 更具可讀性

5. 方便其餘設備解析 --- [可省略]

H5在客戶端儲存數據的新方法

1. localStorage -- 沒有時間限制的數據儲存

2. sessionStorage -- 針對一個session的數據儲存,用戶關閉瀏覽器窗口後,數據被刪除

H5的表單input

1. action= " " 表單跳轉

2. method= " " 請求方式

3. name= " " name屬性 ===> 設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值

類型	實例
文本類	Text[文本], Url[網絡地址], Password[密碼], Email[郵箱地址]
操做類	Checkbox[複選框], Radio[單選框], File[文件], Number[數值], Range[百分比滑動條]
功能類	Button[按鈕], Image[圖片提交按鈕], Submit[文字提交按鈕], Reset[重置表單]
Date類	Date[年月日控件], Datetime[年月日 + 時間控件], ...
特殊類	Hidden[隱藏信息]

TO擴展:

1. 文本類屬性:

   • placeholder 佔位符,做爲提示信息

   • autofocus 刷新後自動獲取焦點

   • autocomplete 自動記錄輸入信息

     1. 首先要提交按鈕

     2. form表單要有name 屬性

   • required 不能爲空,必填項

2. Url 和 E-mail, 在H5中會在提交表單的時候檢測格式是否正確

3. 操做類:

   • input標籤 結合 label標籤

     1. 非跨度: <label><input></input></label>

     2. 跨度: <label for="input_id"></label> 　　　　<input id="input_id"></input>

4. File:

   • 上傳多個文件multiple

5. Button:

   • Button類型只能在value中定義按鈕上顯示的提示文字

   • Image類型只能在src中連接圖片

多媒體標籤

1. audio 音頻標籤

  <audio controls="controls">
  ​
          <source src="media/snow.mp3" type="audio/mpeg" />
  ​
          <source src="media/snow.ogg" type="audio/ogg" />
  ​
              您的瀏覽器不支持播放此音頻
  ​
  </audio>

 

 

2. video 視頻標籤

  <!-- 谷歌瀏覽器把自動播放功能給禁用了 有解決方案： 給視頻添加靜音屬性 -->
  ​
  <video muted="muted" loop="loop" poster="media/pig.jpg" controls>
  ​
          <source src="media/video.mp4" type="video/mp4" />
  ​
          <source src="media/video.ogg" type="video/ogg" />
  ​
          您的瀏覽器版本過低或不支持播放此視頻
  ​
  </video>

 

 

選擇器

1. 屬性選擇器

  -> 1.直接寫屬性
  ​
 -> 2.屬性等於值 
        input[type="search"] {
            color: pink;
        }
 ​
 -> 3. 以某個值開頭的 屬性值
        div[class^="icon"] {
            color: red;
        }
 ​
 -> 4. 以某個值結尾的
        div[class$="icon"] {
            color: green;
        }
 ​
 -> 5. 能夠在任意位置的
        div[class*="icon"] {
            color: blue;
        }

 

2. 結構僞類選擇器

  -> 1. :nth-child(n)     第幾個，不論類別 eg: div下的第幾個標籤
  ​
 -> 2. :nth-of-type(n)   哪一類的第幾個，有類別 eg: ul下的第幾個li標籤,或第幾個p標籤
 ​
 -> n能夠爲公式
 -> odd 奇數
 -> even 偶數

 

3. 僞元素選擇器

  -> 1.  ::before         在...以前，
  ​
 -> 2. ::after         在...以後，
 ​
 僞元素選擇器必需要寫
 -> 1. content=「」；
 -> 2. display：block；

 

CSS3

CSS3是CSS（層疊樣式表）技術的升級版本,控制網頁的樣式和佈局

1. 盒子模型

2. 背景邊框

3. 多欄佈局

4. 列表模塊

5. ...等等模塊

新增特效:

1. 圓角

2. 文字陰影與塊陰影

3. RGBA實現透明效果

4. 漸變效果

5. 文字圖像變形處理

6. 多欄佈局

7. 媒體查詢

8. ...等等特效

優點:

1. 減小開發維護成本

2. 提升頁面性能

變形轉換 transform

1. 2D轉換

   • 位移translate

     1. translate中的百分比單位是相對於自身元素的 translate:(50%,50%);

     2. translate相似定位，不會影響到其餘元素的位置

     3. 對行內標籤沒有效果

   • 旋轉rotate

     1. transform-origin:50% 50%; 默認值 元素的中心位置 百分比是相對於自身的寬度和高度

     2. transform-origin:top left; 左上角 和 transform-origin：0 0;相同

     3. transform-origin:50px 50px; 距離左上角 50px 50px 的位置

     4. transform-origin：0; 只寫一個值的時候 第二個值默認爲 50%;

     -> 1.能夠跟方位名詞 transform-origin: left bottom;
     ​
    -> 2. 默認的是 50% 50% 等價於 center center 
    ​
    -> 3. 能夠是px 像素
    ​
   

     圖片旋轉例子：
     img {
              width: 150px;
              /* 順時針旋轉45度 */
              /* transform: rotate(45deg); */
              border-radius: 50%;
              border: 5px solid pink;
              /* 過渡寫到自己上，誰作動畫給誰加 */
              transition: all 0.3s;
             }
             
             img:hover {
                 transform: rotate(360deg);
             }

   
    ​
    -> 旋轉中心點是什麼要清楚 transform-origin 

   • 縮放scale

     1. 給元素添加轉換屬性 transform

     2. 轉換的屬性值爲 scale(寬的倍數,高的倍數) 如 寬變爲兩倍，高變爲3倍 transform:scale(2,3)

     3. 括號內能夠寫小數點

2. 3D轉換

   只是比2D轉換多了個Z軸

   • 視距 perspertive 遠小近大

     1. 設置物體的 translateZ 通常大於 0 如 transform:translateZ(100px)

     2. 設置 人和物體的距離 - 視距 這個值規定要設置給物體的父元素 perspertive:1000px

     3. 動態改變物體的 translateZ 便可觀察效果

   • 轉換樣式 transform-style

     1. 控制子元素是否開啓3維立體環境

     2. transform-style: flat;平面模式 - 不開啓3維立體環境

     3. transform-style: preserve-3d; 3維立體環境

動畫 animation

  /* 需求: 咱們想頁面一打開，一個盒子就從左邊走到右邊 */
  1. 聲明動畫
  @keyframes move {
  /* 開始狀態 */
  0% {
        transform: translateX(0px);
  }
  /* 結束狀態 */
  100% {
        transform: translateX(1000px);
  }
  ​
  div {
        width: 200px;
        height: 200px;
        
  /* 2. 調用動畫 */
  /* 2.1 動畫名稱 */
        animation-name: move;
  /* 2.2 持續時間 */
        animation-duration: 2s;

 ​
 動畫名稱要對應，
 至少要有2個屬性值，即，動畫名稱   持續時間 其餘可省略按需求
 animation: name duration timing-function delay iteration-count direction fill-mode; 
 ​
 【1. 動畫名   2. 持續時間   3. 速度曲線   4.延遲時間     5.循環次數   6.循環方向   7.動畫等待或結束的狀態】
 **其中第3個,速度曲線 可爲steps 步數**
 ​
 animation: move 2s linear 0s 1 alternate forwards; 
 ​
 -> 與上面屬性值對應屬性，

 

媒體查詢

根據不一樣的媒體類型定製不一樣的樣式規則

1. CSS3媒體類型

   • all 用於全部多媒體類型的設備

   • print 用於打印機

   • screen 用於電腦屏幕, 平板,智能手機

   • speech 用於屏幕閱讀器

  @media screen and (min-width: 480px) {
     body {
        
    }
 }
 -> 當屏幕小於480px時,背景顏色發生改變

 

CSS3 兼容處理

給瀏覽器添加私有前綴 :

1. Chrome(谷歌瀏覽器): -webkit-

2. Safan(蘋果瀏覽器): -webkit-

3. Firefox(火狐瀏覽器): -moz-

4. IE(IE瀏覽器): -ms-

5. Opera(歐朋瀏覽器): -o-