Web前端學習-第六課ＨＴＭＬ篇

時間 2019-11-30

標籤 web 前端學習第六 html 欄目 HTML 简体版

原文原文鏈接

Q13：HTML5中Canvas、WebWorkers、Storage三者出現的意義？使用方式（使用代碼展現）？優勢？css

Canvas爲了客戶端矢量圖形而設計，本身沒有行爲，但卻把一個繪圖API展示給客戶端JavaScript以使腳本可以把想繪製的東西都繪製在一塊畫布上；html

使用：大多數canvas繪圖API都沒有定義在<canvas>元素自己上，而是定義在經過畫布的getConText（）方法得到的一個繪圖環境對象上；canvas也使用了路徑的表示法，可是路徑有一系列的方法調用來定義，而不是描述爲字母和數字的字符串，好比調用beginPath（）和arc（）方法；一旦定義了路徑，其餘的方法如fill（），都是對此路徑操做，繪圖環境的各類屬性，好比fillstyle，說明了這些操做如何使用；前端

代碼：html5

優勢：動態建立圖形圖像，圖形是在一個特定的上下文中建立的，而上下文對象目前有兩種：2D上下文，可移植性原始的繪圖操做：設置填充，描邊顏色和模式；繪製矩形；繪製路徑；繪製文本；建立漸變和模式；3D上下文，即WebGL（從OpenGL ES2.0移植到瀏覽器中，OpenGL ES2.0是遊戲開發人員在建立計算機圖形圖像時常用的一種語言）上下文，支持比2D上下文更豐富的更強大的圖形圖像處理能力：用GLSL（OpenGL Shading Language ，OpenGL着色語言）編寫的頂點和片斷着色器；支持類型化數組，既可以將數組中的數據限定爲某種特定的數值類型；建立和操做紋理。（2D上下文瀏覽器基本都支持，WebGLobal目前只有Firefox 4+和Chrome支持）css3

Web Workers:當在HTML頁面中執行腳本時，頁面的狀態是不可相應的，直到腳本已經完成；Web workers是運行在後臺的JavaScript，獨立於其餘腳本，不會影響頁面的性能，能夠繼續作任何願意作的事情，點擊選取內容等等，而此時web workers在後臺進行。web

代碼：數據庫

優勢：做爲在後臺運行的JavaScript腳本，不會影響頁面的性能。bootstrap

Storage：能夠在客戶端本地存儲數據，相似HTML4的cookie，但可實現功能要比cookie強大得多，cookie大小被限制在4KB，Web Storage官方建議爲每一個網站5MB。canvas

Web Storage 分爲兩種：session Storage和local storage；數組

保存數據：localStorage.setItem(key,value)

讀取數據：localStorage.getItem(key)

刪除單個數據：localStorage.removeItem(key)；

刪除全部數據：localStorage.clear()

獲得某個索引的key：localStorage.key(index)

示例代碼：

<!DOCTYPE HTML>

<html>

<head>

<title>Web Storage</title>

</head>

<body>

<br />

<br />

<hr />

<label for = "search_phone">輸入手機號：</label>、

</div>

<br />

</div>

</body>

//保存數據

function save(){

var mobilephone = document.getElementById("mobilephone").value;

var user_name = document.getElementById("user_name").value;

localStorage.setItem(mobilephone,user_name);

}

//查找機主

function find(){

var search_phone = document.getElementById("search_phone").value;

var name = localStorage.getItem(search_phone);

var find_result = document.getElementById("find_result");

find_result.innerHTML = search_phone + "的機主是：" + name;

}

//將全部存儲在localStorage中的對象提取出來，並展示到界面上

function loadAll(){

var list = document.getElementById("list");

if(localStorage.length > 0){

var result = "<table border = '1'>";

result += "<tr><td>姓名</td><td>手機號碼</td></tr>"

for(var i = 0;i < localStorage.length;i ++){

var mobilephone = localStorage.key(i);

var name = localStorage.getItem(mobilephone);

result += "<tr><td>" + name + "</td><td>" + mobilephone +"</td></tr>";

}

result += "</table>";

list.innerHTML = result;

}else{

list.innerHTML = "目前數據爲空，趕忙加入聯繫人吧";

}

</script>

</html>

Q14：HTML5爲何適合作移動端？目前移動端框架有哪些？

Html5 能夠直接在網頁上調試和修改，在移動設備上支持媒體，引進新功能能夠真正改變用戶跟文檔的交互方式。（新的解析規則加強了靈活性，新屬性，淘汰過期的冗餘的屬性，一個html5文檔到另外一個文檔間的拖放功能，離線編輯，信息傳遞加強，詳細的解析規則，多用互聯網郵件擴展和協議處理程序註冊，在SQL數據庫中存儲數據的通用標準、。。。）

目前移動端框架：PhoneGap（開源開發框架，使用html，css，和JavaScript來構建跨平臺的移動應用程序）、

　　　　　　　　Sencha Touch（讓Web APP看起來像Native App，美麗的用戶界面組件個豐富的數據管理所有基於最新的HTML5和css3的web標準全面兼容Android和iOS設備，是開發者最經常使用的UI工具箱）、

　　　　　　　　Media Queries（提供了一種基於不一樣的平臺寫css的技術，能很快讓網站兼容移動設備，保證產品實現最快的跨平臺的兼容性和多平臺的可用性。）、

　　　　　　　　Zepto.js（專爲mobile webkit瀏覽器而開發的JavaScript框架開發理念是簡約，幫助開發人員簡單快速的完成開發交付任務，超輕量級，語法借鑑且兼容jQuery）、

　　　　　　　　bootstrap（Twitter推出的開源的用於前端開發的工具包，是一個css/html框架，提供了優雅的HTML和css規範，由動態css語言less寫成，與css框架blueprint存在不少類似之處，2.0版本添加響應式佈局，更新了一些進度攔及可定製的圖片縮略圖，增長了一些新樣式，很是輕量級的框架）、