移動web開發 基礎入門

1. H5新增的語義化标簽： 好處是增強了代碼的可閱讀性，也友善了網站的seo。

   nav 導航标簽

   article 内容标簽

   section 塊級标簽

   aside 側邊欄标簽

   footer 尾部标簽

   header 頭部标簽

2. H5新增的輸入型 input 标簽

   

3. 标簽屬性：

   required=“required”必填項

   placeholder=“請輸入内容” 類似于value

   autofocus=“autofocus” 自動擷取光标

   autocomplete 提示之前輸入過的内容 預設是on（打開的）一般我們都是把它（off）關掉的。這個屬性使用時，标簽中必須有name屬性。

   multiple=“multiple” 可以多選檔案上傳，常用在file标簽中。

Chrome浏覽器會禁止音頻的自動播放，是以想要視訊自動播放，隻需要禁音就可以了，即：先autoplay再muted。

placeholder 和 value 用途一樣，但是我們用placeholder，比value強大的多。

注：E：first-child 是“比對父元素中的第一個子元素E”但是如果父元素的第一個子元素不是E（也就是木有符合要求的）那這個選擇器木有用。
父元素的子元素相同時一般用E:nth-child（n）有不相同的子元素時 一般用 E：nth-of-type（n）。
           

注意 ：E::before實在 E 内部的前建立一個行内元素 然後通過 content 添加内容。
           

1. 2D轉換 transform ：

   

   重點補充：translate不會影響其他盒子的位置，而且其層級比普通盒子高，和定位一樣會壓住普通盒子。

   translate（50%，50%）這個常用來和定位搭配，使盒子水準垂直居中。

補充一個：calc（）css3的一個屬性 calc（50% - 100px）也可以實作居中。

補充：過度效果 transition

transform：rotate（）預設為中心為旋轉的中心點

transform-origin 可以調節旋轉的中心點。

也是可以用 transform-origin 來調節中心點的。

2D轉換就學了這四個：

簡寫法：transform：translate（） rotate（） scale（） 還有一個 transform-origin

位移 旋轉 縮放

簡寫法中各屬性是有順序的，一般把位移放在第一位。

CSS動畫的使用：

先定義，再調用

這些屬性可以簡寫：animation：動畫名稱 動畫時間 動畫曲線 何時開始 播放次數 是否反向 結束狀态

這裡面前兩個是不能省略的，屬性順序一般不變。

animation-paly-state 動畫是否停止 這個一般和 ：hover 一起使用，，不在簡寫中寫。

1. transform 3D 轉換

   （1）transform translate3d（x,y,z）裡面的資料不能省略，木有就是0。xyz單寫就像下面：

   

   （2）perspective 透視也叫做視距，了解為視距更好一些，即：模拟螢幕到眼睛的距離，物體近大遠小，展現出3D的效果。 perspective：500px; 500px即是螢幕到眼睛的距離，數值越大物體越小。

（3）transform：rotate3d:

例如：transform：rotate3d（1,0,0,45deg）繞x軸旋轉。transform：rotate（1,1,0,45deg）繞對角線旋轉

perspective是加給父級元素（也可以是爺爺級）的。這個是安排眼睛去可看出3D效果。

transform-style：preserve-3d;是加給父級的，隻能是父級，子元素才會保持3d效果。

補充知識：