1.html5開發前準備。
爲什麼學習html5
新的web時代到來；
跨平臺運行；
硬件要求低；
flash之外的選擇（代替flash）；
軟硬件環境
硬件：雙核，2g內存；
軟件：window，linux，mac
介紹html5
html：是用來描述的網頁的一種語言；指超文本標記語言；不是編程語言，是一種標記語言。
html5新特性：
用於繪畫的canvas標籤；
用於媒介回放的video和audio的元素；
對本地的離線儲存的剛好支持；
新的特殊內容元素eg:article，footer，header，nav，section
新的表單的控件eg：calender，date，time，email，url，search
瀏覽器的支持：Safari，Chrome，Firefox以及Opera,>=IE9
環境搭建
開發工具：
常用：WebStorm、notepad++、Eclipse、text sublime、 dreamweaver
推薦：Intellij IDEA
常見問題解決
1.尋求問題的根源；
2.查看參考文檔；w3c
3.參考示例；
4.常見問題通過搜索引擎搜索
5.問題反饋。
掌握技能需求
1.需要掌握的技能：
html5；xhtml；css3；Js；Jquery：Jquery-ui；Jquery-mobile；
快捷鍵：
IDEA->file->settings->KeyMap->選擇Eclipse模式的快捷鍵。
2.html5特性簡介；
html版本：
html->html+->html2.0->html3.2->html4.01->xhtml 1.0->html5（2012年）->xhtml5（2013）；
3.html學習
html5基礎：
聲明：<!DOCTYPE html>
<html class="no-js" lang="en">
<html lang="en">代表這是英文的網站。
字符集聲明（<meta charset="utf-8">）：
兼容模式的元標籤（<meta http-equiv="x-ua-compatible" content="ie=edge">）：
移動端視圖<meta name="viewport" content="width=device-width, initial-scale=1">
標籤部分1:
a.html基礎標籤：head、body
b.html標題：<h1>...<h6>
c.html段落：<p>
d.html的鏈接：<a>
href:代表另一個文檔的鏈接
name：代表文檔內的鏈接
<a href="url網址" >click me</a>
<a href="url網址" ><img src=""></a>
<a href="#tips">click me to name='tips'</a>
<br><br>
<a name=tips ></a>
e.html圖像：<img>
src:“***.png”
alt=”defaultlogo“
width：
height：
標籤部分2：
表單：
<form> --表單
新的 form 屬性：
autocomplete
novalidate
<input> --輸入域
<input type="email">
<input type="url">
<input type="number">
<input type="text">
<input type="password">
<input type="range">
<input type="Date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="search">
<input type="color">
新的 input 屬性：
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
<textarea> --文本域
<label>
--控制標籤
<fieldset> --定義域
<legend> --域的標題
<select> --選擇列表
<optgroup> --選項組
<option> --下拉列表中的選項
<button> --按鈕
<form action="" method="get" autocomplete="on">
<label >username</label>
<input type="text" title="username" placeholder="username" pattern="[A-z]{3}" >
<label>password</label>
<input type="password">
<label>apple</label><input type="checkbox" checked="checked">
<label>apple2</label><input type="checkbox" checked="checked">
<label>apple1</label><input type="checkbox" checked="checked">
<labe>sex</labe>
<input type="radio" name="sex"><input type="radio" name="sex" checked="checked" >
<textarea cols="2" rows="3"></textarea>
<input type="button" value="button" οnclick="btn()">
<input type="submit" value="submit">
<select>
<optgroup label="oppt">
<option>d</option>
</optgroup>
<optgroup label="opt2">
<option>3</option>
</optgroup>
</select>
<input type="email">
<input type="url">
<input type="number">
<input type="text">
<input type="password">
<input type="range" name="points" min="1" max="10" step="2"/>
<input type="Date" id="date">
<input type="month" id="month">
<input type="week" id="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="search" id="search">
<input type="color" id="color">
</form>
<script type="text/javascript">
function btn(){
alert("");
console.log(document.getElementById("date").value);
console.log(document.getElementById("month").value);
console.log(document.getElementById("week").value);
console.log(document.getElementById("search").value);
console.log(document.getElementById("color").value);
/* 2016-05-11
2016-05
2016-W19
dd
#80ff00*/
}
</script>
標籤部分3：
樣式：
標籤：1.<style>:樣式定義
2.<link>.資源引用
屬性：rel=“stylesheet":外部樣式表聲明
type=“text/css”：引入文檔類型
插入方式：
外部樣式表：
<link rel="stylesheet" type="text/css" href="....css">
內部樣式表；
<style type="text/css">
.p{
}
</style>
內聯樣式表：
<p style="padding:0px">
標籤部分4：
表格：
種類：
沒有邊框的表格
表格中的表頭：th
空單元格：
帶有標題的表格：caption
表格內的標籤：
跨行，跨列的表格：colpsan=”“ rowspan=”“
單元格填充：cellpadding：
單元格間距：cellaspacing：
想表格添加背景和背景圖像：bgcolor ；background
單元中內容排列格式 align
框架屬性：frame="box"；frame="above"；frame="below"；frame="hsides"；rame="vsides":
標籤部分5：
框架：
frame，frameset，noresize，cols，rows，
現在都用它的iframe框架：
背景：
Background，bgcolor
實體：> , < ,<,>, ,&
標籤部分6：
列表：
ul------無序列表 li
屬性：disc，circle，quare，
ol------有序列表 li
屬性：A，a，I，i，start
dl------自定義列表 dt dd
li------列表
dt------列表項
dd------描述
標籤部分7：
塊元素：eg：div，h1，內聯元素：span
標籤部分8:
佈局：table佈局和div佈局
標籤部分9：
音頻、視頻
1.audio(音頻)，video(視頻)
html5提供了播放音頻，視頻文件的標準
2.control(控制器)
control屬性供添加播放、暫停和音量控件
3.<audio> 定義聲音
<source>規定多媒體資源、可以是多個。
4.屬性：width，height。
標籤部分10:
拖放、拖放本地數據。
1.html5拖放：
拖放(Drag和drop)是html5標準的組成部分。
2.拖動開始：
ondragstart：調用了一個函數，drag(event),它規定了被拖動的數據。
3.設置拖動數據
setData():設置被拖數據的數據類型和值 e.dataTransfer.setData("","")
4.放入位置；
ondragover：事件規定在何處放置被拖動的數據。
5.放置：
ondrop:當放置被拖數據時，會發生drop事件。e.dataTransfer.getData("")
var imgContainer;
window.οnlοad=function(){
imgContainer=document.getElementById('imgContainer');
imgContainer.οndragοver=function(e){
e.preventDefault();
}
imgContainer.οndrοp=function(e){
e.preventDefault();
var f=e.dataTransfer.files[0];
var filereader=new FileReader();
filereader.οnlοad=function (e) {
imgContainer.innerHTML="<img src="+filereader.result+">"
}
filereader.readAsDataURL(f);
}
}
var boxDiv;
var box1Div;
var msgDiv;
var imgObj;
window.onload = function () {
boxDiv = document.getElementById("box");
msgDiv = document.getElementById("msg");
box1Div = document.getElementById("box1");
imgObj = document.getElementById("img1");
/* boxDiv.ondragenter = function (e) {
showObj(e);
}*/
/* imgObj=document.getElementById("imgId")*/
box1Div.οndragοver=function (e) {
e.preventDefault();
}
boxDiv.οndragοver=function(e){
e.preventDefault();
}
imgObj.οndragstart=function(e){
e.dataTransfer.setData("imgId","img1");
}
box1Div.οndrοp=dropImgHandler;
boxDiv.οndrοp=dropImgHandler;
}
function dropImgHandler(e){
e.preventDefault();
var img=document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}
function showObj(obj) {
var s = "";
for (var k in obj) {
s += k + ":" + obj[k] + "<br>"
}
msgDiv.innerHTML = s;
}
標籤部分11:
canvas標籤；
canvas用於圖形繪製，通過腳本（eg:js）來完成<canvas>標籤只是圖形容器，我們必須用腳本來繪製圖形。
context重新定義：
他不是簡單的上下文，context封裝了很多繪圖功能的對象，獲取對象的方式是：
var context=canvas.getContext("2d");
1.canvas元素繪製圖像有兩種方法：
a.context.fill();//填充
b.context.stroke();//繪製邊框
2.style：在進行圖形繪製前，要設置好繪圖的樣式；
記住：繪製圖形前需要先填充樣式。
context.fillStyle//填充樣式
默認是：fillStyle=black
context.strokeStyle//邊框樣式
默認是：strokeStyle=black
context.lineWidth///圖形邊框寬度
顏色表示方式：
fillStyle
strokeStyle
a.red,green,blue;
b.#eeefd8;
c.rgb(2,233,252)
d.rgba(23,32,22,透明度)
陰影：
ctx.shadowBlur=20;
ctx.shadowColor="black";
shadowColor:設置或返回用於陰影的顏色，
shodowBlur：設置或返回用於陰影的模糊級別
shadowOffsetX:設置或返回與形狀的水平距離
shadowOffsetY:設置或返回與姓張的垂直距離
方法：
createLinearGradient()創建線性漸變(用在畫布內容上)。
createPattern()在指定方向上重複指定的元素。
createRaiialGradient()創建放射狀/環狀的漸變(用在畫布內容上)
addColorStop()規定漸變對象中顏色和停止位置。
線條樣式：
lineCap：設置或返回線條的結束端點樣式
lineJoin：設置或返回兩線條相交是，所創建的拐角類型
lineWidth：設置或返回當前的線條寬度
miterLimit：設置或返回最大斜度接長度
矩形：
rect():創建矩形
fillRect();繪製一個填充矩形
srokeRect();繪製矩形無填充
clearRect();清除矩形內像素
路徑:
fill();填充當前繪圖
stroke();繪製已定義的路徑
bgeinBath();起始一條路徑，或充值當前路徑
moveTo();把路徑移動到畫布中的指定點，不創建線條。
clostPath();創建從當前當前點回到起始點的路徑
lineTo();添加一個新點，然後在畫布中創建從該點到最後指定點線條
clip();從原始畫布剪切任意形狀和尺寸的區域
guadraticCurveTo();創建二次貝塞爾曲線
bezierCurveTo();創建三次方貝塞爾曲線
arc();創建弧/曲線（用於創建圓形或部分圓
arcTo();創建兩切線之間的弧/曲線
isPointInPath();如果指定的點位於當前路徑中，則返回 true，否則返回 false
轉換
scale();縮放當前繪圖至更大或更小
rotate();旋轉當前繪圖
translate();重新映射畫布上的 (0,0) 位置
tarnsform();替換繪圖的當前轉換矩陣
setTransform();將當前轉換重置爲單位矩陣。然後運行 transform()
文本：
font：設置或返回文本內容的當前字體屬性
textAlign:設置或返回文本內容的當前對齊方式
textBaseline:設置或返回在繪製文本時使用的當前文本基線
fillText():在畫布上繪製“被填充的”文本
strokeText():在畫布上繪製文本（無填充）
measureText():返回包含指定文本寬度的對象
圖像繪製：
方法：drawImage();向畫布上繪製圖像、畫布或視頻
屬性：width，返回 ImageData 對象的寬度
height,返回 ImageData 對象的高度
data,返回一個對象，其包含指定的 ImageData 對象的圖像數據
createImageData()創建新的、空白的 ImageData 對象
getImageData()返回 ImageData 對象，該對象爲畫布上指定的矩形複製像素數據
putImageData()把圖像數據（從指定的 ImageData 對象）放回畫布上
合成：globalAlpha，設置或返回繪圖的當前 alpha 或透明值
globalCompositeOperation 設置或返回新圖像如何繪製到已有的圖像上
其他：save();保存當前環境的狀態
restore();返回之前保存過的路徑狀態信息。
createEvent();
getContext();
toDataURL();
3.繪製矩形
context.fillRect(x,y,width,height);填充
context.strokeRect(x,y.width,height)；邊框
context.clearRect(x,y,widhth,height);清除
4.繪製圓弧
context.arc(x,y,radius,starAngle,endAngle,anticlokwise);
x:圓心的x座標
y:圓心的y座標
starAngle:開始角度
endAngle:結束角度
anticlockwise:是否逆時針(true)爲逆時針，(false)爲順時針。
ps：經過驗證，true爲順時針，false爲逆時針。
5.繪製扇形代碼：
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.beginPath();
context.translate(100,100);
context.moveTo(0,0);
context.arc(0,0,50,0,Math.PI*1.5);
context.closePath();
context.fill();
標籤部分12:
svg：
標籤部分13：
MathML:
mrow
msup
msub
mi
web存儲：sessionStorage，聲明週期，一次繪畫裏的。
localStorage, 本地永久的。數據存儲非常有用。
兩個對象塞值，都是異步的。
web worker：
Worker對象使用。
//安全機制登陸，設定登陸事件，銀行系統用到。
var w;
//W用戶創建Worker對象，對其進行監聽。
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(w)=="undefined"){
w=new Worker("demo.js");
}
w.onmessage=function(event){
document.getElementById("result").innerHTML=event;
}
}
else{
document.getElementById("result").innerHTML="SORRY!";
}
}
function stopWorker()[
w.terminate();
]
demo.js
需要每隔固定的時間想服務器發送數據，然後返回我的程序，得到數據更新。
服務器發送事件：隨時獲取服務數據的更新。
用到的對象是EventSource對象，
var e=new EventSource("href");
e.onmessage=function(e){}
地理位置：window.navigator.geolocaltion
html5學習摘錄
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
uniapp的那些坑
1.selectedColor不起作用 1.查看位置是否寫對，與lis同級 2.是否爲16進制，selectedColor寫的rgb不支持 3.是否被其他樣式覆蓋，其他地方也設置過sele