整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          關于 HTML5 你需要了解的基礎知識

          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 的高級功能

          地理位置

          這是一個 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. 描述位置的測地方式直接指向緯度和經度。

          2. 位置信息的民用表示法是人類可讀的且容易理解。

          如下表 1 所示,每個屬性/參數都具有測地和民用表示。

          圖 5 包含了一個位置對象返回的屬性集。

          圖5:位置對象屬性

          網絡存儲

          在 HTML 中,為了在本機存儲用戶數據,我們需要使用 JavaScript cookie。為了避免這種情況,HTML5 已經引入了 Web 存儲,網站利用它在本機上存儲用戶數據。

          與 Cookie 相比,Web 存儲的優點是:

          • 更安全

          • 更快

          • 存儲更多的數據

          • 存儲的數據不會隨每個服務器請求一起發送。只有在被要求時才包括在內。這是 HTML5 Web 存儲超過 Cookie 的一大優勢。

          有兩種類型的 Web 存儲對象:

          1. 本地 - 存儲沒有到期日期的數據。

          2. 會話 - 僅存儲一個會話的數據。

          如何工作: 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>

          它應該在你要緩存的所有頁面上。

          緩存的應用程序頁面將一直保留,除非:

          1. 用戶清除它們

          2. manifest 被修改

          3. 緩存更新

          視頻

          在 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 所示。

          你可以繪制許多對象,如弧、圓、線/垂直梯度等。

          HTML5 工具

          為了有效操作,所有熟練的或業余的 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沒有任何問題。所以我們一定要抓住時代發展的機遇,如果對這方面感興趣趕緊學起來!


          主站蜘蛛池模板: 精品一区二区久久久久久久网精| 久久精品国产一区二区三区肥胖| 暖暖免费高清日本一区二区三区| 乱精品一区字幕二区| 亚洲AV福利天堂一区二区三| 日本免费一区二区久久人人澡| 久久亚洲综合色一区二区三区| 无码乱人伦一区二区亚洲| 一区二区三区精品| 亚洲国产激情在线一区| 精品免费国产一区二区| 无码毛片一区二区三区中文字幕| 亚洲一区二区三区无码影院| 亚洲av鲁丝一区二区三区| 伊人久久精品无码麻豆一区| 国产在线第一区二区三区| 国产精品无圣光一区二区| 亚洲av色香蕉一区二区三区 | 精品国产一区二区三区香蕉| 国产肥熟女视频一区二区三区| 亚洲国产一区视频| 日韩精品无码中文字幕一区二区| 色综合视频一区二区三区44| 国产精品一区12p| bt7086福利一区国产| 午夜无码一区二区三区在线观看| 亚洲AV成人一区二区三区AV| 日本精品一区二区三本中文| 久久亚洲一区二区| 国产日韩精品一区二区在线观看| 日本不卡免费新一区二区三区| 国产精品亚洲一区二区三区久久| 日本不卡一区二区视频a| 精品国产一区二区三区免费看 | 色妞AV永久一区二区国产AV| 无码人妻aⅴ一区二区三区有奶水| 日韩精品无码一区二区视频| 日韩美一区二区三区| 88国产精品视频一区二区三区| 一区二区三区日本视频| 人妻少妇精品视频三区二区一区 |