模塊一網(wǎng)頁設(shè)計(jì)概述《HTML5+CSS3網(wǎng)頁設(shè)計(jì)基礎(chǔ)》學(xué)習(xí)目標(biāo)/Target了解網(wǎng)站和網(wǎng)頁的概念。了解Web標(biāo)準(zhǔn)。了解HTML、CSS和JavaScript的功能和作用。

能夠簡單使用網(wǎng)頁開發(fā)工具VSCode。

理解靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁的區(qū)別。網(wǎng)頁相關(guān)知識(shí)任務(wù)一一、網(wǎng)站和網(wǎng)頁網(wǎng)站英文為WebSite。簡單來說，網(wǎng)站是多個(gè)網(wǎng)頁的集合，即根據(jù)一定的規(guī)則，將用于展示特定內(nèi)容的相關(guān)網(wǎng)頁，通過超鏈接構(gòu)成一個(gè)網(wǎng)站整體。網(wǎng)頁是Internet的基本信息單位，英文為WebPage。網(wǎng)頁是以HTML（HyperTextMarkupLanguage，超文本標(biāo)記語言）為基礎(chǔ)編寫的，能夠通過網(wǎng)絡(luò)傳輸，并被瀏覽器翻譯成可以顯示出來的包含文字、圖片、聲音、動(dòng)畫等媒體形式的頁面文件。網(wǎng)頁呈現(xiàn)在用戶面前的是各種文字、圖像、動(dòng)畫、音頻、視頻等豐富的內(nèi)容，網(wǎng)頁在本質(zhì)上是文本文件和其相關(guān)的資源，網(wǎng)頁最根本的語言是HTML。HTML是Web編程的基礎(chǔ)，是網(wǎng)頁設(shè)計(jì)和開發(fā)領(lǐng)域的一個(gè)重要組成部分。圖1-1中國青年網(wǎng)首頁圖1-2中國青年網(wǎng)首頁部分源代碼一、網(wǎng)站和網(wǎng)頁靜態(tài)網(wǎng)頁是指沒有后臺(tái)數(shù)據(jù)庫、不含程序的網(wǎng)頁，程序員編寫的是什么，它顯示的就是什么，不會(huì)有任何改變。靜態(tài)網(wǎng)頁更新起來相對(duì)比較麻煩，適用于更新較少的展示型網(wǎng)站。二、動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁一般使用ASP、PHP、JSP、.NET等網(wǎng)絡(luò)編程語言編寫，是運(yùn)行于服務(wù)器端的代碼，瀏覽時(shí)先將服務(wù)器端代碼執(zhí)行成HTML代碼，然后再顯示在客戶端瀏覽器中。IP

地址是指互聯(lián)網(wǎng)協(xié)議地址。IP地址是IP協(xié)議提供的一種統(tǒng)一的地址格式，它為互聯(lián)網(wǎng)上的每一個(gè)網(wǎng)絡(luò)和每一臺(tái)主機(jī)分配一個(gè)邏輯地址，以此來屏蔽物理地址的差異。三、常用的網(wǎng)頁名詞1.IP地址、域名和URLIP地址是一組數(shù)字，不方便記憶，因此人們?yōu)槊颗_(tái)計(jì)算機(jī)賦予了一個(gè)具有代表性的名字，這就是主機(jī)名。將主機(jī)名和IP對(duì)應(yīng)起來，這就是域名。URL（UniformResourceLocators，統(tǒng)一資源定位符）是對(duì)資源位置的一種表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。HTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）是一種常用的網(wǎng)絡(luò)通信協(xié)議，是客戶端瀏覽器或其他程序與Web服務(wù)器之間的應(yīng)用層通信協(xié)議。三、常用的網(wǎng)頁名詞2.HTTP和HTTPSHTTPS是HTTP的加密版本。它通過結(jié)合HTTP和安全套接字層(SSL)或傳輸層安全(TLS)協(xié)議來加密Web服務(wù)器和客戶端之間傳輸?shù)臄?shù)據(jù)。HTTPS

加密用于保護(hù)敏感數(shù)據(jù)，例如密碼、信用卡號(hào)和其他個(gè)人信息。WWW（WorldWideWeb）中文譯文“萬維網(wǎng)”。WWW是基于客戶機(jī)/服務(wù)器方式的信息發(fā)現(xiàn)技術(shù)和超文本技術(shù)的綜合。三、常用的網(wǎng)頁名詞3.WWW和W3C組織W3C組織是對(duì)網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個(gè)非盈利組織，W3C是WorldWideWebConsortium（萬維網(wǎng)聯(lián)盟）的縮寫，像HTML、XHTML、CSS、XML的標(biāo)準(zhǔn)就是由W3C來定制。瀏覽器是查看網(wǎng)頁的一種工具，它可向服務(wù)器發(fā)送各種請(qǐng)求，并對(duì)從服務(wù)器發(fā)來的超文本信息和各種多媒體數(shù)據(jù)格式進(jìn)行解釋、顯示和播放。常用的瀏覽器有GoogleChrome瀏覽器、360安全瀏覽器、騰訊QQ瀏覽器等。不同瀏覽器對(duì)網(wǎng)頁的解析可能存在差異，本書案例主要使用GoogleChrome瀏覽器顯示網(wǎng)頁效果。三、常用的網(wǎng)頁名詞4.瀏覽器WEB標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。在web標(biāo)準(zhǔn)中，規(guī)定網(wǎng)頁主要由三部分組成：結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)。四．Web標(biāo)準(zhǔn)1.結(jié)構(gòu)對(duì)網(wǎng)頁中用到的信息進(jìn)行整理和分類。在結(jié)構(gòu)中用到的主要技術(shù)包括HTML、XML和XHTML。2.表現(xiàn)技術(shù)用于對(duì)已被結(jié)構(gòu)化的信息進(jìn)行顯示上的控制，包含版式、顏色、大小等形式控制。在網(wǎng)頁制作中主要CSS設(shè)置網(wǎng)頁的樣式。3.行為是指對(duì)整個(gè)文檔內(nèi)部的一個(gè)模型定義及交互行為的編寫，用于編寫用戶可進(jìn)行交互式操作的文檔。網(wǎng)頁制作技術(shù)入門任務(wù)二HTML

是用于創(chuàng)建網(wǎng)頁和設(shè)計(jì)其他可在網(wǎng)頁瀏覽器中看到的信息的一種標(biāo)記語言，它以純文字格式為基礎(chǔ)?？梢允褂萌魏挝淖志庉嬈骰蛩娂此玫?/p>

HTML

編輯器來編輯

HTML

文件。HTML

被用來結(jié)構(gòu)化信息——例如標(biāo)題、段落、列表和圖像等，主要負(fù)責(zé)網(wǎng)頁的“內(nèi)容”部分。一．網(wǎng)頁標(biāo)記語言HTMLCSS是CascadingStyleSheet的縮寫，中文譯為“層疊樣式表”，簡稱“樣式表”。W3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS

取代HTML表格式布局、幀和其他表現(xiàn)的語言，用來定義網(wǎng)頁外觀樣式，特別是進(jìn)行網(wǎng)頁的排版布局。HTML和CSS分別實(shí)現(xiàn)了網(wǎng)頁內(nèi)容和樣式的設(shè)計(jì)，實(shí)現(xiàn)了結(jié)構(gòu)和外觀的分離，使站點(diǎn)的訪問及維護(hù)更加容易。二．網(wǎng)頁表現(xiàn)技術(shù)CSS腳本語言由ASCII碼構(gòu)成，是一種不必事先編譯，只要利用適當(dāng)?shù)慕忉屍骶涂梢詧?zhí)行的簡單程序。JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言，已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，常用來為網(wǎng)頁添加各式各樣的動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。通常JavaScript

代碼可以直接嵌入HTML文件中，隨網(wǎng)頁一起傳送到客戶端瀏覽器，然后通過瀏覽器來解釋執(zhí)行。三．網(wǎng)頁腳本語言JavaScript任務(wù)3網(wǎng)頁制作工具--VSCode的使用任務(wù)三Visual

Studio

Code（簡稱VS

Code）是微軟公司推出的一款免費(fèi)、開源的代碼編輯器，一經(jīng)推出就受到開發(fā)者的歡迎。對(duì)于前端開發(fā)者來說，一個(gè)強(qiáng)大的編輯器可以使開發(fā)者變得簡單、便捷、高效。可以用來編寫網(wǎng)頁前端的編輯器軟件有很多，例如記事本、Notepad++、Dreamweaver、HBuilder、WebStorm、atom等。本書選擇VS

Code編輯器作為開發(fā)工具。VSCode的使用（1）輕量級(jí)。在保證功能強(qiáng)大的同時(shí)，VSCode的文件大小和占用內(nèi)存較小。（2）跨平臺(tái)。VSCode支持Windows、macOS和Linux等多個(gè)操作系統(tǒng)。（3）智能感知。提供了先進(jìn)的智能感知功能，可以自動(dòng)補(bǔ)全代碼、提示關(guān)鍵字等，并減少開發(fā)者出錯(cuò)的可能性。（4）多語言支持。VSCode支持多種編程語言，包括JavaScript、TypeScript、Python、C#等。（5）提供豐富的插件。VSCode的插件擴(kuò)展系統(tǒng)是其最重要的特點(diǎn)之一，其中包含大量實(shí)用的插件，覆蓋了幾乎所有的開發(fā)場(chǎng)景。一．VSCode特點(diǎn)打開瀏覽器，登錄VSCode官方網(wǎng)站（/）二．下載和安裝VSCode單擊“DownloadforWindows”按鈕，該頁面會(huì)自動(dòng)識(shí)別當(dāng)前的操作系統(tǒng)并下載相應(yīng)的安裝包。VS

Code編輯器提供了非常豐富的插件功能，根據(jù)開發(fā)的需要，安裝對(duì)應(yīng)的插件可以大大提高開發(fā)效率。本節(jié)介紹本課程需要用到的VSCode常用插件。三．安裝VSCode插件1.Chinese(Simplified)(簡體中文)三．安裝VSCode插件2．AutoRenameTag三．安裝VSCode插件該插件的功能是自動(dòng)修改標(biāo)簽名，重命名一個(gè)開始標(biāo)簽時(shí)，自動(dòng)重命名配對(duì)的結(jié)束標(biāo)簽。3．Openinbrowser三．安裝VSCode插件安裝完以后在目標(biāo)的html文件上右擊鼠標(biāo)，在彈出的菜單上選擇“openindefaultbrowser”選項(xiàng)，即可使用默認(rèn)瀏覽器預(yù)覽當(dāng)前文件。4．LiveServer三．安裝VSCode插件該插件功能是開啟一個(gè)實(shí)時(shí)的本地服務(wù)器。這是一個(gè)非常好用的插件，每次保存文件后到瀏覽器都要刷新才能看到最新的變化，有了這個(gè)插件，就可以實(shí)時(shí)監(jiān)聽文件的變化，自動(dòng)刷新網(wǎng)頁。5．Onedarkpro三．安裝VSCode插件VS

Code有一些自帶的顏色主題，用戶可以根據(jù)自己的喜好選擇相應(yīng)的顏色主題。One

Dark

Pro是最受歡迎的暗黑主題，安裝完成后，用戶就可以選擇使用該主題。1.VSCode界面四．使用VSCode編輯器最左側(cè)黑色背景的是“活動(dòng)欄”，在活動(dòng)欄上有“資源管理器”、“搜索”、“代碼管理器”、“運(yùn)行和調(diào)試”、“擴(kuò)展”、“賬戶”和“管理”等按鈕。2.在VSCode中創(chuàng)建文件四．使用VSCode在編輯器的“資源管理器”中，單擊新建文件按鈕，創(chuàng)建一個(gè)文件，命名為“index.html”。2.在VSCode中創(chuàng)建文件四．使用VSCode單擊這個(gè)文件，進(jìn)入到代碼編輯環(huán)境。在代碼編輯器環(huán)境，用戶可以編寫代碼了。代碼寫好后，可以單擊活動(dòng)欄上的“運(yùn)行和調(diào)試”。在VS

Code代碼編輯器中編輯HTML文檔，可以通過輸入英文感嘆號(hào)“!”