整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
們深入研究了Modernizr框架的工作原理，這是開發(fā)人員工具包中用于跨瀏覽器兼容性的絕佳選擇。
Modernizr是一個開源和緊湊的 JavaScript庫 ，允許開發(fā)人員在跨瀏覽器兼容性方面為用戶創(chuàng)建各種級別的體驗。Modernizr幫助開發(fā)人員執(zhí)行跨瀏覽器測試，以檢查 訪問者的瀏覽器本身是否支持新一代 HTML5和CSS3功能，并為舊版瀏覽器提供專用的后備功能，這些瀏覽器因其功能支持不佳而臭名昭著。Modernizr與漸進增強的原理相結(jié)合， 有助于逐層設(shè)計尖端網(wǎng)站，利用強大的現(xiàn)代Web技術(shù)，而不會丟棄仍在使用IE等舊版瀏覽器的用戶。
Modernizr于2009年7月由FarukAte?推出，以統(tǒng)一，標(biāo)準(zhǔn)化的方式解決跨瀏覽器兼容性問題。今天，Modernizr作為特征檢測庫是最受歡迎的JavaScript庫之一，提供超過270個測試，并且正在全球8.76％的網(wǎng)站中使用（僅在美國就有50萬個網(wǎng)站）。而不是依賴于使用“用戶代理”嗅探的高度不可靠的瀏覽器檢測方法，而Modernizr則基于特征檢測。雖然瀏覽器檢測的中心問題是“訪問者使用的瀏覽器是什么？”功能檢測圍繞著這個問題，
對于特征檢測，Modernizr執(zhí)行三個基本功能：
重要的是要記住，使用Modernizr進行特征檢測只能檢測支持哪些功能。它無法為舊版瀏覽器中不受支持的功能提供功能。這是通過“polyfilling”實現(xiàn)的，我們將在本博客后面討論。
我還寫了另一個博客，它代表使用 @support 功能查詢來執(zhí)行 CSS功能檢測以實現(xiàn)跨瀏覽器兼容性。
1.要使用Modernizr執(zhí)行特征檢測，您需要將Modernizr.js文件添加到項目中。這可以通過兩種方式完成：
npm install -g modernizr
2.現(xiàn)在將下載的Modernizr文件包含在頁面部分中。
<script src="modernizr-custom.js"></script>
3.將“no-js”類添加到<html>標(biāo)記中。
<!DOCTYPE html>
<html class="no-js">
<head>
<script src="modernizr-custom.js">
</script>
</head>
no-js 如果用戶在瀏覽器中禁用了JavaScript或瀏覽器本身不支持JavaScript，則此類 是必要的后備。加載頁面后，如果瀏覽器支持JavaScript， 則Modernizr會自動no-js 將js類替換為 類以進行特征檢測。
4. Modernizr在根<html>元素上添加了幾個CSS類。這些類是根據(jù)瀏覽器的功能（功能/無功能）添加的 - 為支持的功能添加了類，并為添加的類添加了no- 不支持的功能的 前綴。
例如，如果瀏覽器支持Flexbox，則 flexbox 該類將添加到<html>標(biāo)記中。如果不支持， no-flexbox 則添加類。
Modernizr為IE9中的特征檢測測試添加了<html>標(biāo)記的類
<html class="js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
Modernizr將這些類添加到<html>標(biāo)記中，以根據(jù)給定瀏覽器是否支持某個功能來檢測CSS樣式屬性。具有no- 前綴的類 將自動應(yīng)用于不支持這些相應(yīng)功能的瀏覽器中。
例如，如果box-shadow 瀏覽器支持該 屬性，則 boxshadow Modernizr類將添加到<html>標(biāo)記中。如果不支持，則 no-boxshadow 添加Modernizr類。我們可以使用這兩個CSS類來有效地定位所有瀏覽器，而不管它們對這個特定功能的支持。本 .boxshadow 類可以用來風(fēng)格 box-shadow 圍繞一個div水平偏移和垂直的10px的，8像素的模糊，以及所有支持的瀏覽器和15px的蔓延抵消 .no_boxshadow 類可用于較厚的邊框?qū)挾?，以彌補缺乏編寫一個回退所有不受支持的瀏覽器的任何陰影。
.boxshadow #box {
border: 2px solid black;
-webkit-box-shadow: 10px 10px 8px 10px #888888;
-moz-box-shadow: 10px 10px 8px 10px #888888;
}
TML5 是第五個且是當(dāng)前的 HTML 版本，它是用于在萬維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語言。本文將幫助讀者了解它。 -- Palak Shah
本文導(dǎo)航
-新標(biāo)簽和元素 …… 08%
-HTML5 的高級功能 …… 16%
-地理位置 …… 16%
-網(wǎng)絡(luò)存儲 …… 33%
-應(yīng)用緩存（AppCache） …… 44%
-視頻 …… 50%
-音頻 …… 61%
-畫布（Canvas） …… 71%
-HTML5 工具 …… 78%
編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/作者： Palak Shah
譯者： geekpi
HTML5 是第五個且是當(dāng)前的 HTML 版本，它是用于在萬維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語言。本文將幫助讀者了解它。
HTML5 通過 W3C 和Web 超文本應(yīng)用技術(shù)工作組Web Hypertext Application Technology Working Group之間的合作發(fā)展起來。它是一個更高版本的 HTML，它的許多新元素可以使你的頁面更加語義化和動態(tài)。它是為所有人提供更好的 Web 體驗而開發(fā)的。HTML5 提供了很多的功能，使 Web 更加動態(tài)和交互。
HTML5 的新功能是：
新標(biāo)簽，如 <header> 和 <section>
用于 2D 繪圖的 <canvas> 元素
本地存儲
新的表單控件，如日歷、日期和時間
新媒體功能
地理位置
HTML5 還不是正式標(biāo)準(zhǔn)（LCTT 譯注：HTML5 已于 2014 年成為“推薦標(biāo)準(zhǔn)”），因此，并不是所有的瀏覽器都支持它或其中一些功能。開發(fā) HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。
語義化元素： 圖 1 展示了一些有用的語義化元素。
表單元素： HTML5 中的表單元素如圖 2 所示。
圖形元素： HTML5 中的圖形元素如圖 3 所示。
媒體元素： HTML5 中的新媒體元素如圖 4 所示。
圖 1：語義化元素
圖 2：表單元素
圖 3：圖形元素
圖 4：媒體元素
地理位置這是一個 HTML5 API，用于獲取網(wǎng)站用戶的地理位置，用戶必須首先允許網(wǎng)站獲取他或她的位置。這通常通過按鈕和/或瀏覽器彈出窗口來實現(xiàn)。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。
地理位置的一些用途是：
公共交通網(wǎng)站
出租車及其他運輸網(wǎng)站
電子商務(wù)網(wǎng)站計算運費
旅行社網(wǎng)站
房地產(chǎn)網(wǎng)站
在附近播放的電影的電影院網(wǎng)站
在線游戲
網(wǎng)站首頁提供本地標(biāo)題和天氣
工作職位可以自動計算通勤時間
工作原理： 地理位置通過掃描位置信息的常見源進行工作，其中包括以下：
全球定位系統(tǒng)（GPS）是最準(zhǔn)確的
網(wǎng)絡(luò)信號 - IP地址、RFID、Wi-Fi 和藍牙 MAC地址
GSM/CDMA 蜂窩 ID
用戶輸入
該 API 提供了非常方便的函數(shù)來檢測瀏覽器中的地理位置支持：
if (navigator.geolocation) {// do stuff
}
getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設(shè)備的當(dāng)前地理位置。該位置被描述為一組地理坐標(biāo)以及航向和速度。位置信息作為位置對象返回。
語法是：
getCurrentPosition(showLocation, ErrorHandler, options);
showLocation：定義了檢索位置信息的回調(diào)方法。
ErrorHandler（可選）：定義了在處理異步調(diào)用時發(fā)生錯誤時調(diào)用的回調(diào)方法。
options （可選）： 定義了一組用于檢索位置信息的選項。
我們可以通過兩種方式向用戶提供位置信息：測地和民用。
描述位置的測地方式直接指向緯度和經(jīng)度。
位置信息的民用表示法是人類可讀的且容易理解。
如下表 1 所示，每個屬性/參數(shù)都具有測地和民用表示。
圖 5 包含了一個位置對象返回的屬性集。
圖5：位置對象屬性
網(wǎng)絡(luò)存儲在 HTML 中，為了在本機存儲用戶數(shù)據(jù)，我們需要使用 JavaScript cookie。為了避免這種情況，HTML5 已經(jīng)引入了 Web 存儲，網(wǎng)站利用它在本機上存儲用戶數(shù)據(jù)。
與 Cookie 相比，Web 存儲的優(yōu)點是：
更安全
更快
存儲更多的數(shù)據(jù)
存儲的數(shù)據(jù)不會隨每個服務(wù)器請求一起發(fā)送。只有在被要求時才包括在內(nèi)。這是 HTML5 Web 存儲超過 Cookie 的一大優(yōu)勢。
有兩種類型的 Web 存儲對象：
本地 - 存儲沒有到期日期的數(shù)據(jù)。
會話 - 僅存儲一個會話的數(shù)據(jù)。
如何工作： localStorage 和 sessionStorage 對象創(chuàng)建一個 key=value 對。比如： key="Name"， value="Palak"。
這些存儲為字符串，但如果需要，可以使用 JavaScript 函數(shù)（如 parseInt() 和 parseFloat()）進行轉(zhuǎn)換。
下面給出了使用 Web 存儲對象的語法：
存儲一個值：
localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";
得到一個值：
alert(localStorage.getItem("key1"));
alert(localStorage["key1"]);
刪除一個值： -removeItem("key1");
刪除所有值：
localStorage.clear();
應(yīng)用緩存（AppCache）使用 HTML5 AppCache，我們可以使 Web 應(yīng)用程序在沒有 Internet 連接的情況下脫機工作。除 IE 之外，所有瀏覽器都可以使用 AppCache（截止至此時）。
應(yīng)用緩存的優(yōu)點是：
網(wǎng)頁瀏覽可以脫機
頁面加載速度更快
服務(wù)器負載更小
cache manifest 是一個簡單的文本文件，其中列出了瀏覽器應(yīng)緩存的資源以進行脫機訪問。 manifest 屬性可以包含在文檔的 HTML 標(biāo)簽中，如下所示：
<html manifest="test.appcache">...
</html>
它應(yīng)該在你要緩存的所有頁面上。
緩存的應(yīng)用程序頁面將一直保留，除非：
用戶清除它們
manifest 被修改
緩存更新
視頻在 HTML5 發(fā)布之前，沒有統(tǒng)一的標(biāo)準(zhǔn)來顯示網(wǎng)頁上的視頻。大多數(shù)視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規(guī)定了使用 video 元素在網(wǎng)頁上顯示視頻的標(biāo)準(zhǔn)方式。
目前，video 元素支持三種視頻格式，如表 2 所示。
下面的例子展示了 video 元素的使用：
<! DOCTYPE HTML><html>
<body>
<video src=" vdeo.ogg" width="320" height="240" controls="controls">
This browser does not support the video element.
</video>
</body>
</html>
例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使視頻在 Safari 和未來版本的 Chrome 中工作，我們必須添加一個 MPEG4 和 WebM 文件。
video 元素允許多個 source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個識別的格式，如下所示：
<video width="320" height="240" controls="controls"><source src="vdeo.ogg" type="video/ogg" />
<source src=" vdeo.mp4" type="video/mp4" />
<source src=" vdeo.webm" type="video/webm" />
This browser does not support the video element.
</video>
圖6：Canvas 的輸出
音頻對于音頻，情況類似于視頻。在 HTML5 發(fā)布之前，在網(wǎng)頁上播放音頻沒有統(tǒng)一的標(biāo)準(zhǔn)。大多數(shù)音頻也通過 Flash 等不同的插件播放。但 HTML5 規(guī)定了通過使用音頻元素在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)方式。音頻元素用于播放聲音文件和音頻流。
目前，HTML5 audio 元素支持三種音頻格式，如表 3 所示。
audio 元素的使用如下所示：
<! DOCTYPE HTML><html>
<body>
<audio src=" song.ogg" controls="controls">
This browser does not support the audio element.
</video>
</body>
</html>
此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未來版本中使 audio 工作，我們必須添加一個 MP3 和 Wav 文件。
audio 元素允許多個 source 元素，它可以鏈接到不同的音頻文件。瀏覽器將使用第一個識別的格式，如下所示：
<audio controls="controls"><source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
This browser does not support the audio element.
</audio>
畫布（Canvas）要在網(wǎng)頁上創(chuàng)建圖形，HTML5 使用 畫布 API。我們可以用它繪制任何東西，并且它使用 JavaScript。它通過避免從網(wǎng)絡(luò)下載圖像而提高網(wǎng)站性能。使用畫布，我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外，畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面，如下所示：
<canvas id="myCanvas" width="200" height="100"></canvas>
畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實現(xiàn)繪制。所有繪畫應(yīng)在 JavaScript 中。
<script type="text/javascript">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="blue";
cxt.storkeStyle = "red";
cxt.fillRect(10,10,100,100);
cxt.storkeRect(10,10,100,100);
</script>
以上腳本的輸出如圖 6 所示。
你可以繪制許多對象，如弧、圓、線/垂直梯度等。
為了有效操作，所有熟練的或業(yè)余的 Web 開發(fā)人員/設(shè)計人員都應(yīng)該使用 HTML5 工具，當(dāng)需要設(shè)置工作流/網(wǎng)站或執(zhí)行重復(fù)任務(wù)時，這些工具非常有幫助。它們提高了網(wǎng)頁設(shè)計的可用性。
以下是一些幫助創(chuàng)建很棒的網(wǎng)站的必要工具。
HTML5 Maker： 用來在 HTML、JavaScript 和 CSS 的幫助下與網(wǎng)站內(nèi)容交互。非常容易使用。它還允許我們開發(fā)幻燈片、滑塊、HTML5 動畫等。
Liveweave： 用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費的時間。在編輯器中粘貼代碼即可得到結(jié)果。它非常易于使用，并為一些代碼提供自動完成功能，這使得開發(fā)和測試更快更容易。
Font dragr： 在瀏覽器中預(yù)覽定制的 Web 字體。它會直接載入該字體，以便你可以知道看起來是否正確。也提供了拖放界面，允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。
HTML5 Please： 可以讓我們找到與 HTML5 相關(guān)的任何內(nèi)容。如果你想知道如何使用任何一個功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設(shè)備的有用資源的列表，語法，以及如何使用元素的一般建議等。
Modernizr： 這是一個開源工具，用于給訪問者瀏覽器提供最佳體驗。使用此工具，你可以檢測訪問者的瀏覽器是否支持 HTML5 功能，并加載相應(yīng)的腳本。
Adobe Edge Animate： 這是必須處理交互式 HTML 動畫的 HTML5 開發(fā)人員的有用工具。它用于數(shù)字出版、網(wǎng)絡(luò)和廣告領(lǐng)域。此工具允許用戶創(chuàng)建無瑕疵的動畫，可以跨多個設(shè)備運行。
Video.js： 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網(wǎng)站，你應(yīng)該使用此工具。它使視頻看起來不錯，并且是網(wǎng)站的一部分。
The W3 Validator： W3 驗證工具測試 HTML、XHTML、SMIL、MathML 等中的網(wǎng)站標(biāo)記的有效性。要測試任何網(wǎng)站的標(biāo)記有效性，你必須選擇文檔類型為 HTML5 并輸入你網(wǎng)頁的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯誤和警告。
HTML5 Reset： 此工具允許開發(fā)人員在 HTML5 中重寫舊網(wǎng)站的代碼。你可以使用這些工具為你網(wǎng)站的訪問者提供一個良好的網(wǎng)絡(luò)體驗。
Palak Shah
作者是高級軟件工程師。她喜歡探索新技術(shù)，學(xué)習(xí)創(chuàng)新概念。她也喜歡哲學(xué)。你可以通過 palak311@gmail.com[1] 聯(lián)系她。
via: http://opensourceforu.com/2017/06/introduction-to-html5/
作者：Palak Shah[2] 譯者：geekpi 校對：wxy
本文由 LCTT 原創(chuàng)編譯，Linux中國 榮譽推出
信我或關(guān)注微信號：猿來如此呀，回復(fù)：學(xué)習(xí)，獲取免費學(xué)習(xí)資源包。
HTML5規(guī)范開發(fā)完成時，將成為主流。據(jù)統(tǒng)計2013年全球有10億手機瀏覽器支持HTML5，同時HTML Web開發(fā)者數(shù)量將達到200萬。毫無疑問，HTML5將成為未來5-10年內(nèi)，移動互聯(lián)網(wǎng)領(lǐng)域的主宰者。
毋庸置疑，HTML5已經(jīng)改變了我們的percieve在線網(wǎng)站、應(yīng)用程序和內(nèi)容。它是如此的先進，以至于許許多多的瀏覽器期望使用上HTML5的最新功能，然而這需要很長時間來計劃以及實施。如果你之前有與網(wǎng)絡(luò)相關(guān)的腳本經(jīng)驗，那么學(xué)習(xí)HTML5可能并不是一件非常難的事情。
然而，視圖找到最完美的HTML5 Web框架是一件非常困難的事情。今天小編就為大家推薦幾款應(yīng)用比較廣泛的Web框架，希望對各位HTML5開發(fā)人員有一定的幫助。讓我們一起來看看吧！
1、Siimpler
Siimpler 是個簡單的 HTML 開發(fā)框架，他可以通過選擇你自己喜歡的部分，來幫助你迅速又簡單地創(chuàng)建 HTML5 開發(fā)結(jié)構(gòu)。網(wǎng)絡(luò)設(shè)計者們也可以通過使用 Siimpler 框架類的文件和文件夾來無縫的開始一個 Web 項目。
2、Initializr
Initializr 是一個 HTML5 模版生成器，幫助用戶快速開始基于 HTML5 模版文件的新項目，它可以生成自定義的干凈的模版。開發(fā)者可以選擇功能、樣本庫和任何應(yīng)該包括的部分。你可以在不到2分鐘來生成一個模板。
3、Foundation
Foundation 是世界上精妙的前端響應(yīng)框架，同時，它可以兼容所有的瀏覽器和網(wǎng)絡(luò)設(shè)備。Foundation 擁有移動友好型的用戶接口，設(shè)置了許多關(guān)鍵特性。
4、Enyo
Enyo是一個開源的 Jaa 框架，該框架能夠讓你創(chuàng)建頂級的 HTML5 應(yīng)用程序，該應(yīng)用程序能夠運行在各種各樣的電子設(shè)備上，比如說手機、臺式機、筆記本、電視以及Web應(yīng)用。
5、LimeJS
針對于所有的新的桌面瀏覽器和觸屏設(shè)備，LimeJS 對于有用戶經(jīng)驗的游戲開發(fā)者而言是教好的和較強大的開發(fā)框架。
6、Bootstrap
Bootstrap能讓所有開發(fā)者都能迅速上手、所有設(shè)備都可以適配、所有項目都適用。此外，bootstrap的官網(wǎng)也有很多教程提供。
7、Modernizr
Modernizr是一個開源的JS庫，它使得那些基于訪客瀏覽器的不同（指對新標(biāo)準(zhǔn)支持性的差異）而開發(fā)不同級別體驗的設(shè)計師的工作變得更為簡單。它使得設(shè)計師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發(fā)，同時又不會犧牲其他不支持這些新技術(shù)的瀏覽器的控制。
Modernizr是基于漸進增強理論來開發(fā)的，所以它支持并鼓勵開發(fā)者一層一層的創(chuàng)建他們的網(wǎng)站。一切從一個應(yīng)用了Javascript的空閑地基開始，一個接一個的添加增強的應(yīng)用層。因為使用了Modernizr，所以你容易知道瀏覽器都支持什么。
8、juery UI
juery UI 主要分為交互、微件和效果庫3個部分，主打代碼開源，操作繼承了juery 的簡單特性，兼容各主流桌面瀏覽器。
9、Ionic
Ionic是一套先進的HTML 5框架，主要用于混合型移動應(yīng)用的開發(fā)工作。
這套框架在Angular.js支持方面經(jīng)過優(yōu)化，且提供相當(dāng)豐富的HTML、CSS以及JavaScript組件。
其還擁有一套強大的命令行界面(簡稱CLI)，其中的卓越功能包括實時重載與日志記錄整合，這意味著我們能夠更為輕松地跨越不同平臺對Ionic應(yīng)用進行開發(fā)、測試與部署。
總結(jié)陳詞：
HTML 5應(yīng)用的開發(fā)難度要遠遠低于面向iOS或者Android系統(tǒng)平臺的原生應(yīng)用開發(fā)難度。HTML 5方案的另一大優(yōu)勢在于，我們可以通過更為便捷的方式實現(xiàn)Web應(yīng)用發(fā)布——相比之下，原生應(yīng)用則只能接受審核以獲得在相關(guān)應(yīng)用程序商店中的上架權(quán)。
另外，與原生應(yīng)用不同，我們也能夠很輕松地對HTML 5應(yīng)用中的漏洞進行修復(fù)或者進行功能改進。
然而，HTML 5應(yīng)用缺少一部分原生應(yīng)用引以為傲的重要特性，例如對本地設(shè)備功能的訪問能力以及安全的離線存儲模式。
無論如何，HTML 5確實標(biāo)志著一場效果顯著的移動開發(fā)技術(shù)革新，而我們也可以期待上述問題能夠在不久的未來一一得到解決。
來源網(wǎng)絡(luò)，侵權(quán)刪除
私信我或關(guān)注微信號：猿來如此呀，回復(fù)：學(xué)習(xí)，獲取免費學(xué)習(xí)資源包。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
