這學(xué)期學(xué)習(xí)了HTML5移動(dòng)應(yīng)用開(kāi)發(fā)。雖然是叫做移動(dòng)應(yīng)用開(kāi)發(fā)，但是老師并沒(méi)有講太多關(guān)于怎么用H5開(kāi)發(fā)移動(dòng)APP停做。更多的是一些H5的基礎(chǔ)知識(shí)。趁著考試之際大莫，將本學(xué)期課程的重難點(diǎn)以及課后作業(yè)做一下總結(jié)蛉腌。
HTML4和CSS2復(fù)習(xí)
- 常用標(biāo)簽：
- 標(biāo)題
<h1></h1><h2></h2>//注意：h1不一定比h6的字體大 - 換行
<br> - 無(wú)序列表(unordered list)[有序列表是ol(ordered list)]
<ul>
<li>apple</li> //list item
<li>orange</li>
</ul>
- 超鏈接
<a href="www.baidu.com" target="_blank">
進(jìn)入Baidu
</a>
- 圖片(alt表示圖片不能顯示時(shí)顯示的文字)
<img src="xx.jpg" alt="這是一張圖片">
- 表格
<table>
<tr> //定義一行
<th>定義表頭</th>
</tr>
<tr>
<td>定義一個(gè)單元格的數(shù)據(jù)</td>
</tr>
</table>
- div與span
<div></div>稱為區(qū)域標(biāo)簽用于將若干相鄰的html元素組合成一個(gè)區(qū)域塊。屬于塊元素
<span></span>作用與div類似。主要區(qū)別就是一個(gè)div獨(dú)占一行，而span會(huì)接著排列绞蹦。屬于內(nèi)聯(lián)元素
塊元素一般從其他行開(kāi)始排作，內(nèi)聯(lián)元素一般直接在后面顯示
塊元素與內(nèi)聯(lián)元素之間的轉(zhuǎn)換可以通過(guò)css中的display屬性值設(shè)為block和inline來(lái)轉(zhuǎn)換
- 什么是CSS中的繼承和層疊
- 繼承：css中的繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素寺庄，還可以應(yīng)用于他的后代。
- 層疊：層疊允許css的樣式進(jìn)行疊加，優(yōu)先級(jí)高的樣式會(huì)覆蓋優(yōu)先級(jí)低的
層疊規(guī)則：ID選擇器(id) > 類選擇器(class) > 標(biāo)記選擇器(html中的標(biāo)簽)
CSS
- css常用屬性：
-
font-family字體 -
font-size文字大小 -
color文字顏色 -
font-wight文字粗體 - css邊框圖像半徑和盒子陰影：
- css3之前邊框的屬性：
a. 寬度border-width:2px
b. 顏色border-color:green
c. 風(fēng)格border-style:dashed//dashed表示虛線 - 代碼含義
border-image-slice //設(shè)置邊框背景圖的切割大小為幾像素
border-image-width //表示承接圖片的的寬度（用于指定使用多厚的邊框來(lái)承接被裁減后的圖像）
border-width //表示普通邊框的寬度（當(dāng)不寫border-image-width時(shí)由外部的border-width定義）
border-image-repeat :
//stretch:拉伸（拉伸至充滿屏幕）
//repeat：重復(fù)（圖片可能不完整忘蟹，超出邊界部分被截?cái)啵?//round：平鋪（圖片一定是完整的，動(dòng)態(tài)調(diào)整尺寸以鋪滿屏幕）
border-radius:20px/20px 40px 80px;
//設(shè)置圓角邊框：四個(gè)角的水平半徑都為20px搁凸，左上的垂直半徑為20px,右上和左下的垂直半徑為40px媚值，右下垂直半徑為80px
border-radius:20px 40px 80px 100px/20px 40px
//左上，右上护糖，右下褥芒，左下的水平半徑依次為20,40,80,100.左上，右下的垂直半徑都為20px嫡良，右上锰扶，左下的垂直半徑都為40px
box-shadow:10px 20px 30px red
//陰影水平偏移10px献酗，陰影垂直偏移20px，陰影模糊值為30px少辣，陰影顏色為紅色
- css文本顏色屬性：
-
text-overflow屬性的含義：
設(shè)定內(nèi)容溢出狀態(tài)下的文本處理方式
Clip:裁剪
Ellipsis:顯示省略
必須配合以下兩個(gè)使用凌摄，否則看不到效果：
Over-flow:hidden（超出部分隱藏）
White-space:nowrap（禁止換行） -
text-align屬性取值為left和start效果不一定相等（要看語(yǔ)言的種類） -
text-shadow:3px 4px 5px red//陰影水平偏移值 陰影垂直偏移值 陰影模糊值 陰影的顏色 -
text-stroke-color//文本邊框顏色 -
text-fill-color//文本填充顏色 -
word-wrap:break-word//內(nèi)容在邊界內(nèi)換行 -
color:rgba(0, 0, 255, 0.5)//紅，綠漓帅，藍(lán)锨亏，不透明度（1為不透明，0為全透明） -
background:HSL(0, 100%, 50%, 0.3)//色調(diào)忙干，飽和度器予，亮度，不透明度 -
color:transparent表示透明顏色（另外還可用opacity） - css之2D變形與動(dòng)畫
- css3中的4種2D變形(
transform)：
a.translate移動(dòng)
b.rotate旋轉(zhuǎn)
c.scale縮放
d.skew斜切 - 把一個(gè)div塊在瀏覽器的水平和垂直方向都居中(先利用絕對(duì)定位將div左頂點(diǎn)居中捐迫，再平移50%)
div{
width:200px;
height:200px;
background-color:#090
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%); //以左上角為原點(diǎn)向左移動(dòng)50%乾翔，向上移動(dòng)50%
}
- 旋轉(zhuǎn)方法：
transform:rotate(45 deg);默認(rèn)以中心點(diǎn)為中心。
在div中添加：
transform.origin:top left施戴；來(lái)修改 -
transformL:scale(0.5, 2);x軸縮放0.5倍反浓，y軸縮放2倍 - 斜切是指元素沿著一條軸傾斜：
transform: skew(30deg,20deg);
transform:skewX(8deg);
transform:skewY(10deg);
JQuery相關(guān)
待補(bǔ)充
HTML5標(biāo)簽
- 文檔類型聲明：
<!doctype html>//指定文檔類型，以確保瀏覽器能在HTML5的標(biāo)準(zhǔn)模式下進(jìn)行渲染
- 新增的html5結(jié)構(gòu)化標(biāo)簽
-
<article>定義一篇文章 -
<header>定義頁(yè)面或區(qū)域的頭部 -
<nav>定義導(dǎo)航鏈接 -
<section>定義一個(gè)區(qū)域 -
<aside>定義頁(yè)面內(nèi)容部分的側(cè)邊欄 -
<footer>定義頁(yè)面或區(qū)域的底部 -
<dialog>定義一個(gè)對(duì)話框 - 新增的html5多媒體標(biāo)簽
-
<video>定義一個(gè)視頻 -
<audio>定義一個(gè)音頻 -
<source>定義媒體資源 -
<canvas>定義圖片（畫布） -
<embed>定義外部可交互的內(nèi)容或插件（如：flash） - html5重新定義的標(biāo)簽
-
<small>表示小字體 -
<strong>表示重要性（不是強(qiáng)調(diào)符號(hào)） - 標(biāo)記一個(gè)元素的詳細(xì)元素
<details>的時(shí)候,<dt>表示 標(biāo)題列表赞哗，<dd>表示列表內(nèi)容
HTML5表單
- html4中常見(jiàn)的表單標(biāo)簽
<input>,<textarea>,<select>,<button>必須嵌套使用 - 在html5中為了方便排版雷则，可以使form中的表單標(biāo)簽脫離form的嵌套。方法：為form方法指定ID肪笋，所有表單標(biāo)簽均添加form= id屬性
-
<range>表示一定數(shù)字范圍月劈。最大范圍max，最小范圍min -
<number>限制用戶輸入必須為數(shù)字類型藤乙。step表示每次單擊增加的步長(zhǎng) - placeholder提示文字
- 文本框要求必填：
required = "required" - 限制文本框只能輸入長(zhǎng)度為5的數(shù)字：
pattern = "\d{5}" - 自動(dòng)完成功能可以減少用戶輸入猜揪。實(shí)現(xiàn)方式：
<datalist id="search">
<option>衣服</option>
<option>褲子</option>
</datalist>
HTML畫布
- canvas標(biāo)簽在頁(yè)面中只顯示一個(gè)設(shè)定背景色的畫布，如果要產(chǎn)生新內(nèi)容或者進(jìn)行畫圖操作坛梁，需要借助canvas的API和JavaScript
- 設(shè)置繪圖環(huán)境：
//獲取畫布對(duì)象
var canvas = document.getElementById('canvas')
//設(shè)置繪圖環(huán)境(獲取上下文)
var cxt = canvas.getContext('2d')
- 為避免筆畫牽連而姐，開(kāi)始新畫一個(gè)圖形
beginPath()。結(jié)束一個(gè)圖形closePath() - 畫圖形的兩種方式
-
fillStyle()有填充 -
strokeStyle()無(wú)填充 - 繪制圓形划咐、矩形
cxt.arc(200, 100, 50, 0, 360, false);
//繪制弧線毅人。圓心坐標(biāo)，半徑大小尖殃，圓弧度數(shù)，逆時(shí)針旋轉(zhuǎn)
cxt.rect(300, 20, 100, 100);
//繪制矩形划煮。左上角坐標(biāo)送丰，矩形寬度高度
- 在繪圖時(shí)如果要對(duì)繪圖環(huán)境進(jìn)行旋轉(zhuǎn)或者縮放等變換之前應(yīng)該保存狀態(tài)（調(diào)用
save()方法）
之后應(yīng)該恢復(fù)狀態(tài)（調(diào)用restore()方法）
重點(diǎn)：看繪圖章節(jié)的代碼
HTML5音頻視頻
- 常見(jiàn)的音頻編碼
- ACC
- MP3
- Vorbis
- 常見(jiàn)的視頻編碼
- H.264
- Theora
- VP8
- H5支持的視頻格式（不使用插件也可進(jìn)行播放）
- ogg
- mepg4
- webm
- H5中的音頻標(biāo)簽：
<audio> - H5中的視頻標(biāo)簽：
<video> - H5中播放視頻不支持時(shí)提示文字：
<video src="movie.webm" controls="controls">
您的瀏覽器不支持video標(biāo)簽！
</video>
- H5中當(dāng)瀏覽器不支持第一個(gè)視頻格式讓其播放第二個(gè)視頻格式弛秋，如果都不支持給出一段抱歉文字：(音頻同樣適用器躏，將video標(biāo)簽改為audio標(biāo)簽)
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
您的瀏覽器不支持video標(biāo)簽俐载！
</video>
- 自動(dòng)播放和循環(huán)播放：
autoplay="autoplay" //自動(dòng)播放
loop="loop" //循環(huán)播放
- 視頻出現(xiàn)播放面板和等待畫面(音頻同樣適用)
controls="controls" //出現(xiàn)播放面板
poster="xx.jpg" //出現(xiàn)等待畫面
- 視頻播放控制相關(guān)
video.play(); //播放
video.pause(); //暫停
video.currentTime += 10; //快進(jìn)10秒
video.currentTime -= 10; //快退10秒
video.muted=true; //靜音
video.muted=false; //取消靜音
video.playbackRate=3; //快3倍播放，1為正常速度
video.playbackRate=1/3; //慢3倍播放
video.volume += 0.2;//調(diào)大聲音20%(聲音值得范圍是0-1)
video.volume -= 0.2;//調(diào)小聲音20%
- H5支持的音頻格式
- ogg
- mp3
- wav
WEB存儲(chǔ)
- WebStorage與cookie比較：
- cookie：簡(jiǎn)單易用登失。但存儲(chǔ)容量有限遏佣，上限為4K，可以禁用
- WebStorage:提供了易用的API揽浙，存儲(chǔ)容量更大至少為5M状婶，存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器。但仍具有安全性隱患馅巷。
安全隱患：域B中嵌入的域A的腳本依然可以訪問(wèn)域B中的webstorage數(shù)據(jù)膛虫；localstorage未加密永不過(guò)期，容易泄露隱私
- WebStorage的種類
- localStorage：用于持久的本地存儲(chǔ)钓猬，除非主動(dòng)刪除否則永不過(guò)期
- sessionStorage:會(huì)話級(jí)別的存儲(chǔ)稍刀，瀏覽器關(guān)閉就消失
- 檢查瀏覽器是否支持webStorage
<script type="text/javascript">
if (typeof localStorage == 'undefined') {
window.alert("您的瀏覽器不支持localstorage");
} else {
window.alert("您的瀏覽器支持localstorgae");
}
</script>
- 設(shè)置和獲取webstorage：
//讀取(2種方式)
window.localStorage.getItem("myname");
window.localStorage.myname;
//寫入(2種方式)
window.localStorage.setItem("myname","張三");
window.localStorage.myname = "張三";
- webStorage的
onStorage事件在存儲(chǔ)空間中數(shù)據(jù)發(fā)生變化時(shí)觸發(fā)
workers多線程處理
- workers多線程可以解決什么問(wèn)題？
使用JS創(chuàng)建單線程敞曹，如果腳本運(yùn)行時(shí)間太長(zhǎng)账月，程序界面會(huì)停止響應(yīng)。而workers多線程可以將耗時(shí)的操作交給后臺(tái)線程去做澳迫，前臺(tái)可以繼續(xù)操作
- workers多線程的局限性：
局限性是后臺(tái)線程不能訪問(wèn)前臺(tái)window對(duì)象局齿，而且仍然要占用cpu，導(dǎo)致系統(tǒng)變慢
- 主副線程發(fā)送數(shù)據(jù)纲刀，接收消息的方法：
workers.postMessage(message);//發(fā)送數(shù)據(jù)
workers.onmessage=function(event){} //接收消息
未完待補(bǔ)充
