學習總結：適合小白的HTML5前端學習路線

TML5經歷了前期HTML快速的更新換代，以其獨有特性的優勢迅速占據了網頁開發市場鰲頭。介于目前學習和想要從事HTML5網頁開發的人越來越多。小編給大家整理了一下基本的HTML5學習路線圖，適應于一些零基礎學習HTML5的同學借鑒。

HTML5學習路線規劃：

一、HTML5基礎

HTML 快速入門、文本、圖像、鏈接、表格、列表、表單、框架;

二、CSS3基礎

CSS基礎語法、各種選擇器(通用選擇器、元素選擇器、id和class選擇器、后代選擇器、偽類選擇器等)、框模型與背景、文本格式化、表格、顯示與定位、瀏覽器調試

三、HTML5高級

HTML5 增強表單元素、HTML5驗證、HTML5新事件和新屬性、Canvas繪圖、HTML5 SVG、音頻和視頻處理、離線Web存儲與應用、HTML5 拖放、Web Socket API、Geolocation API、Web Worker API

四、實戰技能目標

掌握JQuery核心API，HTML5 中的繪圖、音頻視頻處理、表單新特性，輕量級WEBAPP開發。

HTML5開發從根本上改變了開發者開發web和應用的方式，從桌面瀏覽器到移動應用，HTML5都已經成為前端開發必不可少的語言。特別是移動互聯網的爆發和微信這個超級應用對HTML5的支持，掌握HTML5語言的程序員已然成為各個互聯網公司的標配，薪資也是一路走高。

如果你想入門HTML5，又苦于沒有好的學習方法，可以選擇一套優秀的教程來進行學習，讓自己少走彎路快速進入HTML5開發的行列。

如果你想快速學習這些知識點并掌握這些技術，可以關注+私信小編關鍵詞【前端開發】，即可獲取一套前端開發教程，開啟你的前端開發之旅。

聯網的發展總是在不斷地催生新技術的產生，而 HTML5 和 CSS3 是最近一直被討論的熱門話題，對于每個互聯網開發者尤其是前端開發者而言，都充滿了好奇與渴望。那么 HTML5 和 CSS3 究竟有哪些讓我們眼前一亮的東西呢？

HTML5

HTML 5 草案的前身名為 Web Applications 1.0，于 2004 年被 WHATWG 提出，于 2007 年被 W3C 接納，并成立了新的 HTML 工作團隊。在 2008 年 1 月 22 日，第一份正式草案發布。HTML5 是近十年來 Web 開發標準最巨大的飛躍。和以前的版本不同，HTML5 并非僅僅用來表示 Web 內容，它的新使命是將 Web 帶入一個成熟的應用平臺，在 HTML5 平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化。那么我們來看一下 HTML5 的技術概覽有哪些：

HTML5 新增和移除的元素

HTML5 新增了很多多媒體和交互性元素如 video，audio，在 HTML4 當中如果要嵌入一個視頻或是音頻的話需要引入一大段的代碼，還有兼容各個瀏覽器，而 HTML5 只需要通過引入一個標簽就可以，就像 img 標簽一樣方便。在頁面布局和內容實現方面 HTML5 新增了很多結構化標簽元素以及塊級及語義元素，如果你要用 HTML 表示一個文件的上傳進度條，在 HTML5 中你可以用 progress 這個元素來表示，它有一個 value 屬性描述了已經完成了多少任務，還有一個屬性 max 描述了這個任務一共需要多少，還可以通過 DOM 接口得到這個進度條的 position 屬性（只讀），也就是任務完成的百分比。Youtube 在 HTML5 技術上已經做了一個嘗試，http://www.youtube.com/html5 是用 HTML5 做的一個 DEMO，從整個頁面源代碼來看，非常簡潔。當然 HTML5 也對一些元素新增了一些屬性，如 input 和 textarea 的 placeholder 屬性，相當于輸入框的輸入提示，script 有一個 async 屬性會影響腳本的加載和執行。對于所有的 HTML 共有的屬性我們通常把它稱作是“全局屬性”，如 class，id，tabindex，title，HTML5 也新增了一些全局屬性，如 contenteditable，contextmenu，hidden 等屬性。HTML5 還增加了對于微數據的支持，如 HTML5 新增的 item，itempro，subject 等屬性。

當然 HTML5 也移除了一些表示頁面展現的元素，如 font，center，strike 等，這些本應該是 CSS 來做的，所以還是很好理解的，也移除了一些影響網站可訪問性的元素如 frame，frameset，noframe 以及一些不常用的元素如 acronym，而采用 abbr 來表示縮寫。HTML5 還移除了一些影響客戶端兼容性的 HTML 熟悉，如 link 的 rev 屬性，td 的 scope 屬性；HTML5 也移除了一些表示頁面展現的屬性如一些元素的 align，bgcolor 屬性。

HTML5 對表單的支持

HTML5 提供了強大的控件類型如 url，email，date，tel 等，強大的約束屬性，如 required 表示必填，文件上傳的 accept 屬性，以及一些表單重復元素模型的支持，HTML5 在提交表單的時候還可以設置提交的方式為 XML 提交方式，這樣服務器端接收到的數據將是 XML 格式，HTML5 的表單被定義為“Web Forms 2.0”，目前 Opera 9.5+ 對 Web Forms 2.0 的支持較為完美。

HTML5 DOM 變化

HTML5 在 DOM LEVEL 2 HTML 方面很多都是繼承自 HTMLDocument 的接口，當然 HTML5 在 DOM 上也有一些值得注意的新成員，如：支持 getElementsByClassName，可以根據 class 類名選擇元素，getSelection() 將會返回當前選中的對象，在選擇器上面有兩個方法 querySelector 和 querySelectorAll 可以根據 CSS 選擇符來獲取要查詢的元素，相當于 YUI 3 中的 Y.one 和 Y.all。

HTML5 的 Javascript APIs

HTML5 在 Javascript 上面新增了哪些 API 呢？

Video/Audio：HTML5 為 Video 和 Audio 提供了 API 來讓開發者控制他們自己的用戶界面，如可以播放或暫停媒體內容。
Canvas：Canvas 是一個新的 HTML 元素，這個元素可以被 Script 語言（通常是 JavaScript）用來繪制圖形。例如可以用它來畫圖、合成圖象、或做簡單的（和不那么簡單的）動畫。Canvas 是一個神奇的東西，它給我的第一感覺就像是在用 Photoshop 一樣，它的每一個方法跟 Photoshop 是那么地相似，通過 canvas.getContext(‘2d’) 就可以得到這個 Canvas 的 API，你可以通過 fillStyle 設置其填充顏色或是通過 strokeStyle 設置其描邊顏色，甚至它畫路徑的操作跟 Photoshop 的鋼筆操作更是不謀而合。Canvas 在很多網站都已經有應用，甚至還可以用 Canvas 來編寫 Web Game。
Drag&Drop：在指示設備的視覺媒體中，”Drag” 的操作就是鼠標按下（mousedown）并伴隨著鼠標移動（mousemove）的事件，而 ”Drop” 則是鼠標釋放時觸發的事件。在 Drag&Drop 里定義了 DataEvent 和 DataTransfer 接口，同時當拖拽操作發生時會觸發如 dragstart，dragenter，dragleave，drop，dragend 等事件。
Web Workers：讓 JavaScript 多線程，可以在后臺做很多工作而不會阻斷當前的瀏覽器操作。
Geolocation：地理位置定位，運行 navigator.geolocation.getCurrentPosition(success, error) 這個方法時瀏覽器會提示是否要共享你的地理位置，如果選擇共享，則會回調 success 函數，success 函數有一個參數是 position 對象，這個 position 對象有一個 coords 對象，coords 對象包含了很多地理位置信息如 latitude（維度）和 longitude（經度），這樣就可以知道你的具體位置了，這個功能在一些手機如 iPhone 上已經有廣泛的應用了。
Application Cache：這是 HTML5 對于離線應用的支持，通過在 HTML 元素上加一個屬性 manifest，瀏覽器會提示你是否要將數據緩存到客戶端，如果用戶選擇了允許，則會按照指定的 manifest 文件列表緩存需要的文件，當你的網絡不可用時，你還是可以使用這個應用的。對于離線應用，Google 也開發了 Google Gears 瀏覽器擴展，不過最后 Google 轉投 HTML5 可能也是看到了 HTML5 存儲和離線應用的這種優勢。
Storage：Webkit 已經實現了 database storage，你可以像后端操作數據庫一樣查詢數據并執行一些操作。還有一種存儲是鍵值對存儲，如 sessionStorage 和 localStorage，可以通過 setItem 和 getItem 來存儲與取值，相對于 Cookie 的存儲來說，存儲的容量要大很多。
X-Document Messaging：瀏覽器因為安全和隱私的原因，阻止了不同域之間文檔的通信，雖然這是一個安全限制，但是對于那些沒有危害的不同域的文檔通信帶來了很多問題，但是 HTML5 可以實現這種跨文檔通信，讓我們可以不用管源域是來自哪里，同時可以防止腳本攻擊。

HTML5 讓你心動了嗎？那么 HTML5 什么時候會成為標準呢？據說要等到 2022 年，這有一個很有意思的網站 http://ishtml5readyyet.com/ 告訴你還有多少天 HTML5 會真正到來。

CSS3

CSS3 對于我們 Web 開發者來說不只是新奇的技術，更重要的是這些全新概念的 Web 應用給我們帶來更多無限的可能性，也極大地提高了我們的開發效率。我們將不必再依賴圖片或者 JavaScript 去完成圓角、多背景、用戶自定義字體、3D 動畫、漸變、盒陰影、文字陰影、透明度等提高 Web 設計質量的特色應用。

CSS3 在選擇器上面的支持

利用屬性選擇器我們可以根據屬性值的開頭或結尾很容易選擇某個元素，利用兄弟選擇器可以選擇同級兄弟結點或緊鄰下一個結點的元素，利用偽類選擇器可以選擇某一類元素，CSS3 在選擇器上的豐富支持讓我們可以靈活的控制樣式，而不必為了選擇某些元素給他們加上如”odd”或”even”這樣的類名。

CSS3 在樣式上的支持

有一個調查說開發者最期待 CSS3 的特性是什么，最后票數最多的是“圓角”，不錯，圓角這個功能可以給我們這些前端工程師省去很多時間和精力去切圖拼湊一個圓角。CSS3 還支持陰影，盒陰影以及文本陰影，漸變，之前你可能是通過IE的濾鏡看到過，其實 CSS3 實現起來更加方便。@font-face 可以自定義字體，如果用傳統的方式，VD 把一個帶有特殊文字的設計圖給你讓你來實現的話你可能會把它做成一個圖片，而通過 CSS3 用 @font-face 就可以了。CSS3 對于連續文本換行也新增了一個屬性 word-wrap，你可以設置其為 normal（不換行）或 break-word（換行），這解決了連續英文字符出現頁面錯位的問題，也不需要后端去截取這個連續字符。使用 CSS3 你還可以給邊框加背景，這在 iPhone 上也有應用的例子。CSS3 在背景上支持背景調整大小，如當你用一張大圖要做一個小的元素背景時可以通過 background-size 來調整背景圖的大小來適應這個元素。CSS3 支持 opacity，rgba 和 hsl/a，opacity 和 rgba 的區別是 opacity 設置的透明對其內容也會產生影響，而 rgba 只對你應用的元素產生影響。CSS3 在布局上對于盒模型提供了支持，可以設置 box-sizing 為 content-box 或 border-box，應用為 content-box 就是正常的模式，而應用為 border-box 和 IE5.5 的盒模型很相似，即元素的寬度包括 border 和 padding，這個在布局上可能會比較方便，不用去管到底這個元素會占用多大的寬度，而用 content-box 還需要手動計算一下這個元素實際占用的寬度。

CSS3 對于動畫的支持

CSS3 支持的動畫類型有：transform（變換）、transition（過渡）和 animation（動畫）。你可以對特定的屬性設置 transition，transiton 和 animation 的區別不大，animation 的動畫是自己定義的，面向的更多的是腳本開發者，往往更加復雜。

為了使用大部分 CSS3 特性，我們不得不與原來的屬性一起使用生產商專有擴展。原因是直到現在，大部分瀏覽器只支持部分 CSS3 屬性。最常見的私有屬性是用于 Webkit 核心瀏覽器的（比如 Safari），它們以 -webkit- 開始，以及 Gecko 核心的瀏覽器（比如，Firefox），以 -moz- 開始，還有 Konqueror（-khtml-）、Opera（-o-）以及 Internet Explorer（-ms-）都有它們自己的屬性擴展（目前只有 IE 8 支持 -ms- 前綴）。

那我們在開發中該如何去用 CSS3 呢？

我覺得首先是遵循一個優雅降級的原則，比如前面談到的圓角，我們可以針對 Firefox 和 Safari 等這些支持圓角的瀏覽器中應用 CSS 圓角，而那些不支持 CSS 圓角的瀏覽器則顯示為直角。其次就是對于不支持 CSS3 的瀏覽器可以使用 JavaScript 來實現，如 CSS3 任何元素支持 :hover 偽類，我們就可以對只支持鏈接 :hover 的 IE6 用 JS 來實現。最后就是在向用戶或老板推廣新技術的同時也要關注他們的目標與可行性，不能為了技術而技術。

希望本文能幫助到您！

點贊+轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）

關注｛我｝，享受文章首發體驗！

每周重點攻克一個前端技術難點。更多精彩前端內容私信我回復“教程”！

原文鏈接：https://fed.taobao.org/blog/2009/12/18/html5-and-css3-demystification/

作者：空雁

文共3663字，預計學習時長11分鐘

來源：Pexels

表單驗證是使用HTML5時的一個內置特性，HTML5提供了各種驗證屬性。作為瀏覽器端HTML和JavaScript的一部分。在將數據發送到服務器之前，我們可以使用它來驗證表單輸入。但是，我們應該信任發送的內容，所以最終驗證應該仍然在服務器上進行。

當表單輸入有效時，要素將顯示:valid 偽類樣式表。如果它是無效的，那么則出現:invalid 偽類樣式表。

當表單輸入無效時，瀏覽器將阻止表單提交并顯示錯誤信息。

表單驗證屬性

Pattern

Pattern應用于文本、檢索、鏈接、電話、郵件和密碼形式的輸入元素。

·它將正則表達式設置為數值，然后瀏覽器對其進行驗證。

Min

該屬性適用于范圍、數字、日期、月、周、時間、本地時間等類型的輸入元素。

·當輸入范圍或數字時，它會檢驗該值是否大于或等于Min屬性的給定值。

·當輸入日期、月份或星期時，它會檢驗日期是否為該屬性給定日期或在給定日期之后。

·當輸入時間時，它會檢驗日期和時刻是否都大于或等于該屬性給定時期。

Max

Max屬性是min屬性的對立面，它檢查輸入的內容是否小于或等于該屬性的給定值。

·當應用于范圍或數字類型的輸入時，它將檢查輸入的數字是否小于或等于min屬性的給定值

·當應用于日期、月份或星期等類型的元素時，它將檢查日期是否小于或等于該屬性值中給定的日期。

·當應用于時間類型輸入時，它將檢查日期和時間是否小于或等于min屬性的給定值。

Required

該屬性驗證輸入元素是否為空。

·它可以用于文本、檢索、鏈接、電話、郵件、密碼、日期、時間、月份、星期、數字、復選框、錄音、文檔，以及被選中內容和文本框等元素。

來源：Pexels

Step

Step檢驗輸入值是否為整數。

·若輸入日期類型的元素，它會檢查天數是否為整數。

·若輸入月份類型的元素，它會檢查月份數是否為整數。

·若輸入星期類型的元素，它會檢查星期數是否為整數。

·若輸入時間類型的元素，它會檢查秒數是否為整數。

·若輸入范圍和數字類型的元素，它會檢查范圍和數值是否為整數。

Minlength

Minlength屬性可應用于文本、檢索、鏈接、電話、電子郵、密碼和文本框類型的輸入元素。

·它檢查用戶輸入文本字數是否大于或等于該屬性值。

Maxlength

Maxlength屬性同樣可應用于文本、檢索、鏈接、電話、電子郵、密碼和文本框類型的輸入元素。

·它檢查用戶輸入文本字數是否小于或等于該屬性值。

應用表單驗證屬性

我們可以通過將表單驗證屬性添加到元素中來使用它們。例如，編寫一份以電子郵件地址作為輸入的表單。

第一步，輸入以下HTML語言：

<formid='form'>

  <labelfor="email">What's  your email address?</label>

  <inputid="email" name="email" requiredpattern="[^@]+@[^\.]+\..+">

  <buttontype='submit'>Submit</button>

</form>

在上述代碼中，輸入元素帶有required屬性，根據設定進行輸入。

同時，我們還以電子郵件地址的正則表達式作為值，對其添加pattern屬性。

接著如下所示，當輸入有效或無效時，我們通過添加樣式表來改變輸入元素的邊界：

input:invalid {

  border: 1px solid red

input:vvalid {

  border: 1px solid black

來源：view rawinput.css 平臺： GitHub

此處會用到文章開頭提及的偽類樣式來完成這一步驟。

最后，通過調用preventDefault來添加JavaScript代碼以防止本例中的表單提交。

constform = document.querySelector('#form');

form.onsubmit = (e) => {

 e.preventDefault();

再舉一個檢查輸入的長度和范圍的例子。比如，編寫如下 HTML代碼來獲取用戶的姓名和年齡：

<formid='form'>

  <labelfor="name">What's  your name?</label>

  <inputid="name" name="name" requiredminlength='5' maxlength='20'>

  <br>

  <spanid='name-too-short' hidden>Name is  too short</span>

  <spanid='name-too-long' hidden>Name is  too long</span>

  <br>

  <labelfor="age">What's  your age?</label>

  <inputid="age" name="age" type='number' requiredmin='0' max='150'>

  <br>

  <spanid='age-too-high' hidden>Age is too  high</span>

  <spanid='age-too-low' hidden>Age is too  low</span>

  <br>

  <buttontype='submit'>Submit</button>

</form>

輸入的姓名和年齡都具有長度和范圍屬性，當輸入無效時，可以看到以文中所示形式出現的輸入信息。

與例一相同，當輸入元素有效或無效時，輸入樣式表來更改輸入框邊界：

input:invalid {

  border: 1px solid red

input:vvalid {

 border: 1px solid black

最后，當輸入無效時可以通過JavaScript看到驗證信息：

const form = document.querySelector('#form');

const name = document.querySelector('#name');

const age = document.querySelector('#age');

const nameTooShort = document.querySelector('#name-too-short');

const nameTooLong = document.querySelector('#name-too-long');

const ageTooLow = document.querySelector('#age-too-low');

const ageTooHigh = document.querySelector('#age-too-high');

form.onsubmit= (e) => {

  e.preventDefault();

name.oninput= (e) => {

  nameTooShort.hidden=true;

  nameTooLong.hidden=true;

  if (e.srcElement.validity.tooShort) {

    nameTooShort.hidden=false;

if (e.srcElement.validity.tooLong) {

    nameTooLong.hidden=false;

age.oninput= (e) => {

  ageTooLow.hidden=true;

  ageTooHigh.hidden=true;

  if (e.srcElement.validity.rangeOverflow) {

    ageTooHigh.hidden=false;

if (e.srcElement.validity.rangeUnderflow) {

    ageTooLow.hidden=false;

在上述代碼中，將oninput事件處理程序設置為事件處理程序函數，以便檢查后續輸入的有效性。

在每個函數中，我先隱藏所有信息，這樣就不會看到過時的消息了。然后，根據設置的最小和最大長度來檢查名稱輸入是否太短或太長。

若出現任何錯誤，會在HTML中取消隱藏相應的信息。

來源：Pexels

同樣，我們根據長度的最大最小設定值來檢驗年齡輸入值是否在所屬區間內。若出現錯誤，我們會在HTML中取消隱藏相應的信息。

通過HTML5和JavaScript，不需要任何函數庫就可以檢驗各種類型輸入值的有效性。

我們可以檢驗長度、范圍、任何帶有正則表達式的模式等輸入元素，但在保存之前應當檢查服務器端，因為部分用戶仍可以破解瀏覽器端應用程序來跳過驗證。

留言點贊關注

我們一起分享AI學習與發展的干貨

如轉載，請后臺留言，遵守轉載規范

在線咨詢

上一篇：學習網頁制作并不難，HTML菜鳥教程，從這里開始第一課學習
下一篇：JAVASCRIPT WEBUPLOADER 分塊上傳

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

學習總結：適合小白的HTML5前端學習路線

HTML5

HTML5 新增和移除的元素

HTML5 對表單的支持

HTML5 DOM 變化

HTML5 的 Javascript APIs

CSS3

CSS3 在選擇器上面的支持

CSS3 在樣式上的支持

CSS3 對于動畫的支持

那我們在開發中該如何去用 CSS3 呢？

表單驗證屬性

應用表單驗證屬性

您的項目需求