簡單的羅列一個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的相同點：不能跨域，

cookie localStorage

大小 4k 4M
有效期 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);

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

?

轉載于:https://www.cnblogs.com/jasonwang2y60/p/5958759.html

總結

以上是生活随笔為你收集整理的HTML5和css3的总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。