TML5 是第五個且是當前的 HTML 版本,它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。 -- Palak Shah
本文導航
-新標簽和元素 …… 08%
-HTML5 的高級功能 …… 16%
-地理位置 …… 16%
-網絡存儲 …… 33%
-應用緩存(AppCache) …… 44%
-視頻 …… 50%
-音頻 …… 61%
-畫布(Canvas) …… 71%
-HTML5 工具 …… 78%
編譯自: http://opensourceforu.com/2017/06/introduction-to-html5/作者: Palak Shah
譯者: geekpi
HTML5 是第五個且是當前的 HTML 版本,它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。
HTML5 通過 W3C 和Web 超文本應用技術工作組Web Hypertext Application Technology Working Group之間的合作發展起來。它是一個更高版本的 HTML,它的許多新元素可以使你的頁面更加語義化和動態。它是為所有人提供更好的 Web 體驗而開發的。HTML5 提供了很多的功能,使 Web 更加動態和交互。
HTML5 的新功能是:
新標簽,如 <header> 和 <section>
用于 2D 繪圖的 <canvas> 元素
本地存儲
新的表單控件,如日歷、日期和時間
新媒體功能
地理位置
HTML5 還不是正式標準(LCTT 譯注:HTML5 已于 2014 年成為“推薦標準”),因此,并不是所有的瀏覽器都支持它或其中一些功能。開發 HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。
語義化元素: 圖 1 展示了一些有用的語義化元素。
表單元素: HTML5 中的表單元素如圖 2 所示。
圖形元素: HTML5 中的圖形元素如圖 3 所示。
媒體元素: HTML5 中的新媒體元素如圖 4 所示。
圖 1:語義化元素
圖 2:表單元素
圖 3:圖形元素
圖 4:媒體元素
地理位置
這是一個 HTML5 API,用于獲取網站用戶的地理位置,用戶必須首先允許網站獲取他或她的位置。這通常通過按鈕和/或瀏覽器彈出窗口來實現。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。
地理位置的一些用途是:
公共交通網站
出租車及其他運輸網站
電子商務網站計算運費
旅行社網站
房地產網站
在附近播放的電影的電影院網站
在線游戲
網站首頁提供本地標題和天氣
工作職位可以自動計算通勤時間
工作原理: 地理位置通過掃描位置信息的常見源進行工作,其中包括以下:
全球定位系統(GPS)是最準確的
網絡信號 - IP地址、RFID、Wi-Fi 和藍牙 MAC地址
GSM/CDMA 蜂窩 ID
用戶輸入
該 API 提供了非常方便的函數來檢測瀏覽器中的地理位置支持:
if (navigator.geolocation) {// do stuff
}
getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設備的當前地理位置。該位置被描述為一組地理坐標以及航向和速度。位置信息作為位置對象返回。
語法是:
getCurrentPosition(showLocation, ErrorHandler, options);
showLocation:定義了檢索位置信息的回調方法。
ErrorHandler(可選):定義了在處理異步調用時發生錯誤時調用的回調方法。
options (可選): 定義了一組用于檢索位置信息的選項。
我們可以通過兩種方式向用戶提供位置信息:測地和民用。
描述位置的測地方式直接指向緯度和經度。
位置信息的民用表示法是人類可讀的且容易理解。
如下表 1 所示,每個屬性/參數都具有測地和民用表示。
圖 5 包含了一個位置對象返回的屬性集。
圖5:位置對象屬性
網絡存儲
在 HTML 中,為了在本機存儲用戶數據,我們需要使用 JavaScript cookie。為了避免這種情況,HTML5 已經引入了 Web 存儲,網站利用它在本機上存儲用戶數據。
與 Cookie 相比,Web 存儲的優點是:
更安全
更快
存儲更多的數據
存儲的數據不會隨每個服務器請求一起發送。只有在被要求時才包括在內。這是 HTML5 Web 存儲超過 Cookie 的一大優勢。
有兩種類型的 Web 存儲對象:
本地 - 存儲沒有到期日期的數據。
會話 - 僅存儲一個會話的數據。
如何工作: localStorage 和 sessionStorage 對象創建一個 key=value 對。比如: key="Name", value="Palak"。
這些存儲為字符串,但如果需要,可以使用 JavaScript 函數(如 parseInt() 和 parseFloat())進行轉換。
下面給出了使用 Web 存儲對象的語法:
存儲一個值:
localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";
得到一個值:
alert(localStorage.getItem("key1"));
alert(localStorage["key1"]);
刪除一個值: -removeItem("key1");
刪除所有值:
localStorage.clear();
應用緩存(AppCache)
使用 HTML5 AppCache,我們可以使 Web 應用程序在沒有 Internet 連接的情況下脫機工作。除 IE 之外,所有瀏覽器都可以使用 AppCache(截止至此時)。
應用緩存的優點是:
網頁瀏覽可以脫機
頁面加載速度更快
服務器負載更小
cache manifest 是一個簡單的文本文件,其中列出了瀏覽器應緩存的資源以進行脫機訪問。 manifest 屬性可以包含在文檔的 HTML 標簽中,如下所示:
<html manifest="test.appcache">...
</html>
它應該在你要緩存的所有頁面上。
緩存的應用程序頁面將一直保留,除非:
用戶清除它們
manifest 被修改
緩存更新
視頻
在 HTML5 發布之前,沒有統一的標準來顯示網頁上的視頻。大多數視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規定了使用 video 元素在網頁上顯示視頻的標準方式。
目前,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 發布之前,在網頁上播放音頻沒有統一的標準。大多數音頻也通過 Flash 等不同的插件播放。但 HTML5 規定了通過使用音頻元素在網頁上播放音頻的標準方式。音頻元素用于播放聲音文件和音頻流。
目前,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)
要在網頁上創建圖形,HTML5 使用 畫布 API。我們可以用它繪制任何東西,并且它使用 JavaScript。它通過避免從網絡下載圖像而提高網站性能。使用畫布,我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外,畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面,如下所示:
<canvas id="myCanvas" width="200" height="100"></canvas>
畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實現繪制。所有繪畫應在 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 所示。
你可以繪制許多對象,如弧、圓、線/垂直梯度等。
為了有效操作,所有熟練的或業余的 Web 開發人員/設計人員都應該使用 HTML5 工具,當需要設置工作流/網站或執行重復任務時,這些工具非常有幫助。它們提高了網頁設計的可用性。
以下是一些幫助創建很棒的網站的必要工具。
HTML5 Maker: 用來在 HTML、JavaScript 和 CSS 的幫助下與網站內容交互。非常容易使用。它還允許我們開發幻燈片、滑塊、HTML5 動畫等。
Liveweave: 用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費的時間。在編輯器中粘貼代碼即可得到結果。它非常易于使用,并為一些代碼提供自動完成功能,這使得開發和測試更快更容易。
Font dragr: 在瀏覽器中預覽定制的 Web 字體。它會直接載入該字體,以便你可以知道看起來是否正確。也提供了拖放界面,允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。
HTML5 Please: 可以讓我們找到與 HTML5 相關的任何內容。如果你想知道如何使用任何一個功能,你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設備的有用資源的列表,語法,以及如何使用元素的一般建議等。
Modernizr: 這是一個開源工具,用于給訪問者瀏覽器提供最佳體驗。使用此工具,你可以檢測訪問者的瀏覽器是否支持 HTML5 功能,并加載相應的腳本。
Adobe Edge Animate: 這是必須處理交互式 HTML 動畫的 HTML5 開發人員的有用工具。它用于數字出版、網絡和廣告領域。此工具允許用戶創建無瑕疵的動畫,可以跨多個設備運行。
Video.js: 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網站,你應該使用此工具。它使視頻看起來不錯,并且是網站的一部分。
The W3 Validator: W3 驗證工具測試 HTML、XHTML、SMIL、MathML 等中的網站標記的有效性。要測試任何網站的標記有效性,你必須選擇文檔類型為 HTML5 并輸入你網頁的 URL。這樣做之后,你的代碼將被檢查,并將提供所有錯誤和警告。
HTML5 Reset: 此工具允許開發人員在 HTML5 中重寫舊網站的代碼。你可以使用這些工具為你網站的訪問者提供一個良好的網絡體驗。
Palak Shah
作者是高級軟件工程師。她喜歡探索新技術,學習創新概念。她也喜歡哲學。你可以通過 palak311@gmail.com[1] 聯系她。
via: http://opensourceforu.com/2017/06/introduction-to-html5/
作者:Palak Shah[2] 譯者:geekpi 校對:wxy
本文由 LCTT 原創編譯,Linux中國 榮譽推出
端開發的入門門檻其實非常低,與服務器端語言先慢后快的學習曲線相比,前端開發的學習曲線是先快后慢。
所以,對于想從事IT工作的人來說,前端開發是個不錯的切入點。
對于零基礎的HTML5學習者,首先需要的是一條思路清晰的HTML5學習路線,學習路線如同一本書的目錄,有了它就可以對一門語言有宏觀概念,學習起來更有針對性,這一點對零基礎小白尤其重要。
下面,小編就為大家揭曉HTML5入門路線是什么樣的?
基本概念
HTML(Hypertext Markup Language,超文本標記語言),是用來創建網頁和網絡應用的標準標記語言,可用來定義和描述網頁的內容和結構。和CSS、JavaScript一起組成互聯網的基礎技術。
1、HTML5介紹
內容包括:互聯網發展趨勢、H5語言的優勢、簡單易學人人都能編程、H5就業和薪資情況、H5常見的項目與產品、H5的未來與方向
2、HTML基礎
內容包括:HTML簡介與歷史版本、常用開發軟件、常見標簽與屬性、表格與表單、標簽規范與標簽語義化、實戰:網頁結構布局
3、CSS基礎
內容包括:css簡介與基本語法、常見的各種樣式屬性、CSS選擇器與標簽類型、理解盒子模型與CSS重置、浮動與定位、利用photoshop工具測量樣式、HTML+CSS開發網頁、實戰:高仿電商首頁效果
4、CSS3基礎
內容包括:css3常見樣式、css3選擇器、變形與動畫、3D效果與關鍵幀、彈性盒模型
5、移動端布局
內容包括:移動端基本概念、viewport窗口設置、移動端布局方案、rem、vh、vw等單位、響應式布局、bootstrap框架
6.、JavaScript基礎
內容包括:JS簡介、JS變量、數據類型與類型轉換、運算符與優先級、流程控制-if..else流程控制-switch...case、流程控制-while、do..while、for循環、break、continue語法、函數定義與調用、全局變量與局部變量。
還有函數傳參與返回值、函數作用域與變量作用域、DOM的基本操作、定時器使用、this指向與修改指向、數組、字符串等方法操作、時間對象與正則對象、掌握常見BOM操作、常見事件與事件細節、JSON與AJAX、JSONP跨域操作、前端cookie的使用、實戰:JS配合HTML與CSS完成電商項目
7、jquery框架
內容包括:jquery框架介紹及優勢介紹、jquery核心思想、jquery常見方法、jquery動畫操作、jqueryAJAX操作、jquery工具方法、利用jquery快速開發網頁
8、PHP基礎
內容包括:PHP簡介與基本語法、mysql數據庫及sql語法、apache服務器與集成開發工具、PHP鏈接數據庫、PHP與AJAX交互、實戰:留言板、登錄、注冊等
9、H5基礎項目
內容包括:項目簡介、項目功能演示、項目劃分及框架、編寫HTML頁面結構、設置CSS樣式、添加JS交互、可選框架:bootstrap、jquery、PHP等、項目調試及兼容、項目驗收
雖然HTML5前端薪資高入門門檻低, 但是俗話說得好:入門容易,精通難。
HTML5前端開發的知識點繁多,要想真正掌握HTML5前端工程師開發技能,并非易事。
踩樓、私信小編,軟件資源免費送!
如果你想學習HTML5前端,想高薪就業,就來樂購IT教育學院,我們有優質的師資,完備的建站流程和一流的開發、設計人員。是學編程與設計錯不了的選擇!
在互聯網高速發展的今天,HTML5開發工程師的工資基本上都在10-30K。正因為如此,很多人都紛紛把目標放在了HTML5開發行業中,HTML5自然也就成為了行業的風口,想學HTML5開發的人也就越來越多了。接下來,千鋒武漢HTML5培訓小編就和大家分享下,小白需要了解的HTML5開發的學習順序是什么。
HTML5是一個建設網站的技術,但是只知道HTML5也做不好前端,還要學習CSS樣式、JS、JQ等,這些技術掌握了,才可以建立一個完整的網站。因此,HTML5的學習順序如下:
第一階段:HTML5+CSS3新屬性
在第一階段中,我們不僅要學習HTML+CSS的靜態布局,還要把HTML5的新特性,CSS3的新屬性掌握的非常好,可以說HTML5就是另一種的JS,專門寫特效。
第二階段:JS+JQ
在第二階段中,我們迎來了比較難搞的JS,JS作為前端開發者的工資標準,還是不容小視的,不要把他想的太簡單,學習JS要有獨立的思維,不然很難學好,而JQ是JS封裝的框架,只要底層的東西學好,這些就沒有問題。
第三階段:框架node.js ves.js 等等
進去了我們的框架階段,就是目前公司都要應用的框架,這個肯定要難一點,還是那句話,底層的JS理解透徹,這些框架同樣也是小事情。
第四階段:整合項目實戰學習
項目實戰非常的重要,現在公司都要那種有項目經驗的人,所以多給幾個項目實戰,是非常有利于找工作的。在找項目的時候最好找有商業價值或有實際意義的,由深入淺。最后還可以做一兩個小項目,傳到開源網站上,方便面試的時候展示。
HTML5不但薪資高,也是目前國內最緊缺的崗位。這么好的發展前景,想學習HTML5技術的同學不要猶豫,只要你有足夠的熱情和興趣,并且肯努力,學好HTML5沒有任何問題。所以我們一定要抓住時代發展的機遇,如果對這方面感興趣趕緊學起來!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。