終於整理完,HTML5+CSS3學習筆記，用了一週稍微記住了點語法.留個印象,後續有用到再手冊找吧...

HTML5

文章目錄

一.HTML5 ` 新增標籤
1 . 新增了語義化標籤
2 、多媒體音頻標籤
3.input標籤新增屬性
4.form表單新增屬性
CSS3
一.CSS3 屬性選擇器
1.屬性選擇器列表
2.結構僞類選擇器
3.僞元素選擇器
二. 2D 轉換之 translate
1 . 2D 轉換 rotate
2. 設置元素旋轉中心點(transform-origin)
3. 2D 轉換之 scale
4. 2D 轉換簡寫
三. 動畫(animation)
1 . 動畫簡寫方式
2.速度曲線細節
四、3D 轉換
1 . 3D 轉換知識要點（難）
2、透視 perspective(難）
3. translateZ
4.3D 旋轉rotateX
5、3D 呈現 transform-style（難）

一.HTML5新增標籤

1. 新增了語義化標籤

  - `header`   ---  頭部標籤
  - `nav`        ---  導航標籤
  - `article` ---   內容標籤
  - `section` ---   塊級標籤
  - `aside`     ---   側邊欄標籤
  - `footer`   ---   尾部標籤

2 、多媒體音頻標籤

1. 多媒體標籤有兩個，分別是

   • 音頻 – audio
   • 視頻 – video

①audio：參數：

②video：參數：

總結：

• 多媒體標籤在不同瀏覽器下情況不同，存在兼容性問題
• 谷歌瀏覽器把音頻和視頻標籤的自動播放都禁止了

3.input標籤新增屬性

4.form表單新增屬性

CSS3

一.CSS3 屬性選擇器

1.屬性選擇器列表

2.結構僞類選擇器

① nth-child 參數 (重要)

1. nth-child 詳解

   • 注意：本質上就是選中第幾個子元素

   • n 可以是數字、關鍵字、公式

   • n 如果是數字，就是選中第幾個

   • 常見的關鍵字有 even 偶數、odd 奇數

   • 常見的公式如下(如果 n 是公式，則從 0 開始計算)

   • 但是第 0 個元素或者超出了元素的個數會被忽略

3.僞元素選擇器

①before 之前
②after 之後

• before 和 after 必須有 content 屬性
• before 在內容前面，after 在內容後面
• before 和 after 創建的是一個元素，但是屬於行內元素
• 僞元素和標籤選擇器一樣，權重爲 1

二. 2D 轉換之 translate

1. 2D 轉換

   • 2D 轉換是改變標籤在二維平面上的位置和形狀

   • 移動： translate

   • 旋轉： rotate

   • 縮放： scale

2. translate 語法

   • x 就是 x 軸上水平移動
   • y 就是 y 軸上水平移動

   transform: translate(x, y)
   transform: translateX(n)
   transfrom: translateY(n)
   

3. 注意：

   • 2D 的移動主要是指 水平、垂直方向上的移動
   • translate 最大的優點就是不影響其他元素的位置
   • translate 中的100%單位，是相對於本身的寬度和高度來進行計算的

1. 2D 轉換 rotate

1. rotate 旋轉

   • 2D 旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉

2. rotate 語法

   /* 單位是：deg  記得帶單位！*/
   transform: rotate(度數) 
   

3. 注意：

   • rotate 裏面跟度數，單位是 deg
   • 角度爲正時，順時針，角度爲負時，逆時針

2. 設置元素旋轉中心點(transform-origin)

1. transform-origin 語法

   transform-origin: x y;
   

2. 注意

   • x y 默認旋轉的中心點是元素的中心 (50% 50%)，等價 center center
   • 還可以給 x y 設置像素或者方位名詞(top、bottom、left、right、center)

3. 2D 轉換之 scale

1. scale 的作用

   • 控制元素的放大與縮小

2. 語法

   transform: scale(x, y)
   

3. 注意

   • transform: scale(1, 1): 寬高都放大一倍，相當於沒有放大
   • transform: scale(2, 2): 寬和高都放大了二倍
   • transform: scale(2): 如果只寫了一個參數，第二個參數就和第一個參數一致
   • transform:scale(0.5, 0.5): 縮小
   • scale 優勢：可以設置轉換中心點縮放，默認以中心點縮放，而且不影響其他盒子

4. 2D 轉換簡寫

1. 注意

   • 同時使用多個轉換，其格式爲 transform: translate() rotate() scale()
   • 順序會影響到轉換的效果(先旋轉會改變座標軸方向)
   • 當同時有位置或者其他屬性的時候，要將位移放到最前面

三. 動畫(animation)

1. 動畫的基本使用

   • 先定義動畫
   • 在調用定義好的動畫

2. 語法格式(定義動畫)

   @keyframes 動畫名稱 {
       0% {
           width: 100px;
       }
       100% {
           width: 200px
       }
   }
   

3. 語法格式(使用動畫)

   div {
   	/* 調用動畫 */
       animation-name: 動畫名稱;
    	/* 持續時間 */
    	animation-duration: 持續時間；
   }
   

4. 注意

   • 0% 是動畫的開始，100 % 是動畫的完成
   • 在 @keyframs 中規定某項 CSS 樣式，就由創建當前樣式逐漸改爲新樣式的動畫效果
   • 動畫是使元素從一個樣式逐漸變化爲另一個樣式的效果，可以改變任意多的樣式任意多的次數
   • 用百分比來規定變化發生的時間，或用 from 和 to，等同於 0% 和 100%

1. 動畫簡寫方式

/* animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 起始與結束狀態 */
animation: name duration timing-function delay iteration-count direction fill-mode

1. 注意

   • 簡寫屬性裏面不包含 animation-paly-state
   • 暫停動畫 animation-paly-state: paused; 經常和鼠標經過等其他配合使用
   • 要想動畫走回來，而不是直接調回來：animation-direction: alternate
   • 盒子動畫結束後，停在結束位置：animation-fill-mode: forwards

2. 代碼演示

   animation: move 2s linear 1s infinite alternate forwards;
   

2.速度曲線細節

• animation-timing-function: 規定動畫的速度曲線，默認是ease
  

四、3D 轉換

1. 3D 轉換知識要點（難）

• 3D 位移：translate3d(x, y, z)
• 3D 旋轉：rotate3d(x, y, z)
• 透視：perspctive
• 3D呈現 transfrom-style

2. 3D 移動 translate3d

   • 3D 移動就是在 2D 移動的基礎上多加了一個可以移動的方向，就是 z 軸方向
   • transform: translateX(100px)：僅僅是在 x 軸上移動
   • transform: translateY(100px)：僅僅是在 y 軸上移動
   • transform: translateZ(100px)：僅僅是在 z 軸上移動
   • transform: translate3d(x, y, z)：其中x、y、z 分別指要移動的軸的方向的距離
   • 注意：x, y, z 對應的值不能省略，不需要填寫用 0 進行填充

3. 語法

    transform: translate3d(x, y, z)
   

2、透視 perspective(難）

body {
  perspective: 1000px;
}

3. translateZ

1. translateZ 與 perspecitve 的區別
   • perspecitve 給父級進行設置，translateZ 給 子元素進行設置不同的大小

4.3D 旋轉rotateX

1. 語法
   • transform: rotateX(45deg) – 沿着 x 軸正方向旋轉 45 度
   • transform: rotateY(45deg) – 沿着 y 軸正方向旋轉 45 度
   • transform: rotateZ(45deg) – 沿着 z 軸正方向旋轉 45 度
   • transform: rotate3d(x, y, z, 45deg) – 沿着自定義軸旋轉 45 deg 爲角度

5、3D 呈現 transform-style（難）

1. transform-style

   • 控制子元素是否開啓三維立體環境
   • transform-style: flat 代表子元素不開啓 3D 立體空間，默認的
   • transform-style: preserve-3d 子元素開啓立體空間
   • 代碼寫給父級，但是影響的是子盒子

---

H5C3 暫時放下一段落了，囫圇吞棗式的看完，近期學一下JS，有需要筆記的也可以關注我
基礎HTML+CSS筆記(內附中文手冊鏈接)在上一篇《html+css基礎語法筆記》
JS學習Day1筆記js基礎Day1

分享到這