HTML5 學習準備1

時間 2019-11-11

標籤 html5 html 學習準備欄目 HTML5 简体版

原文原文鏈接

HTML標籤是忽略大小寫的，可是class的值是不忽略大小寫的，好比你寫個class="videoBar"，那麼css樣式必須得寫.videoBar，若是寫成videobar那就不行。css

html5：新標籤、新屬性
<header><nav>
footer section....

語義化搜索引擎html

新標籤：有用，國外 ->本身去網上找
'沒用':header、nav
至關有用：pc 都是flash
video
audio 播聲音 mp3
canvas 畫圖
文檔頭：<!doctype html>
頁面編碼：<meta charset="utf-8">html5

HTML5新標籤
經常使用：header、footer、section
不太經常使用：article、menu、nav、aside(側邊欄)、datalist、time...
視頻、音頻：video、audiojquery

css3:新樣式
圓角、漸變、動畫、旋轉、變形、陰影、蒙板css3

選擇器：
document.querySelectorAll('css選擇器'); 一組
兼容IE8+
document.querySelector();web

自定義屬性：
data-xxx
this.dataset.abc=12; 設置
this.dataset.index 獲取ajax

1.向後兼容
2.data-性能高沒看出來chrome

如何測一段程序性能？
var s=new Date().getTime();
//測試的代碼
alert(new Date().getTime()-s);canvas

localStorage cookie
容量 5M 4K
過時沒有有
網絡不走網絡走網絡
兼容不兼容IE6 兼容
共同點：
1. 不安全
2. 不能跨域
3. 不能跨瀏覽器跨域

5. 交互、通訊
ajax：
客戶端 -> 服務器
實時性差
單向
傳輸速度慢
websocket:雙向
客戶端 <-> 服務器
實時性高
傳輸速度快

ajax->服務器傳輸10M 耗時 17s
websocket ->服務器傳輸10M 耗時 5s

移動端：
佈局：
flex——不實用【無法單獨用】
rem——不錯【目前最好】
定寬——寬度亂了【拋棄】

rem：相對html的字體大小
設計圖——320px/20rem
1rem=16px
一切單位都是rem——不要出現px
JS的clientX之類——也得換算
事件
ontouchstart
ontouchmove
ontouchend

HTML5——標籤、屬性(input)、選擇器
標籤：header-頭部、footer-底部、aside-側邊欄、article-文章、nav-導航、section-塊
語義化
屬性：placeholder、type="date,time,email,number..."、date-
date-：自定義屬性
1.直接用
oDiv.dataset.xxx
oDiv.getAttribute('xxx')
2.向後兼容
<div data-index="1">
選擇器：querySelector/querySelectorAll

移動——屏幕分辨率
rem——相對HTML字體大小的單位
好處：改一個地方，全部大小都變
html {font-size:20px;}
/*量200 -> 100 -> 5rem*/
#div1 {width:5rem;}

用JS調整rem的大小
標準rem/標準屏幕寬=實際rem/實際屏幕寬
20/320=實際rem/clientWidth
實際rem=clientWidth*20/320
實際rem=clientWidth*0.0625

onload、onresize
document.documentElement.style.fontSize=clientWidth*0.0625+'px'

彈性佈局
父級：display:-webkit-box; display:flex;
子級：-webkit-box-flex:1 flex:1;

平分空間
1 2 1

1、

HTML5在JS方面新增的東西

document.querySelector(「css選擇器」);

document .querySelectorAll(「css選擇器」);

var aEle = document.querySelectorAll(「li input[type=text]」);

var obj = document.querySelector(「li input[type=text]」);

aEle[0].style.background = red;

obj.style.background = red;

兼容IE8+

2、

jquery對象就是對原生對象的封裝，因此$獲得的東西，instanceof Array雖然看起來是數組，可是它不是數組。就像咱們經過document得到的對象，雖然看起來是數組，可是它不是數組！！！

jquery是原生的擴展，它的根就不是數組，因此jquery對象怎麼也不會成爲數組，除非它把這玩意兒拿出來，再從新弄一邊

3、

transition:1s all ease;

時間：1s 500ms

all：屬性（width、height等）

ease：運動形式

linear:線性

ease:緩衝

ease-in：加速

ease-out：減速

ease-in-out：先加速後減速

transition:1s width ease, 10s height ease;

#div1{ height:300px; width:300px;}

//transition能夠同時使用多個，這些屬性都是同時運動的

下面這樣寫，也能夠作到同時支持多個屬性

transition:1s all ease; height:100px; width:100px;

#div1{ height:300px; width:300px;}

display沒有transition效果

4、

border-radius:10px 20px

左上/右下右上/左下

border-radius:10px;

所有

border-radius:10px 20px 100px;

左上右上/左下右下

border-radius:10px 20px 100px 140px

單位還能夠用百分比， pt等

5、text-shadow:水平陰影垂直陰影模糊半徑陰影顏色

text-shadow:100px 100px 10px red;

p{ text-shadow:1px 1px 1px red,3px 3px 2px blue,5px 5px 5px yellow;}

6、

box-shadow屬性至多有6個參數設置，他們分別取值：

陰影類型：此參數是一個可選值，若是不設值，其默認的投影方式是外陰影；若是取其惟一值」inset」，就是將外陰影變成內陰影，也就是說設置陰影類型爲」inset」時，其投影就是內陰影；

X-offset：是指陰影水平偏移量，其值能夠是正負值能夠取正負值，若是值爲正值，則陰影在對象的右邊，反之其值爲負值時，陰影在對象的左邊。

Y-offset:是指陰影的垂直偏移量，其值也能夠是正負值，若是爲正值，陰影在對象的底部，反之其值爲負值時，陰影在對象的頂部；

陰影的模糊半徑：此參數可選，但其值只能是正值，若是其值爲0時，表示陰影不具備模糊效果，其值越大陰影的邊緣就月模糊；

陰影的擴展半徑：此參數可選，其值能夠是正負值，若是值爲正，則整個陰影都將延展擴大，反之值爲負值時，則縮小。

陰影顏色：此參數可選，若是不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不同，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。

#div1{ width:200px; height:200px; background:red; box-shadow:100px 1px 50px #000;}

其中：100px表明x軸偏移半徑，1px表明y軸偏移半徑，50px表明模糊半徑（不表明擴展半徑）

#div1{ width:200px; height:200px; background:red; box-shadow:100px 1px 50px 20px #000;}

其中：100px表明x軸偏移半徑，1px表明y軸偏移半徑，50px表明模糊半徑，20px表明擴展半徑

7、

radial-gradient(

　　[<position>,]?

　　[[<shape>||<size>] | <shape-size>{2},]?

　　<color-shape>[,<color-stop>]+)

position:

　　<percentage>一、用百分比指定徑向漸變圓心的橫座標。能夠爲負值

　　<length>一、用長度值指定徑向漸變圓心的橫座標值。能夠爲負值

　　left:設置左邊爲徑向漸變圓心的橫座標值

　　center:設置中間爲徑向漸變圓心的橫座標值

　　right:設置右邊爲徑向漸變圓心的橫座標值

　　<percentage>二、用百分比指定徑向漸變圓心的縱座標值。能夠爲負值

　　<length>二、用長度值指定徑向漸變圓心的縱座標值。能夠爲負值

　　top:設置上邊爲徑向漸變圓心的縱座標值

　　center:設置中間爲徑向漸變岩心的縱座標

　　bottom:設置底部爲徑向漸變圓心的縱座標

<shape>

　　　　circle:指定圓形的徑向漸變

　　　　ellipse:指定橢圓形的徑向漸變

<size>

　　　　closest-side:指定徑向漸變的長度爲從圓心到離圓心最近的邊

　　closest-corner:指定徑向漸變的半徑長度爲從圓心到離圓心最近的角

　　farthest-side: 指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊

　　farthest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角

　　contain：包含，指定徑向漸變的半徑長度爲從圓心到離圓心最近的點。類同於closest-side

　　cover：覆蓋，指定徑向漸變的半徑長度爲從圓心到離圓心最遠的點。類同於farthest-corner

<shape-size>

　　　　　　<percentage>:用百分比指定徑向簡便的橫向或縱向直徑長度，並根據橫向和縱向的直徑來肯定是圓或者橢圓。不容許負值

　　　　　　<length>：用長度值指定徑向漸變的橫向或縱向直徑長度，並根據橫向和縱向的直接來肯定是圓或橢圓。不容許負值。<color-stop

　　　　　　<color>：指定顏色。

　　　　　　<length>：用長度值指定起止色位置。不容許負值。

　　　　　　<percentage>：用百分比指定起止色位置。

8、

線性漸變：

#div1{ width:300px; height:300px; background:-webkit-linear-gradient(top bottom, red 10%, blue 10%, yellow 50%);}

#div1{ width:300px; height:300px; background:-webkit-linear-gradient(180deg, red 20px, blue 10%, yellow 200px);}

#div1{ width:300px; height:300px; background:-webkit-linear-gradient(top bottom, red, blue, yellow);}

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

下述值用來表示漸變的方向，可使用角度或者關鍵字來設置：
<angle>：
用角度值指定漸變的方向（或角度）。
to left：
設置漸變爲從右到左。至關於: 270deg
to right：
設置漸變從左到右。至關於: 90deg
to top：
設置漸變從下到上。至關於: 0deg
to bottom：
設置漸變從上到下。至關於: 180deg。這是默認值，等同於留空不寫。
<color-stop> 用於指定漸變的起止顏色：
<color>：
指定顏色。
<length>：
用長度值指定起止色位置。不容許負值
<percentage>：
用百分比指定起止色位置（起止的意思就是，若是是兩個顏色的話，那麼第一個位置表示第一個顏色的開始漸變的位置，第二個位置表示第二個顏色結束漸變的位置）。
若是是三個顏色的話，前兩個表示顏色開始漸變的位置，最後一個表示結束漸變的位置

一、
移動端幾個小事件：
onmousedown ontouchstart
onmousemove ontouchmove
onmouseup ontouchend

二、
css3,從視覺角度變化了，可是本質沒變，不會引發重排,性能極高！
*之後作效果的時候，儘可能用css3樣式

三、
removeEventListener: 不能解除匿名函數

四、
移動端寫運動的時候，會有些卡，是由於沒有組織默認事件。

卡->阻止默認事件

return false 遇見綁定(addEventListener) 就阻止不了默認事件了 -（得用）> ev.preventDefault();

發現小問題：手機上小默認是980
<meta name="viewport" content="width=320, user-scalable=0, initial-scale=1.0">
320->device-width

touchstart ->ev.targetTouches[0]
touchmove -> ev.targetTouches[0]
touchend -> ev.changedTouches[0]

五、
box-sizing屬性能夠爲三個值之一：content-box（default），border-box，padding-box。
content-box，border和padding不計算入width以內
padding-box，padding計算入width內
border-box，border和padding計算入width以內，其實就是怪異模式了~

六、
關於class:
obj.classList.add(sClass) 添加class
obj.classList.remove(sClass); 刪除class
obj.classList.contains(sClass); 是否包含class
oDiv.classList.add('active');

一、css3 -- calc

2px + 3px

20% - 2px

2px * 5px

100px / 2

100px * 2

記住符號兩邊應該有空格，好比100px*2是不對的，應該是100px * 2; 2px+3px也是不對的，應該是2px + 3px;

二、盒子模型：

box-sizing:content-box(默認的)

width+padding+border （border、padding往外走）

box-sizing:border-box

border、padding往裏走