接觸互聯網很多年，現在是做在線教育的講師，學習JAVA，學習前端都要將近十年的時間，到了2015年的時候互聯網成為了“國家戰略”而到了2017年互聯網進入了“超速發展期”現在很多行業的工作人員向轉行做HTMT5工程師。因為HTML5技術的不斷嫻熟，就連比爾蓋茨和喬布斯都說HTML5技術將會改變這個世界。

在校的學生無論是什么專業的，學習HTML5技術的也是非常的多，尤其是計算機專業的，除了JAVA之外，學習前端HTML5開發的人就是最多的，web進入2.0時代后，HTML5被推了出來。在一線城市的平均工資10507，算是一個不錯的收入。

前端的發展趨勢

現在主流的開發中包括頁面模板制作、頁面布局、 頁面特效、頁面美化、 網頁游戲、微網站制作、常見的APP等，都基于前端開發技術完成。

人才稀缺程度

前端開發工程師是目前緊缺的開發人才，從招聘網站分析，用人數量已經超過了主流編程語言Java、iOS和PHP等的開發人員數量。

前端求職優勢

這門課程在國內還沒有完全普及，都是做UI的或是做后端的轉過來的開發人員。所以只要能掌握我們課程60%就可以達到就業水平，并且工資相對于其他學科還要高出20%。

前端開發應該學習的內容如下：

學習HTML、CSS和DIV+CSS技術用來制作Web頁面；學習JavaScript、DOM、BOM等用建立開發基礎；學習photoshop和Axure等軟件應用，完成頁面UI設計；也要認識一下NodeJS和PHP加上數據庫等這樣的后端語言，方便前后端開發配合；學習HTML5、CSS3、響應式頁面布局、微網站制作等開發移動互聯網的應用；像Ajax、JQuery、jQuery

Mobile、Bootstrap、AngularJS等更是前端開發必學的高級技術；HTML5地理位置應用、離線應用、

webworker多線程實現、websocket、跨平臺開發技術和webAPP開發等，這些企業級應用技術也是

現在開發的主流；現在前端開發最熱門、要人最多，就是使用canvas開發網頁游戲動畫，以及會

用Cocos2d-js制作游戲等開發。

我是一個做web端開發十年的老師，主要是做在線教育的，這個是我的前端新手學習群296212562，有全套的免費的學習資料，晚上也有365天講的前端公開課，想學習前端的朋友可以加群，可以說我就是一個做廣告的老師，但同時也是想幫助每一個想學習的人學到真實的東西，毫無忌諱，心安理得。

一章 Web前端技術簡介

本章學習目標

• 了解Web前端技術和相關行業信息
• 了解Web前端開發工具
• 理解HTML基本原理

互聯網中的網頁大多數都是使用HTML格式展示到瀏覽者面前，因此，HTML是目前最流行的網頁制作語言。為了使網頁具有更好的擴展性和用戶體驗，CSS樣式表在網頁設計中有著重要的地位。在學習HTML和CSS之前，需要了解一些基本的互聯網相關知識，本章將從Web前端概述、Web前端開發工具和HTML入門基本知識開始，帶領讀者進行Web開發之旅。

1.1 Web前端概述

Web前端即指大家平常上網瀏覽的網頁，如上網瀏覽新聞、查詢快遞信息、淘寶購物等都是在瀏覽網頁。但網頁制作還需要了解與網頁相關的基本概念，下面將對Web前端的相關概念進行詳細講解。

1.1.1 初識Web前端

1991年8月6日，來自歐洲核子研究中心的科學家Tim Berners-Lee，啟動了世界上第一個可以正式訪問的網站（http: //info. cern. ch/），從此人類宣布了互聯網時代的到來。隨著互聯網的飛速發展，網站開發人員也變得熾手可熱，供不應求。據不完全統計截止2016年底，網站開發人員超過2000萬+。

Web前端開發是從網頁演變而來，名稱上有明顯的時代特征。隨著人們對用戶體驗的要求越來越高，前端開發的技術難度越來越大，Web前端開發這個職業也從設計和制作不分的局面中獨立出來。

早期的前端其實就是Table布局，后來發展到DIV+CSS網站重構，再到JS逐漸成為web前端開發的語言及web2.0的出現，涌現出相應的產品，如SNS、博客、微博等。人們對網頁的需求不斷增大，Web前端技術也正加速發展。

Web開發職位可分為網頁設計師（UI設計師）、Web前端開發工程師、Web后端工程師、數據庫工程師。下面來了解一下這四大職位的分工：

• 首先由UI設計師根據產品的需求做出網站效果圖，然后交付給Web前端工程師進行圖片切割和網頁制作。
• 數據庫工程師負責把網站數據進行存儲和優化處理。
• Web后端工程師負責把網站數據進行增刪改查等邏輯處理，并將操作的數據返給Web前端工程師進行數據的交互與顯示。

Web前端工程師能充分理解項目需求和設計需求，并與UI設計師、Web后端工程師緊密合作，產出高質量的網站展示層，為用戶呈現最好的界面交互體驗。

有一句話非常形象的形容了Web前端工程師的特點，“它是游走在二次元與二進制之間的魔法師!”。

1.1.1 Web前端三大核心技術

首先來了解下W3C組織，即萬維網聯盟，創建于1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。W3C專門負責制定網頁相關的標準，所以Web前端相關技術都是基于W3C標準實現的。

下面來介紹下Web前端開發所包括的三大核心技術，即HTML語言、CSS語言、JavaScript語言。

1.HTML語言

HTML全稱“Hyper Text Markup Language”，中文解釋為“超文本標記語言”，它是制作網頁的標準語言。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超文本標記語言的結構包括“頭”部分（Head）、和“主體”部分（Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。

2. CSS語言

CSS全稱“Cascading Style Sheet”，中文解釋為“層疊樣式表”，它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

3. JavaScript語言

JavaScript是一種屬于網絡的腳本語言，已經被廣泛用于Web應用開發，常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。它的解釋器被稱為JavaScript引擎，屬于瀏覽器的一部分，因此JavaScript代碼由瀏覽器邊解釋邊執行。 通常JavaScript腳本通過嵌入在HTML中來實現自身的功能。

Web前端三大核心技術就像板凳的三條腿，缺一不可。用圖片來表示三者之間的聯系，如圖1.2所示。

W3C組織規定，web標準需要將網頁的結構、樣式和行為三者進行分離。HTML +CSS+Javascript本質上構成一個MVC框架，即HTML用來描述網頁的結構（Model）、CSS用來描述網頁的結構（View）、Javascript用來描述網頁的行為即調度數據和實現某種展現邏輯（Controller）。本書主要講解HTML+CSS。

用一個蓋房子的例子來描述下三者之間的關系，首先需要把房子的地基和骨架搭建好，有一個良好的結構（HTML）。然后給房子刷上油漆和添加窗戶，對房子樣式進行美化（CSS）。最后給房子添加電梯和地暖，與住戶進行一些行為上的交互（JavaScript），這樣房子才算搭建完畢。下面來看一下在web前端中，三者的體現效果如圖1.3、1.4和1.5所示。

1.2 Web前端開發工具

俗話說得好，工欲善其事必先利其器。所以在HTML+CSS開發過程中，需要先來選擇適合的相關開發工具。HTML+CSS開發過程中主要涉及到三大類工具：瀏覽器、網頁編輯器、切圖軟件，本節就來介紹這三大類工具。

1.2.1 瀏覽器

瀏覽器是網頁的運行平臺，即可以把HTML文件展示在網頁中，供用戶可上網進行瀏覽的一種軟件。目前主流的瀏覽器有IE、Chrome、Firefox、Safari、Opera等，如圖1.6所示，由于某些因素，這些瀏覽器不能完全采用統一的Web標準，或者說不同的瀏覽器對同一個CSS樣式有不用的解析。這就導致了同樣的頁面在不同的瀏覽器下顯示效果可能不同。

不同用戶使用的瀏覽器可能不同，因此制作網頁時，需要保證該網頁兼容所有的主流瀏覽器。關于網頁制作中的兼容性問題及解決方案，會在后面的章節進行講解。下面介紹幾種主流的瀏覽器。

1. IE瀏覽器

IE是Internet Explorer簡稱，它是微軟公司推出的一款網頁瀏覽器，采用Trident內核實現，有6.0、7.0、8.0、9.0、10.0、11.0等版本。在IE7以前，中文直譯為“網探路者，但在IE7以后官方便直接俗稱"IE瀏覽器"。由于一些用戶仍然在使用低版本的瀏覽器，所以在制作網頁時，一般也需要兼容低版本的瀏覽器。一些其他的瀏覽器都是基于IE內核的，如360安全瀏覽器、搜狗瀏覽器等，只要兼容IE瀏覽器，這些基于IE內核的瀏覽器也都兼容。

2. Chrome瀏覽器

Chrome瀏覽器一般指Google Chrome，Google Chrome是一款由Google公司開發的一款設計簡單、高效的Web瀏覽器，采用V8引擎，可快速運行復雜的大型網站，從而降低瀏覽者訪問的等待時長。該瀏覽器基于其他開源軟件撰寫，采用Webkit、Blink內核實現，目標是提升穩定性、速度和安全性，并創造出簡單且有效率的使用者界面。本書運行環境采用Chrome瀏覽器，版本為 54.0.2840.5，如圖1.7所示。

3. Firefox瀏覽器

Firefox瀏覽器一般指Mozilla Firefox，中文俗稱“火狐”，是Mozilla公司出品的一款自由及開放源代碼Web瀏覽器，采用Gecko內核實現，支持多種操作系統，如Windows、Mac OS X及GNU/Linux等。

4. Safari瀏覽器

Safari是蘋果公司出品用于蘋果計算機的操作系統Mac OS X中的瀏覽器，采用Webkit內核實現，使用了KDE的KHTML作為瀏覽器的運算核心。無論在 Mac、PC 或 iPod touch 上運行，Safari 都可提供極致愉悅的網絡體驗方式，更不斷地改寫瀏覽器的定義。

5. Opera瀏覽器

Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁面標簽式瀏覽的Web瀏覽器，采用Presto內核實現，它是跨平臺瀏覽器可以在Windows、Mac和Linux三個操作系統平臺上運行。

注：瀏覽器內核負責對網頁語法進行解釋（如標準通用標記語言下的一個應用HTML、JavaScript）并渲染（顯示）網頁。 所以，通常所謂的瀏覽器內核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。

1.2.2 網頁編輯器

網頁編輯器是書寫HTML、CSS等代碼的工具軟件。一般常用的網頁編輯器有Dreamweaver、Sublime Text、WebStorm、Hbulider等，如圖1.8所示為常用的網頁編輯器的圖標。本教材采用Dreamweaver網頁編輯器 版本為CS6。Dreamweaver簡稱“DW”，具備完美的代碼提示功能和強大的輔助操作，因此它非常容易上手，是一款適合初學者學習和使用的網頁編輯器。

接下來講解如何使用Dreamweaver網頁編輯器進行網頁編程，軟件的安裝不再介紹，直接講解軟件安裝后如何使用。

運行DW軟件，進入軟件界面， 選擇菜單欄中【文件】→【新建】，打開新建文檔窗口，在【文檔類型】下拉列表中選擇HTML5，單擊【創建】按鈕，如圖1.9所示，即可創建一個空白的HTML文檔，如圖1.10所示。

為了讓初學者更好的使用DW工具，需要對DW進行一些初始化的設置，具體如下：

a) 工作區布局設置

運行DW軟件，進入軟件界面，將布局設置成統一的模式，選擇菜單欄中選擇【窗口】→【工作區布局(w)】→【經典】，如圖1.11。

2. 必備面板

設置經典模式后，需要調出三個常用的面板，分別選擇菜單欄【窗口】菜單下的【插入】、【屬性】、【文件】3個命令，如圖1.12所示。

3. 新建默認文檔設置

選擇菜單欄中【編輯】→【首選參數】（Ctrl+U），選中左側【分類】中的【新建文檔】，右邊就會出現相應的設置，選擇最常用的HTML文檔類型和編碼類型，本書設置為HTML5，如圖1.13所示。

新建文檔的首選參數設置后，新建HTML文檔時，DW就會按照默認文檔設置直接生成所需的代碼。

4. 瀏覽器設置

初學者計算機必備IE瀏覽器和Chrome瀏覽器，建議講DW的默認預覽瀏覽器設置為“Chrome瀏覽器”，快捷鍵F12是使用主瀏覽器預覽網頁，一般把IE瀏覽器設為次瀏覽器，快捷鍵Ctrl+F12，如圖1.14所示。

5. 代碼提示

為了加快寫代碼的速度，會用到代碼提示，DW中就有強大的代碼提示的功能，只需在【首選參數】對話框中設置代碼提示，選擇【代碼提示】選項，然后選中【結束標簽】選項中的第二項，單擊【確定】按鈕即可，如圖1.15所示。

1.2.3 切圖軟件

切圖軟件是對UI設計師設計出的效果圖進行切圖操作，也可以對網頁中涉及到的圖片進行修改等處理。常用的切圖軟件有Photoshop和Fireworks兩種。如圖1.16為常用切圖軟件的圖標，本教材采用Photoshop進行切圖，版本為CS5。Photoshop簡稱“PS”，它是一款專業性很強的圖片處理軟件，在第九章中將詳細的來學習如何利用Photoshop進行網頁的切圖操作。

1.3 HTML入門

1.3.1 什么是HTML

HTML的英語意思是：Hypertext Markup Language，即超文本標記語言,是一種用來制作超文本文檔的簡單標記語言。接下來將帶領讀者從語言、超文本、標記三部分進行理解HTML。

1．語言

HTML一種編程語言，有指定的語法規則。超文本傳輸協議規定了瀏覽器在運行 HTML 文檔時所遵循的規則和進行的操作。協議的制定使瀏覽器在運行超文本時有了統一的規則和標準。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺，自1990年以來HTML就一直被用作WWW（是World Wide Web的縮寫，也可簡寫WEB、中文叫做萬維網) 的信息表示語言，使用HTML語言描述的文件，需要通過WEB瀏覽器HTTP顯示出效果。

2. 超文本

所謂超文本，是因為它可以加入圖片、聲音、動畫、影視等內容，事實上每一個HTML文檔都是一種靜態的網頁文件，這個文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語言，它只是一種排版網頁中資料顯示位置的標記結構語言，易學易懂，非常簡單。

HTML的普遍應用就是通過單擊鼠標從一個主題跳轉到另一個主題，從一個頁面跳轉到另一個頁面與世界各地主機的文件鏈接。直接獲取相關的主題。如下所示：

通過HTML可以通過圖片格式和文字格式的設計實現出豐富多彩的風格：

<IMG SRC="文件名"> 
<FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT> 

通過HTML可以實現頁面之間的跳轉：

〈A HREF="文件路徑/文件名"></A> 

通過HTML可以展現多媒體的效果：

<EMBED SRC="音樂地址" AUTOSTART=true> 
<EMBED SRC="視頻地址" AUTOSTART=true> 

從上面我們可以看到HTML超文本文件時需要用到的一些標簽。

3. 標記

對于剛剛接觸超文本的讀者，可能不能理解一些用“<”和 “>”括起來的句子，它們稱為標記，也稱標簽，是用來劃分網頁的元素，以形成文本的布局、文字的格式及五彩繽紛的畫面。標簽通過指定某塊信息為段落或標題等來標識文檔某個部件。

在HTML中每個用來作標簽的符號都是一條命令、它告訴瀏覽器如何顯示文本。這些標簽均由"<"和">"符號以及一個字符串組成。如<head>、 <body>等。而瀏覽器的功能是對這些標記進行解釋，顯示出文字、圖像、動畫、播放聲音。這些標簽符號用“<標簽名字 屬性>”來表示。標簽分為單標簽和雙標簽兩大類，具體介紹如下：

• 單標簽指的是只存在一個標簽的寫法，如<meta>、<input>等。
• 雙標簽指的是存在一對標簽的寫法，如<head></head>、<body></body>等。注意在雙標簽中第一個標簽叫做起始標簽，第二個標簽叫做結束標簽，結束標簽需要在左尖括號后添加一個關閉符“/”。

HTML只是一個純文本文件。創建一個HTML文檔，需要HTML編輯器和WEB瀏覽器兩個工具。HTML編輯器是用于生成和保存HTML文檔的應用程序。WEB瀏覽器是用來打開WEB網頁文件，提供給我們查看WEB資源的客戶端程序。

1.3.2 HTML基本結構

HTML文檔是由一系列的元素和標簽組成。元素名不區分大小寫，HTML用標簽來規定元素的屬性和它在文件中的位置，HTML文檔分為頭部和主體兩部分，在文檔頭部對文檔進行一些必要的定義，主體部分是文檔要顯示的信息。其基本結構如例1-1所示。

1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 	 <meta charset="utf-8">
5 	 <title>標題</title>
6 </head>
7 <body>
8 	 內容
9 </body>
10 </html>

運行結果如圖1.17所示。

一個HTML文檔基本結構主要由文檔聲明（<!DOCTYPE HTML>）、HTML文檔（<html>）、文檔頭部（<head>）和文檔主體（<body>）四部分組成。接下來具體介紹這四個部分的內容。

1. 文檔聲明

<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。<!DOCTYPE> 聲明不是 HTML 標簽，它用于向瀏覽器說明當前文檔屬于哪種HTML或XHTML標準規范。必須在開頭處使用<!DOCTYPE>為所有的XHTML文檔指定XHTML版本和類型，這樣瀏覽器才能將網頁作為有效的XHTML文檔，并按照指定文檔類型進行解析。

<!DOCTYPE>聲明與瀏覽器的兼容性相關，如果沒有<!DOCTYPE>，就由瀏覽器決定如何展示HTML頁面，這時，不同的瀏覽器可能有多種顯示效果，這樣是不允許的。

2. HTML文檔

<html>標簽位于<!DOCTYPE>聲明之后，作用相當于在告知瀏覽器這是一個HTML文檔，<html></html>標簽限定了文檔的開始點和結束點，其中<html>表示網頁的開始，</html>表示網頁結束，網頁需要展示的所有內容都應該寫到<html></html>標簽的內部，<html>標簽也被稱為根標簽，指最外層的意思。

3. 文檔的頭部

<head></head>用于定義HTML文檔頭部信息，如圖1.17中的標題，也稱頭部標簽，在<html>標簽之后，用來封裝其他位于文檔頭部的標簽，如表1.1中的標簽。一個HTML文檔只能有一對<head></head>標簽，絕大多數文檔頭部包含的數據都不會真正作為內容顯示在頁面中。

上例中<meta charset="utf-8">指定網頁的編碼方式為utf-8。utf-8是一種網頁編碼規范，可以統一頁面顯示中文簡體繁體及其他語言（如英文，日文，韓文），這樣網頁就不會出現亂碼的情況。它屬于國際通用編碼方式。

4. 文檔的主體

<body></body>包含文檔要展示的所有內容，也稱主體標簽，網頁中顯示的文本、超鏈接、圖像、表格和列表等信息都必須在<body>內，如圖1.17中的內容，就是<body>內的信息，<body>中的內容是最終展示給用戶的。

HTML語言是不區分大小寫的，但建議文檔聲明采用大寫方式，其他部分都采用小寫方式。

1.3.3 運行第一個HTML程序

（1）新建一個空白HTML文檔，點擊“代碼”按鈕，默認為HTML基本結構。如圖1.18所示。

（2）修改<title>和<body>中的內容，按下Ctrl + S快捷鍵，進行文件的保存，文件后綴名為.html格式。如圖1.19所示。

（3）點擊“在瀏覽器中預覽/調試”按鈕，選擇chrome.exe瀏覽器進行預覽。或者通過雙擊.html文件進行預覽。如圖1.20所示。

到此本教材的第一個網頁就運行成功了，可以試著改變<title>和<body>中的內容。然后重新保存頁面并刷新瀏覽器進行預覽。

1.3.4 HTML注釋

在編寫HTML代碼時，經常要在一些關鍵代碼旁做一下注釋，這樣做的好處很多，如：方便理解代碼、方便查找相關代碼或是方便項目組里的其他程序員來了解你所寫的代碼，還可以方便自己以后對代碼的理解和修改。語法格式如下：

	<!--注釋的內容-->

“<!--”表示注釋的開始，“-->”表示注釋的結束。DW中自帶添加注釋功能，如圖1.21所示，也可手動添加注釋。

1.3.5 HTML屬性

使用HTML制作網頁時，如果想讓網頁的內容更豐富，如設置顯示文字的顏色為彩色，大小為30。此時如果僅僅使用HTML標簽默認顯示樣式已經不能滿足需求，就需要對HTML標簽的屬性加以設置，大多數標簽都有自己的一些屬性, 屬性要寫在始標簽內，屬性用于進一步改變顯示的效果, 各屬性之間無先后次序，可以省略而采用默認值;其語法格式如下：

<標簽名字 屬性1 屬性2 屬性3 … >內容</標簽名字> 

在語法格式中，標簽可以有多個屬性，必須寫在開始標簽中，位于標簽名之后。屬性與標簽之前需要一個空格隔開，多個屬性之間也用空格隔開。

作為一般的原則，大多數屬性值不用加雙引號。但是包括空格、“％”，“＃”等特殊字符的屬性值必須加入雙引號。為了好的習慣，提倡全部對屬性值加雙引號。如：

	<font color="#ff00ff" face="宋體" size="30">字體設置</font> 

注意：一定不要在“<”與標簽名之間輸入多余的空格，也不能在中文狀態下輸入這些標簽及屬性，否則瀏覽器不能正確的識別括號中的標志命令，從而無法正確的顯示信息。后面還會學習到更多其他的HTML屬性，這里讀者只要記住HTML屬性的基本格式就好。

1.4 本章小結

通過本章的學習，初步了解了Web前端技術和相關行業信息。學習到Web前端開發工具的使用，而且還運行了第一個HTML語言的網頁程序。本章中需要理解什么是HTML語言，HTML語言的基本格式，HTML語言的屬性設置等相關知識點。在下一章節中，將進一步來學習HTML這門語言。

1.5 習題

a) 填空題

(1) Web前端開發所包括的三大核心技術包含 、 、JavaScript語言。

(2) 超文本標記語言指的是 。

(3) HTML文檔包括 和 兩部分。

(4) HTML多個屬性之間分隔用 。

(5) 用于向瀏覽器說明當前文檔屬于哪種HTML或XHTML標準規范。

b) 選擇題

(1) 下列選項中，不屬于網站開發四大職位的是（ ）。

A．web前端開發工程師 B．數據庫開發工程師

C．測試開發工程師D．web后端開發工程師

(2) 下面哪個不屬于HTML基本結構（ ）。

A．<meta>B．<head>

C．<body>D．<html>

(3) 下面哪個不屬于五大瀏覽器（ ）。

A．Firefox瀏覽器B．Chrome瀏覽器

C．Safari瀏覽器D．360瀏覽器

(4) 下面哪個標簽限定了文檔的開始點和結束點（ ）。

A．<! DOCTYPE >B．<html>

C．<head>D．<body>

(5) 下面用來定義文檔標題的標簽是（ ）。

A．<style>B．<link>

C．<script>D．<title>

c) 思考題

(1) 請簡述什么是超文本標記語言？

(2) 請簡述HTML、CSS、JS三者的關系及職能劃分？

觀看視頻+：782542147

內容來源書籍：《HTML5從入門到精通》，一本Web前端實用性綜合技術圖書。

簡介：《HTML5從入門到精通》倡導“快樂學習，實戰就業”的理念，作為初學者高品質的入門教材之一，免費提供一站式教學服務包，附贈配套PPT、教學視頻、教學大綱、考試系統、測試題等資源。且書本內容覆蓋全面、講解詳細，其中包括標簽語義化、標簽使用規范、選擇器類型、盒模型、標簽分類、樣式重置、CSS優化、Photoshop切圖處理、整頁制作、CSS3新樣式、HTML5新功能等。與此同時，本教材通過總結、歸納HTML、CSS、CSS3動畫與3D及移動端布局與響應式開發等核心知識點，并從項目開發的實際需求入手，將理論知識與實際應用相結合，以此幫助初學者全面、系統、深入、透徹地理解HTML5的基礎知識和技術，使他們快速地成長為初級程序員，并擁有一定的項目開發經驗，從而在職場中擁有一個較高的起點。

習前端的小伙伴越來越多，問題也就越多，前面基礎部分還好一些，特別是一到框架的時候，難住了一大部分人，今天小猿圈web前端講師就為大家總結了HTML5主流框架的內容。

一、Bootstrap

全球數以百萬計的網站都是基于Bootstrap構建的。Bootstrap能讓所有開發者都能快速上手、所有設備都可以適配、所有項目都適用。此外，bootstrap的官網也有很多教程提供。

Bootstrap包含了十幾個自定義的jQuery插件，并自帶以下特性：全局的CSS設置、定義基本的HTML元素樣式、可擴展的class，以及一個先進的網格系統。

二、SUIMobile

SUIMobile是一套基于Framework7開發的UI庫。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，并且能兼容到iOS6.0+和Android4.0+，非常適合開發跨平臺WebApp。

SUIMobile的組件都是按照iOS風格設計的，，非常輕量，核心庫壓縮Gzip后的JS、CSS網絡傳輸體積總共只有52K，卻提供了20+個常用的組件。網站內有詳細的編碼介紹。

三、jQueryUI

jQueryUI主要分為3個部分：交互、微件和效果庫。主打代碼開源，操作繼承了jQuery的簡單特性，兼容各主流桌面瀏覽器。

四、jQuerymobile

jQueryMobile是針對觸屏智能手機與平板電腦的網頁開發框架。如果開發者了解jQuery，可以很容易的學習jQueryMobile。

以上就是小猿圈web前端講師對于html5主流框架的介紹，希望無論是初學還是專業前端，都能找到適合自己操作的框架，學習前端如果有不懂得地方可以到小猿圈網站尋找答案，里面有專業的講師團隊還有優秀的助教老師，等你來學習。