HTML5和css3的總結

標籤：

簡單的羅列一個HTML5的新東西，以後的幾天裡詳細的過一遍
一個挺有用的網站：www.css88.com

【H5的新標籤】

用之前的標籤完全可以代替的：header footer aside atrical nav address time mark section

新增的重要的標籤：video audio caves（畫圖）

這些新標籤的作用：語義化，使代碼的可讀性更強；便於提高搜尋最佳化。

再談談相容性：相容IE9+，IE8及其以下有些可以解決，但大部分的還是放棄。這裡有兩個詞我覺得挺好，簡單寫兩句。
優雅降級：保證功能在進階瀏覽器上的使用，放棄低級瀏覽器。
漸進增強：低級瀏覽器只保證準系統的實現，進階瀏覽器確保的是更好的使用者體驗。

一個有用的小東西，可以解決部分IE瀏覽器安全色性問題：HTML5shiv.js

【js部分的新東西】
1》擷取元素
oDiv=document.querySelectorAll(‘css選取器‘); ——》選擇一組

oDiv=document.querySelector(‘css選取器‘); ——》選擇一個，如果選擇一組的話只選擇第一個

相容性：只相容IE8+（IE8隻支援css2.0選取器）

2》js自訂屬性

不標準
FF chrome 不支援 瀏覽器認為自訂屬性不規範，將其過濾掉了

H5中自訂屬性前面加 ： data-自訂屬性瀏覽器承認這個為自訂屬性

列印自訂屬性 console.log(this.dataset); ---->列印出來的是一個json，沒有length
this,dataset.自訂屬性=“值” 可以設定自訂屬性的值

測試效能
程式之前 consolog.time(‘hello‘);
程式結束 consolog.timeEnd(‘hello‘);

this.dataset 的效能比getAttribute 高

3》classList
用於在元素中添加、刪除、切換css類；
classList屬性是唯讀，但可用add()/remove()方法修改他；
可多項添加和刪除，在括弧內添加多個css類名即可；

相容IE10+

element.classList.add();添加類名
Element.classList.remove();刪除類名
element.classList.contains();返回布爾值 true表示元素包含該類名，false表示不包含

【html5的新功能】
1》地理定位（重要） geolocation
2》websql 前端資料庫 雞肋，沒有隱私可言
3》js中多線程和單線程+

單線程：一次只能做一件事
多線程：同事可以做很多事

多線程的實現：webworker 雞肋：只能進行一些計算
4》websocket（重要）
ajax：單項 請求伺服器---然後伺服器再給你返回資料 效能一般
websocket：雙向的 效能高 直播
5》本機存放區（重要）：
cookie
localStorage
查看 f12--applition cookie上面

localStrorage和cookie的相同點：不能跨域，

cookielocalStorage

大小4k4M
有效期間 session（會話結束：關閉瀏覽器）不到期
環境要求走網路（傳遞方式）不走網路（本地）
相容性相容IE6不相容IE6

簡便寫法： localStorage.username=‘xiaoer‘;
標準寫法 localStorage.setItem(‘username‘,‘xiaoer‘);
alert(localStorage.getItem(‘username‘));

setItem
getItem
removeItem
clear

相容性：
相容IE7+

6》表單
原來的表單元素 input

input新的屬性 placeholder
required 不可為空，必須填
autocomplete 輸入內容提示，預設值為on（開啟），off（關閉）
tel：電話類型
data日期
month 月
week 周
color 顏色 ——————》擷取值用onchange this.value
range 滑塊（範圍）

<progress></progress > 進度條
value：
min：
max：
<meter></meter>
value：
min：
max：
事件：
新表單，在手機端的優勢：自動切換鍵盤
oncopy 在你複製的時候
oninput

7》canvas 畫表徵圖簽
<canvas></canvas>
畫出的圖形是向量圖形：放大不失真

安布雷拉

css3：新樣式
css三角形
圖形字元
icon-font

border-radius：

tianox.com

動畫效果：
transition:1s all ease/linear;
時間 哪個屬性 加速減速
相容性：
瀏覽器首碼
chrome -webkit-
FF -moz-
IE -ms-
opear 原來用自己的核心，現在用webkit核心
標準核心 不寫也行-webkit-transition:

js添加瀏覽器首碼：---->有的瀏覽器 上也是小寫
oDiv.style.transiton
oDiv.style.WebkitTransition
oDiv.style.MozTransition
oDiv.style.msTransition

盒子陰影： box-shadow:0px 0px 100px #000;
x方向位移 y方向位移 模糊程度 顏色

線性漸層： background:-webkid-linear-gradient(漸層的角度/漸層開始的位置，顏色1 顏色1開始漸層的位置，顏色2 顏色2開始漸層的位置);

當位置為 top left /right bottom 的時候-websit-必須寫
從左上到右下為-45deg

寫一個四個顏色的跳變
background:-webkit-linear-gradient(red 25%,green 25%,green 50%,yellow 50%,yellow 75%,deepskyblue 75%);

放射狀漸層：background:-webkit-radial-gradient(圓心的位置，形狀（circle），顏色1 顏色1開始漸層的位置，顏色2 顏色2開始漸層的位置);

圓心位置可以寫center center/top left等等

重複漸層：background:-webkit-repeating-linear/radial-gradient();
可以畫飛鏢盤了

蒙版：-webkit-mask:url();

background-size:contain/cover;高度撐開，寬度自適應/寬度撐開，高度自適應

【其他一些不經常使用的濾鏡】
-webkit-filter:blur(px);
1.映像高斯模糊
-webkit-filter:blur(4px);
範圍隨便寫就行，記得加px
2. 圖片進行棕褐色處理
-webkit-filter:sepia(1);
處理範圍是0-1或者0%-100%
3. 圖片灰色處理
-webkit-filter:grayscale(1);
範圍是 0-1或者0%-100%
4. 圖片反色處理
-webkit-filter:invert(1);
範圍是 0-1或者0%-100%
5. 映像飽和度調節
-webkit-filter:saturate(30);
範圍是 取值範圍>=0數字或百分比 1為無效果，0為灰階圖
6. 映像對比調節
-webkit-filter:contrast(90);
取值範圍>=0數字或百分比 1為無效果
7. 映像亮度調節
-webkit-filter:brightness(3);
取值範圍>=0數字或百分比 1為無效果
8. 映像色相旋轉
-webkit-filter:hue-rotate(300deg);
取值範圍0deg-365deg, 0預設值，為無效果
9. 陰影濾鏡
-webkit-filter:drop-shadow(5px 5px 3px #333);

今天就先寫到這把，明天繼續

 

HTML5和css3的總結