HTML5的學(xué)習(xí)網(wǎng)站有哪些？

TML5是現(xiàn)在前端開發(fā)中較為火熱的語言，許多朋友想要從零基礎(chǔ)開始通過學(xué)習(xí)來從事前端開發(fā)的行業(yè)，又或是已經(jīng)工作的程序員想要找一些資料，在搜索引擎上搜索相關(guān)知識(shí)，是許多人獲取知識(shí)的重要的途徑，但是面對(duì)五花八門的搜索結(jié)果，應(yīng)該選擇呢？

青島HTML5

1、W3C School

W3C School 是學(xué)習(xí)HTML5較好的資源之一，它擁有的教程都帶有例子，幾乎可以提供我們所需要的所有知識(shí)點(diǎn)。如果想從基礎(chǔ)開始學(xué)習(xí)HTML5的話，那么這個(gè)網(wǎng)站會(huì)就是一個(gè)不錯(cuò)的選擇。我們可以在上面找到到HTML5的所有元素，比如標(biāo)簽、圖像、圖形，以及無需多做其他操作，只需跟隨教程的教書步驟走即可，用簡(jiǎn)單的語言解釋和交互讓學(xué)習(xí)變得簡(jiǎn)單。

2、HTML Goodies

如果想要獲取學(xué)習(xí)HTML5的所有性能，那么HTML Goodies也是一個(gè)不錯(cuò)的選擇。在網(wǎng)站的左邊部分，我們可以看到細(xì)致的分類，讓我們能夠任意快速跳轉(zhuǎn)到自己想要開始學(xué)習(xí)的部分。

3、HTML5-tutorial

HTML5-tutorial可以讓我們了解HTML5的基本知識(shí)和要點(diǎn)，如何構(gòu)建一個(gè)網(wǎng)站、編輯和調(diào)試代碼進(jìn)行開發(fā)學(xué)習(xí)，也比較適合初學(xué)者入門學(xué)習(xí)。

4、HTML5 Doctor

HTML5 Doctor網(wǎng)站提供了許多內(nèi)容不錯(cuò)的文章，這些文章將會(huì)幫你更好的學(xué)習(xí)和實(shí)現(xiàn)HTML5開發(fā)。而且網(wǎng)站還有一個(gè)“Ask the Doctor”部分，方便我們向?qū)＜姨釂枺ㄟ^他們的專業(yè)講解解決我們現(xiàn)在所遇到的問題。

5、Html5 Rocks

如果開發(fā)人員想要在網(wǎng)站中實(shí)現(xiàn)HTML5，并開展HTML5編碼相關(guān)的研發(fā)，那么Html5 Rocks網(wǎng)站是不會(huì)讓我們失望的。在這個(gè)網(wǎng)站中能夠獲取HTML5的所有功能信息，以及學(xué)習(xí)如何在網(wǎng)站或應(yīng)用程序中實(shí)現(xiàn)。

在我們學(xué)習(xí)HTML5等前端開發(fā)知識(shí)的時(shí)候，有一個(gè)好的能夠讓我們查找資料方便的途徑，是能夠?yàn)槲覀児?jié)省不少時(shí)間的。但是這里要提醒初學(xué)者的是，學(xué)習(xí)理論知識(shí)固然是一件很重要的事情，但是動(dòng)手練習(xí)的重要性也是不能忽視的。

曾在網(wǎng)上看到過這樣一句話，想要編程達(dá)到初級(jí)水平，需要敲十萬行代碼。多動(dòng)手寫代碼，不僅可以幫助我們鞏固知識(shí)的記憶、加深知識(shí)點(diǎn)的印象，還能夠幫助我們找到自己學(xué)習(xí)時(shí)沒有注意到的問題。看別人的代碼，有用，但是那是別人的技術(shù)，只有我們自己動(dòng)手寫下的代碼，才是我們自己掌握的技術(shù)。

章先介紹一些HTML最基礎(chǔ)的考點(diǎn)，很多大長(zhǎng)面試官喜歡由淺入深地考察知識(shí)。而對(duì)于一些基礎(chǔ)問題的回答，很多同學(xué)反而因組織不好語言而給面試官留下不好的印象。本章節(jié)我們就帶大家一一整理和回顧。

1.1 DOCTYPE的作用

面試官：我們現(xiàn)在寫HTML代碼第一行通常是 !<DOCTYPE HTML>，請(qǐng)介紹一下DOCTYPE的作用（基礎(chǔ)題）

DOCTYPE標(biāo)簽是一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明，且必須聲明在文檔的第一行，來告知瀏覽器用何種文檔標(biāo)準(zhǔn)來解析這個(gè)網(wǎng)頁，不同的渲染模式會(huì)影響瀏覽器對(duì)CSS和JavaScript的解析標(biāo)準(zhǔn)。

面試官：瀏覽器解析文檔有哪幾種解析模式呢？（拓展題）

文檔的解析模式目前主要有 *兩種（注意：還有一種“準(zhǔn)標(biāo)準(zhǔn)模式”只在IE8瀏覽器里，目前主流瀏覽器已無需考慮）：

怪異模式（quirks mode）：此種模式會(huì)模擬更舊的瀏覽器的行為。如果沒有聲明DOCTYPE，瀏覽器默認(rèn)會(huì)以這種模式解析文檔。
標(biāo)準(zhǔn)模式（standards mode）：瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁面。

面試官：如何快速檢查頁面的解析模式？（發(fā)散題）

HTML文檔對(duì)象有個(gè) compatMode 屬性，用于記錄頁面的解析模式：

如果文檔處于“混雜模式”，則該屬性值為 BackCompat
如果文檔處于“標(biāo)準(zhǔn)模式”或者“準(zhǔn)標(biāo)準(zhǔn)模式(almost standards mode)”，則該屬性為 CSS1Compat

const mode=document.compatMode; // 頁面的解析模式
if (mode==="BackCompat") {
  // 渲染模式為混雜模式
}

1.2 HTML的語義化

面試官：什么是HTML語義化，語義化的作用是什么？（基礎(chǔ)題）

語義化是指使用恰當(dāng)語義的html標(biāo)簽，讓頁面具有良好的結(jié)構(gòu)與含義；比如<p>標(biāo)簽就代表段落，<article>代表正文內(nèi)容等等。語義化的作用有兩點(diǎn)：

開發(fā)者友好：使用語義類標(biāo)簽增強(qiáng)代碼的可讀性，開發(fā)者也能夠清晰地看出網(wǎng)頁的結(jié)構(gòu)，易維護(hù)；
機(jī)器友好：帶有語義的標(biāo)簽適合搜索引擎的爬蟲爬取有效信息，能快速生成網(wǎng)頁骨架或文章提綱，SEO友好。

面試官：你平時(shí)有哪些語義化的建議或最佳實(shí)踐？（發(fā)散題）

根據(jù)語義化的優(yōu)點(diǎn)，對(duì)于富文本內(nèi)容類的網(wǎng)站（如門戶、新聞網(wǎng)站），語義化利于SEO，對(duì)網(wǎng)站內(nèi)容的傳播有很大幫助，此類網(wǎng)站應(yīng)該重視和實(shí)踐語義化標(biāo)準(zhǔn)。而對(duì)于一些系統(tǒng)類網(wǎng)站的搭建，語義化就沒有那沒重要了，甚至刻意做語義化反而會(huì)影響開發(fā)者的效率，此類網(wǎng)站可以對(duì)頁面骨架做語義化，至于模塊的交互組件和表單等則無需刻意做語義化。

1.3 HTML5新增內(nèi)容考察

面試官：你知道HTML5有哪些新增的東西嗎？（基礎(chǔ)題）

HTML5新增的內(nèi)容確實(shí)不少，面試官不會(huì)要求你全部記下來，我們可以挑重要的東西來回答：

新的文檔解析順序：不再基于 *SGML；
全面支持CSS3：
加了一些語義化元素：<header>、<mainer>、<footer>、<section>、<nav>等
刪了一些樣式類元素：<font>、<big>、<center> 等
表單能力加強(qiáng)：<input>的新類型（date、email、url等）、新屬性（autocomplete、autofocus等）
新的屬性：ping（用于a與area）、charset（用于meta）、async（用于script）等
定位能力：navigator.geolocation
多媒體支持：<video>（視頻）、<audio>（音頻）等
2D/3D 制圖支持：支持svg、canvas繪圖和動(dòng)畫等
新的緩存策略：Localstorage、SessionStorage、IndexedDB等
新的網(wǎng)絡(luò)協(xié)議：WebSocket
新的跨域通信方案：XHTMLHttpRequest2、PostMessage......

拓展：什么是SGML

SGML 即Standard Globalized Markup Language 是用來定義標(biāo)準(zhǔn)的標(biāo)記語言，簡(jiǎn)單的說，就是定義文檔的元語言。
HTML 是基于SGML 的超鏈接語言，可以用于創(chuàng)建Web頁面。在DTD 內(nèi)部定義了標(biāo)簽的規(guī)則，DTD就是使用SGML 語言創(chuàng)建的。
HTML5不是基于SGML 語言的，因此不需要DTD ，它是一種全新的標(biāo)記語言，有自己的解析規(guī)則，HTML5的語法規(guī)則與之前版本有很大的差別，可以稱的上是一種全新的語言

1.4 meta標(biāo)簽

面試官：介紹一下<meta>標(biāo)簽的用途（基礎(chǔ)題）

meta標(biāo)簽由name和content兩個(gè)屬性來定義，來描述一個(gè)HTML網(wǎng)頁文檔的元信息，例如作者、日期和時(shí)間、網(wǎng)頁描述、關(guān)鍵詞、頁面刷新等，除了一些http標(biāo)準(zhǔn)規(guī)定了一些name作為大家使用的共識(shí)，開發(fā)者也可以自定義name

面試官：移動(dòng)端適配的viewpoint，能否手寫一下？（拓展題）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1.5 src和href的區(qū)別

面試官：介紹一下src和href的區(qū)別（基礎(chǔ)題）

src是指向外部資源的位置，指向的內(nèi)容會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在的位置，在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，如JS腳本，img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，所以一般JS腳本會(huì)放在底部而不是頭部。
href是指向網(wǎng)絡(luò)資源所在位置（的超鏈接），用來建立和當(dāng)前元素或文檔之間的連接，當(dāng)瀏覽器識(shí)別到它他指向的文件時(shí)，就會(huì)并行下載資源，不會(huì)停止對(duì)當(dāng)前文檔的處理

1.6 img標(biāo)簽的srcset

面試官：介紹一下<img>標(biāo)簽的srcset和sizes屬性的作用（基礎(chǔ)題）

可以設(shè)計(jì)響應(yīng)式圖片，我們可以使用兩個(gè)新的屬性srcset 和 sizes來提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個(gè)資源

srcset 定義了我們?cè)试S瀏覽器選擇的圖像集，以及每個(gè)圖像的大小
sizes 定義了一組媒體條件（例如屏幕寬度）并且指明當(dāng)某些媒體條件為真時(shí)，什么樣的圖片尺寸是最佳選擇

所以，有了這些屬性，瀏覽器會(huì)：

查看設(shè)備寬度
檢查 sizes 列表中哪個(gè)媒體條件是第一個(gè)為真
查看給予該媒體查詢的槽大小
加載 srcset 列表中引用的最接近所選的槽大小的圖像
srcset提供了根據(jù)屏幕條件選取圖片的能力

<img src="clock-demo-thumb-200.png"
     alt="Clock"
     srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
     sizes="(min-width: 600px) 200px, 50vw"
/>

1.7 script標(biāo)簽的defer和async

面試官：介紹一下<script>標(biāo)簽的defer和async的作用（基礎(chǔ)題）

defer：瀏覽器指示腳本在文檔被解析后執(zhí)行，<script>被異步加載后并不會(huì)立刻執(zhí)行，而是等待文檔被解析完畢后執(zhí)行
async：同樣是異步加載腳本，區(qū)別是腳本加載完畢后立即執(zhí)行，這導(dǎo)致async屬性下的腳本是亂序的，對(duì)于<script>有先后依賴關(guān)系的情況，并不適用
如下圖：藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時(shí)間，這倆都是針對(duì)腳本的；綠色線代表 HTML 解析

1.8 前端數(shù)據(jù)存儲(chǔ)的方式

面試官：前端有哪幾種數(shù)據(jù)存儲(chǔ)方式？（基礎(chǔ)題）

主要的存儲(chǔ)方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它們的優(yōu)缺點(diǎn)如下：

Cookie：在HTML5標(biāo)準(zhǔn)前本地儲(chǔ)存的主要方式
- 優(yōu)點(diǎn)是兼容性好，請(qǐng)求頭自帶cookie方便可以和服務(wù)端進(jìn)行交互
- 缺點(diǎn)是大小只有4k，請(qǐng)求頭攜帶cookie浪費(fèi)流量，每個(gè)domain限制20個(gè)cookie，JS無法直接操作，需要自行封裝

LocalStorage：以鍵值對(duì)為標(biāo)準(zhǔn)的數(shù)據(jù)存儲(chǔ)方式
- 優(yōu)點(diǎn)是操作方便，永久性儲(chǔ)存（除非手動(dòng)刪除），大小為5M
- 缺點(diǎn)是兼容IE8+

SessionStorage：與localStorage基本類似，區(qū)別是**sessionStorage當(dāng)頁面關(guān)閉后會(huì)被清理
- 優(yōu)點(diǎn)是會(huì)話級(jí)隨存隨取，不占用本地空間，操作方便
- 缺點(diǎn)是不能在所有同源窗口中共享，是會(huì)話級(jí)別的儲(chǔ)存方式，兼容IE8+

IndexedDB：是被正式納入HTML5標(biāo)準(zhǔn)的數(shù)據(jù)庫(kù)儲(chǔ)存方案，它是NoSQL數(shù)據(jù)庫(kù)，用鍵值對(duì)進(jìn)行儲(chǔ)存，可以進(jìn)行快速讀取操作
- 優(yōu)點(diǎn)是存儲(chǔ)量更大，非常適合web場(chǎng)景，同時(shí)支持JS進(jìn)行操作，非常方便
- 缺點(diǎn)是兼容性IE8+

WebSQL：類似SQLite，是真正意義上的關(guān)系型數(shù)據(jù)庫(kù)，用sql進(jìn)行操作
- 優(yōu)點(diǎn)是關(guān)系型數(shù)據(jù)庫(kù)，適合大型的離線web應(yīng)用
- 缺點(diǎn)是JS需要通過transaction操作sql，火狐瀏覽器不支持

拓展：如何操作webSql

// WebSql操作實(shí)例
var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;

// 建表=> 插入=> 刪除
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
  tx.executeSql('DELETE FROM LOGS  WHERE id=1');
  msg='<p>數(shù)據(jù)表已創(chuàng)建，且插入了兩條數(shù)據(jù)，然后又刪除了第一條。</p>';
  document.querySelector('#status').innerHTML=msg;
});

1.9 WebSocket考點(diǎn)

面試官：介紹一下webSocket的特點(diǎn)和作用（基礎(chǔ)題）

WebSocket 是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。它允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。

在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送

本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布！

年來HTML5培訓(xùn)開發(fā)非常的火爆，相比較其他編程語言，HTML5開發(fā)還是比較簡(jiǎn)單且受歡迎的，本篇文章扣丁學(xué)堂小編就帶大家看一下HTML5培訓(xùn)應(yīng)該學(xué)習(xí)的知識(shí)有哪些。

1.HTML

HTML是網(wǎng)頁最基本的元素，主要控制網(wǎng)頁的結(jié)構(gòu)、字體等，最初發(fā)明網(wǎng)頁時(shí)只有HTML語言，并沒有CSS語言，HTML常用的標(biāo)簽包括HTML結(jié)構(gòu)、HTML表格、列表等。

2.CSS

隨著時(shí)代的發(fā)展，萬惡的IE6終于退市了，市場(chǎng)份額占比漸漸少了，目前還有極少量的公司要求兼容IE6瀏覽器，但，漸漸的這些兼容需求會(huì)逐漸消失……對(duì)于IE6，小編的建議是，不要太糾結(jié)于每個(gè)bug，主要原因在于，IE6的問題通常源于兩種原因，其一在于瀏覽器自身的問題，其二則在于容錯(cuò)性相對(duì)較差。對(duì)于第一方面原因引發(fā)的問題，個(gè)人覺得沒有什么太大的必要去研究了，而對(duì)于第二類問題，使IE6能夠成為輔助我們檢查自己代碼質(zhì)量的工具。

3.HTML5

HTML5新標(biāo)簽包括header、nav、article、section、aside、footer，還是比較容易掌握的，但與CSS3結(jié)合起來使用，才能體現(xiàn)其強(qiáng)大。

4.CSS3

CSS3在CSS基礎(chǔ)上增加了不少屬性，除了常用的屬性(如圓角邊框，陰影，過渡，變形，動(dòng)畫)之外，還有圖像邊框，多色彩邊框，倒影，蒙版，跑馬燈，漸變，分欄，彈性布局，濾鏡等等。但由于CSS3還比較新，因此，各個(gè)瀏覽器的兼容性也需要花費(fèi)很大精力研究一番。

5.JS

其實(shí)，JS中的知識(shí)是最多的，最基礎(chǔ)的是原生js，還需要學(xué)習(xí)著名的node.js與angular js等，js的框架比較多，從層出不窮的各種標(biāo)題就可以發(fā)現(xiàn)，什么二十種優(yōu)秀的圖表制圖框架，十種絢麗的大圖滾動(dòng)插件，八個(gè)值得你擁有的表單驗(yàn)證插件等。但掌握框架后，確實(shí)可以給你的工作帶來很多便利，善用框架，讓開發(fā)變得更容易。

在HTML5培訓(xùn)中，基礎(chǔ)知識(shí)大概涵蓋這幾類。除了以上基本知識(shí)點(diǎn)以外，還要清楚地了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理以及存在的各種Bug。

想要學(xué)習(xí)HTML5的小伙伴就選擇扣丁學(xué)堂吧，扣丁學(xué)堂不僅有專業(yè)的老師和與時(shí)俱進(jìn)的課程體系，還有大量的HTML5視頻教程供學(xué)員觀看學(xué)習(xí)，想要學(xué)好HTML5的小伙伴抓緊時(shí)間行動(dòng)吧。扣丁學(xué)堂H5技術(shù)交流群：559883758。

【關(guān)注微信公眾號(hào)獲取更多學(xué)習(xí)資料】

在線咨詢

上一篇：什么是模版型網(wǎng)站？
下一篇：Angular9+Ant構(gòu)建一個(gè)后臺(tái)管理系統(tǒng)（三）