H5基礎(chǔ)都有哪些:
1:html5新增標(biāo)簽
2:css3新增樣式
3:3D動(dòng)畫(huà)效果
4:js新增語(yǔ)法
5:計(jì)算機(jī)信息
6:重力感應(yīng)
7:地理信息
8:websql
9:多線(xiàn)程
10:地圖功能
H5有用的標(biāo)簽:
1:繪圖canvas
2:視頻video
3:音頻audio
*H5可用于:微信開(kāi)發(fā) phonegap Grunt gulp es6 但是H5不兼容IE8
*H5文檔頭 <!doctype html>
新增標(biāo)簽
“有用”語(yǔ)義化標(biāo)簽
1:<header>頭部標(biāo)簽</header>
2:<section>模塊</section>
3:<footer>尾部標(biāo)簽</footer>
4:<nav>導(dǎo)航</nav>
5:<aside>側(cè)邊欄</aside>
6:<article>文章</article>包含段落和標(biāo)題
7:<hgroup>標(biāo)題組合</hgroup>
8:<figure> 對(duì)于一組資源描述
<img src="" />
<figcaption>清純</figcaption>
</figure>
9:<time>2016年12月26日</time>
10:數(shù)據(jù)列表:下拉
<input type="text" list="vag" />
<datalist id="vag">
<option>土豆</option>
<option>蘋(píng)果1</option>
<option>鴨梨2</option>
<option>茄子</option>
<option>香蕉</option>
<option>冬瓜</option>
</datalist>
11:標(biāo)題描述:收縮菜單
<details>
<summary>這是標(biāo)題</summary>
<p>相關(guān)介紹</p>
</details>
12:對(duì)話(huà)框
<dialog>對(duì)話(huà)框</dialog>
13: 地址描述寫(xiě)法:
<address>北京市 大興區(qū) 亦莊開(kāi)發(fā)區(qū) </address>
<progress></progress>
14:進(jìn)度條寫(xiě)法
<meter max="100" value="100"></meter>
<progress max="100" value="10"></progress>
*表單
1:email 郵箱
2:color 顏色
3:date 時(shí)間
4:month 月份
5:week 周
6:url 網(wǎng)址
7:tel 調(diào)用數(shù)字鍵盤(pán)
8:search 搜索
9:range 拖拽條
10:number 數(shù)字輸入框 max min(兩個(gè)屬性分別寫(xiě)限制的大小值)
*js新增功能
1:選擇器:class id tagName * name
2:新增獲取對(duì)象的方式:
1:獲取一個(gè)對(duì)象
var oUl=document.querySelector('#id');
2:獲取一組對(duì)象
var aLi=document.querySelectorAll('標(biāo)簽名');
3:自定義屬性和非自定義屬性之間的區(qū)別
js:
obj.className
obj.src
obj.title
4:自定義屬性:obj.index 不支持
3:js自定義屬性的時(shí)候必須加data-前綴:例如(data-xxx)
4:js如何獲?。簅bj.dataset.xxx
5:js如何設(shè)置:obj.dataset.xxx="abc";
6:操作class
this.classList.add('abc'); 添加class
this.classList.remove('abc'); 刪除class
this.classList.contains('abc'); 驗(yàn)證是否包含
this.classList.toggle('abc'); 切換class是否存在
7:localStorage本地儲(chǔ)存
1):cookie :
A:4k B:有過(guò)期時(shí)間 C:會(huì)跟隨服務(wù)器發(fā)送 D:必須在服務(wù)器環(huán)境下
2):localStorage:
A:大小5M B:沒(méi)有過(guò)期時(shí)間 C:不會(huì)跟隨服務(wù)器發(fā)送 D:不用在服務(wù)器環(huán)境下
3):LocalStorage的存讀?。? 存值 localStorage.a=12;
獲取 alert(localStorage.a);
刪除 delete localStorage.a
4):LocalStorage的存讀?。硪环N寫(xiě)法):
設(shè)置 localStorage.setItem('a',666);
獲取 localStorage.getItem('a')
刪除 localStorage.removeItem('a');
刪除全部 localStorage.clear();
css3選擇器:
1:屬性選擇器:(IE6以下不兼容)
li[class] 有屬性
*li[class=abc] 屬性和值是否相等 "abc"
li[class~=abc] 包含 "abc ab"
li[class^=abc] 以abc開(kāi)頭
li[class$=abc] 以abc結(jié)尾
li[class|=a] 以值開(kāi)頭的元素
li[class*=abc] 字符串中有abc的值
2:偽類(lèi)選擇器:
*obj:nth-child(1) 選擇某一個(gè)
*input:disabled 不可用
*:root 根元素 html
*input:enabled 可用
*Inpur:disabled 不可用
obj:nth-child(odd) 奇數(shù)
obj:nth-child(even) 偶數(shù)
obj:nth-child(n) 全部
obj:nth-child(2n) 幾倍數(shù)
obj:nth-last-child(2) 從后往前數(shù)
obj:first-child 第一個(gè)
obj:last-child 最后一個(gè)
input:focus 獲取焦點(diǎn)
p:only-child 父級(jí)下只能存在一個(gè)子級(jí)元素
div:empty 空元素
::selection 選擇的文本樣式
:root 根元素 HTML
*css3新增的樣式
寫(xiě)圓角:border-radius:50%; 表示:正圓 單位%,px都可以用
寫(xiě)入: 一個(gè)值 四個(gè)方向
兩個(gè)值 左上/右下 右上/左下
三個(gè)值 左上 右上/左下 右下
四個(gè)值 左上 右上 右下 左下 順時(shí)針
transition:1s all ease;
1s 運(yùn)動(dòng)時(shí)間
all 運(yùn)動(dòng)樣式
Ease 運(yùn)動(dòng)類(lèi)型
<h4>瀏覽器規(guī)則:</h4>
1:chrome 谷歌 使用:-webkit-
2:firefox 火狐 使用:-moz-
3:ie IE 使用:-ms-
4:opera 歐朋 使用:-o-
*目的:移動(dòng)端開(kāi)發(fā):-webkit- 兼容
H5的一些小效果:
1:文字陰影效果:text-shadow:1px 1px 2px #000;
第一個(gè)值:X軸
第二個(gè)值:Y軸
第三個(gè)值:模糊度
第四個(gè)值:陰影顏色
2:顏色表示方法:rgba(0,0,0,0.1)
1:R 表示為 red
2:G 表示為 green
3:B 表示為 blue
4:A 表示為 alpha(透明度)
3:文字描邊寫(xiě)法:-webkit-text-stroke:2px red;
2px表示為描邊寬度
Red表示為描邊顏色
4:塊陰影的寫(xiě)法:box-shadow:0px 0px 10px 10px #000 inset;
第一個(gè)值為:X軸值
第二個(gè)值為:Y軸值
第三個(gè)值為:寫(xiě)模糊度
第四個(gè)值為:擴(kuò)充陰影值
第五個(gè)值為:顏色
第六個(gè)值為:內(nèi)陰影
5:漸變的三種寫(xiě)法:
1:線(xiàn)性漸變
background:-webkit-linear-gradient(left,red,green);
left top right bottom /45deg 角度
red起始顏色
green結(jié)束顏色
2:重復(fù)漸變
background:-webkit-repeating-linear-gradient(-45deg,red 0,red 10%,blue 10%,blue 20%);
3:徑向漸變
background:-webkit-radial-gradient(red,green);
普通元素可編輯:contenteditable="true"
6:蒙版的寫(xiě)法:-webkit-mask:url(../img/meizi.jpg) no-repeat x y;
1:背景圖大小
background-size:width height; px
contain 以最小值為準(zhǔn)
cover 以最大值為準(zhǔn)
2:多個(gè)背景圖
background:url,url,url,url;