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的相同點:不能跨域,
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的总结的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: GitHub地图转误差坐标
- 下一篇: 算法_有向图