認識 HTML5

念：

HTML5 是HTML、XHTML 以及 HTML DOM 的新標準（推薦標準）。

語法：

根據HTML5設計化繁為簡的準則，文檔類型和字符說明都進行了簡化：

<!DOCTYPE html>
<meta charset='UTF-8'>
.......

HTML5元素

HTML5定義了一組新的語義化標記來描述元素的內容。

header 標記頭部區域的內容。
footer 標記腳部區域的內容
section 頁面中的一塊區域
article 獨立的文章內容
aside 相關內容或者引文
nav 導航類
video：定義視頻，比如 電影片段或其他視頻流
<video src='movie.ogg' controls='controls'>video元素</video>
audio：定義音頻，比如音樂或其他音頻流 
<audio src='audio.wav'>audio元素</audio>
...........

HTML5其他功能

HTML5引入了一種用于用于查找頁面DOM元素的selectors API。

document.querySelector("#demo")--->返回文檔中匹配指定 CSS 選擇器的第一個元素。
document.querySelectorAll("#demo")--->返回文檔中匹配指定 CSS 選擇器的所有元素。

html5文檔結構代碼

html5 有什么神奇？就是進化的一套標準。

我是不是整理的都好初級，不過整理即鞏固加回憶，只要是好好學習，那么時間就不是浪費，那么道路就一定是正確的！！加油啊小果凍de邁阿密！！

我們學習了 HTML 提供的原生拖放(drag & drop)后,是時候想一想這個東西可以用來作什么，可以在什么時候使用，使用的場景等等

場景分析

當我們在注冊成功一個賬戶時，一般網站會讓我們上傳我們的用戶頭像，或者在實名認證的時候會涉及到身份證圖片上傳到等，這時候我們可以使用input提供的file屬性進行選擇本地文件進行上傳。

我們再想一下，當在電腦端的情況下，當用戶打開文件選擇框時再尋找圖片對應的文件夾，再進行選取文件的時候是不是會有點麻煩呢？我們可不可以讓用戶找到圖片文件，直接引入實現上傳呢？答案是可以的。

怎么做

經過這些分析后，我們可以嘗試使用 HTML5 提供的拖拽，使得目標元素增加讀取文件功能，然后使用 ajax 實現圖片上傳。

談一談我們需要使用到的技術:

Drag & Drop: HTML5 基于拖拽的事件機制
File API: 可以很方便的讓 Web 應用訪問文件對象，File API 包括 FileList、Blob、File、FileReader、URI scheme，本文主要講解拖拽上傳中用到的 FileList 和 FileReader 接口。
FormData: FormData 是基于 XMLHttpRequest Level 2 的新接口，可以方便 web 應用模擬 Form 表單數據，最重要的是它支持文件的二進制流數據，這樣我們就能夠通過它來實現 AJAX 向后端發送文件數據了。

HTML5 拖拽事件

關于 Drag & Drop 拖拽事件，之前我寫過一篇專門介紹的文章，HTML5-拖拽,大家有興趣的話可以點擊鏈接查看，我在這里就不在多啰嗦了~下面直接出拖拽上傳的簡要代碼示例

var oDragWrap = document.body;
//拖進
oDragWrap.addEventListener(
 "dragenter",
 function(e) {
 e.preventDefault();
 },
 false
);
//拖離
oDragWrap.addEventListener(
 "dragleave",
 function(e) {
 dragleaveHandler(e);
 },
 false
);
//拖來拖去 , 一定要注意dragover事件一定要清除默認事件
//不然會無法觸發后面的drop事件
oDragWrap.addEventListener(
 "dragover",
 function(e) {
 e.preventDefault();
 },
 false
);
//扔
oDragWrap.addEventListener(
 "drop",
 function(e) {
 dropHandler(e);
 },
 false
);
var dropHandler = function(e) {
 //將本地圖片拖拽到頁面中后要進行的處理都在這
};

獲取文件數據 HTML5 File API

File API 中的 FileReader 接口，作為 File API 的一部分，FileReader 專門用來讀取文件。我們在這里主要介紹一些 File API 中的 FileList 接口，它主要通過兩個途徑獲取本地文件列表，一是<input type="file"/>的表單形式，另一種則是e.dataTransfer.files拖拽事件傳遞的文件信息。

var fileList = e.dataTransfer.files;

使用 files 方法將會獲取到拖拽文件的數組形式的數據，每個文件占用一個數組的索引，如果索引不存在文件數據，將返回 Null。可以通過length屬性獲取文件的數量。

var fileNum = fileList.length;

拖拽上傳需要注意的是需要判斷兩個條件

拖拽的是文件而不是頁面的元素
拖拽的是圖片而不是其他類型的文件，可以通過 file.type 屬性獲取文件的類型

// 檢測是否是拖拽文件到頁面的操作
if (fileList.length === 0) {
 return;
}
// 檢測文件是不是圖片
if (fileList[0].type.indexOf("image") === -1) {
 return;
}

下面我們看看結合之前的拖拽事件，來實現拖拽圖片并在頁面中預覽

var dropHandler = function(e) {
 e.preventDefault(); //獲取文件列表
 var fileList = e.dataTransfer.files;
 //檢測是否是拖拽文件到頁面的操作
 if (fileList.length == 0) {
 return;
 }
 //檢測文件是不是圖片
 if (fileList[0].type.indexOf("image") === -1) {
 return;
 }
 //實例化file reader對象
 var reader = new FileReader();
 var img = document.createElement("img");
 reader.onload = function(e) {
 img.src = this.result;
 oDragWrap.appendChild(img);
 };
 reader.readAsDataURL(fileList[0]);
};

當完成以上操作后，相信你可以成功的完成了拖拽圖片預覽的操作。當你查看 img 標簽時會發現，img的src屬性是一個超長的文件二進制數據，當你需要很多這種的img元素時，建議將展示區域脫離文檔流，讓其絕對定位減少頁面的 reflow

AJAX 上傳圖片

既然已經獲取到拖拽到web頁面中的圖片數據了，下一步就是將其發送到服務器端。

總結

監聽拖拽: 監聽頁面元素的拖拽事件，包括: dragenter、dragover、dragleave 和drop,一定要將dragover的默認事件取消掉，不然無法觸發drop事件。如需拖拽頁面里面的元素，需要給其添加屬性draggable="true"
獲取拖拽文件: 在 drop 事件觸發后通過e.dataTransfer.files獲取拖拽文件列表，一定要將drop的默認事件取消掉，否則會默認打開文件length屬性獲取文件數量，type屬性獲取文件類型
讀取圖片數據并添加預覽圖: 實例化FileReader對象，通過其readAsDataURL(file)方法獲取文件二進制流，并監聽其onload事件，將e.result賦值給img的src屬性，最后將圖片添加到DOM中
發送圖片數據

、什么是 HTML5？

HTML5 是最新的 HTML 標準；
HTML5 是專門為承載豐富的 web 內容而設計的，并且無需額外插件；
HTML5 擁有新的語義、圖形以及多媒體元素；
HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建；
HTML5 是跨平臺的，被設計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行；

二、HTML5的一些新特性

用于繪畫的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
對本地離線存儲的更好的支持；
新的特殊內容元素，比如article、footer、header、nav、section；
新的表單控件，比如 calendar、date、time、email、url、search；

三、video 元素

<video> 元素提供了播放、暫停和音量控件來控制視頻；
<video> 元素也提供了 width 和 height 屬性控制視頻的尺寸；
<video> 與</video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的；

video 元素的三種視頻格式：

Ogg：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件；
MPEG4：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件；
WebM：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件；

video 元素的屬性：

src：要播放的視頻的 URL；
width：設置視頻播放器的寬度；
height：設置視頻播放器的高度；
autoplay：自動播放；
controls：如果出現該屬性，則向用戶顯示控件，比如播放按鈕；
loop：循環播放；
preload：如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放，如果使用 "autoplay"，則忽略該屬性；

video 元素的方法：

pause()：暫停當前播放的視頻；
play()：開始播放視頻；
load()：重新加載視頻元素；
canPlayType()：檢測瀏覽器是否能播放指定的視頻類型；
addTextTrack()：向音頻/視頻添加新的文本軌道；

四、audio元素

HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 <audio> 元素；
<audio>元素能夠播放聲音文件或者音頻流；

audio元素的三種音頻格式：

MP3：適用于Internet Explorer、Chrome、Safari 等瀏覽器；
Wav：適用于Firefox、Opera等瀏覽器；
Ogg：適用于Firefox、IE9、Chrome 瀏覽器；

audio元素的屬性：

src：要播放的音頻的 URL；
autoplay：自動播放；
controls：如果出現該屬性，則向用戶顯示控件；
loop：循環播放；
preload：如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放，如果使用 "autoplay"，則忽略該屬性；

audio元素的方法：

pause()：暫停當前播放的音頻；
play()：開始播放音頻；
load()：重新加載音頻；

五、canvas 元素

什么是 Canvas？

HTML5 的 canvas 元素通過 JavaScript 在網頁上繪制圖像，元素本身并沒有繪制能力，它只是圖形容器，必須使用腳本來繪制圖形；
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法；
創建一個畫布

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas在HTML5 中的新屬性有：

height：設置 canvas 的高度；
width：設置 canvas 的寬度；

六、繪制三角形

getElementById()：可返回對擁有指定 ID 的第一個對象的引用；

getContext()：返回一個用于在畫布上繪圖的環境，2d表示二維繪圖；

beginPath()：開始一條路徑，或重置當前的路徑；

moveTo()：把路徑移動到畫布中的指定點，不創建線條。

lineTo()：添加一個新點，然后創建從該點到畫布中最后指定點的線條（該方法并不會創建線條）；

closePath()：創建從當前點到開始點的路徑；

strokeStyle屬性：設置或返回用于筆觸的顏色、漸變或模式；

stroke()：會實際地繪制出路徑；

fillStyle屬性：設置或返回用于填充繪畫的顏色、漸變或模式；

fill()：填充當前的圖像（路徑），默認顏色是黑色；

//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或閉合 需要先閉合路徑才能畫
cxt.strokeStyle="red";
cxt.stroke();
//實心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示圖

圖1

七、使用Canvas繪制一個空心圓

arc()：創建弧或曲線（用于創建圓或部分圓）；

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas") 
 var ctx=can.getContext("2d"); //創建context對象
 ctx.beginPath();//標志開始一個路徑
 ctx.arc(100,100,50,0,2*Math.PI);//在canvas中繪制圓形
 ctx.stroke()
 </script>

演示圖

圖2

八、繪制一個實心圓

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d"); 
 ctx.beginPath();
 ctx.arc(100,100,50,0,2*Math.PI);
 ctx.fillStyle="#deffff";
 ctx.fill();
 ctx.strokeStyle="red"
 ctx.stroke();
 </script>

演示圖

圖3

九、繪制一個空心矩形

strokeRect()：繪制矩形（不填色），筆觸的默認顏色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas"); //獲得畫板數據
 var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設置線條顏色
 ctx.strokeRect(100,100,100,100); //線條畫矩形
 </script>

演示圖

圖4

十、繪制一個實心的矩形

fillRect()：繪制“已填色”的矩形，默認的填充顏色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//獲得畫板數據
var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設置線條顏色
 ctx.fillStyle="#ddedee"; //填充矩形
 ctx.fillRect(100,100,100,100);
 ctx.strokeRect(100,100,100,100);//線條畫矩形
 </script>

演示圖

圖5

在線咨詢

上一篇：前端入門-html 中如何使用圖片
下一篇：css初識