《html5拖拽》
1、給元素設置 draggable="true" 屬性，這個元素就可以被拖拽了
《拖拽元素事件》
2、ondragstart 拖拽前觸發得得事件
例：div1.ondragstart=function(){ //拖拽前
div1.style.background="blue"；
}
3、ondrag 拖拽前到拖拽結束連續觸發
例：div1.ondrag=function(){ //拖拽中
div1.style.borderColor="blue";
}
3、ondragend 拖拽結束觸發
例：div1.ondragend=function(){ //拖拽完后
div1.style.background="#fff";
}
《目標元素事件》
1、ondragenter 進入目標元素觸發
2、ondragover 進入目標到離開目標之間，連續觸發
3、ondragleave 離開目標元素觸發
4、ondrop 在目標元素釋放鼠標觸發
《dataTransfer 對象》
1、解決火狐下的問題
火狐必須設置dataTransfer對象才可以拖拽除圖片外的其他標簽
2、setData()設置數據 getData()獲取數據
e.dataTransfer.setData("id", e.target.id) 設置數據
e.dataTransfer.getData("id") 獲取數據
【注】：在拖拽元素設置數據，在目標文件中獲取數據
3、setDragImage 在拖拽中把元素暫時變成圖片
e.dataTransfer.setDragImage(img,50,50)
三個參數：指定的元素，坐標X，坐標Y
4、files 獲取外部的拖拽進入的文件，在目標元素中設置
例：e.dataTransfer.files；
《FileReader 讀取文件信息》
1、readAsDataURL 參數為要讀取的文件對象，將文件讀取為DataURL
例：var f=new FileReader()
f.readAsDataURL(fils[i])
2.onload
當讀取文件成功完成的時候觸發此事件 this. result ,
來獲取讀取的文件數據，如果是圖片，將返回base64格式的圖片數據
《本地存儲》
1、localStorage.name="xxx"; //第一種設置存儲本地數據的方法
2、localStorage.setItem("set","xx"); //第二種設置存儲本地數據的方法
3、localStorage.removeItem("name"); //刪除本地存儲數據
4、alert(localStorage.name) //獲取本地數據
alert(localStorage.getItem("set")) //另一種獲取本地數據的方法
5、alert(localStorage.key(0)) //獲取前面保存數據的名稱 括號中的數值和數組相同
6、localStorage.clear() //清除所有本地存儲的數據
7、localStorage.setItem("set1","{'name':'小李','age':'1314'}") //保存為占瑟格式
8、zhi=localStorage.getItem("set1") // 獲取保存的本地數據
zh=eval('('+zhi+')') //將占瑟格式轉換為對象
alert(zh.age) //調用其中的值
《css3選擇器》
1、屬性選擇器
1、p+a +號代表同一父元素指定元素后面緊跟着匹配的元素（只匹配后面的第一個）
2、p~a ~線代表在同一父元素下指定元素后面所有匹配的元素
3、a[href] 只匹配屬性，也就是只匹配指定標簽的擁有指定屬性的標簽。
4、a[href="a"] 匹配屬性和屬性值，只能匹配指定標簽中必須和要[]中的屬性和屬性值完全相同的標簽。
5、a[href~ ="a"] 這樣帶 ~ 匹配屬性可以匹配比如class 中設有倆個值 這樣的話帶 ~ 就可以匹配其中一個
了。
6、a[href ^ ="a"] 匹配屬性和屬性值但屬性值是以 " " 中的屬性值開頭的標簽
7、a[href $ ="a"] 匹配屬性和屬性值但屬性值是以 " " 中的屬性值結尾的標簽
8、a[href * ="a"] 匹配屬性和屬性值只要屬性值中包含有" "中的值的標簽就可以匹配到。
9、a[href | ="a"] 匹配屬性和屬性值這樣可以匹配到屬性值是"a-b"的標簽，這樣寫可以免寫 - ；
2、偽類選擇器
1、:active 鼠標點擊和釋放發生的事件，也就是鼠標點擊的時候后會發生，松開后又會還原。
2、:hover 鼠標移入發生改變或事件，當鼠標離開時回還原到移入前的狀態。
3、:link 設置未訪問的鏈接樣式 ，當點擊過后它將回到初始或被設置的狀態。
4、:visited 設置鏈接被訪問過后的樣式。
3、結構性偽類選擇器
1、:root 用來匹配文檔的根元素;
2、div>:not(p) 對括號以內匹配不進行操作/匹配非指定元素;必須寫什么元素下的什么元素不對它進行操作
3、:empty 匹配沒有子元素沒有文本連空格都沒有的元素
4、:target 選取當前活動的目標元素；
也就是給要點擊的標簽設置href屬性通過href屬性就行錨點鏈接；對這個描點指向的標簽進行操作
4、父元素下的子元素操作 【注】指定元素一定要寫要匹配的元素不可以是它的父元素
1、:first-child 匹配父元素中第一個元素是指定標簽的元素進行操作；
例：p:first-child 意思是匹配所有父元素下第一個子元素是p標簽的元素。
2、:last-child 匹配父元素中最后元素是指定標簽的元素進行操作；
例：p:last-child 意思是匹配所有父元素下最后一個子元素是p標簽的元素。
3、:only-child 匹配父元素下只有一個指定的子元素；對匹配子元素操作
例：p:only-child 意思是匹配所有父元素只有一個p標簽；這樣操作的所匹配的指定元素
5、操作元素在父元素中指定元素與其匹配的元素位置相同的元素
1、:nth-child(1) 匹配屬於其父元素的所有子元素的第幾個子元素，與指定元素匹配的元素
在這里只要父元素下的子元素與括號數值想等的位置與指定元素不同就匹配不到
例：p:nth-child(1) 意思是匹配父元素中的第一個子元素是p標簽的元素；對p標簽進行操作
2、:nth-of-child() 匹配指定元素在父元素中第幾次出現的元素進行操作，
也就是說指定標簽的數量只要不比括號中的數值小就一定能匹配到
例：p:nth-of-child(1) 匹配父元素中的第一次出現的p標簽
3、:nth-last-child() 與上方第（1）個相同 只是第一個是從前忘后匹配，
這個是從后往前匹配(1)括號中寫1代表了最后一個；不像上面 1 就是代表第一個
例：p:nth-last-child(1) 意思是匹配父元素中的最后一個子元素是p標簽的元素；對p標簽進行操作
4、:nth-last-of-child() 與上方第二個相同 只是從最后一個找起
例：p:nth-last-of-child(1) 匹配父元素中從后往前的第一次出現的p標簽
5、even 偶數 odd奇數 1n : 數字加n 代表是數字的倍數
這些填寫在上面括號中更好對標簽操作。
6、元素狀態偽類選擇器
1、:focus 選取input獲取焦點的元素，失去焦點時會回到獲取焦點前的狀態
2、:enabled 選取可用的元素
3、:disabled 選取不可用的元素
4、:read-only 選取處於只讀狀態的元素
5、:read-write 選取可讀可寫的元素
6、:checked 匹配復選框或單選框為選中狀態的元素
7、:default 頁面打開時復選框或單選框處於默認選中的元素
8、::selection 當元素能容選中狀態時
9、:indeterminate 頁面打開時整組單選框沒默認選中時整組單選框的樣式
7、偽元素選擇器
1、:first-line 選取指定選擇器的首行
2、:first-letter 選去指定選擇器的首字母或第一個字
《移動端頭部布局》
1、刷新
<meta http-equiv="refresh" content="3">
| |
恢復，刷新 多長時間
2、文檔類型
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
3、語言
<meta http-equiv="content-language" content="zh-cn">
4、頁面描述
<meta name="description" content="測試">
5、關鍵詞搜索：給瀏覽器搜索引擎使用；可以是提高優先搜索級
<meta name="keywords" charset="meta,meta屬性,英雄">
6、優先使用ie最新瀏覽器eage 和谷歌1
<meta http-equiv="X-UA-Compatible" content="Ie=Edae,chome=1">
7、手機端寬 手機端高 是否縮放 縮放的初始大小 縮放的最大和最小
<meta name="viewport" content="width=device-width,height=device-height,
顯示設備寬 顯示設備高
user-scalable=no,initial-scale:0.5,maximum-scale=3,minimum-scale=1">
用戶能否縮放 初始縮放倍數 最大縮放倍數 最小縮放倍數
《標准盒子和怪異盒子》
1、盒子模型有兩種1、標准模型 2、怪異盒子
2、標准盒子：他會把邊框也算為占位寬；
怪異盒子：添加屬性后好比寬為300 加 2像素的邊框后 他的占位寬還是300 不會是304
還有內邊距也一樣；怪異盒子加邊框加內邊距不會改變盒子的初始設置的寬高
3、box=sizing
他有兩個屬性 box-sizing：content-box; 采用標准盒子計量
box-sizing：border-box; 采用怪異盒子計量
【注】屬性寫在要設置的元素中就好
《彈性盒子》
1、彈性盒子：是為了適應不同屏幕大小的設備確保元素擁有恰當的行為的布局方式
彈性盒子由彈性容器和彈性子元素構成
2、 display：flex； 和 inline：flex；
彈性容器通過設置元素屬性為display：flex（塊級元素布局）
3、flex-direction 主軸的排列方向
flex-direction:row; 主軸為水平方向，起點在左端，也就是彈性盒子的默認
flex-direction:row-reverse; 主軸為水平方向，起點在右端；也就是倒排列，最后一個排在第一個，倒二是
第二，依次排列
flex-direction:column; 主軸為垂直方向，起點是第一個子元素
flex-direction:column-reverse; 主軸為垂直方向，起點是最后一個子元素，也就倒序
4、flex-wrap 主軸線排列不下 的換行 不會擠在一塊
flex-wrap:nowrap; （默認）不換行 不管放不放得下都不會換行
flex-wrap:wrap; 換行，第一行在上方
flex-wrap:wrap-reverse; 換行，第一行在最下方
5、flex-flow 主軸方向和換行一起的簡寫
默認 flex-flow:row nowrap
6、justify-content 彈性子元素在主軸上的對齊方式
justify-content:flex-start; 在主軸上左對齊
justify-content:flex-end; 在主軸上右對齊
justify-content:center; 在主軸上居中對齊
justify-content:space-between; 在主軸上兩端對齊，元素之間的間隔相等
justify-content:space-around; 在主軸上兩端對齊,兩側間隔相等，元素之間是元素與邊框間隔的一倍
7、align-items 交叉軸對齊方式（也就是垂直對齊方式）
align-items:flex-start; 交叉軸的起點對齊
align-items:flex-end; 交叉軸的終點對齊
align-items:center; 交叉軸居中對齊
align-items:baseline; 項目的第一行文字的基線對齊
align-items:stretch; （默認）項目未設置高度或高度為auto，將占滿整個容器的高度
8、align-content 用於修改flex-wrap換行后的屬性行為
align-content:flex-start; 交叉軸的起點對齊
align-content:flex-end; 交叉軸的終點對齊
align-content:center; 交叉軸居中對齊
align-content:space-between; 交叉軸兩端對齊；元素之間距離平均分布
align-content:space-round; 交叉軸也就是行與行之間間隔相等，元素之間是元素與邊框間隔的一倍
align-content:stretch; (默認值) 軸線占滿整個交叉軸。
9、flex 用於彈性子元素如何分配空間
flex-grow:2; 定義彈性盒子子元素的擴張比率
flex-shrink:1; 定義彈性盒子的收縮比率
flex-basis: 定義彈性盒子的默認基准值
來自平時總結,如有雷同純屬巧合。