Web前端開發(fā)第1章：概述1本章主要內(nèi)容Web基礎(chǔ)Web是如何工作的為什么要學(xué)習(xí)Web前端開發(fā)項(xiàng)目管理系統(tǒng)21.Web基礎(chǔ)Web定義Web（WorldWideWeb，萬維網(wǎng)）是一種基于超文本和HTTP的、全球性的、動態(tài)交互的、跨平臺的分布式圖形信息系統(tǒng)；建立在Internet上，通過圖形化的、易于訪問的直觀界面為瀏覽者提供信息的網(wǎng)絡(luò)服務(wù)。31.1基本概念1.Web基礎(chǔ)表現(xiàn)形式超文本（HyperText）超文本是一種全局性的信息結(jié)構(gòu)。它將文檔中的不同部分通過關(guān)鍵字建立鏈接，使信息得以用交互的方式進(jìn)行搜索。超媒體（UltraMedia）超媒體是一種采用非線性網(wǎng)狀結(jié)構(gòu)對塊狀多媒體信息（包括文本、圖像、視頻等）進(jìn)行組織和管理的技術(shù)，在信息瀏覽環(huán)境下將超文本和多媒體結(jié)合在一起，不僅能使用戶從一個文本跳到另一個文本，而且能夠激活一段聲音，顯示一個圖形，甚至播放一段動畫。41.1基本概念1.Web基礎(chǔ)Internet定義Internet是由全球采用TCP/IP協(xié)議簇的眾多計(jì)算機(jī)網(wǎng)絡(luò)相互連接而成的最大的開放式計(jì)算機(jī)網(wǎng)絡(luò)，是世界范圍內(nèi)網(wǎng)絡(luò)和網(wǎng)關(guān)的集合體。51.2Internet1.Web基礎(chǔ)Internet起源Internet是全球最大的計(jì)算機(jī)網(wǎng)絡(luò)，起源于美國國防部高級研究計(jì)劃局（DefenseAdvancedResearchProjectsAgency，DARPA）建立的用于支持軍事研究的計(jì)算機(jī)試驗(yàn)網(wǎng)ARPAnet，該網(wǎng)于1969年投入使用。從60年代開始，ARPA開始向美國國內(nèi)大學(xué)的計(jì)算機(jī)系和一些私人有限公司提供經(jīng)費(fèi)，以促進(jìn)基于分組交換技術(shù)的計(jì)算機(jī)網(wǎng)絡(luò)的研究。1993年，伊利諾伊大學(xué)美國國家超級計(jì)算機(jī)應(yīng)用中心的學(xué)生馬克?安德里森（MarkAndreesen）等人開發(fā)出了真正的瀏覽器“Mosaic”。該軟件后來被作為NetscapeNavigator推向市場，此后互聯(lián)網(wǎng)開始爆炸性普及。61.2Internet1.Web基礎(chǔ)Internet在中國基礎(chǔ)資源保有量穩(wěn)步增長，資源應(yīng)用水平顯著提升截至2017年12月，中國域名總數(shù)同比減少9.0%，但“.CN”域名總數(shù)實(shí)現(xiàn)了1.2%的增長，達(dá)到2085萬個，在域名總數(shù)中比2016年底48.7%提升至54.2%；國際出口帶寬實(shí)現(xiàn)10.2%的增長，達(dá)7，320，180Mbps；71.2Internet1.Web基礎(chǔ)Internet在中國基礎(chǔ)資源保有量穩(wěn)步增長，資源應(yīng)用水平顯著提升光纜、互聯(lián)網(wǎng)接入端口、移動電話基站和互聯(lián)網(wǎng)數(shù)據(jù)中心等基礎(chǔ)設(shè)施建設(shè)穩(wěn)步推進(jìn)。在此基礎(chǔ)上，網(wǎng)站、網(wǎng)頁、移動互聯(lián)網(wǎng)接入流量與APP數(shù)量等應(yīng)用發(fā)展迅速，均在2017年實(shí)現(xiàn)顯著增長，尤其是移動互聯(lián)網(wǎng)接入流量自2014以來連續(xù)三年實(shí)現(xiàn)翻番增長。81.2Internet1.Web基礎(chǔ)Internet在中國中國網(wǎng)民規(guī)模達(dá)7.72億，互聯(lián)網(wǎng)惠及全民取得新進(jìn)展91.2Internet1.Web基礎(chǔ)Internet在中國中國網(wǎng)民規(guī)模達(dá)7.72億，互聯(lián)網(wǎng)惠及全民取得新進(jìn)展信息化服務(wù)快速普及、網(wǎng)絡(luò)扶貧大力開展、公共服務(wù)水平顯著提升，讓廣大人民群眾在共享互聯(lián)網(wǎng)發(fā)展成果上擁有了更多獲得感。101.2Internet1.Web基礎(chǔ)Internet在中國手機(jī)網(wǎng)民占比達(dá)97.5%，移動網(wǎng)絡(luò)促進(jìn)“萬物互聯(lián)”截至2017年12月，我國手機(jī)網(wǎng)民規(guī)模達(dá)7.53億，手機(jī)不斷擠占其他個人上網(wǎng)設(shè)備的使用。111.2Internet1.Web基礎(chǔ)Internet在中國手機(jī)網(wǎng)民占比達(dá)97.5%，移動網(wǎng)絡(luò)促進(jìn)“萬物互聯(lián)”以手機(jī)為中心的智能設(shè)備，成為“萬物互聯(lián)”的基礎(chǔ)，車聯(lián)網(wǎng)、智能家電促進(jìn)“住行”體驗(yàn)升級，構(gòu)筑個性化、智能化應(yīng)用場景。移動互聯(lián)網(wǎng)服務(wù)場景不斷豐富、移動終端規(guī)模加速提升、移動數(shù)據(jù)量持續(xù)擴(kuò)大，為移動互聯(lián)網(wǎng)產(chǎn)業(yè)創(chuàng)造更多價值挖掘空間。121.2Internet1.Web基礎(chǔ)Internet在中國網(wǎng)絡(luò)娛樂用戶規(guī)模持續(xù)高速增長，文化娛樂產(chǎn)業(yè)進(jìn)入全面繁榮期網(wǎng)絡(luò)娛樂應(yīng)用中網(wǎng)絡(luò)直播用戶規(guī)模年增長率最高，達(dá)到22.6%，其中游戲直播用戶規(guī)模增速達(dá)53.1%，真人秀直播用戶規(guī)模增速達(dá)51.9%。131.2Internet1.Web基礎(chǔ)Internet在中國共享單車用戶規(guī)模突破2億，網(wǎng)約車監(jiān)管政策逐步落地141.2Internet1.Web基礎(chǔ)Internet在中國六成網(wǎng)民使用線上政務(wù)服務(wù)，政務(wù)新媒體助力政務(wù)服務(wù)智能化2017年，我國在線政務(wù)服務(wù)用戶規(guī)模達(dá)到4.85億，占總體網(wǎng)民的62.9%，通過支付寶或微信城市服務(wù)平臺獲得政務(wù)服務(wù)的使用率為44.0%。151.2Internet1.Web基礎(chǔ)Internet在中國六成網(wǎng)民使用線上政務(wù)服務(wù)，政務(wù)新媒體助力政務(wù)服務(wù)智能化微信城市服務(wù)、政務(wù)微信公眾號、政務(wù)微博及政務(wù)頭條號等政務(wù)新媒體及服務(wù)平臺不斷擴(kuò)張服務(wù)范圍，上線并完善包括交通違法、氣象、人社、生活繳費(fèi)等在內(nèi)的多類生活服務(wù)，并向縣域下沉。161.2Internet1.Web基礎(chǔ)Internet在中國網(wǎng)絡(luò)安全相關(guān)法規(guī)逐步完善，用戶安全體驗(yàn)明顯提升2017年《中華人民共和國網(wǎng)絡(luò)安全法》的正式實(shí)施，以及相關(guān)配套法規(guī)的陸續(xù)出臺，為此后開展的網(wǎng)絡(luò)安全工作提供了切實(shí)的法律保障。政府與企業(yè)共同打擊各類網(wǎng)絡(luò)安全問題，網(wǎng)民遭遇網(wǎng)絡(luò)安全問題的比例明顯下降。171.2Internet1.Web基礎(chǔ)Web協(xié)議主要有以下三種。HTTPHTTPSFTP181.3Web協(xié)議1.Web基礎(chǔ)HTTPHTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）是通過因特網(wǎng)傳送萬維網(wǎng)文檔的數(shù)據(jù)傳送協(xié)議，詳細(xì)規(guī)定了瀏覽器和萬維網(wǎng)服務(wù)器之間互相通信的規(guī)則。HTTP是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，所有的Web文件都必須遵守這個標(biāo)準(zhǔn)。設(shè)計(jì)HTTP最初的目的是為了提供一種發(fā)布和接收HTML頁面的方法。191.3Web協(xié)議1.Web基礎(chǔ)HTTPSHTTPS（HyperTextTransferProtocoloverSecureSocketLayer），是以安全為目標(biāo)的HTTP通道，是安全的HTTP。在HTTP傳輸中加入SSL層，HTTPS的安全基礎(chǔ)是SSL，因此加密詳細(xì)內(nèi)容就需要SSL。HTTPS使用了HTTP，但存在不同于HTTP的默認(rèn)端口及一個加密/身份驗(yàn)證曾（在HTTP與TCP之間），用于安全的HTTP數(shù)據(jù)傳輸。201.3Web協(xié)議1.Web基礎(chǔ)FTPFTP（FileTransferProtocol，文件傳輸協(xié)議）是TCP/IP協(xié)議簇中的協(xié)議之一，是Internet上兩臺計(jì)算機(jī)之間傳送文件的協(xié)議，也是在TCP/IP網(wǎng)絡(luò)和Internet上最早使用的協(xié)議之一。FTP協(xié)議屬于網(wǎng)絡(luò)協(xié)議簇的應(yīng)用層。命令來下載文件、上傳文件、創(chuàng)建或改變服務(wù)器上的目FTP客戶機(jī)可以給服務(wù)器發(fā)出錄等。FTP協(xié)議包括兩個組成部分：FTP服務(wù)器、FTP客戶端。FTP服務(wù)器用來存儲文件，用戶可以使用FTP客戶端通過FTP協(xié)議訪問位于FTP服務(wù)器上的資源。在開發(fā)網(wǎng)站的時候，通常利用FTP協(xié)議把網(wǎng)頁或程序傳到Web服務(wù)器上，以實(shí)現(xiàn)網(wǎng)站發(fā)布和網(wǎng)站更新。211.3Web協(xié)議1.Web基礎(chǔ)URLURL（UniformResourceLocator，統(tǒng)一資源定位符）是資源標(biāo)識符最常見的形式。URL描述了一臺特定服務(wù)器上某資源的特定位置，可以明確說明如何從一個精確、固定的位置獲取資源。每個Web文件都有一個唯一的地址，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。221.4URL和域名1.Web基礎(chǔ)URL完整的URL通常有以下四部分組成。協(xié)議（方案，scheme）服務(wù)器名稱（或IP地址）路徑文件名231.4URL和域名1.Web基礎(chǔ)域名域名（DomainName）是由一串用點(diǎn)分隔的名字組成的Internet上某一臺計(jì)算機(jī)或計(jì)算機(jī)組的名稱，用于在數(shù)據(jù)傳輸時標(biāo)識計(jì)算機(jī)的方位（有時也指地理位置，地理上的域名，指帶有行政自主權(quán)的一個地方區(qū)域）。使用域名的目的是便于記憶服務(wù)器的地址（例如網(wǎng)站地址，電子郵件地址，文件服務(wù)資源地址等）。241.4URL和域名1.Web基礎(chǔ)服務(wù)器的構(gòu)成包括處理器、硬盤、內(nèi)存、系統(tǒng)總線等，和通用的計(jì)算機(jī)架構(gòu)類似，但需要提供高可靠的服務(wù)，因此在處理能力、穩(wěn)定性、可靠性、安全性、可擴(kuò)展性、可管理性等方面要求較高。在網(wǎng)絡(luò)環(huán)境下，根據(jù)服務(wù)器提供的服務(wù)類型不同，分為文件服務(wù)器、數(shù)據(jù)庫服務(wù)器、應(yīng)用程序服務(wù)器、Web（網(wǎng)站）服務(wù)器等。根據(jù)服務(wù)器在網(wǎng)絡(luò)中應(yīng)用的層次（或服務(wù)器的檔次來），依據(jù)整個服務(wù)器的綜合性能，特別是所采用的一些服務(wù)器專用技術(shù)來衡量的，將服務(wù)器可分為：入門級服務(wù)器、工作組級服務(wù)器、部門級服務(wù)器、企業(yè)級服務(wù)器。251.5服務(wù)器1.Web基礎(chǔ)Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。Web標(biāo)準(zhǔn)定義網(wǎng)頁主要由三個部分組成。結(jié)構(gòu)（Structure）表現(xiàn)（Presentation）行為（Behavior）對應(yīng)的標(biāo)準(zhǔn)也分三方面。結(jié)構(gòu)化標(biāo)準(zhǔn)語言，主要包括XHTML、XML和HTML5。表現(xiàn)標(biāo)準(zhǔn)語言，主要包括CSS。行為標(biāo)準(zhǔn)，主要包括對象模型（如W3CDOM）、ECMAScript等。261.6Web標(biāo)準(zhǔn)1.Web基礎(chǔ)結(jié)構(gòu)標(biāo)準(zhǔn)可擴(kuò)展標(biāo)記語言（ExtensibleMarkupLanguage，XML）XML來源于標(biāo)準(zhǔn)通用標(biāo)記語言，可擴(kuò)展標(biāo)記語言和標(biāo)準(zhǔn)通用標(biāo)記語言都是能定義其他語言的語言。XML最初設(shè)計(jì)的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。可擴(kuò)展超文本標(biāo)記語言（XHTML）目前推薦遵循的是W3C于2000年1月26日發(fā)布的XHTML1.0。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，完全可以替代HTML，但面對成千上萬已有的站點(diǎn)，直接采用XML還沒有足夠的環(huán)境。因此在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對其進(jìn)行擴(kuò)展，得到了XHTML。簡單的說，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過渡。271.6Web標(biāo)準(zhǔn)1.Web基礎(chǔ)結(jié)構(gòu)標(biāo)準(zhǔn)HTML5HTML5是超文本標(biāo)記語言（HTML）的第五次重大修改，是萬維網(wǎng)的核心語言，屬于標(biāo)準(zhǔn)通用標(biāo)記語言（在本書第3章詳細(xì)講解）。281.6Web標(biāo)準(zhǔn)1.Web基礎(chǔ)表現(xiàn)標(biāo)準(zhǔn)CSS（層疊樣式表）目前推薦遵循的是萬維網(wǎng)聯(lián)盟（W3C）于2001年5月23日推薦的CSS3。W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)的語言。純CSS布局與結(jié)構(gòu)式XHTML相結(jié)合能幫助設(shè)計(jì)師分離外觀與結(jié)構(gòu)，使站點(diǎn)的訪問及維護(hù)更加容易。291.6Web標(biāo)準(zhǔn)1.Web基礎(chǔ)行為標(biāo)準(zhǔn)文檔對象模型（DocumentObjectModel，DOM）根據(jù)W3CDOM規(guī)范（/DOM/）所定義，DOM是一種與瀏覽器及平臺無關(guān)的語言接口，使得可以訪問頁面中其他的標(biāo)準(zhǔn)組件。簡單的說，DOM解決了Netscape的Javascript和Microsoft的JScript之間的沖突，給予Web設(shè)計(jì)師和開發(fā)者一個標(biāo)準(zhǔn)的方法，來訪問站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對象。ECMAScriptECMAScript是ECMA制定的標(biāo)準(zhǔn)腳本語言（JavaScript）。目前推薦遵循的是ECMA-262。301.6Web標(biāo)準(zhǔn)2.Web是如何工作的網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是各種網(wǎng)站應(yīng)用的載體。。文字和圖片是構(gòu)成一個網(wǎng)頁的最基本的元素。文字是網(wǎng)頁的內(nèi)容，圖片使網(wǎng)頁表現(xiàn)更加美觀，也可以直觀形象地表現(xiàn)信息，除此之外，網(wǎng)頁的元素還包括動畫、音視頻、程序等。312.1什么是網(wǎng)頁2.Web是如何工作的網(wǎng)頁實(shí)際上是一個純文本文件，通過各式各樣的標(biāo)記描述頁面上的文字、圖片、表格、音視頻等元素。而瀏覽器通過對這些標(biāo)記進(jìn)行解釋并生成頁面，把網(wǎng)頁通過一定的格式展現(xiàn)出來。圖片、音視頻、動畫等文件和網(wǎng)頁文件互相獨(dú)立，甚至可以存儲在不通計(jì)算機(jī)上，網(wǎng)頁文件中存放圖片的鏈接位置。瀏覽器加載相關(guān)文件并解釋網(wǎng)頁中標(biāo)記，從而生成頁面，然后把網(wǎng)頁通過一定的格式展現(xiàn)出來。322.1什么是網(wǎng)頁2.Web是如何工作的網(wǎng)頁可以分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。靜態(tài)頁面靜態(tài)網(wǎng)頁是指沒有后臺數(shù)據(jù)庫、不含開發(fā)程序和不可交互的網(wǎng)頁。靜態(tài)網(wǎng)頁是標(biāo)準(zhǔn)的HTML文件，它的文件擴(kuò)展名是.htm、.html，可以包含文本、圖像、聲音、動畫、客戶端腳本和ActiveX控件及程序等，制作完成后，頁面的內(nèi)容和顯示效果就確定了，除非修改頁面代碼，因此靜態(tài)網(wǎng)頁更新起來相對比較麻煩，適用于一般更新較少的展示型網(wǎng)站，早期網(wǎng)站的頁面也多為靜態(tài)網(wǎng)頁。332.1什么是網(wǎng)頁2.Web是如何工作的網(wǎng)頁可以分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。動態(tài)態(tài)頁面動態(tài)網(wǎng)頁一般以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以與后臺數(shù)據(jù)庫進(jìn)行交互與數(shù)據(jù)傳遞，可以大大降低網(wǎng)站維護(hù)的工作量。采用動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、訂單管理等等。動態(tài)網(wǎng)頁以.aspx、.asp、.jsp、.php、.perl、.cgi等形式為后綴，并且在動態(tài)網(wǎng)頁網(wǎng)址中有一個標(biāo)志性的符號——“?”。342.1什么是網(wǎng)頁2.Web是如何工作的關(guān)于網(wǎng)站的定義較多，常見的定義有以下三種:定義一網(wǎng)站（Website）指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。定義二因特網(wǎng)上一塊固定的面向全世界發(fā)布消息的地方，由域名（網(wǎng)站地址）和網(wǎng)站空間構(gòu)成，通常包括主頁和其他具有超鏈接文件的頁面。定義三網(wǎng)站是一個邏輯上的概念，是由一系列的內(nèi)容組合而成的。網(wǎng)站包含的內(nèi)容有：網(wǎng)站的域名、提供網(wǎng)站服務(wù)的服務(wù)器或者網(wǎng)站空間、網(wǎng)頁、網(wǎng)頁內(nèi)容所涉及的圖片視頻等文件、網(wǎng)頁之間的關(guān)系。352.2什么是網(wǎng)站2.Web是如何工作的網(wǎng)站是一個整體，網(wǎng)頁是一個個體，一個網(wǎng)站是由多個網(wǎng)頁構(gòu)建而成。簡單來說，網(wǎng)站是由網(wǎng)頁集合而成的，通過瀏覽器所看到的頁面就是網(wǎng)頁。網(wǎng)站是域名、網(wǎng)站存放空間的內(nèi)容集合，所包含的內(nèi)容有網(wǎng)頁、程序、圖片、視頻、音頻等內(nèi)容和內(nèi)容之間的鏈接關(guān)系，一個網(wǎng)站可能有很多網(wǎng)頁，也可能只有一個網(wǎng)頁。網(wǎng)頁是網(wǎng)站內(nèi)容的重要組成部分。362.3網(wǎng)頁和網(wǎng)站的關(guān)系37網(wǎng)頁和網(wǎng)站的關(guān)系2.Web是如何工作的瀏覽器主要功能瀏覽器的主要功能是將用戶選擇的Web資源呈現(xiàn)出來，它需要從服務(wù)器請求資源，并將其顯示在瀏覽器窗口中。382.4瀏覽器是怎么工作的2.Web是如何工作的瀏覽器主要功能資源的格式通常是HTML，也包括PDF、image及其他格式。用戶用URI（UniformResourceIdentifier，統(tǒng)一資源標(biāo)識符）來指定所請求資源的位置。392.4瀏覽器是怎么工作的2.Web是如何工作的瀏覽器的主要組件包括以下七個方面。用戶界面瀏覽器引擎渲染引擎網(wǎng)絡(luò)UI后端JS解析器數(shù)據(jù)存儲402.4瀏覽器是怎么工作的瀏覽器的主要組件2.Web是如何工作的用戶界面（UserInterface）包括地址欄、后退/前進(jìn)按鈕、書簽?zāi)夸浀?，也就是你所看到的除了用來顯示你所請求頁面的主窗口之外的其他部分。瀏覽器引擎（Browserengine）用來查詢及操作渲染引擎的接口。渲染引擎（Renderingengine）用來顯示請求的內(nèi)容，例如：請求內(nèi)容為html，它負(fù)責(zé)解析html及css，并將解析的結(jié)果顯示出來。412.4瀏覽器是怎么工作的2.Web是如何工作的網(wǎng)絡(luò)（Networking）用來完成網(wǎng)絡(luò)調(diào)用，例如：http請求具有平臺無關(guān)的接口，可以在不同平臺上工作。UI后端（UIBackend）用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用接口，底層使用操作系統(tǒng)的用戶接口。422.4瀏覽器是怎么工作的2.Web是如何工作的JS解釋器（JavaScriptInterpreter）用來解釋執(zhí)行JS代碼。數(shù)據(jù)存儲（Datapersistence）屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了webdatabase技術(shù)，這是一種輕量級完整的客戶端存儲技術(shù)。432.4瀏覽器是怎么工作的2.Web是如何工作的主流瀏覽器及其市場份額全球主流瀏覽器有Chrome、MicrosoftInternetExplorer、Firefox、MicrosoftEdge、Sfari、Opera等。442.4瀏覽器是怎么工作的45Web瀏覽器2.Web是如何工作的主流瀏覽器及其市場份額NetMarketShare統(tǒng)計(jì)數(shù)據(jù)2018年3月各主流桌面瀏覽器市場份額的調(diào)查數(shù)據(jù)顯示，Google的Chrome瀏覽器依然是全球最受歡迎的桌面瀏覽器。462.4瀏覽器是怎么工作的2.Web是如何工作的主流瀏覽器及其市場份額百度統(tǒng)計(jì)數(shù)據(jù)2018年1月到2018年4月，Chrome瀏覽器市場份額穩(wěn)定，為最受歡迎的瀏覽器；IE瀏覽器居第二，QQ、2345、搜狗高速等國內(nèi)瀏覽器有廣泛的應(yīng)用。472.4瀏覽器是怎么工作的2.Web是如何工作的從輸入一個網(wǎng)站域名到訪問網(wǎng)站的過程一般包括以下5個步驟。輸入網(wǎng)址。通過域名服務(wù)器查找用戶輸入網(wǎng)址的域名指向的IP地址。通過獲取的IP地址請求Web服務(wù)器。Web服務(wù)器接收請求，并返回請求數(shù)據(jù)信息?？蛻舳藶g覽器接收到請求數(shù)據(jù)后，將信息組織成可以查看的網(wǎng)頁內(nèi)容。482.5訪問網(wǎng)站的過程49網(wǎng)站訪問過程2.Web是如何工作的網(wǎng)站開發(fā)技術(shù)分為前端技術(shù)和后端技術(shù)。Web前端技術(shù)在Web前端開發(fā)中有HTML、CSS、JavaScript等技術(shù)。Web后端技術(shù)在Web后端開發(fā)中有CGI、PHP、JSP、Python、ASP.NET、Ruby等開發(fā)技術(shù)。502.6網(wǎng)站是怎么開發(fā)的2.Web是如何工作的網(wǎng)站的主要開發(fā)技術(shù)介紹HTML用于靜態(tài)頁面開發(fā)，是網(wǎng)站開發(fā)的基礎(chǔ)。CSS層疊樣式表，對網(wǎng)頁中的對象位置和樣式進(jìn)行精確控制。JavaScript前端編程語言，用于給HTML網(wǎng)頁增加動態(tài)和交互功能。512.6網(wǎng)站是怎么開發(fā)的2.Web是如何工作的網(wǎng)站的主要開發(fā)技術(shù)PHPHTML內(nèi)嵌式語言，一種在服務(wù)器端執(zhí)行的嵌入HTML文檔的腳本語言。JSPJSP（JavaServerPages）是一種動態(tài)頁面技術(shù)，它的主要目的是將表示邏輯從Servlet中分離出來。JSP技術(shù)使用Java編程語言編寫類XML的tags和scriptlets，來封裝產(chǎn)生動態(tài)網(wǎng)頁的處理邏輯。網(wǎng)頁還能通過tags和scriptlets訪問存在于服務(wù)端的資源的應(yīng)用邏輯。JSP將網(wǎng)頁邏輯與網(wǎng)頁設(shè)計(jì)的顯示分離，支持可重用的基于組件的設(shè)計(jì)，使基于Web的應(yīng)用程序的開發(fā)變得迅速和容易。522.6網(wǎng)站是怎么開發(fā)的2.Web是如何工作的網(wǎng)站的主要開發(fā)技術(shù)PythonPython是一種面向?qū)ο?、解釋型?jì)算機(jī)程序設(shè)計(jì)語言。Python是純粹的自由軟件，源代碼和解釋器CPython遵循GPL(GNUGeneralPublicLicense)協(xié)議。Python語法簡潔清晰，強(qiáng)制用空白符作為語句縮進(jìn)。ASP.NETASP.NET是.NETFramework的一部分，是一種使嵌入網(wǎng)頁中的腳本可由因特網(wǎng)服務(wù)器執(zhí)行的服務(wù)器端腳本技術(shù)。532.6網(wǎng)站是怎么開發(fā)的2.Web是如何工作的開發(fā)網(wǎng)站需要哪些人網(wǎng)站開發(fā)是一個系統(tǒng)的工程，需要多種人員協(xié)調(diào)配合，共同完成。通常網(wǎng)站開發(fā)過程中的人員角色如下：項(xiàng)目經(jīng)理內(nèi)容編輯網(wǎng)站結(jié)構(gòu)規(guī)劃美術(shù)設(shè)計(jì)主頁制作軟件程序開發(fā)系統(tǒng)管理文檔管理質(zhì)量檢測542.6網(wǎng)站是怎么開發(fā)的2.Web是如何工作的開發(fā)網(wǎng)站的一般過程需求分析當(dāng)拿到一個網(wǎng)站項(xiàng)目時，必須進(jìn)行需求分析。分析網(wǎng)站的風(fēng)格、網(wǎng)站的類型、網(wǎng)站的版塊、網(wǎng)站的域名及空間等。規(guī)劃靜態(tài)內(nèi)容重新確定其需求分析，并根據(jù)用戶需求分析，規(guī)劃出網(wǎng)站的內(nèi)容板塊草圖。設(shè)計(jì)階段根據(jù)網(wǎng)站草圖，由美工制作成效果圖。552.6網(wǎng)站是怎么開發(fā)的2.Web是如何工作的網(wǎng)站項(xiàng)目開發(fā)流程開發(fā)階段根據(jù)頁面結(jié)構(gòu)和設(shè)計(jì)，前端和后臺可以同時進(jìn)行。前端開發(fā)工程師根據(jù)設(shè)計(jì)效果負(fù)責(zé)制作靜態(tài)頁面。程序開發(fā)工程師根據(jù)其頁面結(jié)構(gòu)和設(shè)計(jì)，設(shè)計(jì)數(shù)據(jù)庫，并負(fù)責(zé)網(wǎng)站支撐系統(tǒng)和軟件的開發(fā)。測試和發(fā)布對網(wǎng)站進(jìn)行系統(tǒng)測試，并根據(jù)測試修訂錯誤。在完成測試修訂后，通過服務(wù)器將網(wǎng)站發(fā)布。562.6網(wǎng)站是怎么開發(fā)的2.Web是如何工作的網(wǎng)站建設(shè)中除了開發(fā)，還需要做的工作？網(wǎng)站測試對制作好的網(wǎng)站進(jìn)行兼容性測試、功能測試、性能測試、安全測試等。網(wǎng)站發(fā)布對制作完成的網(wǎng)站通過互聯(lián)網(wǎng)進(jìn)行發(fā)布，包括申請域名、部署實(shí)施等。網(wǎng)站維護(hù)網(wǎng)站發(fā)布并正式運(yùn)行后，需要對網(wǎng)站的內(nèi)容持續(xù)進(jìn)行更新，對網(wǎng)站中出現(xiàn)的錯誤持續(xù)進(jìn)行修訂和完善，提升網(wǎng)站的安全及性能等。572.6網(wǎng)站是怎么開發(fā)的3.為什么學(xué)習(xí)Web前端開發(fā)Web技術(shù)已經(jīng)成為一門廣泛應(yīng)用的技術(shù)。除了日常的網(wǎng)站訪問和信息瀏覽，Web已經(jīng)成為各種設(shè)備的有機(jī)組成部分。例如交換機(jī)、路由器、服務(wù)器的管理，都可以通過Web的方式進(jìn)行管理，并且這種慣例方式得到了越來越多的應(yīng)用，各種信息技術(shù)都在向Web化靠攏。583.為什么學(xué)習(xí)Web前端開發(fā)學(xué)習(xí)Web前端開發(fā)技術(shù)，具有一定的優(yōu)勢，具體如下所述：前端開發(fā)入門門檻低，但需求量大，尤其是有經(jīng)驗(yàn)的前端開發(fā)人員。前端開發(fā)可在短期內(nèi)積累足夠的經(jīng)驗(yàn)，而后端開發(fā)想要積累同等程度的經(jīng)驗(yàn)需要時間長。前端開發(fā)技術(shù)變化慢，而后端開發(fā)技術(shù)更新很快，各種框架、架構(gòu)模式變更迅速，相比較而言，學(xué)習(xí)成本低。前端開發(fā)技術(shù)發(fā)展越來越成熟，且適用范圍更廣。比如HTML5可以替代原生APP，JavaScript能夠用于數(shù)據(jù)庫操作（MongoDB等NoSQL支持JS語法），NodeJS能夠讓JavaScript在服務(wù)器端運(yùn)行等。593.為什么學(xué)習(xí)Web前端開發(fā)Web前端開發(fā)是指利用HTML、CSS、JavaScript、DOM等各種Web技術(shù)進(jìn)行產(chǎn)品的界面開發(fā)。Web前端開發(fā)的工作目標(biāo)是制作標(biāo)準(zhǔn)優(yōu)化的代碼，并增加交互動態(tài)功能，同時結(jié)合后臺開發(fā)技術(shù)實(shí)現(xiàn)整體應(yīng)用目標(biāo)，通過技術(shù)改善用戶體驗(yàn)。603.1什么是Web前端開發(fā)3.為什么學(xué)習(xí)Web前端開發(fā)Web前端工程師的工作內(nèi)容，主要有以下幾點(diǎn)：為網(wǎng)站上提供的產(chǎn)品和服務(wù)實(shí)現(xiàn)一流的Web界面，優(yōu)化代碼并保持良好兼容性；負(fù)責(zé)產(chǎn)品整體前端框架的搭建；參與產(chǎn)品的前端開發(fā)，與后端工程師協(xié)作，高質(zhì)高效完成產(chǎn)品的數(shù)據(jù)交互、動態(tài)信息展現(xiàn)；使用JS或AS編寫封裝良好的前端交互組件，維護(hù)及優(yōu)化網(wǎng)站前端頁面性能；研究和探索創(chuàng)新的開發(fā)思路和最新的前端技術(shù)。613.2Web前端工程師的工作內(nèi)容3.為什么學(xué)習(xí)Web前端開發(fā)Web前端工程師目前已經(jīng)成為業(yè)界普遍任何的工作崗位，有較大的市場需求，在職業(yè)發(fā)展中也逐步形成職業(yè)發(fā)展體系。Web前端工程師的職業(yè)方向大致有兩種：資深Web前端工程師Web前端工程師通過不斷的學(xué)習(xí)、提高和經(jīng)驗(yàn)積累，逐步走向資深Web前端工程師，這是最基本的職業(yè)發(fā)展。在國外，很多工程師都能夠把自己的專業(yè)做到極致，在一個專業(yè)領(lǐng)域不斷學(xué)習(xí)和積累。Web架構(gòu)師Web前端工程師通過積累和對產(chǎn)品、項(xiàng)目的深入理解，以及對技術(shù)的進(jìn)一步研究和理解，將能夠更好的規(guī)劃和設(shè)計(jì)Web架構(gòu)的應(yīng)用服務(wù)和大型網(wǎng)站，并逐步成長為Web架構(gòu)師。623.3Web前端工程師的職業(yè)前景3.為什么學(xué)習(xí)Web前端開發(fā)Web前端開發(fā)一般需要學(xué)習(xí)以下內(nèi)容：HTMLHTML（超文本標(biāo)記語言）是一個網(wǎng)頁的骨架，無論是靜態(tài)網(wǎng)頁還是動態(tài)網(wǎng)頁，最終返回到瀏覽器端的都是HTML，瀏覽器將HTML代碼解釋渲染后呈現(xiàn)給用戶。CSSCSS（層疊樣式表）用來描述網(wǎng)頁內(nèi)容如何顯示，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。JavaScriptJavaScript是應(yīng)用最為廣泛的腳本語言，在網(wǎng)頁中，可以用來添加互動和行為633.4需要學(xué)習(xí)那些內(nèi)容3.為什么學(xué)習(xí)Web前端開發(fā)Web前端開發(fā)一般需要學(xué)習(xí)以下內(nèi)容：程序編程語言目前大多數(shù)網(wǎng)站都是動態(tài)網(wǎng)站，雖然Web前端工程師不需要進(jìn)行大量的動態(tài)網(wǎng)站程序開發(fā)，但是卻經(jīng)常性的需要和程序開發(fā)人員進(jìn)行配合和業(yè)務(wù)銜接，因此掌握一定的動態(tài)網(wǎng)站開發(fā)語言對于工作來講非常必要。Web前端工程師應(yīng)該掌握一門動態(tài)網(wǎng)站開發(fā)語言，例如PHP、ASP.NET，能夠具備一定的開發(fā)能力，能夠理解動態(tài)網(wǎng)站開發(fā)語言的工作原理。643.4需要學(xué)習(xí)那些內(nèi)容3.為什么學(xué)習(xí)Web前端開發(fā)Web前端開發(fā)工作需要一定的設(shè)備來開展工作，初學(xué)者也需要一定的條件方能開展學(xué)習(xí)工作。通常需要的設(shè)備有以下幾種。性能穩(wěn)定的計(jì)算機(jī)額外的內(nèi)存大一些的顯示器移動設(shè)備653.5需要購買哪些設(shè)備3.為什么學(xué)習(xí)Web前端開發(fā)Web前端開發(fā)除了學(xué)習(xí)最基礎(chǔ)和最核心的技術(shù)外，還需要掌握和具備其他技術(shù)和能力。主要體現(xiàn)在以下幾個方面:計(jì)算機(jī)專業(yè)知識，包括編譯原理、計(jì)算機(jī)網(wǎng)絡(luò)、操作系統(tǒng)、算法原理、軟件工程、軟件測試原理等專業(yè)計(jì)算機(jī)知識，這些知識能夠幫助開發(fā)者更好地理解和掌握Web前端開發(fā)技術(shù)，并幫助開發(fā)人員更快速地學(xué)習(xí)。知識管理、總結(jié)分享的能力。663.6除了技術(shù)，還需要學(xué)什么3.為什么學(xué)習(xí)Web前端開發(fā)Web前端開發(fā)出了學(xué)習(xí)最基礎(chǔ)和最核心的技術(shù)外，還需要掌握和具備其他技術(shù)和能力,主要體現(xiàn)在以下幾個方面:溝通技巧、團(tuán)隊(duì)協(xié)作開發(fā)、需求管理、項(xiàng)目管理的能力。代碼模塊化開發(fā)的基本方法和技術(shù)。代碼版本管理的技術(shù)。交互設(shè)計(jì)、可用性、可訪問性的原理和技術(shù)。673.6除了技術(shù)，還需要學(xué)什么684.項(xiàng)目管理系統(tǒng)簡介項(xiàng)目管理，就是通過合理地組織，在規(guī)定的時間、預(yù)算和質(zhì)量目標(biāo)范圍內(nèi)完成項(xiàng)目的各項(xiàng)工作。即從項(xiàng)目的投資決策開始到項(xiàng)目結(jié)束的全過程進(jìn)行計(jì)劃、組織、指揮、協(xié)調(diào)、控制和評價，以實(shí)現(xiàn)項(xiàng)目的目標(biāo)。在項(xiàng)目管理方法論上主要包含以下三個方面：階段化管理：指從立項(xiàng)之初直到系統(tǒng)運(yùn)行維護(hù)的全過程。量化管理：將每個階段數(shù)量化，分清責(zé)任。優(yōu)化管理：分析項(xiàng)目每部分所蘊(yùn)涵的知識、經(jīng)驗(yàn)和教訓(xùn)，更好地發(fā)揚(yáng)項(xiàng)目進(jìn)程中的經(jīng)驗(yàn)，吸取教訓(xùn)。696.1什么是項(xiàng)目管理4.項(xiàng)目管理系統(tǒng)項(xiàng)目管理是為了讓軟件項(xiàng)目的生命周期（從分析、設(shè)計(jì)、編碼到測試、維護(hù)全過程）都能在管理控制之下，最終達(dá)到以下的目的：合理安排，降低成本加強(qiáng)項(xiàng)目的團(tuán)隊(duì)合作，提高項(xiàng)目團(tuán)隊(duì)的戰(zhàn)斗力降低項(xiàng)目風(fēng)險，提高項(xiàng)目實(shí)施的成功率有效控制項(xiàng)目范圍，增強(qiáng)項(xiàng)目的可控性706.2項(xiàng)目管理的目的4.項(xiàng)目管理系統(tǒng)簡介MicrosoftProject是Microsoft公司開發(fā)銷售的項(xiàng)目管理軟件程序。軟件設(shè)計(jì)目的在于協(xié)助項(xiàng)目經(jīng)理發(fā)展計(jì)劃、為任務(wù)分配資源、跟蹤進(jìn)度、管理預(yù)算和分析工作量。MicrosoftOfficeProject將可用性、強(qiáng)大的功能和靈活性有機(jī)融合，提供了可靠的項(xiàng)目管理工具，以便更加有效且高效地管理項(xiàng)目。716.3項(xiàng)目管理系統(tǒng)-MicrosoftProject4.項(xiàng)目管理系統(tǒng)主要特點(diǎn)有效地管理和了解項(xiàng)目日程：使用OfficeProject設(shè)置對項(xiàng)目工作組、管理和客戶的現(xiàn)實(shí)期望，以制定日程、分配資源和管理預(yù)算。構(gòu)建專業(yè)的圖表和圖示：“可視報(bào)表”引擎可以基于Project數(shù)據(jù)生成Visio圖表和Excel圖表的模板，使用該引擎通過專業(yè)的報(bào)表和圖表來分析和報(bào)告Project數(shù)據(jù)。根據(jù)需要跟蹤項(xiàng)目：通過使用一組豐富的預(yù)定義或自定義衡量標(biāo)準(zhǔn)來幫助跟蹤所需的相關(guān)數(shù)據(jù)，通過在基準(zhǔn)中保存項(xiàng)目快照來跟蹤項(xiàng)目進(jìn)行期間的項(xiàng)目性能情況。726.3項(xiàng)目管理系統(tǒng)-MicrosoftProject4.項(xiàng)目管理系統(tǒng)簡介Collabtive是一款完全基于網(wǎng)絡(luò)的、部署于服務(wù)器端的協(xié)作開發(fā)與項(xiàng)目管理工具。提供的功能主要包括項(xiàng)目管理，即實(shí)時聊天工具，任務(wù)、文件管理，時間跟蹤，多語言支持。也可將活動紀(jì)錄以XLS檔和PDF檔匯出。每個項(xiàng)目是由若干個任務(wù)列表組成的，而每個任務(wù)列表又由若干具體任務(wù)組成。這樣一級一級的細(xì)分，可以使項(xiàng)目趨于合理明晰化，充分明確項(xiàng)目組每個成員的職責(zé)和任務(wù)。736.4項(xiàng)目管理系統(tǒng)-Collabtive74現(xiàn)場演示：Collabtive服務(wù)的部署。使用Collabtive實(shí)現(xiàn)團(tuán)隊(duì)項(xiàng)目管理。Collabtive項(xiàng)目管理的典型應(yīng)用場景重現(xiàn)。75Thanks.Web前端開發(fā)第2章：開發(fā)工具76本章主要內(nèi)容開發(fā)工具綜述原型設(shè)計(jì)工具開發(fā)工具調(diào)試工具代碼托管工具項(xiàng)目管理系統(tǒng)771.開發(fā)工具綜述Web前端開發(fā)工具根據(jù)開發(fā)的階段和用途不同，可分為:原型設(shè)計(jì)工具開發(fā)工具調(diào)試工具代碼托管工具78792.原型設(shè)計(jì)工具原型設(shè)計(jì)是將頁面的模塊、元素、人機(jī)交互的形式，利用線框描述的方法，將功能具體、生動地進(jìn)行表達(dá)。原型可劃分為以下3種類型：紙?jiān)停寒嬙谖臋n紙、白板上的設(shè)計(jì)原型、示意圖。特點(diǎn)為：便于修改和繪制，不便于保存和展示。低保真原型：基于現(xiàn)有的界面或系統(tǒng)，通過電腦進(jìn)行一些加工后的設(shè)計(jì)稿。特點(diǎn)為：示意更加明確，能夠包含設(shè)計(jì)的交互和反饋，但在美觀、效果等方面欠佳。高保真原型：產(chǎn)品演示Demo或概念設(shè)計(jì)展示。特點(diǎn)為：視覺上與實(shí)際產(chǎn)品等效，體驗(yàn)上與真實(shí)產(chǎn)品接近，但需要較多的投入，成本高。802.1什么是原型設(shè)計(jì)81原型設(shè)計(jì)的傳統(tǒng)流程2.原型設(shè)計(jì)工具簡介Axure是一款專業(yè)的快速原型設(shè)計(jì)工具，可以通過組件的方式幫助網(wǎng)站或軟件設(shè)計(jì)師快速建立帶有注釋的原型（流程圖、線框圖），并憑借自定義的可重用元件、動態(tài)面板以及豐富的腳本建立能夠展示基本功能或頁面邏輯的動態(tài)演示文件。Axure為用戶提供了豐富的組件樣式，通過該工具能夠創(chuàng)建低保真、高保真甚至接近于實(shí)際效果的界面。822.2原型設(shè)計(jì)工具-AxureRP2.原型設(shè)計(jì)工具主要特點(diǎn)快速建構(gòu)原型擁有全套web控件庫，直接拖拽即可快捷而簡便的制作產(chǎn)品原型。交互效果逼真，便于需求驗(yàn)證豐富的動態(tài)面板可以用來模擬各種復(fù)雜的交互效果，導(dǎo)出HTML后可以更加準(zhǔn)確的傳達(dá)信息架構(gòu)和頁面跳轉(zhuǎn)。832.2原型設(shè)計(jì)工具-AxureRP84現(xiàn)場演示：在Windows7系統(tǒng)平臺上安裝AxureRP8。AxureRP軟件界面和基本使用方法。使用AxureRP實(shí)現(xiàn)百度登錄頁（或其他頁面）的原型設(shè)計(jì)。3.開發(fā)工具開發(fā)工具的作用：編寫HTML、CSS和JavaScript程序。提高開發(fā)效率。853.1開發(fā)工具的作用3.開發(fā)工具簡介AdobeDreamweaver是第一個針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別開發(fā)的視覺化網(wǎng)頁開發(fā)工具，可用于設(shè)計(jì)并部署極具吸引力的網(wǎng)站和Web應(yīng)用程序，利用Dreamweaver可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的網(wǎng)頁，并提供強(qiáng)大的編碼環(huán)境及基于標(biāo)準(zhǔn)的WYSIWYG（所見即所得）設(shè)計(jì)界面。863.2網(wǎng)站開發(fā)工具-AdobeDreamweaver3.開發(fā)工具主要特點(diǎn)最佳的制作效率：Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand或Photoshop等文件移至網(wǎng)頁上。對菜單、快捷鍵與格式控制，只要一個簡單步驟即可完成。網(wǎng)站管理：快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁。無可比擬的控制能力：該軟件是唯一提供RoundtripHTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。所見即所得：整合動態(tài)式出版視覺編輯及電子商務(wù)功能，用戶不需要透過瀏覽器就能預(yù)覽網(wǎng)頁。樣板和XML：將內(nèi)容與設(shè)計(jì)分開，應(yīng)用于快速網(wǎng)頁更新和團(tuán)隊(duì)合作網(wǎng)頁編輯。873.2網(wǎng)站開發(fā)工具-AdobeDreamweaver88現(xiàn)場演示：在Windows7系統(tǒng)平臺上的安裝AdobeDreamweaverCS6。AdobeDreamweaverCS6的軟件界面和基本操作方法。創(chuàng)建站點(diǎn)。創(chuàng)建網(wǎng)頁。3.開發(fā)工具簡介NetBeans是一個為軟件開發(fā)者設(shè)計(jì)，自由、開放的IDE（集成開發(fā)環(huán)境），可建立桌面應(yīng)用、企業(yè)級應(yīng)用、Web開發(fā)、Java移動應(yīng)用程序開發(fā)、C/C++等。NetBeans幫助開發(fā)人員編寫、編譯、調(diào)試和部署應(yīng)用，并將版本控制融入其中。NetBeans可以實(shí)現(xiàn)跨平臺應(yīng)用，包括Windows、Linux、MacOS和Solaris等操作系統(tǒng)。893.3網(wǎng)站開發(fā)工具-OracleNetbeans3.開發(fā)工具主要特點(diǎn)功能全面的Web應(yīng)用開發(fā)環(huán)境：開發(fā)者可通過頁面檢查、CSS樣式編輯器和JavaScript編輯器、調(diào)試器等工具來提升開發(fā)效率。NetBeansHTTP監(jiān)視器：開發(fā)者可以通過HTTP監(jiān)視器來監(jiān)視請求、HTTPHeader、cookies、會話、servlet上下文及客戶端/服務(wù)器端參數(shù)，并將其輸出到一個日志中進(jìn)行查看。代碼自動完成：NetBeans只需鍵入幾個字符，即可進(jìn)行代碼補(bǔ)全提醒。903.3網(wǎng)站開發(fā)工具-OracleNetbeans3.開發(fā)工具簡介VisualStudioCodeMicrosoftVisualStudioCode是微軟公司發(fā)布的運(yùn)行于MacOSX、Windows和Linux環(huán)境，針對編寫現(xiàn)代Web和云應(yīng)用的跨平臺源代碼編輯器。913.4網(wǎng)站開發(fā)工具-MicrosoftVisualStudio3.開發(fā)工具主要特點(diǎn)跨平臺：VisualStudioCode支持MacOSX、Windows和Linux。海量語言支持：支持30多種語言的代碼編輯器，可以編輯C#，VB，JavaScript，HTML，CSS，TypeScript，Ruby，Objective-C，PHP，JSON，Less，Sass，Markdown等。并排編輯：可以支持三個同步的文件編輯，每個人都可以發(fā)射命令提示符。智能感應(yīng)：確?；谡Z言特性能夠獲得友好的提示，同時在編寫代碼時結(jié)合上下文智能感應(yīng)。調(diào)試：可設(shè)置斷點(diǎn)，查看調(diào)用堆?；蜻\(yùn)行時的變量，暫?；蛑鸩綀?zhí)行代碼。923.4網(wǎng)站開發(fā)工具-MicrosoftVisualStudio93現(xiàn)場演示：在Windows7系統(tǒng)平臺上安裝MicrosoftVisualStudioCode。MicrosoftVSCode的軟件界面與基本操作。創(chuàng)建網(wǎng)站。創(chuàng)建網(wǎng)頁。4.調(diào)試工具什么是Web調(diào)試：在Web應(yīng)用開發(fā)過程中，開發(fā)人員需要借助工具了解程序的執(zhí)行情況，從而修正語法錯誤和邏輯錯誤，以確定程序的正確性、安全性和穩(wěn)定性等。Web調(diào)試的步驟：錯誤定位修改設(shè)計(jì)和代碼排除錯誤，防止新錯誤產(chǎn)生944.1什么是Web調(diào)試4.調(diào)試工具M(jìn)ozillaFirefoxMozillaFirefox，中文名為“火狐”，是一個開源網(wǎng)頁瀏覽器，使用Gecko引擎。Firefox由Mozilla基金會與數(shù)百個志愿者所開發(fā)，原名“Phoenix”（鳳凰），之后改名“MozillaFirebird”（火鳥），再改為現(xiàn)在的名字。使用Firefox可以在瀏覽器實(shí)時運(yùn)行HTML、CSS等代碼。Firefox內(nèi)置有強(qiáng)大的JavaScript調(diào)試工具，可以隨時暫停JS動畫，觀察靜態(tài)細(xì)節(jié)，還可以使用JS分析器來分析校準(zhǔn)，找到問題原因。954.2網(wǎng)站調(diào)試工具-FireFox4.調(diào)試工具GoogleChromeGoogle瀏覽器，是由Google公司開發(fā)的開放源代碼的網(wǎng)頁瀏覽器。該瀏覽器是基于其他開源軟件所撰寫，包括WebKit和Mozilla，目標(biāo)是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡單且有效率的使用者界面。Chrome對于HTML5和CSS3提供比較完善的支持。此外，Chrome還能夠模擬手機(jī)調(diào)試。964.3網(wǎng)站調(diào)試工具-GoogleChrome4.調(diào)試工具InternetExplorerInternetExplorer是微軟推出的一款隨所有新版本的Windows操作系統(tǒng)內(nèi)置的默認(rèn)網(wǎng)頁瀏覽器，同時也是微軟Windows操作系統(tǒng)的組成部分。InternetExplorer可以在瀏覽器中交互式地突出顯示被選擇的網(wǎng)頁元素，查看style元素，定位div等，用戶能夠直接在瀏覽器窗口中瀏覽、傳輸和更新HTMLDOM。974.4網(wǎng)站調(diào)試工具-InternetExplorer4.調(diào)試工具M(jìn)icrosoftEdgeMicrosoftEdge是微軟在2015年發(fā)布的，為了取代InternetExploer，設(shè)計(jì)注重實(shí)用和極簡主義,渲染引擎為EdgeHTML。MicrosoftEdge加強(qiáng)了源代碼的導(dǎo)航能力，支持JavaScript和TypeScript跳轉(zhuǎn)至定義；對控制臺進(jìn)行改進(jìn)，標(biāo)出某個日志消息來自于源代碼的哪一部分，使用Esc鍵打開控制臺，消息中的鏈接能夠進(jìn)行點(diǎn)擊；DOM瀏覽器的集成，支持元素高亮，從時間線中檢閱某個元素。984.4網(wǎng)站調(diào)試工具-InternetExplorer99現(xiàn)場演示：使用FireFox審查網(wǎng)頁頁面的元素。使用FireFox進(jìn)行網(wǎng)頁調(diào)試。5.代碼托管工具場景一：

某公司進(jìn)行方案設(shè)計(jì)，最初提供方案A，討論后更改成為B，進(jìn)一步討論仍然選擇A，此時發(fā)現(xiàn)A沒有備份。場景二：

一個項(xiàng)目需要多個工程師合作完成，工程師每天對修訂的文件進(jìn)行合并無法統(tǒng)一進(jìn)度，團(tuán)隊(duì)協(xié)作困難。場景三：

項(xiàng)目開發(fā)中，開發(fā)服務(wù)器硬盤故障，而程序無備份。1005.1為什么要進(jìn)行代碼托管5.代碼托管工具代碼托管主要有以下方面功能：版本控制：每一次改動是一個版本，在必要時可以迅速、準(zhǔn)確地取出相應(yīng)的版本。靈活：對于大型項(xiàng)目，可以根據(jù)需要從云端復(fù)制部分代碼到本地，開發(fā)時間不受時間、地域的限制。備份：將代碼進(jìn)行托管，同時也是對代碼進(jìn)行備份，是項(xiàng)目安全的一個保障。并行開發(fā)：允許多個團(tuán)隊(duì)同時開發(fā)一個應(yīng)用程序的多個版本，從而提高了整體的效率。1015.2代碼托管的基本功能5.代碼托管工具簡介GitHub是面向開源及私有軟件項(xiàng)目的托管平臺。GitHub簡化了版本控制的管理和操作流程，為開發(fā)者提供了更好的交流平臺。使用GitHub使創(chuàng)建項(xiàng)目變得非常輕松，創(chuàng)建者只需在GitHub上點(diǎn)擊一下鼠標(biāo)即可創(chuàng)建一個新版本庫。1025.3代碼托管工具-GitHub5.代碼托管工具GitHub的操作過程為：1035.3代碼托管工具-GitHub5.代碼托管工具主要特點(diǎn)對Git的完整支持：相比其他開源項(xiàng)目托管平臺，GitHub對Git版本庫提供了完整的協(xié)議支持，支持HTTP協(xié)議、Git-daemon、SSH協(xié)議。在線編輯文件：GitHub提供了在線編輯文件的功能，不熟悉Git的用戶也可以直接通過瀏覽器修改版本庫里的文件。社交編程：將社交網(wǎng)絡(luò)引入項(xiàng)目托管平臺，用戶可以關(guān)注項(xiàng)目、關(guān)注其它用戶進(jìn)而了解項(xiàng)目和開發(fā)者動態(tài)。1045.3代碼托管工具-GitHub5.代碼托管工具簡介SVN（Subversion），是一個開放源代碼的版本控制系統(tǒng)，用于團(tuán)隊(duì)開發(fā)中的多人文檔操作的更新、處理和合并。SVN能夠跨平臺使用，支持大多數(shù)常見的操作系統(tǒng)。1055.4代碼托管工具-SVN5.代碼托管工具主要特點(diǎn)統(tǒng)一的版本號：任何一次提交都會對所有文件增加到同一個新版本號，即使是提交并不涉及的文件。原子提交：進(jìn)行一系列相關(guān)的更改后，可以選擇要提交的內(nèi)容。一致的數(shù)據(jù)操作：Subversion用二進(jìn)制差異算法描述文件的變化，對于文本（可讀）和二進(jìn)制（不可讀）文件其操作方式是一致的。高效的分支和標(biāo)簽操作：在Subversion中，分支與標(biāo)簽操作的開銷與工程的大小無關(guān)。Subversion的分支和標(biāo)簽操作的作用只是一種類似于硬鏈接的機(jī)制拷貝整個工程。1065.4代碼托管工具-SVN5.代碼托管工具使用GitHub開源平臺實(shí)現(xiàn)網(wǎng)站代碼托管的過程：創(chuàng)建GitHub賬號，填寫注冊信息1075.5案例：使用GitHub開源平臺實(shí)現(xiàn)網(wǎng)站代碼托管5.代碼托管工具創(chuàng)建項(xiàng)目1085.5案例：使用GitHub開源平臺實(shí)現(xiàn)網(wǎng)站代碼托管5.代碼托管工具指定用戶名和電子郵件1095.5案例：使用GitHub開源平臺實(shí)現(xiàn)網(wǎng)站代碼托管5.代碼托管工具GitHub選擇的默認(rèn)通信方式是SSH，所以要先在Git中生成公鑰文件。1105.5案例：使用GitHub開源平臺實(shí)現(xiàn)網(wǎng)站代碼托管5.代碼托管工具檢測是否能夠通過SSH連接Github在本地建立一個目錄1115.5案例：使用GitHub開源平臺實(shí)現(xiàn)網(wǎng)站代碼托管5.代碼托管工具把創(chuàng)建的目錄變成Git可以管理的倉庫創(chuàng)建文件，并將文件導(dǎo)入到倉庫1125.5案例：使用GitHub開源平臺實(shí)現(xiàn)網(wǎng)站代碼托管5.代碼托管工具將版本庫添加到遠(yuǎn)程版本庫上傳到GitHub1135.5案例：使用GitHub開源平臺實(shí)現(xiàn)網(wǎng)站代碼托管114查看上傳文件115現(xiàn)場演示：使用OSChina的GibHub服務(wù)，實(shí)現(xiàn)項(xiàng)目代碼托管與版本控制。使用SVN服務(wù)，實(shí)現(xiàn)項(xiàng)目版本管理和團(tuán)隊(duì)合作開發(fā)。116Thanks.Web前端開發(fā)第3章：初識HTML5117本章主要內(nèi)容HTML概述HTML5的優(yōu)勢HTML5的新特征HTML5的文檔結(jié)構(gòu)1181.HTML概述1982年，英國人蒂姆·伯納斯·李為了方便世界各地的物理學(xué)家能夠進(jìn)行合作研究以及信息共享，創(chuàng)造了HTML語言，之后HTML發(fā)展成了互聯(lián)網(wǎng)上應(yīng)用最為廣泛的標(biāo)記語言。HTML是HyperTextMarkupLanguage（超文本標(biāo)記語言）的縮寫。使用HTML元素編寫的文檔稱為HTML文檔，目前最新版本是HTML5.0。HTML是目前在網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML文檔是由HTML元素組成的描述性文本，HTML標(biāo)簽可以識別文字、圖形、動畫、聲音、表格和鏈接等網(wǎng)頁中常用的組成部分。1191.1什么是HTML1.HTML概述從1993年互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布，到1999年W3C發(fā)布HTML4.01標(biāo)準(zhǔn)，HTML共經(jīng)歷過5個版本。HTML不僅成為Web上最主要的文檔格式，而且在個人及商業(yè)應(yīng)用中都發(fā)揮著重要作用。1201.2HTML的發(fā)展歷程1.HTML概述在HTML語言的發(fā)展歷史中，大致經(jīng)歷了如下發(fā)展歷史。HTML：1993年6月由互聯(lián)網(wǎng)工程小組發(fā)布的HTML工作草案。HTML2.0：1995年11月作為RFC1866發(fā)布。HTML3.2：1996年1月14日由W3C組織發(fā)布，是HTML文檔第一個被廣泛使用的標(biāo)準(zhǔn)。HTML4.0：1997年12月18日由W3C組織發(fā)布，也是W3C推薦標(biāo)準(zhǔn)。1211.2HTML的發(fā)展歷程1.HTML概述在HTML語言的發(fā)展歷史中，大致經(jīng)歷了如下發(fā)展歷史。HTML4.01：1999年12月24日由W3C組織發(fā)布，是HTML文檔另一個重要的、廣泛使用的標(biāo)準(zhǔn)。XHTML1.0：發(fā)布于2000年1月26日，是W3C組織推薦標(biāo)準(zhǔn)，后來經(jīng)過修訂于2002年8月1重新發(fā)布。HTML5：2014年10月29日，W3C的HTML工作組正式發(fā)布了HTML5的正式推薦標(biāo)準(zhǔn)（W3CRecommendation）。1221.2HTML的發(fā)展歷程1.HTML概述為了推動Web標(biāo)準(zhǔn)化，一些公司聯(lián)合起來，成立了WebHypertextApplicationTechnologyWorkingGroup（WHATWG，Web超文本應(yīng)用技術(shù)工作組）組織。WHATWG致力于Web表單和應(yīng)用程序，而W3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）專注于XHTML2.0。在2006年，雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個新版本的HTML，即HTML5。1231.3HTML5的發(fā)展史1.HTML概述HTML5的第一份正式草案已于2008年1月22日公布。目前，HTML5仍處于不斷的完善之中。大部分瀏覽器已經(jīng)具備HTML5的支持。目前各種主流瀏覽器（如InternetExplorer、Chrome、Firefox、Opera、Safari等）都對HTML5有著良好的兼容性。2012年12月17日，萬維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺的奠基石?！?241.3HTML5的發(fā)展史1.HTML概述2013年5月6日，HTML5.1正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂萬維網(wǎng)的核心語言：超文本標(biāo)記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素的操作性。2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過幾乎8年的艱辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于最終制定完成了，并已公開發(fā)布。1251.3HTML5的發(fā)展史1.HTML概述在2004年W3C成員內(nèi)部的一次研討會上，Opera公司的代表伊恩??？松↖anHickson）提出了一個擴(kuò)展和改進(jìn)HTML的建議。他建議新任務(wù)組可以跟XHTML2并行，并在已有HTML的基礎(chǔ)上開展工作，目標(biāo)是對HTML進(jìn)行擴(kuò)展。但是W3C并未通過該建議，之后Opera、Apple等瀏覽器廠商以及其他成員脫離了W3C，并成立了WHATWG（WebHypertextApplicationTechnologyWorkingGroup，Web超文本應(yīng)用技術(shù)工作組），致力于Web表單和應(yīng)用程序的研究。1261.4HTML5的開發(fā)團(tuán)隊(duì)1.HTML概述WHATWG在HTML的基礎(chǔ)上開展工作，向其中添加新功能。該工作組成員大部分為瀏覽器廠商，因此可以保證實(shí)現(xiàn)各種新奇、可使用的創(chuàng)新。不斷提出的創(chuàng)新，逐一在瀏覽器中實(shí)現(xiàn)。WHATWG的工作效率很高，不久就初見成效。在此期間，W3C的XHTML2沒有什么實(shí)質(zhì)性的進(jìn)展。W3C在2007年組建了HTML5工作組。在這兩個工作組共同的努力下，確定了設(shè)計(jì)HTML5所要堅(jiān)持的原則，統(tǒng)一了HTML5語言規(guī)范，經(jīng)過8年的艱辛努力，于2014年10月29日由W3C公開發(fā)布。1271.4HTML5的開發(fā)團(tuán)隊(duì)1.HTML概述HTML5的開發(fā)是由三個重要組織負(fù)責(zé)的，具體如下。WHATWG：由來自Apple、Mozilla、Google、Opera等瀏覽器廠商組成，成立于2004年。WHATWG開發(fā)HTML和Web應(yīng)用API，同時為各瀏覽器廠商以及其他有意向的組織提供開放式合作。W3C：W3C管轄的HTML工作組，目前負(fù)責(zé)發(fā)布HTML5規(guī)范。IETF（InternetEngineeringTaskForce，因特網(wǎng)工程任務(wù)組）：該任務(wù)組下轄HTTP等負(fù)責(zé)Internet協(xié)議的團(tuán)隊(duì)。HTML5定義的一種新API（WebSocketAPI）依賴于新的WebSocket協(xié)議，IETF工作組負(fù)責(zé)開發(fā)協(xié)議。1281.4HTML5的開發(fā)團(tuán)隊(duì)1.HTML概述W3School是W3C中國社區(qū)成員，致力于推廣W3C標(biāo)準(zhǔn)技術(shù)，是因特網(wǎng)上最大的Web開發(fā)者資源，同時是完全免費(fèi)的、非盈利性的，并且在不斷升級和更新中。W3School包括全面的教程、完善的參考手冊以及龐大的代碼庫，可供HTML5學(xué)習(xí)者快速學(xué)習(xí)并了解HTML5的開發(fā)及使用方法。1291.5HTML5官方資源2.HTML5優(yōu)勢相對于之前的版本，HTML5有著以下優(yōu)勢?？鐬g覽器的兼容性增強(qiáng)交互功能更好的存儲技術(shù)用戶優(yōu)先更簡單的代碼通用訪問1302.1優(yōu)勢2.HTML5優(yōu)勢跨瀏覽器的兼容性在一個瀏覽器中可以正常運(yùn)行的HTML+CSS+JavaScript頁面，換一個瀏覽器之后，可能會出現(xiàn)很多問題，比如頁面布局混亂、JavaScript運(yùn)行出錯等等。因此跨瀏覽器兼容就顯得尤為重要了。目前各種主流瀏覽器（如InternetExplorer、Chrome、Firefox、Opera、Safari等）都對HTML5有著良好的兼容性。在HTML5以前，各種瀏覽器對HTML、JavaScript的支持很不統(tǒng)一，這樣就造成了同一個頁面在不同瀏覽器中的表現(xiàn)不一致。HTML5的目標(biāo)是詳細(xì)分析各瀏覽器所具有的功能，并為此基礎(chǔ)制定一個通用規(guī)范，并要求各瀏覽器能支持這通用標(biāo)準(zhǔn)。1312.1優(yōu)勢2.HTML5優(yōu)勢增強(qiáng)交互功能在傳統(tǒng)的Web應(yīng)用中，很多功能只能通過插件或者復(fù)雜程序來實(shí)現(xiàn)。在Web中使用插件的方式雖然很常見，但是存在很多問題：插件安裝可能失敗。插件可以被禁用或者屏蔽（如Flash插件）。插件自身會成為被攻擊的對象。插件不容易與HTML文檔的其他部分集成，因?yàn)榇嬖诓寮吔?、剪裁和透明度問題。1322.1優(yōu)勢2.HTML5優(yōu)勢增強(qiáng)交互功能插件使用的是自帶的渲染模型，與普通Web頁面所使用的不一樣，所以當(dāng)彈出來的或者其他的可視化元素與插件重疊時，會發(fā)生錯誤。HTML5很好地解決了這些問題，它提供了一些不依托于插件的解決方案，如不使用Flash插件的視頻播放和音頻播放。以HTML5中的canvas元素為例，有很多非常底層的事情以前是沒辦法做到的（比如在HTML4的頁面中就很難畫出對角線），而有了canvas就可以很容易地實(shí)現(xiàn)了。1332.1優(yōu)勢2.HTML5優(yōu)勢更好的存儲技術(shù)HTML5中提供了本地存儲功能。其中將比較老的技術(shù)cookie和客戶端數(shù)據(jù)庫融合。但是它比cookie更好用，因?yàn)橹С侄鄠€存儲，HTML5存儲技術(shù)擁有更好的安全和性能，即使瀏覽器關(guān)閉后也可以保存并且所有主流瀏覽器都支持。本地存儲對于Web前端開發(fā)的改變可以說是革命性的，它能夠保存數(shù)據(jù)到用戶的瀏覽器中，這就意味者可以通過此功能創(chuàng)建一些應(yīng)用特性，例如：保存用戶信息、緩存數(shù)據(jù)、加載用戶上一次的應(yīng)用狀態(tài)等。1342.1優(yōu)勢2.HTML5優(yōu)勢用戶優(yōu)先HTML5規(guī)范是基于用戶優(yōu)先準(zhǔn)則編寫的，其宗旨是“用戶即上帝”，這意味著在遇到無法解決的沖突時，規(guī)范會把用戶放到第一位，其次是頁面作者，再者是實(shí)現(xiàn)者（瀏覽器），接著是規(guī)范制定者，最后才考慮理論的純粹性。因此，HTML5的絕大部分是非常實(shí)用的。例如，下面的幾種代碼寫法在HTML5中都能被識別。1352.1優(yōu)勢2.HTML5優(yōu)勢更簡單的代碼HTML5要的就是簡單、避免不必要復(fù)雜性。HTML5的口號是“簡單至上，盡可能簡化”，因此，HTML做了如下改進(jìn)。以瀏覽器原生能力替代復(fù)雜的JavaScript代碼。新的簡化的DOCTYPE。新的簡化的字符集聲明。簡單而強(qiáng)大的HTML5API。1362.1優(yōu)勢2.HTML5優(yōu)勢通用訪問通用訪問遠(yuǎn)側(cè)分為三個概念進(jìn)行描述：可訪問性：出于對殘障用戶的考慮，HTML5與WAI（WebAccessibilityInitiative，Web可訪問性倡議）和ARIA（AccessibleRichInternetApplication，可訪問的富Internet應(yīng)用）做到了緊密結(jié)合，WAI-ARIA中以屏幕閱讀器為基礎(chǔ)的元素已經(jīng)被添加到HTML中。媒體中立：如果可能得話，HTML5的功能在所有不同設(shè)備和平臺上應(yīng)該都能正常運(yùn)行。支持所有語種：例如，新的<ruby>元素支持，東南亞頁面排版中會用到的Ruby注釋為頁面中的內(nèi)容添加注釋，如拼音。1372.1優(yōu)勢2.HTML5優(yōu)勢HTML5的新功能有：新的DOCTYPE和字符集語義化標(biāo)記更靈活的選擇符JavaScript的日志和調(diào)試DOMLevel31382.2新功能2.HTML5優(yōu)勢新的DOCTYPE和字符集根據(jù)HTML5設(shè)計(jì)準(zhǔn)則，Web頁面的DOCTYPE被極大地簡化了。HTML4中DOCTYPE代碼如下所示。HTML5中DOCTYPE代碼如下所示。HTML5之前的字符集聲明如下所示。HTML5中的字符集聲明如下所示。1392.2新功能2.HTML5優(yōu)勢語義化標(biāo)記在HTML5出來之前，Web前端開發(fā)者使用div來表示頁面章節(jié)，但div沒有實(shí)際意義，即使通過添加class和id的方式形容這塊內(nèi)容的意義，標(biāo)簽本身卻沒有含義，僅僅是提供給瀏覽器的指令，只是定義一個網(wǎng)頁的某些部分。HTML5為頁面章節(jié)定義了含義，也就是語義化元素。雖然對Web前端開發(fā)者來說這些語義化元素和普通的div元素沒有任何區(qū)別，但卻為瀏覽器提供了語義的支持，使得瀏覽器對HTML的解析更智能快捷。1402.2新功能2.HTML5優(yōu)勢語義化標(biāo)記HTML5引入了一組新的片段類元素，在目前主流的瀏覽器中已經(jīng)支持。1412.2新功能2.HTML5優(yōu)勢更靈活的選擇符除了語義化元素外，HTML5還引入了一種用于查找頁面DOM元素的快捷方式。在HTML5出現(xiàn)之前，用來在頁面中查找特定元素的函數(shù)如表所示。1422.2新功能2.HTML5優(yōu)勢更靈活的選擇符新的SelectorsAPI發(fā)布之后，可以用更精確的方式來指定希望獲取的元素，而不必再用標(biāo)準(zhǔn)DOM的方式循環(huán)遍歷。SelectorAPI與CSS中使用的選擇規(guī)則一樣，通過它可以查找頁面中的一個或多個元素。例如，CSS可以基于嵌套、兄弟節(jié)點(diǎn)和子模式進(jìn)行元素選擇，CSS最新版本添加了更多對偽類的支持，還支持對屬性和層次的隨意組合疊加。能按照CSS規(guī)則來選取DOM的元素的函數(shù)如表所示。1432.2新功能2.HTML5優(yōu)勢更靈活的選擇符SelectorsAPI函數(shù)可以同時指定多個選擇規(guī)則，例如：對于querySelector()來說，選擇的是滿足規(guī)則中任意條件的第一個元素。對于querySelectorAll()來說，頁面中的元素只要滿足規(guī)則中的任何一個條件，都會被返回。多條規(guī)則是用逗號分隔的。1442.2新功能2.HTML5優(yōu)勢JavaScript日志和調(diào)試JavaScript日志和瀏覽器內(nèi)調(diào)試從技術(shù)上講不屬于HTML5的功能，但是過去幾年里，相關(guān)工具的發(fā)展出現(xiàn)了質(zhì)的飛躍。第一個可以用來分析Web頁面及其所運(yùn)行腳本的強(qiáng)大工具是一款名為Firebug的Firefox插件。目前，大部分主流瀏覽器已經(jīng)具有相同調(diào)試功能，例如Safari的WebInspector、Google的Chrome開發(fā)者工具（DeveloperTools）、IE的開發(fā)者工具（DeveloperTools），以及Opera的Dragonfly等。很多調(diào)試工具支持設(shè)置斷點(diǎn)來暫停代碼執(zhí)行、分析程序狀態(tài)以及查看變量的當(dāng)前值。console.logAPI已成為JavaScript開發(fā)人員記錄日志的事實(shí)標(biāo)準(zhǔn)。為了便于開發(fā)人員查看記錄到控制臺的信息，很多瀏覽器提供了分欄窗格的視圖。1452.2新功能2.HTML5優(yōu)勢DOMLevel3事件處理是目前Web應(yīng)用開發(fā)中最為復(fù)雜的內(nèi)容之一。絕大數(shù)瀏覽器都支持處理事件和元素的標(biāo)準(zhǔn)API。早期IE實(shí)現(xiàn)的是與最終標(biāo)準(zhǔn)不同的事件模型，IE9之后版本也逐步支持DOMLevel2和DOMLevel3的特性。在所有支持HTML5的瀏覽器中，可以使用相同的代碼來實(shí)現(xiàn)DOM操作和事件處理，包括非常重要的addEventListener()和dispatchEvent()方法。1462.2新功能3.HTML5新特征與HTML4相比，HTML5在語法上發(fā)生了很大的變化。但是，HTML5中的語法變化，與其他開發(fā)語言中的語法變化在根本意義上有所不同。最大的問題在于在HTML5之前幾乎沒有符合標(biāo)準(zhǔn)規(guī)范的Web瀏覽器。HTML的語法是在SGML（StandardGeneralizedMarkupLanguage）語言的基礎(chǔ)上建立起來的。SGML語法非常復(fù)雜，要開發(fā)能夠解析SGML語法的程序也很不容易，很多瀏覽器都不包含SGML的分析器。雖然HTML基本上遵循SGML的語法，但是對于HTML的執(zhí)行在各瀏覽器之間并沒有一個統(tǒng)一的標(biāo)準(zhǔn)。1473.1語法的改變3.HTML5新特征在這種情況下，各瀏覽器之間的兼容性和操作性在很大程度上取決于網(wǎng)站或網(wǎng)絡(luò)應(yīng)用程序的開發(fā)者們在開發(fā)上所做的共同努力，而瀏覽器本身始終是存在缺陷的。在HTML5的制定中提高Web瀏覽器之間的兼容性是一個很大的目標(biāo)，為了確保兼容性，就要有一個統(tǒng)一的標(biāo)準(zhǔn)。在HTML5中，圍繞著Web標(biāo)準(zhǔn)，重新定義了一套在現(xiàn)有HTML基礎(chǔ)上修改而來的語法，使運(yùn)行在各瀏覽器時都能夠符合這個通用標(biāo)準(zhǔn)。因?yàn)镠TML5語法解析的算法也都是提供了詳細(xì)的記載，所以各Web瀏覽器的供應(yīng)商們可以把HTML5分析器集中封裝在瀏覽器中。1483.1語法的改變3.HTML5新特征在HTML5中，新增加了很多元素，同時也移除了一些舊元素。1493.2元素3.HTML5新特征新增的結(jié)構(gòu)元素：section元素section元素表示頁面中的一個內(nèi)容區(qū)塊，比如章節(jié)、頁眉、頁腳或者頁面中的其他部分。它可以與h1、h2、h3、h4、h5、h6等元素結(jié)合起來使用，標(biāo)示文檔結(jié)構(gòu)。article元素article元素表示頁面中的一塊與上下文不相關(guān)的獨(dú)立內(nèi)容，如博客中一篇文章。aside元素aside元素表示article元素的內(nèi)容之外的。與article元素的內(nèi)容相關(guān)的輔助信息。1503.2元素3.HTML5新特征新增的結(jié)構(gòu)元素：header元素header元素表示頁面中一個內(nèi)容區(qū)域或整個頁面的標(biāo)題。hgroup元素hgroup元素用于對整個頁面或者頁面中一個內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。footer元素footer元素表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注。一般來說，它會包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者聯(lián)系信息。nav元素nav元素表示頁面中導(dǎo)航鏈接的部分。1513.2元素3.HTML5新特征新增的結(jié)構(gòu)元素：figure元素figure元素表示一段獨(dú)立的流內(nèi)容，一般表示文檔主題流內(nèi)容中的一個獨(dú)立單元。使用figcaption元素為figure元素組添加標(biāo)題。1523.2元素3.HTML5新特征新增的其他元素：video元素video元素定義視頻，比如電影片段或者其他視頻流。audio元素audio元素定義音頻，比如音樂或者其他音頻流。embed元素embed元素用來插入各種多媒體，格式可