1 移動(dòng)端開發(fā)分開主要分為三類
web App開發(fā)->H5頁面開發(fā) ->HTML5+CSS3+javascript
2 HTML5語義化標(biāo)簽（結(jié)構(gòu)標(biāo)簽和功能標(biāo)簽）
h1~h6 img p ul li ol li dl dt dd em strong q a
語義化標(biāo)簽：合理的標(biāo)簽做適合的事情
3 結(jié)構(gòu)化標(biāo)簽（用來布局）
讓頁面結(jié)構(gòu)更加清晰急侥，更加有利于搜索引擎孩灯，對(duì)未來瀏覽器也更加友好
section 一塊區(qū)域 范圍非常大
header 頭部或者一塊區(qū)域的頭部
nav 頁面的主導(dǎo)航
main 主體內(nèi)容
footer 尾部或者一塊區(qū)域的尾部
article 獨(dú)立的內(nèi)容（放在任何地方都可以獨(dú)立存在）塘装，例如一篇完整的文章
aside 對(duì)主體內(nèi)容的輔助信息荐虐，放在aside標(biāo)簽里的內(nèi)容可有可無 炭臭，例如側(cè)邊欄狂打，文章的廣告
figure 插圖
ficaption 對(duì)插圖的描述稱為圖題
forms input元素的種類
text password button submit reset radio checkbox
search 手機(jī)鍵盤右下角按鈕的圖標(biāo)不是像右的箭頭伴栓，而是變成search
tel 手機(jī)號(hào)碼輸入框牡借，在手機(jī)上直接出現(xiàn)數(shù)字鍵盤
url url地址
email 郵箱地址
number 數(shù)字輸入框
4 屬性
placeholder 設(shè)置輸入前的提示信息拳昌，當(dāng)輸入內(nèi)容時(shí)，提示信息消失
autocomplete 是否保存用戶輸入的信息 on->保存 off->不保存
autofocus 光標(biāo)自動(dòng)聚焦
required 必須填寫內(nèi)容
pattern 設(shè)置正則驗(yàn)證的規(guī)則
validity這個(gè)對(duì)有幾個(gè)屬性
valid 驗(yàn)證不通過時(shí)返回false
patternMismatch typeMismatch valueMissing customError 驗(yàn)證不通過時(shí)返回true
form屬性 可以讓表單元素關(guān)聯(lián)form標(biāo)簽（也就是說這個(gè)表單元素是屬于哪個(gè)form標(biāo)簽下）
novalidate 作用在form標(biāo)簽上钠龙，表單元素不需要驗(yàn)證炬藤，就可以提交
formnovalidate 作用在submit類型的按鈕, 表單元素不需要驗(yàn)證御铃，就可以提交
window.document.designMode = "on";
通過dataset獲得自定義屬性值
console.log(oP.dataset.nameAge)
5 CSS3選擇器
關(guān)系選擇器
E+F E相鄰的弟弟節(jié)點(diǎn)F
E~F E所有的弟弟節(jié)點(diǎn)
結(jié)構(gòu)選擇器
:nth-child(n) 選定第幾個(gè)子元素 n是從1開始設(shè)置 （不分類型）
:nth-child(even) 偶數(shù)
:nth-child(odd) 奇數(shù)
:nth-child(2n) n從0開始設(shè)置的
:nth-of-type 會(huì)把子元素根據(jù)標(biāo)記名分類，然后再去同種類型的元素中查找
:first-child
:first-of-type
:last-child
:last-of-type
:only-child 查看當(dāng)前元素的子元素是否唯
:only-of-type 同種類型的子元素只有一個(gè)
:empty 沒有任何子元素（包含文本沈矿，換行上真，空格）
ul li:nth-child(2){1.先找到第二個(gè)子元素 2.看這個(gè)資源的標(biāo)記名是否為li
div:empty{
}
ul :not(:first-child){
}
否定選擇器
:not(選擇器) 不包含某個(gè)元素（排除某個(gè)元素）
屬性選擇器
E[attr = val] 只能等于val
E[attr|=val] 只能等于val或者以val-開頭
E[attr*=val] 包含val即可
E[attr~=val] 屬性值可以有多個(gè)，其中一個(gè)是val
E[attr^=val] 以val開頭
E[attr$=val] 以val結(jié)尾
ul li[class$="zf"]{
}
目標(biāo)偽類選擇器
:target 匹配url指向的目標(biāo)元素
6 漸變
linear-gradient 線性漸變 沿著一條直線軸方向漸變
第一個(gè)參數(shù) ：漸變的方向
從第二個(gè)參數(shù)開始設(shè)置漸變的顏色和位置
red 20%羹膳，green 70% 20%到70%之間稱為漸變過渡區(qū)
顏色的位置可以通過百分比或者具體的像素值
如何去掉漸變過渡區(qū)谷羞？ 對(duì)每個(gè)顏色設(shè)置起始位置和結(jié)束位置
radial-gradient 徑向漸變
由一個(gè)點(diǎn)向多個(gè)方向漸變
第一個(gè)參數(shù)：漸變的形狀
at后面設(shè)置圓心的位置 left top center bottom| 10px(水平坐標(biāo)) 20px(垂直坐標(biāo)) 默認(rèn)在中心點(diǎn)
重復(fù)的徑向漸變 repeating-radial-gradient
7 陰影
box-shadow （默認(rèn)是外陰影）
第一個(gè)參數(shù)（水平偏移量） ：正->右 負(fù)->左
第二個(gè)參數(shù)（垂直偏移量） ：正->下 負(fù)->上
第三個(gè)參數(shù)：模糊半徑
第四個(gè)參數(shù)：擴(kuò)展半徑 正：陰影往外擴(kuò)散 負(fù)：陰影往內(nèi)收縮
第五個(gè)參數(shù)：陰影的顏色
inset 內(nèi)陰影 并且偏移的方向和外陰影相反
text-shadow 文本陰影 相對(duì)于盒子陰影少了擴(kuò)展半徑，其他都一樣
8 圖片展示
background-origin
padding-box 從padding區(qū)域顯示
border-box 從border區(qū)域顯示
content-box 從content區(qū)域顯示
background-clip
padding-box 從padding區(qū)域向外裁剪
border-box 從border區(qū)域往外裁剪
content-box 從content區(qū)域往外裁剪
text 文本裁剪
background-size
100% 100% 百分比
10px 10px 數(shù)值
contain 按原始比例收縮,背景圖顯示完整,但不一定鋪滿整個(gè)容器
cover 按原始比例收縮,背景圖可能顯示不完整,但鋪滿整個(gè)容器
background-attachment
背景圖片是滾動(dòng)的還是固定的 fixed(固定的) 默認(rèn)是滾動(dòng)的
9 過渡動(dòng)畫
transition細(xì)分屬性
transition-property 過渡屬性 默認(rèn)值all
transition-duration 動(dòng)畫運(yùn)行的時(shí)間
transition-timing-function 動(dòng)畫運(yùn)行的速度
ease(默認(rèn)值) linear ease-in ease-out ease-in-out
transition-delay 延遲時(shí)間
復(fù)合寫法
transition:width 1s linear 1s;
transition:width 1s linear 1s,height 1s ease 0.5s;設(shè)置多個(gè)屬性
如果僅僅是屬性名不一樣溜徙，其他的屬性值都一樣
transition:all 1s ease 1s;
->transition:1s; 只需要設(shè)置運(yùn)行時(shí)間湃缎，其他的都是默認(rèn)值
做PC端項(xiàng)目時(shí)，為了兼容各個(gè)瀏覽器蠢壹，需要寫如下前綴的寫法
-webkit-transition-property: width;
-moz-transition-property: width;
-ms-transition-property: width;
-o-transition-property: width;
transition-property: width;
移動(dòng)項(xiàng)目嗓违，只需要寫兩種寫法
-webkit-transition-property: width;
transition-property: width;
變形屬性 transform 旋轉(zhuǎn) 傾斜 縮放 平移 正負(fù)確定方向
transform:rotate(45deg)
正->順時(shí)針 負(fù)->逆時(shí)針
transform:scale(1,1)
默認(rèn)值1 >1放大 <1 縮小
transform:skew(15deg,30deg)
第一個(gè)參數(shù) 正->水平往左 負(fù)->水平往右
第二個(gè)參數(shù) 正->垂直往下 負(fù)->垂直往上
transform:translate(tx,ty)
tx,ty默認(rèn)值是0 如果沒有發(fā)生平移，tx和ty是0
tx:正->右 負(fù)->左 ty:正->下 負(fù)->上
transform-origin 發(fā)生變形時(shí)基準(zhǔn)點(diǎn)默認(rèn)情況下是元素的中心點(diǎn)
rotate ,scale,skew可以改變變形基準(zhǔn)點(diǎn)图贸，translate不能改變
變形的方法可以一起使用蹂季，但是注意先后順序，一旦和translate一起結(jié)合時(shí)疏日，如果要保證變形的基準(zhǔn)點(diǎn)不發(fā)生改變偿洁，則把translate放最后
10 幀動(dòng)畫
特征：1.可以設(shè)置多種狀態(tài)，可以制作復(fù)雜的動(dòng)畫效果
2.不需要觸發(fā)條件沟优，立馬執(zhí)行
步驟 ：1.通過@keyframes 聲明動(dòng)畫的運(yùn)動(dòng)軌跡
@-webkit-keyframes 動(dòng)畫名{
0%{ 動(dòng)畫運(yùn)行時(shí)間的百分比
}
50%{
}
}
@keyframes 動(dòng)畫名{
0%{ 動(dòng)畫運(yùn)行時(shí)間的百分比
}
50%{
}
}
通過animation調(diào)用聲明的幀動(dòng)畫
animation-name 動(dòng)畫名稱 (必寫)
animation-duration 執(zhí)行時(shí)間 （必寫）
animation-timing-function 動(dòng)畫運(yùn)行的速度 ease(默認(rèn)值)
animation-delay 延遲時(shí)間
animation-iteration-count [1|infinite] 執(zhí)行的次數(shù)
animation-direction:normal（默認(rèn)值）|reverse(反方向)|alternate（交替）|alternate-reverse（反方向交替）
animation-play-state：[running（運(yùn)行的涕滋，默認(rèn)值）|paused（停止）] 動(dòng)畫運(yùn)行的狀態(tài)
animation-fill-mode 動(dòng)畫結(jié)束后的狀態(tài)
none|backwards(回到起始位置)|forwards(停留在最后一幀)|both(根據(jù)方向，可能停留在第一幀或者最后一幀)
復(fù)合寫法
animation:move 1s ease 1s 2 reverse both
->animation:move 1s 1 both;
11 3D變換
如果想要實(shí)現(xiàn)3D效果挠阁，首先得設(shè)置如下兩個(gè)屬性
perspective:2000px;景深（近大遠(yuǎn)小的效果） 一般設(shè)置在800px~2000px (用戶到z軸的距離) 作用在祖先標(biāo)簽（包含父標(biāo)簽）
transform:perspective(2000px) 直接作用在變形元素上
transform-style:flat|preserve-3d(3D空間) 作用在變形元素的父標(biāo)簽上
perspective-origin:center 默認(rèn)情況下是看到物體中心的位置上
3d方法
平移
transform:translate3d(tx,ty,tz)
transform:translateX()
transform:translateY()
transform:translateZ() 正->前->變大 負(fù)->后->變小
縮放
transform：scale3d(sx,sy,sz) 默認(rèn)值是1
transform:scaleX()
transform:scaleY()
transform:scaleZ() 不能單獨(dú)使用宾肺，得配合著其他變形方法一起使用
翻轉(zhuǎn)
transform：rotate3d(rx,ry,rz,a);rx，ry,rz向量坐標(biāo) a角度 矩陣算法
transform:rotateX(45deg) 圍著X軸翻轉(zhuǎn) 正->前翻 負(fù)->后翻 transform:rotate3d(1,0,0,45deg)
transform:rotateY(45deg) 圍著Y軸翻轉(zhuǎn) 正->右翻 負(fù)->左翻 transform:rotate3d(0,1,0,45deg)
transform:rotateZ(45deg) 效果等同于2d的rotate(45deg)侵俗，但是是在Z軸平面上旋轉(zhuǎn) transform:rotate3d(0,0,1,45deg)
transform:rotateX(45deg) rotateY(30deg) rotateZ(30deg);
12 video標(biāo)簽
-controls 顯示用戶操作界面
autoplay 自動(dòng)播放
loop 循環(huán)播放
preload :auto 預(yù)加載音頻文件
metadata 只加載音頻文件的元數(shù)據(jù)锨用，例如（音頻文件總共的播放時(shí)間）
none 不提前加載音頻文件
音頻文件播放 play() 停止 pause()
怎樣判斷音頻文件是播放還是停止的beyond.paused true->停止 false->播放
