《網(wǎng)頁(yè)設(shè)計(jì)與制作》課件第1章 初識(shí)Web應(yīng)用開發(fā)（全）

第一章初識(shí)Web應(yīng)用開發(fā)教學(xué)目標(biāo)通過本章的學(xué)習(xí)，了解網(wǎng)頁(yè)的概念和組成，了解W3C標(biāo)準(zhǔn)。理解HTML和CSS的功能和作用。熟悉VisualStudioCode工具的基本操作?！局R(shí)目標(biāo)】了解網(wǎng)頁(yè)的概念和組成。了解W3C標(biāo)準(zhǔn)。理解HTML和CSS的功能和作用。掌握VisualStudioCode工具的基本操作?！炯寄苣繕?biāo)】能夠安裝與配置VisualStudioCode工具。

能夠使用VisualStudioCode工具。能夠創(chuàng)建HTML程序。能夠調(diào)試運(yùn)行HTML應(yīng)用程序1.1.1網(wǎng)頁(yè)與網(wǎng)站的相關(guān)概念1．網(wǎng)頁(yè)與網(wǎng)站的定義網(wǎng)頁(yè)（WebPage）是網(wǎng)站中的一個(gè)頁(yè)面，是Internet展示信息的一種形式”。網(wǎng)頁(yè)中可以包含文字、圖像、表格、超鏈接、聲音、影像等，其中文字、圖像、超鏈接是組成網(wǎng)頁(yè)最基本的3個(gè)元素。網(wǎng)頁(yè)文件擴(kuò)展名通常為html或htm，此外還有asp、aspx、php、jsp等。網(wǎng)站是萬(wàn)維網(wǎng)上相關(guān)網(wǎng)頁(yè)的集合，是通過Internet向全世界發(fā)布信息的載體。1.1.1網(wǎng)頁(yè)與網(wǎng)站的相關(guān)概念2.網(wǎng)頁(yè)的類型雖然網(wǎng)頁(yè)的類型看上去多種多樣，但在制作網(wǎng)頁(yè)時(shí)可以將其用兩種類型來劃分。（1）按網(wǎng)頁(yè)在網(wǎng)站中的位置進(jìn)行分類，可以分為主頁(yè)和內(nèi)頁(yè)。主頁(yè)：用戶進(jìn)入網(wǎng)站時(shí)看到的第一個(gè)頁(yè)面就是主頁(yè)（homepage）。內(nèi)頁(yè)：通過主頁(yè)中的超鏈接打開的網(wǎng)頁(yè)就是內(nèi)頁(yè)。（2）按網(wǎng)頁(yè)的表現(xiàn)形式進(jìn)行分類，可以分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。靜態(tài)網(wǎng)頁(yè)：是指使用HTML語(yǔ)言編寫的網(wǎng)頁(yè)，其制作簡(jiǎn)單易學(xué)，但缺乏靈活性，在瀏覽網(wǎng)頁(yè)時(shí)瀏覽者和服務(wù)器不發(fā)生交互。動(dòng)態(tài)網(wǎng)頁(yè)：是指使用ASP、PHP、JSP、ASP.NET等程序生成的網(wǎng)頁(yè)，可以與瀏覽者進(jìn)行交互，也稱為交互式網(wǎng)頁(yè)。1.1.1網(wǎng)頁(yè)與網(wǎng)站的相關(guān)概念3.網(wǎng)頁(yè)的構(gòu)成網(wǎng)頁(yè)是由各個(gè)板塊構(gòu)成的，一般情況下一個(gè)網(wǎng)頁(yè)都包括Logo圖標(biāo)、導(dǎo)航條、Banner、內(nèi)容板塊、版尾板塊等部分。Logo圖標(biāo)是企業(yè)或者網(wǎng)站的標(biāo)志，如百度、新浪、騰訊、搜狐等。導(dǎo)航條是網(wǎng)站的重要組成部分。合理安排導(dǎo)航條可以幫助瀏覽者快速地查找所需的信息與內(nèi)容。Banner是網(wǎng)頁(yè)中的廣告，直譯就是旗幟、橫幅的意思，目的是展示網(wǎng)站內(nèi)容，吸引用戶。內(nèi)容板塊是網(wǎng)站的主體部分，通常內(nèi)容板塊包含文本、圖像、超鏈接、動(dòng)畫等媒體。版尾板塊就是網(wǎng)頁(yè)最底端的板塊，通常設(shè)置網(wǎng)站的版權(quán)信息。1.1.1網(wǎng)頁(yè)與網(wǎng)站的相關(guān)概念1.1.2網(wǎng)頁(yè)名詞解釋對(duì)于從事網(wǎng)頁(yè)制作工作的人員來說，有必要了解一些與互聯(lián)網(wǎng)相關(guān)的名詞，例如常見的Internet、WWW、HTTP等，具體介紹如下。1.InternetInternet就是通常所說的互聯(lián)網(wǎng)，是由一些使用公用語(yǔ)言互相通信的計(jì)算機(jī)連接而成的網(wǎng)絡(luò)。簡(jiǎn)單地說，互聯(lián)網(wǎng)就是將世界范圍內(nèi)不同國(guó)家、不同地區(qū)的眾多計(jì)算機(jī)連接起來形成的網(wǎng)絡(luò)平臺(tái)?；ヂ?lián)網(wǎng)實(shí)現(xiàn)了全球信息資源的共享，形成了一個(gè)能夠共同參與、相互交流的互動(dòng)平臺(tái)。通過互聯(lián)網(wǎng)，遠(yuǎn)在千里之外的朋友可以相互發(fā)送郵件、共同完成一項(xiàng)工作、共同娛樂。因此，互聯(lián)網(wǎng)最大的成功之處并不在于技術(shù)層面，而在于對(duì)人類生活的影響，可以說互聯(lián)網(wǎng)的出現(xiàn)是人類通信技術(shù)史上的一次革命。1.1.2網(wǎng)頁(yè)名詞解釋2.WWWWWW(WorldWideWeb)中文譯為“萬(wàn)維網(wǎng)”。但WWW不是網(wǎng)絡(luò)，也不代表Internet,它只是Internet提供的一種服務(wù)——網(wǎng)頁(yè)瀏覽服務(wù)。我們上網(wǎng)時(shí)通過瀏覽器閱讀網(wǎng)頁(yè)信息就是在使用WWW服務(wù)。WWW是Internet最主要的服務(wù)，許多網(wǎng)絡(luò)功能，如網(wǎng)上聊天、網(wǎng)上購(gòu)物等，都基于WWW服務(wù)。1.1.2網(wǎng)頁(yè)名詞解釋3.URLURL(UniformResourceLocator)中文譯為“統(tǒng)一資源定位符”。URL其實(shí)就是Web地址，俗稱“網(wǎng)址”。在萬(wàn)維網(wǎng)上的所有文件(HTML、CSS、圖片、音樂、視頻等)都有唯一的URL，只要知道文件的URL，就能夠?qū)υ撐募M(jìn)行訪問。URL可以是“本地磁盤”，也可以是局域網(wǎng)上的某一臺(tái)計(jì)算機(jī)，還可以是Internet上的站點(diǎn)，https:///就是包頭職業(yè)技術(shù)學(xué)院網(wǎng)站URL，如圖1-2所示。1.1.2網(wǎng)頁(yè)名詞解釋4.DNSDNS（DomainNameSystem）是域名解析系統(tǒng)。在Internet上域名與IP地址之間是對(duì)應(yīng)的，域名（如淘寶網(wǎng)域名為

）雖然便于用戶記憶，但計(jì)算機(jī)只認(rèn)識(shí)IP地址（如

）,將好記的域名轉(zhuǎn)換成IP地址的過程稱為域名解析。DNS就是進(jìn)行域名解析的系統(tǒng)。1.1.2網(wǎng)頁(yè)名詞解釋5.HTTP和HTTPSHTTP（HyperTextTransferProtocol）中文譯為“超文本傳輸協(xié)議”。HTTP詳細(xì)規(guī)定了瀏覽器和萬(wàn)維網(wǎng)服務(wù)器之間互相通信的規(guī)則。HTTP是非?？煽康膮f(xié)議，具有強(qiáng)大的自檢能力，所有用戶請(qǐng)求的文件到達(dá)客戶端時(shí)，一定是準(zhǔn)確無(wú)誤的。由于HTTP協(xié)議傳輸?shù)臄?shù)據(jù)都是未加密的，因此使用HTTP協(xié)議傳輸隱私信息非常不安全，為了保證這些隱私數(shù)據(jù)能加密傳輸，網(wǎng)景公司設(shè)計(jì)了SSL（SecureSocketsLayer）協(xié)議,該協(xié)議用于對(duì)HTTP協(xié)議傳輸?shù)臄?shù)據(jù)進(jìn)行加密，從而誕生了HTTPS。簡(jiǎn)單來說，HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，要比HTTP協(xié)議安全。1.1.2網(wǎng)頁(yè)名詞解釋6.WebWeb本意是蜘蛛網(wǎng)或網(wǎng)的意思。對(duì)于普通用戶來說，Web僅僅是一種環(huán)境，即互聯(lián)網(wǎng)的使用環(huán)境、內(nèi)容等。而對(duì)于網(wǎng)站制作者來說，Web是一系列技術(shù)的復(fù)合總稱，包括網(wǎng)站的前臺(tái)布局、后臺(tái)程序、美工、數(shù)據(jù)庫(kù)開發(fā)等。1.1.2網(wǎng)頁(yè)名詞解釋7.W3C組織W3C（WorldWideWebConsortium）中文譯為“萬(wàn)維網(wǎng)聯(lián)盟”。萬(wàn)維網(wǎng)聯(lián)盟是著名的國(guó)際標(biāo)準(zhǔn)化組織。W3C最重要的工作是發(fā)展Web規(guī)范，自1994年成立以來，已經(jīng)發(fā)布了200多項(xiàng)影響深遠(yuǎn)的Web技術(shù)標(biāo)準(zhǔn)及實(shí)施指南，如超文本標(biāo)記語(yǔ)言（HTML）、可擴(kuò)展標(biāo)記語(yǔ)言（XML）等。這些規(guī)范有效地促進(jìn)了Web技術(shù)的兼容，對(duì)互聯(lián)網(wǎng)的發(fā)展和應(yīng)用起到了基礎(chǔ)性和根本性的支撐作用。1.1.3Web標(biāo)準(zhǔn)由于不同的瀏覽器對(duì)同一個(gè)網(wǎng)頁(yè)文件解析出來的效果可能不一致，為了讓用戶能夠看到正常顯示的網(wǎng)頁(yè)，Web開發(fā)者常常為需要兼容多個(gè)版本的瀏覽器而苦惱，當(dāng)使用新的硬件（如移動(dòng)電話）或軟件（如微瀏覽器）瀏覽網(wǎng)頁(yè)時(shí)，這種情況會(huì)變得更加嚴(yán)重。為了讓W(xué)eb更好地發(fā)展，在開發(fā)新的應(yīng)用程序時(shí)，瀏覽器開發(fā)商和站點(diǎn)開發(fā)商共同遵守標(biāo)準(zhǔn)就顯得尤為重要，為此W3C與其他標(biāo)準(zhǔn)化組織共同制定了一系列的Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)并不是某一個(gè)標(biāo)準(zhǔn),而是一系列標(biāo)準(zhǔn)的集合，主要包括結(jié)構(gòu)、表現(xiàn)和行為三個(gè)方面，具體解釋如下。1.1.3Web標(biāo)準(zhǔn)1.結(jié)構(gòu)結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)中用到的信息進(jìn)行分類與整理。在結(jié)構(gòu)中用到的技術(shù)主要包括HTML、XML和XHTML。HTML是超文本標(biāo)記語(yǔ)言（關(guān)于該語(yǔ)言會(huì)在1.2節(jié)介紹）,設(shè)計(jì)HTML的目的是創(chuàng)建結(jié)構(gòu)化的文檔以及提供文檔的語(yǔ)義。目前最新版本的超文本標(biāo)記語(yǔ)言是HTML5。XML是一種可擴(kuò)展標(biāo)簽語(yǔ)言。XML最初的目的是為了彌補(bǔ)HTML的不足，具有強(qiáng)大的擴(kuò)展性（如定義標(biāo)簽），可用于數(shù)據(jù)的轉(zhuǎn)換和描述。XHTML是可擴(kuò)展超文本標(biāo)記語(yǔ)言。XHTML是基于XML的標(biāo)記語(yǔ)言，是在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展建立起來的，用以實(shí)現(xiàn)HTML向XML的過渡，目前已逐漸被HTML5所取代1.1.3Web標(biāo)準(zhǔn)2.表現(xiàn)表現(xiàn)是指網(wǎng)頁(yè)展示給訪問者的外在樣式，一般包括網(wǎng)頁(yè)的版式、顏色、字體大小等。在網(wǎng)頁(yè)制作中，通常使用CSS來設(shè)置網(wǎng)頁(yè)的樣式。CSS（

CascadingStyleSheet）中文譯為“層疊樣式表“

CSS標(biāo)準(zhǔn)建立的目的是以CSS為基礎(chǔ)進(jìn)行網(wǎng)頁(yè)布局，控制網(wǎng)頁(yè)的樣式。

在網(wǎng)頁(yè)中可以使用CSS對(duì)文字和圖片以及模塊的背景和布局進(jìn)行相應(yīng)的設(shè)置。后期如果需要更改樣式，只需要調(diào)整CSS代碼即可

1.1.3Web標(biāo)準(zhǔn)3.行為行為是指網(wǎng)頁(yè)模型的定義及交互的編寫，主要包括D0M（對(duì)象模型）和ECMAScript兩個(gè)部分，具體解釋如下。DOM（DocumentObjectModel）指的是W3C中的文檔對(duì)象模型。W3C的文檔對(duì)象模型是中立于平臺(tái)和語(yǔ)言的接口，它允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。ECMAScript是ECMA(EuropeanComputerManufecturersAssociation)國(guó)際以JavaScript為基礎(chǔ)制定的標(biāo)準(zhǔn)腳本語(yǔ)言。JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)，并具有相對(duì)安全性的客戶端腳本語(yǔ)言，廣泛用于Web開發(fā)，常用來給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能，例如響應(yīng)用戶的各種操作。

1.2HTML、CSS簡(jiǎn)介HTML和CSS是網(wǎng)頁(yè)制作的標(biāo)準(zhǔn)語(yǔ)言，要想學(xué)好、學(xué)會(huì)網(wǎng)頁(yè)制作技術(shù)，首先需要對(duì)它們有一個(gè)整體的認(rèn)識(shí)。1.2.1HTML簡(jiǎn)介HTML(HyperTextMarkupLanguage)中文譯為“超文本標(biāo)記語(yǔ)言”，主要是通過HTML標(biāo)簽對(duì)網(wǎng)頁(yè)中的文本、圖片、聲音等內(nèi)容進(jìn)行描述。HTML提供了許多標(biāo)簽，如段落標(biāo)簽、標(biāo)題標(biāo)簽、超鏈接標(biāo)簽、圖片標(biāo)簽等，網(wǎng)頁(yè)中需要定義什么內(nèi)容，就用相應(yīng)的HTML標(biāo)簽描述即可。HTML之所以稱為超文本標(biāo)記語(yǔ)言，不僅是因?yàn)樗ㄟ^標(biāo)簽描述網(wǎng)頁(yè)內(nèi)容，同時(shí)也由于文本中包含了超鏈接。通過超鏈接將網(wǎng)站、網(wǎng)頁(yè)以及各種網(wǎng)頁(yè)元素鏈接起來，構(gòu)成了豐富多彩的網(wǎng)站。1.2.1HTML簡(jiǎn)介HTML5的發(fā)展歷史HTML1HTML2HTML3HTML5?時(shí)間(年)1993199519972014HTML4版本123451HTML1.0——在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布。2HTML2.0——1995年11月作為RFC（RequestForComments，請(qǐng)求評(píng)議）1866發(fā)布。3HTML3.2——1997年1月14日，W3C推薦標(biāo)準(zhǔn)。4HTML4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)。5HTML5——2014年10月28日，W3C推薦標(biāo)準(zhǔn)。1.2.2HTML5的優(yōu)勢(shì)HTML5作為HTML的最新版本，是HTML的傳遞和延續(xù)。從HTML4.0、XHTML再到HTML5，某種意義上講，這是HTML的更新與規(guī)范過程。因此，HTML5并沒有給用戶帶來多大的沖擊，老版本的大部分標(biāo)簽在HTML5版本中依然適用。相比于老版本的HTML，HTML5的優(yōu)勢(shì)主要體現(xiàn)在兼容、合理、易用3個(gè)方面。1.2.3CSS簡(jiǎn)介CSS通常稱為CSS樣式或?qū)盈B樣式表，主要用于設(shè)置HTML頁(yè)面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。CSS以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。在網(wǎng)頁(yè)設(shè)計(jì)中，HTML標(biāo)簽只用于搭建網(wǎng)頁(yè)的基本結(jié)構(gòu)，不使用標(biāo)簽屬性設(shè)置顯示樣式，所有的樣式交由CSS來設(shè)置。形成了結(jié)構(gòu)與表現(xiàn)相分離1.2.6網(wǎng)頁(yè)的展示平臺(tái)一瀏覽器瀏覽器是網(wǎng)頁(yè)運(yùn)行的平臺(tái)，常用的瀏覽器有IE瀏覽器、火狐瀏覽器、谷歌瀏覽器、Safari瀏覽器和歐朋瀏覽器等，其中IE、火狐和谷歌是目前互聯(lián)網(wǎng)上的三大瀏覽器，對(duì)于一般的網(wǎng)站而言，只要兼容IE瀏覽器、火狐瀏覽器和谷歌瀏覽器，即可滿足絕大多數(shù)用戶的需求。IEFireFoxChromeOperaSafari1.2.6網(wǎng)頁(yè)的展示平臺(tái)一瀏覽器從圖1-10可以看岀，谷歌瀏覽器無(wú)疑擁有最高的市場(chǎng)份額，在全球范圍內(nèi)約占60%，應(yīng)用非常廣泛。因此本書涉及的案例將全部在谷歌瀏覽器中運(yùn)行演示。1.3.1開發(fā)工具為了方便網(wǎng)頁(yè)制作，我們通常會(huì)選擇一些比較便捷的輔助工具，如VisualStudioCode、HBuilder、Editplus、Dreamweaver、WebStorm等。下面對(duì)這些工具做簡(jiǎn)單介紹。

1.VisualStudioCode微軟推出的良心之作，是一款免費(fèi)的、開源的、高性能的、跨平臺(tái)的、輕量級(jí)的代碼編輯器。其下載地址為：

“/”。VisualStudioCode支持大部分主流的開發(fā)語(yǔ)言，具有語(yǔ)法高亮、智能代碼補(bǔ)全、自定義快捷鍵、括號(hào)匹配和顏色區(qū)分等特點(diǎn)，適合所有開發(fā)環(huán)境。其優(yōu)勢(shì)是：其一，免費(fèi)、開源、有海量的擴(kuò)展插件，插件安裝十分簡(jiǎn)單，可以更好的幫助編寫代碼；其二，輕量，不會(huì)占用大量的內(nèi)存和CPU，不會(huì)對(duì)電腦造成卡頓；其三，自帶git，終端很強(qiáng)大，配合插件，終端可以連接遠(yuǎn)程Linux客戶端。1.3.1開發(fā)工具2.HBuilder、HBuilderXHBuilder工具是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。其下載地址為：“http://www.dcloud.io/”。HBuilder和HBuilderX這兩款工具的區(qū)別在于HBuilderX更加輕量，是HBuilder的下一代版本（Hbuilder已經(jīng)停止更新維護(hù)），其壓縮包大小僅十幾M，通過自定義插件如git的安裝來適應(yīng)自己開發(fā)的需要。快，是HBuilder的最大優(yōu)勢(shì)，通過完整的語(yǔ)法提示和代碼輸入法、代碼塊及很多配套，HBuilder能大幅提升HTML、js、css的開發(fā)效率。1.3.1開發(fā)工具3.EditplusEditPlus是一款由韓國(guó)SangilKim出品的一個(gè)超級(jí)小巧的IDE。EditPlus功能強(qiáng)大，可處理文本、HTML和程序語(yǔ)言，但是沒有代碼提示功能，只有語(yǔ)法高亮。其優(yōu)勢(shì)是速度快，適合快速查看代碼。4.DreamweaverDreamweaver是一款網(wǎng)頁(yè)代碼編輯器，并且利用一些前端代碼對(duì)網(wǎng)頁(yè)進(jìn)行快速的開發(fā)，并且通過智能搜索引擎對(duì)網(wǎng)頁(yè)進(jìn)行訪問，開發(fā)者利用視覺來減少出現(xiàn)的錯(cuò)誤。5.WebStormWebStorm是js開發(fā)工具，在國(guó)內(nèi)，很多人都稱為web前端開發(fā)神器，受到了好多開發(fā)者的一致好評(píng)，WebStorm軟件功能十分強(qiáng)大，并且WebStorm界面比較清晰，人性化設(shè)計(jì)，使用起來也是很方便的。1.3.2開發(fā)環(huán)境搭建與配置1.VSCode下載VSCode下載鏈接為:/。打開瀏覽器輸入網(wǎng)址(進(jìn)入到官網(wǎng))，然后進(jìn)入VSCode的首頁(yè),根據(jù)自己的操作系統(tǒng)選擇下載，我們這里選擇Windowsx64，然后點(diǎn)擊頁(yè)面右上角“DownLoad”按鈕進(jìn)行下載。1.3.2開發(fā)環(huán)境搭建與配置根據(jù)自己的操作系統(tǒng)選擇合適的版本，我們這里選擇“Windows7,8,10”，彈出“新建下載任務(wù)窗口”，選擇下載的位置，然后單擊“下載”按鈕，開始下載。1.3.2開發(fā)環(huán)境搭建與配置2.VSCode安裝VSCode安裝的具體步驟如下。（1）雙擊安裝圖標(biāo)，進(jìn)入到VSCode的安裝向?qū)Ы缑?，直接默認(rèn)點(diǎn)擊下一步，選擇“我接受協(xié)議”，單擊“下一步”按鈕1.3.2開發(fā)環(huán)境搭建與配置（2）然后選擇VSCode軟件安裝位置，這個(gè)位置可以任意選擇，這里選擇“D:\ProgramFiles(x86)\MicrosoftVSCode”1.3.2開發(fā)環(huán)境搭建與配置（3）單擊下一步，進(jìn)入“選擇開始菜單文件夾”，這里默認(rèn),然后繼續(xù)點(diǎn)擊下一步1.3.2開發(fā)環(huán)境搭建與配置（4）選擇在進(jìn)行軟件安裝的時(shí)候要進(jìn)行其他的任務(wù)，這里只是選擇“添加到PATH（重啟生效）”這個(gè)選項(xiàng)，然后繼續(xù)點(diǎn)擊“下一步”1.3.2開發(fā)環(huán)境搭建與配置（5）進(jìn)入確認(rèn)安裝步驟，點(diǎn)擊“安裝”按鈕開始安裝1.3.2開發(fā)環(huán)境搭建與配置（6）接著進(jìn)入安裝進(jìn)度顯示1.3.2開發(fā)環(huán)境搭建與配置（7）安裝成功之后，進(jìn)入安裝成功提示，如圖所示。選擇“啟動(dòng)VisualStudioCode”選項(xiàng)，單擊“完成”按鈕即可啟動(dòng)VisualStudioCode。1.3.2開發(fā)環(huán)境搭建與配置3.VSCode漢化打開的VSCode軟件界面如圖1-23所示。vscode默認(rèn)的語(yǔ)言是英文，對(duì)于英文不好的小伙伴可能不太友好。下面介紹如何將vscode設(shè)置成中文，具體操作步驟如下：（1）按快捷鍵“Ctrl+Shift+P”，在“vscode”頂部會(huì)出現(xiàn)一個(gè)搜索框。（2）輸入“configureDisplaylanguage”，然后回車。（3）選擇“installadditionallanguages…”，在左側(cè)會(huì)出現(xiàn)擴(kuò)展選項(xiàng)卡（EXTENSIONS）,選擇“Chinese（Simplified）中文（簡(jiǎn)體）”，單擊右下角綠色“Install”按鈕進(jìn)行安裝，如圖1-24所示。（4）安裝后，在locale.json中添加"locale":"zh-cn"，即可載入中文（簡(jiǎn)體）語(yǔ)言包。要修改locale.json，你可以同時(shí)按下Ctrl+Shift+P打開命令面板，之后輸入"config"篩選可用命令列表，最后選擇配置語(yǔ)言命令“zh-cn”即可。（5）安裝完成后，會(huì)提醒重啟后生效。在彈出的對(duì)話框中直接選擇“Restart”命令，重啟vscode?；蛘哧P(guān)閉vscode，再次打開就可以看到中文界面了1.3.2開發(fā)環(huán)境搭建與配置4.VSCode界面打開VSCode后，可以看到VSCode分為5個(gè)區(qū)域，分別為活動(dòng)欄、側(cè)邊欄、編輯欄、面板欄和狀態(tài)欄編輯欄狀態(tài)欄活動(dòng)欄面板欄側(cè)邊欄1.3.2開發(fā)環(huán)境搭建與配置VSCode常用插件(安裝步驟同漢化)在活動(dòng)欄中單擊擴(kuò)展

，

在側(cè)邊欄的位置上打開擴(kuò)展窗口，在輸入框中輸入想要安裝的插件名稱，點(diǎn)擊安裝即可，安裝后沒有效果，可以重啟vscode。常見的插件如下。（1）ViewInBrowser：用于在瀏覽器里預(yù)覽網(wǎng)頁(yè)，即運(yùn)行html文件。（2）AutoCloseTag：用于輸入代碼時(shí)自動(dòng)閉合HTML/XML標(biāo)簽。（3）AutoRenameTag：用于自動(dòng)完成另一側(cè)標(biāo)簽的同步修改。（4）Beautify：用于格式化html、js、css。（5）BracketPairColorizer：用于給括號(hào)加上不同的顏色，便于區(qū)分不同的區(qū)塊。（6）DebuggerforChrome：用于映射vscode上的斷點(diǎn)到chrome上，方便調(diào)試。（7）ESLintjs：用于語(yǔ)法糾錯(cuò)，可以自定義配置。（8）GitLens：用于方便查看git日志。（9）HTMLCSSSupport：用于智能提示CSS類名以及id。（10）HTMLSnippets：用于智能提示HTML標(biāo)簽，以及標(biāo)簽含義。（11）MarkdownPreviewEnhanced：用于實(shí)時(shí)預(yù)覽markdown。（12）markdownlint：用于markdown語(yǔ)法糾錯(cuò)。（13）MaterialIconTheme：用于設(shè)置vscode圖標(biāo)主題。（14）Iconfonts：用于設(shè)置圖標(biāo)字體。（15）openinbrowser：用于設(shè)置右鍵快速在瀏覽器中打開html文件。（16）PathIntellisense：用于設(shè)置自動(dòng)提示文件路徑。（17）Vetur：用于設(shè)置Vue多功能集成插件，錯(cuò)誤提示等。（18）ClassautocompleteforHTML：用于智能提示HTMLclass=“”屬性。1.3.2開發(fā)環(huán)境搭建與配置VSCode快捷鍵（