H5基礎(chǔ)都有哪些:
1:html5新增標(biāo)簽
2:css3新增樣式
3:3D動畫效果
4:js新增語法
5:計(jì)算機(jī)信息
6:重力感應(yīng)
7:地理信息
8:websql
9:多線程
10:地圖功能
H5有用的標(biāo)簽:
1:繪圖canvas
2:視頻video
3:音頻audio
*H5可用于:微信開發(fā) phonegap Grunt gulp es6 但是H5不兼容IE8
*H5文檔頭 <!doctype html>
新增標(biāo)簽
“有用”語義化標(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> 對于一組資源描述
<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>蘋果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:對話框
<dialog>對話框</dialog>
13: 地址描述寫法:
<address>北京市 大興區(qū) 亦莊開發(fā)區(qū) </address>
<progress></progress>
14:進(jìn)度條寫法
<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ù)字鍵盤
8:search 搜索
9:range 拖拽條
10:number 數(shù)字輸入框 max min(兩個(gè)屬性分別寫限制的大小值)
*js新增功能
1:選擇器:class id tagName * name
2:新增獲取對象的方式:
1:獲取一個(gè)對象
var oUl=document.querySelector('#id');
2:獲取一組對象
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如何獲取:obj.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本地儲存
1):cookie :
A:4k B:有過期時(shí)間 C:會跟隨服務(wù)器發(fā)送 D:必須在服務(wù)器環(huán)境下
2):localStorage:
A:大小5M B:沒有過期時(shí)間 C:不會跟隨服務(wù)器發(fā)送 D:不用在服務(wù)器環(huán)境下
3):LocalStorage的存讀炔坜取:
存值 localStorage.a=12;
獲取 alert(localStorage.a);
刪除 delete localStorage.a
4):LocalStorage的存讀取(另一種寫法):
設(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開頭
li[class$=abc] 以abc結(jié)尾
li[class|=a] 以值開頭的元素
li[class*=abc] 字符串中有abc的值
2:偽類選擇器:
*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 父級下只能存在一個(gè)子級元素
div:empty 空元素
::selection 選擇的文本樣式
:root 根元素 HTML
*css3新增的樣式
寫圓角:border-radius:50%; 表示:正圓 單位%,px都可以用
寫入: 一個(gè)值 四個(gè)方向
兩個(gè)值 左上/右下 右上/左下
三個(gè)值 左上 右上/左下 右下
四個(gè)值 左上 右上 右下 左下 順時(shí)針
transition:1s all ease;
1s 運(yùn)動時(shí)間
all 運(yùn)動樣式
Ease 運(yùn)動類型
<h4>瀏覽器規(guī)則:</h4>
1:chrome 谷歌 使用:-webkit-
2:firefox 火狐 使用:-moz-
3:ie IE 使用:-ms-
4:opera 歐朋 使用:-o-
*目的:移動端開發(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:文字描邊寫法:-webkit-text-stroke:2px red;
2px表示為描邊寬度
Red表示為描邊顏色
4:塊陰影的寫法:box-shadow:0px 0px 10px 10px #000 inset;
第一個(gè)值為:X軸值
第二個(gè)值為:Y軸值
第三個(gè)值為:寫模糊度
第四個(gè)值為:擴(kuò)充陰影值
第五個(gè)值為:顏色
第六個(gè)值為:內(nèi)陰影
5:漸變的三種寫法:
1:線性漸變
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:蒙版的寫法:-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;