整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
接觸互聯(lián)網(wǎng)很多年，現(xiàn)在是做在線教育的講師，學(xué)習(xí)JAVA，學(xué)習(xí)前端都要將近十年的時(shí)間，到了2015年的時(shí)候互聯(lián)網(wǎng)成為了“國(guó)家戰(zhàn)略”而到了2017年互聯(lián)網(wǎng)進(jìn)入了“超速發(fā)展期”現(xiàn)在很多行業(yè)的工作人員向轉(zhuǎn)行做HTMT5工程師。因?yàn)镠TML5技術(shù)的不斷嫻熟，就連比爾蓋茨和喬布斯都說HTML5技術(shù)將會(huì)改變這個(gè)世界。
在校的學(xué)生無論是什么專業(yè)的，學(xué)習(xí)HTML5技術(shù)的也是非常的多，尤其是計(jì)算機(jī)專業(yè)的，除了JAVA之外，學(xué)習(xí)前端HTML5開發(fā)的人就是最多的，web進(jìn)入2.0時(shí)代后，HTML5被推了出來。在一線城市的平均工資10507，算是一個(gè)不錯(cuò)的收入。
現(xiàn)在主流的開發(fā)中包括頁(yè)面模板制作、頁(yè)面布局、 頁(yè)面特效、頁(yè)面美化、 網(wǎng)頁(yè)游戲、微網(wǎng)站制作、常見的APP等，都基于前端開發(fā)技術(shù)完成。
前端開發(fā)工程師是目前緊缺的開發(fā)人才，從招聘網(wǎng)站分析，用人數(shù)量已經(jīng)超過了主流編程語言Java、iOS和PHP等的開發(fā)人員數(shù)量。
這門課程在國(guó)內(nèi)還沒有完全普及，都是做UI的或是做后端的轉(zhuǎn)過來的開發(fā)人員。所以只要能掌握我們課程60%就可以達(dá)到就業(yè)水平，并且工資相對(duì)于其他學(xué)科還要高出20%。
學(xué)習(xí)HTML、CSS和DIV+CSS技術(shù)用來制作Web頁(yè)面；學(xué)習(xí)JavaScript、DOM、BOM等用建立開發(fā)基礎(chǔ)；學(xué)習(xí)photoshop和Axure等軟件應(yīng)用，完成頁(yè)面UI設(shè)計(jì)；也要認(rèn)識(shí)一下NodeJS和PHP加上數(shù)據(jù)庫(kù)等這樣的后端語言，方便前后端開發(fā)配合；學(xué)習(xí)HTML5、CSS3、響應(yīng)式頁(yè)面布局、微網(wǎng)站制作等開發(fā)移動(dòng)互聯(lián)網(wǎng)的應(yīng)用；像Ajax、JQuery、jQuery
Mobile、Bootstrap、AngularJS等更是前端開發(fā)必學(xué)的高級(jí)技術(shù)；HTML5地理位置應(yīng)用、離線應(yīng)用、
webworker多線程實(shí)現(xiàn)、websocket、跨平臺(tái)開發(fā)技術(shù)和webAPP開發(fā)等，這些企業(yè)級(jí)應(yīng)用技術(shù)也是
現(xiàn)在開發(fā)的主流；現(xiàn)在前端開發(fā)最熱門、要人最多，就是使用canvas開發(fā)網(wǎng)頁(yè)游戲動(dòng)畫，以及會(huì)
用Cocos2d-js制作游戲等開發(fā)。
我是一個(gè)做web端開發(fā)十年的老師，主要是做在線教育的，這個(gè)是我的前端新手學(xué)習(xí)群296212562，有全套的免費(fèi)的學(xué)習(xí)資料，晚上也有365天講的前端公開課，想學(xué)習(xí)前端的朋友可以加群，可以說我就是一個(gè)做廣告的老師，但同時(shí)也是想幫助每一個(gè)想學(xué)習(xí)的人學(xué)到真實(shí)的東西，毫無忌諱，心安理得。
一章 Web前端技術(shù)簡(jiǎn)介
本章學(xué)習(xí)目標(biāo)
互聯(lián)網(wǎng)中的網(wǎng)頁(yè)大多數(shù)都是使用HTML格式展示到瀏覽者面前，因此，HTML是目前最流行的網(wǎng)頁(yè)制作語言。為了使網(wǎng)頁(yè)具有更好的擴(kuò)展性和用戶體驗(yàn)，CSS樣式表在網(wǎng)頁(yè)設(shè)計(jì)中有著重要的地位。在學(xué)習(xí)HTML和CSS之前，需要了解一些基本的互聯(lián)網(wǎng)相關(guān)知識(shí)，本章將從Web前端概述、Web前端開發(fā)工具和HTML入門基本知識(shí)開始，帶領(lǐng)讀者進(jìn)行Web開發(fā)之旅。
1.1 Web前端概述
Web前端即指大家平常上網(wǎng)瀏覽的網(wǎng)頁(yè)，如上網(wǎng)瀏覽新聞、查詢快遞信息、淘寶購(gòu)物等都是在瀏覽網(wǎng)頁(yè)。但網(wǎng)頁(yè)制作還需要了解與網(wǎng)頁(yè)相關(guān)的基本概念，下面將對(duì)Web前端的相關(guān)概念進(jìn)行詳細(xì)講解。
1.1.1 初識(shí)Web前端
1991年8月6日，來自歐洲核子研究中心的科學(xué)家Tim Berners-Lee，啟動(dòng)了世界上第一個(gè)可以正式訪問的網(wǎng)站（http: //info. cern. ch/），從此人類宣布了互聯(lián)網(wǎng)時(shí)代的到來。隨著互聯(lián)網(wǎng)的飛速發(fā)展，網(wǎng)站開發(fā)人員也變得熾手可熱，供不應(yīng)求。據(jù)不完全統(tǒng)計(jì)截止2016年底，網(wǎng)站開發(fā)人員超過2000萬+。
Web前端開發(fā)是從網(wǎng)頁(yè)演變而來，名稱上有明顯的時(shí)代特征。隨著人們對(duì)用戶體驗(yàn)的要求越來越高，前端開發(fā)的技術(shù)難度越來越大，Web前端開發(fā)這個(gè)職業(yè)也從設(shè)計(jì)和制作不分的局面中獨(dú)立出來。
早期的前端其實(shí)就是Table布局，后來發(fā)展到DIV+CSS網(wǎng)站重構(gòu)，再到JS逐漸成為web前端開發(fā)的語言及web2.0的出現(xiàn)，涌現(xiàn)出相應(yīng)的產(chǎn)品，如SNS、博客、微博等。人們對(duì)網(wǎng)頁(yè)的需求不斷增大，Web前端技術(shù)也正加速發(fā)展。
Web開發(fā)職位可分為網(wǎng)頁(yè)設(shè)計(jì)師（UI設(shè)計(jì)師）、Web前端開發(fā)工程師、Web后端工程師、數(shù)據(jù)庫(kù)工程師。下面來了解一下這四大職位的分工：
Web前端工程師能充分理解項(xiàng)目需求和設(shè)計(jì)需求，并與UI設(shè)計(jì)師、Web后端工程師緊密合作，產(chǎn)出高質(zhì)量的網(wǎng)站展示層，為用戶呈現(xiàn)最好的界面交互體驗(yàn)。
圖1.1網(wǎng)站開發(fā)模式
有一句話非常形象的形容了Web前端工程師的特點(diǎn)，“它是游走在二次元與二進(jìn)制之間的魔法師!”。
1.1.1 Web前端三大核心技術(shù)
首先來了解下W3C組織，即萬維網(wǎng)聯(lián)盟，創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。W3C專門負(fù)責(zé)制定網(wǎng)頁(yè)相關(guān)的標(biāo)準(zhǔn)，所以Web前端相關(guān)技術(shù)都是基于W3C標(biāo)準(zhǔn)實(shí)現(xiàn)的。
下面來介紹下Web前端開發(fā)所包括的三大核心技術(shù)，即HTML語言、CSS語言、JavaScript語言。
1.HTML語言
HTML全稱“Hyper Text Markup Language”，中文解釋為“超文本標(biāo)記語言”，它是制作網(wǎng)頁(yè)的標(biāo)準(zhǔn)語言。“超文本”就是指頁(yè)面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超文本標(biāo)記語言的結(jié)構(gòu)包括“頭”部分（Head）、和“主體”部分（Body），其中“頭”部提供關(guān)于網(wǎng)頁(yè)的信息，“主體”部分提供網(wǎng)頁(yè)的具體內(nèi)容。
2. CSS語言
CSS全稱“Cascading Style Sheet”，中文解釋為“層疊樣式表”，它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
3. JavaScript語言
JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言，已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，常用來為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。它的解釋器被稱為JavaScript引擎，屬于瀏覽器的一部分，因此JavaScript代碼由瀏覽器邊解釋邊執(zhí)行。 通常JavaScript腳本通過嵌入在HTML中來實(shí)現(xiàn)自身的功能。
Web前端三大核心技術(shù)就像板凳的三條腿，缺一不可。用圖片來表示三者之間的聯(lián)系，如圖1.2所示。
圖1.2 三大核心技術(shù)
W3C組織規(guī)定，web標(biāo)準(zhǔn)需要將網(wǎng)頁(yè)的結(jié)構(gòu)、樣式和行為三者進(jìn)行分離。HTML +CSS+Javascript本質(zhì)上構(gòu)成一個(gè)MVC框架，即HTML用來描述網(wǎng)頁(yè)的結(jié)構(gòu)（Model）、CSS用來描述網(wǎng)頁(yè)的結(jié)構(gòu)（View）、Javascript用來描述網(wǎng)頁(yè)的行為即調(diào)度數(shù)據(jù)和實(shí)現(xiàn)某種展現(xiàn)邏輯（Controller）。本書主要講解HTML+CSS。
用一個(gè)蓋房子的例子來描述下三者之間的關(guān)系，首先需要把房子的地基和骨架搭建好，有一個(gè)良好的結(jié)構(gòu)（HTML）。然后給房子刷上油漆和添加窗戶，對(duì)房子樣式進(jìn)行美化（CSS）。最后給房子添加電梯和地暖，與住戶進(jìn)行一些行為上的交互（JavaScript），這樣房子才算搭建完畢。下面來看一下在web前端中，三者的體現(xiàn)效果如圖1.3、1.4和1.5所示。
圖1.3 僅僅使用HTML的文字
圖1.4 在HTML基礎(chǔ)上加入CSS樣式
圖1.5 加入JavaScript鼠標(biāo)劃入效果
1.2 Web前端開發(fā)工具
俗話說得好，工欲善其事必先利其器。所以在HTML+CSS開發(fā)過程中，需要先來選擇適合的相關(guān)開發(fā)工具。HTML+CSS開發(fā)過程中主要涉及到三大類工具：瀏覽器、網(wǎng)頁(yè)編輯器、切圖軟件，本節(jié)就來介紹這三大類工具。
1.2.1 瀏覽器
瀏覽器是網(wǎng)頁(yè)的運(yùn)行平臺(tái)，即可以把HTML文件展示在網(wǎng)頁(yè)中，供用戶可上網(wǎng)進(jìn)行瀏覽的一種軟件。目前主流的瀏覽器有IE、Chrome、Firefox、Safari、Opera等，如圖1.6所示，由于某些因素，這些瀏覽器不能完全采用統(tǒng)一的Web標(biāo)準(zhǔn)，或者說不同的瀏覽器對(duì)同一個(gè)CSS樣式有不用的解析。這就導(dǎo)致了同樣的頁(yè)面在不同的瀏覽器下顯示效果可能不同。
圖1.6 主流瀏覽器
不同用戶使用的瀏覽器可能不同，因此制作網(wǎng)頁(yè)時(shí)，需要保證該網(wǎng)頁(yè)兼容所有的主流瀏覽器。關(guān)于網(wǎng)頁(yè)制作中的兼容性問題及解決方案，會(huì)在后面的章節(jié)進(jìn)行講解。下面介紹幾種主流的瀏覽器。
1. IE瀏覽器
IE是Internet Explorer簡(jiǎn)稱，它是微軟公司推出的一款網(wǎng)頁(yè)瀏覽器，采用Trident內(nèi)核實(shí)現(xiàn)，有6.0、7.0、8.0、9.0、10.0、11.0等版本。在IE7以前，中文直譯為“網(wǎng)探路者，但在IE7以后官方便直接俗稱"IE瀏覽器"。由于一些用戶仍然在使用低版本的瀏覽器，所以在制作網(wǎng)頁(yè)時(shí)，一般也需要兼容低版本的瀏覽器。一些其他的瀏覽器都是基于IE內(nèi)核的，如360安全瀏覽器、搜狗瀏覽器等，只要兼容IE瀏覽器，這些基于IE內(nèi)核的瀏覽器也都兼容。
2. Chrome瀏覽器
Chrome瀏覽器一般指Google Chrome，Google Chrome是一款由Google公司開發(fā)的一款設(shè)計(jì)簡(jiǎn)單、高效的Web瀏覽器，采用V8引擎，可快速運(yùn)行復(fù)雜的大型網(wǎng)站，從而降低瀏覽者訪問的等待時(shí)長(zhǎng)。該瀏覽器基于其他開源軟件撰寫，采用Webkit、Blink內(nèi)核實(shí)現(xiàn)，目標(biāo)是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡(jiǎn)單且有效率的使用者界面。本書運(yùn)行環(huán)境采用Chrome瀏覽器，版本為 54.0.2840.5，如圖1.7所示。
圖1.7 Chrome瀏覽器首頁(yè)
3. Firefox瀏覽器
Firefox瀏覽器一般指Mozilla Firefox，中文俗稱“火狐”，是Mozilla公司出品的一款自由及開放源代碼Web瀏覽器，采用Gecko內(nèi)核實(shí)現(xiàn)，支持多種操作系統(tǒng)，如Windows、Mac OS X及GNU/Linux等。
4. Safari瀏覽器
Safari是蘋果公司出品用于蘋果計(jì)算機(jī)的操作系統(tǒng)Mac OS X中的瀏覽器，采用Webkit內(nèi)核實(shí)現(xiàn)，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心。無論在 Mac、PC 或 iPod touch 上運(yùn)行，Safari 都可提供極致愉悅的網(wǎng)絡(luò)體驗(yàn)方式，更不斷地改寫瀏覽器的定義。
5. Opera瀏覽器
Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁(yè)面標(biāo)簽式瀏覽的Web瀏覽器，采用Presto內(nèi)核實(shí)現(xiàn)，它是跨平臺(tái)瀏覽器可以在Windows、Mac和Linux三個(gè)操作系統(tǒng)平臺(tái)上運(yùn)行。
注：瀏覽器內(nèi)核負(fù)責(zé)對(duì)網(wǎng)頁(yè)語法進(jìn)行解釋（如標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用HTML、JavaScript）并渲染（顯示）網(wǎng)頁(yè)。 所以，通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容以及頁(yè)面的格式信息。
1.2.2 網(wǎng)頁(yè)編輯器
網(wǎng)頁(yè)編輯器是書寫HTML、CSS等代碼的工具軟件。一般常用的網(wǎng)頁(yè)編輯器有Dreamweaver、Sublime Text、WebStorm、Hbulider等，如圖1.8所示為常用的網(wǎng)頁(yè)編輯器的圖標(biāo)。本教材采用Dreamweaver網(wǎng)頁(yè)編輯器 版本為CS6。Dreamweaver簡(jiǎn)稱“DW”，具備完美的代碼提示功能和強(qiáng)大的輔助操作，因此它非常容易上手，是一款適合初學(xué)者學(xué)習(xí)和使用的網(wǎng)頁(yè)編輯器。
圖1.8 常用網(wǎng)頁(yè)編輯器
接下來講解如何使用Dreamweaver網(wǎng)頁(yè)編輯器進(jìn)行網(wǎng)頁(yè)編程，軟件的安裝不再介紹，直接講解軟件安裝后如何使用。
運(yùn)行DW軟件，進(jìn)入軟件界面， 選擇菜單欄中【文件】→【新建】，打開新建文檔窗口，在【文檔類型】下拉列表中選擇HTML5，單擊【創(chuàng)建】按鈕，如圖1.9所示，即可創(chuàng)建一個(gè)空白的HTML文檔，如圖1.10所示。
圖1.9 新建文檔窗口
圖1.10 空白HTML文檔
為了讓初學(xué)者更好的使用DW工具，需要對(duì)DW進(jìn)行一些初始化的設(shè)置，具體如下：
a) 工作區(qū)布局設(shè)置
運(yùn)行DW軟件，進(jìn)入軟件界面，將布局設(shè)置成統(tǒng)一的模式，選擇菜單欄中選擇【窗口】→【工作區(qū)布局(w)】→【經(jīng)典】，如圖1.11。
圖1.11 初始化工作區(qū)布局
2. 必備面板
設(shè)置經(jīng)典模式后，需要調(diào)出三個(gè)常用的面板，分別選擇菜單欄【窗口】菜單下的【插入】、【屬性】、【文件】3個(gè)命令，如圖1.12所示。
圖1.12 初始化必備面板
3. 新建默認(rèn)文檔設(shè)置
選擇菜單欄中【編輯】→【首選參數(shù)】（Ctrl+U），選中左側(cè)【分類】中的【新建文檔】，右邊就會(huì)出現(xiàn)相應(yīng)的設(shè)置，選擇最常用的HTML文檔類型和編碼類型，本書設(shè)置為HTML5，如圖1.13所示。
圖1.13 默認(rèn)文檔設(shè)置
新建文檔的首選參數(shù)設(shè)置后，新建HTML文檔時(shí)，DW就會(huì)按照默認(rèn)文檔設(shè)置直接生成所需的代碼。
4. 瀏覽器設(shè)置
初學(xué)者計(jì)算機(jī)必備IE瀏覽器和Chrome瀏覽器，建議講DW的默認(rèn)預(yù)覽瀏覽器設(shè)置為“Chrome瀏覽器”，快捷鍵F12是使用主瀏覽器預(yù)覽網(wǎng)頁(yè)，一般把IE瀏覽器設(shè)為次瀏覽器，快捷鍵Ctrl+F12，如圖1.14所示。
圖1.14 默認(rèn)瀏覽器設(shè)置
5. 代碼提示
為了加快寫代碼的速度，會(huì)用到代碼提示，DW中就有強(qiáng)大的代碼提示的功能，只需在【首選參數(shù)】對(duì)話框中設(shè)置代碼提示，選擇【代碼提示】選項(xiàng)，然后選中【結(jié)束標(biāo)簽】選項(xiàng)中的第二項(xiàng)，單擊【確定】按鈕即可，如圖1.15所示。
圖1.15 代碼提示設(shè)置
1.2.3 切圖軟件
切圖軟件是對(duì)UI設(shè)計(jì)師設(shè)計(jì)出的效果圖進(jìn)行切圖操作，也可以對(duì)網(wǎng)頁(yè)中涉及到的圖片進(jìn)行修改等處理。常用的切圖軟件有Photoshop和Fireworks兩種。如圖1.16為常用切圖軟件的圖標(biāo)，本教材采用Photoshop進(jìn)行切圖，版本為CS5。Photoshop簡(jiǎn)稱“PS”，它是一款專業(yè)性很強(qiáng)的圖片處理軟件，在第九章中將詳細(xì)的來學(xué)習(xí)如何利用Photoshop進(jìn)行網(wǎng)頁(yè)的切圖操作。
圖1.16 常用切圖軟件
1.3 HTML入門
1.3.1 什么是HTML
HTML的英語意思是：Hypertext Markup Language，即超文本標(biāo)記語言,是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言。接下來將帶領(lǐng)讀者從語言、超文本、標(biāo)記三部分進(jìn)行理解HTML。
1．語言
HTML一種編程語言，有指定的語法規(guī)則。超文本傳輸協(xié)議規(guī)定了瀏覽器在運(yùn)行 HTML 文檔時(shí)所遵循的規(guī)則和進(jìn)行的操作。協(xié)議的制定使瀏覽器在運(yùn)行超文本時(shí)有了統(tǒng)一的規(guī)則和標(biāo)準(zhǔn)。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)，自1990年以來HTML就一直被用作WWW（是World Wide Web的縮寫，也可簡(jiǎn)寫WEB、中文叫做萬維網(wǎng)) 的信息表示語言，使用HTML語言描述的文件，需要通過WEB瀏覽器HTTP顯示出效果。
2. 超文本
所謂超文本，是因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、影視等內(nèi)容，事實(shí)上每一個(gè)HTML文檔都是一種靜態(tài)的網(wǎng)頁(yè)文件，這個(gè)文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語言，它只是一種排版網(wǎng)頁(yè)中資料顯示位置的標(biāo)記結(jié)構(gòu)語言，易學(xué)易懂，非常簡(jiǎn)單。
HTML的普遍應(yīng)用就是通過單擊鼠標(biāo)從一個(gè)主題跳轉(zhuǎn)到另一個(gè)主題，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面與世界各地主機(jī)的文件鏈接。直接獲取相關(guān)的主題。如下所示：
通過HTML可以通過圖片格式和文字格式的設(shè)計(jì)實(shí)現(xiàn)出豐富多彩的風(fēng)格：
<IMG SRC="文件名"> <FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT>
通過HTML可以實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)：
〈A HREF="文件路徑/文件名"></A>
通過HTML可以展現(xiàn)多媒體的效果：
<EMBED SRC="音樂地址" AUTOSTART=true> <EMBED SRC="視頻地址" AUTOSTART=true>
從上面我們可以看到HTML超文本文件時(shí)需要用到的一些標(biāo)簽。
3. 標(biāo)記
對(duì)于剛剛接觸超文本的讀者，可能不能理解一些用“<”和 “>”括起來的句子，它們稱為標(biāo)記，也稱標(biāo)簽，是用來劃分網(wǎng)頁(yè)的元素，以形成文本的布局、文字的格式及五彩繽紛的畫面。標(biāo)簽通過指定某塊信息為段落或標(biāo)題等來標(biāo)識(shí)文檔某個(gè)部件。
在HTML中每個(gè)用來作標(biāo)簽的符號(hào)都是一條命令、它告訴瀏覽器如何顯示文本。這些標(biāo)簽均由"<"和">"符號(hào)以及一個(gè)字符串組成。如<head>、 <body>等。而瀏覽器的功能是對(duì)這些標(biāo)記進(jìn)行解釋，顯示出文字、圖像、動(dòng)畫、播放聲音。這些標(biāo)簽符號(hào)用“<標(biāo)簽名字 屬性>”來表示。標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽兩大類，具體介紹如下：
HTML只是一個(gè)純文本文件。創(chuàng)建一個(gè)HTML文檔，需要HTML編輯器和WEB瀏覽器兩個(gè)工具。HTML編輯器是用于生成和保存HTML文檔的應(yīng)用程序。WEB瀏覽器是用來打開WEB網(wǎng)頁(yè)文件，提供給我們查看WEB資源的客戶端程序。
1.3.2 HTML基本結(jié)構(gòu)
HTML文檔是由一系列的元素和標(biāo)簽組成。元素名不區(qū)分大小寫，HTML用標(biāo)簽來規(guī)定元素的屬性和它在文件中的位置，HTML文檔分為頭部和主體兩部分，在文檔頭部對(duì)文檔進(jìn)行一些必要的定義，主體部分是文檔要顯示的信息。其基本結(jié)構(gòu)如例1-1所示。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>標(biāo)題</title> 6 </head> 7 <body> 8 內(nèi)容 9 </body> 10 </html>
運(yùn)行結(jié)果如圖1.17所示。
圖1.17 HTML基本結(jié)構(gòu)
一個(gè)HTML文檔基本結(jié)構(gòu)主要由文檔聲明（<!DOCTYPE HTML>）、HTML文檔（<html>）、文檔頭部（<head>）和文檔主體（<body>）四部分組成。接下來具體介紹這四個(gè)部分的內(nèi)容。
1. 文檔聲明
<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。<!DOCTYPE> 聲明不是 HTML 標(biāo)簽，它用于向?yàn)g覽器說明當(dāng)前文檔屬于哪種HTML或XHTML標(biāo)準(zhǔn)規(guī)范。必須在開頭處使用<!DOCTYPE>為所有的XHTML文檔指定XHTML版本和類型，這樣瀏覽器才能將網(wǎng)頁(yè)作為有效的XHTML文檔，并按照指定文檔類型進(jìn)行解析。
<!DOCTYPE>聲明與瀏覽器的兼容性相關(guān)，如果沒有<!DOCTYPE>，就由瀏覽器決定如何展示HTML頁(yè)面，這時(shí)，不同的瀏覽器可能有多種顯示效果，這樣是不允許的。
2. HTML文檔
<html>標(biāo)簽位于<!DOCTYPE>聲明之后，作用相當(dāng)于在告知瀏覽器這是一個(gè)HTML文檔，<html></html>標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)，其中<html>表示網(wǎng)頁(yè)的開始，</html>表示網(wǎng)頁(yè)結(jié)束，網(wǎng)頁(yè)需要展示的所有內(nèi)容都應(yīng)該寫到<html></html>標(biāo)簽的內(nèi)部，<html>標(biāo)簽也被稱為根標(biāo)簽，指最外層的意思。
3. 文檔的頭部
<head></head>用于定義HTML文檔頭部信息，如圖1.17中的標(biāo)題，也稱頭部標(biāo)簽，在<html>標(biāo)簽之后，用來封裝其他位于文檔頭部的標(biāo)簽，如表1.1中的標(biāo)簽。一個(gè)HTML文檔只能有一對(duì)<head></head>標(biāo)簽，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示在頁(yè)面中。
表1.1 文檔頭部?jī)?nèi)的標(biāo)簽
上例中<meta charset="utf-8">指定網(wǎng)頁(yè)的編碼方式為utf-8。utf-8是一種網(wǎng)頁(yè)編碼規(guī)范，可以統(tǒng)一頁(yè)面顯示中文簡(jiǎn)體繁體及其他語言（如英文，日文，韓文），這樣網(wǎng)頁(yè)就不會(huì)出現(xiàn)亂碼的情況。它屬于國(guó)際通用編碼方式。
4. 文檔的主體
<body></body>包含文檔要展示的所有內(nèi)容，也稱主體標(biāo)簽，網(wǎng)頁(yè)中顯示的文本、超鏈接、圖像、表格和列表等信息都必須在<body>內(nèi)，如圖1.17中的內(nèi)容，就是<body>內(nèi)的信息，<body>中的內(nèi)容是最終展示給用戶的。
HTML語言是不區(qū)分大小寫的，但建議文檔聲明采用大寫方式，其他部分都采用小寫方式。
1.3.3 運(yùn)行第一個(gè)HTML程序
（1）新建一個(gè)空白HTML文檔，點(diǎn)擊“代碼”按鈕，默認(rèn)為HTML基本結(jié)構(gòu)。如圖1.18所示。
圖1.18 代碼試圖
（2）修改<title>和<body>中的內(nèi)容，按下Ctrl + S快捷鍵，進(jìn)行文件的保存，文件后綴名為.html格式。如圖1.19所示。
圖1.19 保存成.html文件
（3）點(diǎn)擊“在瀏覽器中預(yù)覽/調(diào)試”按鈕，選擇chrome.exe瀏覽器進(jìn)行預(yù)覽。或者通過雙擊.html文件進(jìn)行預(yù)覽。如圖1.20所示。
圖1.20 在Chrome瀏覽器中預(yù)覽效果
到此本教材的第一個(gè)網(wǎng)頁(yè)就運(yùn)行成功了，可以試著改變<title>和<body>中的內(nèi)容。然后重新保存頁(yè)面并刷新瀏覽器進(jìn)行預(yù)覽。
1.3.4 HTML注釋
在編寫HTML代碼時(shí)，經(jīng)常要在一些關(guān)鍵代碼旁做一下注釋，這樣做的好處很多，如：方便理解代碼、方便查找相關(guān)代碼或是方便項(xiàng)目組里的其他程序員來了解你所寫的代碼，還可以方便自己以后對(duì)代碼的理解和修改。語法格式如下：
<!--注釋的內(nèi)容-->
“<!--”表示注釋的開始，“-->”表示注釋的結(jié)束。DW中自帶添加注釋功能，如圖1.21所示，也可手動(dòng)添加注釋。
圖1.21 HTML注釋
1.3.5 HTML屬性
使用HTML制作網(wǎng)頁(yè)時(shí)，如果想讓網(wǎng)頁(yè)的內(nèi)容更豐富，如設(shè)置顯示文字的顏色為彩色，大小為30。此時(shí)如果僅僅使用HTML標(biāo)簽?zāi)J(rèn)顯示樣式已經(jīng)不能滿足需求，就需要對(duì)HTML標(biāo)簽的屬性加以設(shè)置，大多數(shù)標(biāo)簽都有自己的一些屬性, 屬性要寫在始標(biāo)簽內(nèi)，屬性用于進(jìn)一步改變顯示的效果, 各屬性之間無先后次序，可以省略而采用默認(rèn)值;其語法格式如下：
<標(biāo)簽名字 屬性1 屬性2 屬性3 … >內(nèi)容</標(biāo)簽名字>
在語法格式中，標(biāo)簽可以有多個(gè)屬性，必須寫在開始標(biāo)簽中，位于標(biāo)簽名之后。屬性與標(biāo)簽之前需要一個(gè)空格隔開，多個(gè)屬性之間也用空格隔開。
作為一般的原則，大多數(shù)屬性值不用加雙引號(hào)。但是包括空格、“％”，“＃”等特殊字符的屬性值必須加入雙引號(hào)。為了好的習(xí)慣，提倡全部對(duì)屬性值加雙引號(hào)。如：
<font color="#ff00ff" face="宋體" size="30">字體設(shè)置</font>
注意：一定不要在“<”與標(biāo)簽名之間輸入多余的空格，也不能在中文狀態(tài)下輸入這些標(biāo)簽及屬性，否則瀏覽器不能正確的識(shí)別括號(hào)中的標(biāo)志命令，從而無法正確的顯示信息。后面還會(huì)學(xué)習(xí)到更多其他的HTML屬性，這里讀者只要記住HTML屬性的基本格式就好。
1.4 本章小結(jié)
通過本章的學(xué)習(xí)，初步了解了Web前端技術(shù)和相關(guān)行業(yè)信息。學(xué)習(xí)到Web前端開發(fā)工具的使用，而且還運(yùn)行了第一個(gè)HTML語言的網(wǎng)頁(yè)程序。本章中需要理解什么是HTML語言，HTML語言的基本格式，HTML語言的屬性設(shè)置等相關(guān)知識(shí)點(diǎn)。在下一章節(jié)中，將進(jìn)一步來學(xué)習(xí)HTML這門語言。
1.5 習(xí)題
a) 填空題
(1) Web前端開發(fā)所包括的三大核心技術(shù)包含 、 、JavaScript語言。
(2) 超文本標(biāo)記語言指的是 。
(3) HTML文檔包括 和 兩部分。
(4) HTML多個(gè)屬性之間分隔用 。
(5) 用于向?yàn)g覽器說明當(dāng)前文檔屬于哪種HTML或XHTML標(biāo)準(zhǔn)規(guī)范。
b) 選擇題
(1) 下列選項(xiàng)中，不屬于網(wǎng)站開發(fā)四大職位的是（ ）。
A．web前端開發(fā)工程師 B．?dāng)?shù)據(jù)庫(kù)開發(fā)工程師
C．測(cè)試開發(fā)工程師D．web后端開發(fā)工程師
(2) 下面哪個(gè)不屬于HTML基本結(jié)構(gòu)（ ）。
A．<meta>B．<head>
C．<body>D．<html>
(3) 下面哪個(gè)不屬于五大瀏覽器（ ）。
A．Firefox瀏覽器B．Chrome瀏覽器
C．Safari瀏覽器D．360瀏覽器
(4) 下面哪個(gè)標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)（ ）。
A．<! DOCTYPE >B．<html>
C．<head>D．<body>
(5) 下面用來定義文檔標(biāo)題的標(biāo)簽是（ ）。
A．<style>B．<link>
C．<script>D．<title>
c) 思考題
(1) 請(qǐng)簡(jiǎn)述什么是超文本標(biāo)記語言？
(2) 請(qǐng)簡(jiǎn)述HTML、CSS、JS三者的關(guān)系及職能劃分？
觀看視頻+：782542147
內(nèi)容來源書籍：《HTML5從入門到精通》，一本W(wǎng)eb前端實(shí)用性綜合技術(shù)圖書。
簡(jiǎn)介：《HTML5從入門到精通》倡導(dǎo)“快樂學(xué)習(xí)，實(shí)戰(zhàn)就業(yè)”的理念，作為初學(xué)者高品質(zhì)的入門教材之一，免費(fèi)提供一站式教學(xué)服務(wù)包，附贈(zèng)配套PPT、教學(xué)視頻、教學(xué)大綱、考試系統(tǒng)、測(cè)試題等資源。且書本內(nèi)容覆蓋全面、講解詳細(xì)，其中包括標(biāo)簽語義化、標(biāo)簽使用規(guī)范、選擇器類型、盒模型、標(biāo)簽分類、樣式重置、CSS優(yōu)化、Photoshop切圖處理、整頁(yè)制作、CSS3新樣式、HTML5新功能等。與此同時(shí)，本教材通過總結(jié)、歸納HTML、CSS、CSS3動(dòng)畫與3D及移動(dòng)端布局與響應(yīng)式開發(fā)等核心知識(shí)點(diǎn)，并從項(xiàng)目開發(fā)的實(shí)際需求入手，將理論知識(shí)與實(shí)際應(yīng)用相結(jié)合，以此幫助初學(xué)者全面、系統(tǒng)、深入、透徹地理解HTML5的基礎(chǔ)知識(shí)和技術(shù)，使他們快速地成長(zhǎng)為初級(jí)程序員，并擁有一定的項(xiàng)目開發(fā)經(jīng)驗(yàn)，從而在職場(chǎng)中擁有一個(gè)較高的起點(diǎn)。
習(xí)前端的小伙伴越來越多，問題也就越多，前面基礎(chǔ)部分還好一些，特別是一到框架的時(shí)候，難住了一大部分人，今天小猿圈web前端講師就為大家總結(jié)了HTML5主流框架的內(nèi)容。
一、Bootstrap
全球數(shù)以百萬計(jì)的網(wǎng)站都是基于Bootstrap構(gòu)建的。Bootstrap能讓所有開發(fā)者都能快速上手、所有設(shè)備都可以適配、所有項(xiàng)目都適用。此外，bootstrap的官網(wǎng)也有很多教程提供。
Bootstrap包含了十幾個(gè)自定義的jQuery插件，并自帶以下特性：全局的CSS設(shè)置、定義基本的HTML元素樣式、可擴(kuò)展的class，以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。
二、SUIMobile
SUIMobile是一套基于Framework7開發(fā)的UI庫(kù)。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，并且能兼容到iOS6.0+和Android4.0+，非常適合開發(fā)跨平臺(tái)WebApp。
SUIMobile的組件都是按照iOS風(fēng)格設(shè)計(jì)的，，非常輕量，核心庫(kù)壓縮Gzip后的JS、CSS網(wǎng)絡(luò)傳輸體積總共只有52K，卻提供了20+個(gè)常用的組件。網(wǎng)站內(nèi)有詳細(xì)的編碼介紹。
三、jQueryUI
jQueryUI主要分為3個(gè)部分：交互、微件和效果庫(kù)。主打代碼開源，操作繼承了jQuery的簡(jiǎn)單特性，兼容各主流桌面瀏覽器。
四、jQuerymobile
jQueryMobile是針對(duì)觸屏智能手機(jī)與平板電腦的網(wǎng)頁(yè)開發(fā)框架。如果開發(fā)者了解jQuery，可以很容易的學(xué)習(xí)jQueryMobile。
以上就是小猿圈web前端講師對(duì)于html5主流框架的介紹，希望無論是初學(xué)還是專業(yè)前端，都能找到適合自己操作的框架，學(xué)習(xí)前端如果有不懂得地方可以到小猿圈網(wǎng)站尋找答案，里面有專業(yè)的講師團(tuán)隊(duì)還有優(yōu)秀的助教老師，等你來學(xué)習(xí)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
