網(wǎng)頁制作基礎(chǔ)知識第1章匯報人：***目錄CONTENTHTML簡介Web標(biāo)準(zhǔn)網(wǎng)站開發(fā)流程Web前端開發(fā)工具編寫第一個

HTML5頁面本章導(dǎo)讀目前，網(wǎng)絡(luò)已經(jīng)成為人們娛樂、工作、學(xué)習(xí)中不可缺少的一部分，網(wǎng)頁設(shè)計也成為學(xué)習(xí)計算機知識的重要內(nèi)容之一，制作網(wǎng)頁可采用可視化編輯軟件，但是無論采用哪一種網(wǎng)頁編輯軟件，最后都是將所設(shè)計的網(wǎng)頁轉(zhuǎn)化為

HTML。HTML是網(wǎng)頁設(shè)計的基礎(chǔ)語言，本章將介紹

HTML的基本概念、Web標(biāo)準(zhǔn)、網(wǎng)站開發(fā)流程、常用網(wǎng)頁編輯軟件、HTML文件基本編寫方法，瀏覽

HTML文件，使讀者初步了解

HTML，為后面的學(xué)習(xí)打下基礎(chǔ)。第一節(jié)PART.01HTML簡介HTML是

hypertextmarkuplanguage的縮寫，中文翻譯為“超文本標(biāo)記語言”，主要用來對網(wǎng)頁中的文本、圖片、聲音、視頻等內(nèi)容進行描述。HTML提供了很多標(biāo)記，如段落標(biāo)記、標(biāo)題標(biāo)記、超鏈接標(biāo)記、圖像標(biāo)記等，網(wǎng)頁中需要定義什么內(nèi)容，就用相應(yīng)的

HTML標(biāo)記描述即可。HTML之所以被稱為超文本標(biāo)記語言，不僅是因為它通過標(biāo)記描述網(wǎng)頁內(nèi)容，同時也由于文本中包含所謂的“超級鏈接”，通過超鏈接將網(wǎng)站與網(wǎng)頁以及各種網(wǎng)頁元素鏈接起來，構(gòu)成了豐富多彩的

Web頁面。網(wǎng)頁是一個包含

HTML標(biāo)簽的能夠被瀏覽器解釋執(zhí)行的純文本文件。通俗地講：我們在上網(wǎng)的時候打開瀏覽器，輸入一個網(wǎng)址，展現(xiàn)在我們面前的就是一個網(wǎng)頁。網(wǎng)頁中包含文字、圖像、表格、超鏈接、音頻、視頻等元素，其中文字、圖像、超鏈接是組成網(wǎng)頁的最基本的3個元素。例如：我們在瀏覽器地址欄中輸入網(wǎng)易的網(wǎng)址

http：//，即可打開其官方網(wǎng)站，如圖1-1所示。為了快速了解網(wǎng)頁是如何形成的，接下來查看一下網(wǎng)頁的源代碼。在打開的頁面中單擊鼠標(biāo)右鍵，在彈出的菜單中選擇查看源代碼，可以看出它是一個純文本，如圖1-2所示。我們看到的網(wǎng)頁效果則是由這些純文本代碼被瀏覽器渲染后的效果。圖1-2網(wǎng)易首頁源代碼從圖1-2可以看出，網(wǎng)頁內(nèi)容是通過

HMTL標(biāo)記（圖中帶有“<>”符號的部分）描述的，網(wǎng)頁文件其實是一個純文本文件。HTML發(fā)展至今，經(jīng)歷的版本和發(fā)布日期見表1-1。表1-1HTML的發(fā)展過程版本發(fā)布日期說明超文本標(biāo)記語言（第一版）1993年6月作為互聯(lián)網(wǎng)工程任務(wù)組（IETF）工作草案發(fā)布（并非標(biāo)準(zhǔn)）HTML2.01995年11月作為

RFC1866

發(fā)布，在

RFC2854于2000年6月發(fā)布之后被宣布已經(jīng)過時HTML3.21996年1月14日W3C推薦標(biāo)準(zhǔn)HTML4.01997年12月18日W3C推薦標(biāo)準(zhǔn)HTML4.011999年12月24日W3C推薦標(biāo)準(zhǔn)，微小改進ISOHTML2000年5月15日基于嚴格的

HTML4.01語法，是國際標(biāo)準(zhǔn)化組織和國際電工委員會的標(biāo)準(zhǔn)XHTML1.02000年1月26日W3C推薦標(biāo)準(zhǔn)（修訂后于2002年8月1日重新發(fā)布）XHTML1.12001年5月31日較1.0有微小改進HTML5草案2008年1月前身名為

WebApplications1.0，于2004年被

WHATWG提出，于2007年被

W3C接納，并成立了新的

HTML工作團隊HTML52014年10月28日W3C推薦標(biāo)準(zhǔn)第二節(jié)PART.02Web標(biāo)準(zhǔn)由于不同的瀏覽器對同一個網(wǎng)頁文件解析出來的效果可能不一致。為了讓用戶能夠看到正常顯示的網(wǎng)頁，Web開發(fā)者常需要為多版本的開發(fā)而艱苦工作，當(dāng)新的硬件（如移動電話）和軟件（如微瀏覽器）出現(xiàn)時，這種情況會變得更加嚴重。為了使

Web更好地發(fā)展，在開發(fā)新的應(yīng)用程序時，瀏覽器開發(fā)商和站點開發(fā)商共同遵守標(biāo)準(zhǔn)就顯得很重要，為此

W3C與其他標(biāo)準(zhǔn)化組織共同制定了一系列的

Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)并不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合，主要包括結(jié)構(gòu)（structure）、表現(xiàn)（presentation）和行為（behavior）3個方面。1.2.1結(jié)構(gòu)標(biāo)準(zhǔn)結(jié)構(gòu)用于對網(wǎng)頁元素進行整理和分類，主要包括

HTML、XML和

XHML。1.HTML超文本標(biāo)記語言（hypertextmarkuplanguage，HTML）被用來結(jié)構(gòu)化網(wǎng)頁信息，如標(biāo)題、段落和列表等，也可用來在一定程度上描述文檔的外觀和語義。1982年由蒂姆·伯納斯-李創(chuàng)建，互聯(lián)網(wǎng)工程任務(wù)組（InternetEngineeringTaskForce，IETF）用簡化的標(biāo)準(zhǔn)通用標(biāo)記語言（standardgeneralizedmarkuplanguage，SGML）語法對其進行規(guī)范化，現(xiàn)已成為國際標(biāo)準(zhǔn)，由萬維網(wǎng)聯(lián)盟（WorldWideWebConsortium，W3C）維護。1.2.1結(jié)構(gòu)標(biāo)準(zhǔn)2.XML可擴展標(biāo)記語言（theextensiblemarkuplanguage，XML）最初的目的是為了彌補

HTML的不足，它具有強大的擴展性，可用于數(shù)據(jù)的轉(zhuǎn)換和描述。1.2.1結(jié)構(gòu)標(biāo)準(zhǔn)3.XHTML可擴展超文本標(biāo)識語言（theextensiblehypertextmarkuplanguage，XHTML）目前推薦遵循的是

W3C于2000年1月26日推薦的

XML1.0。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強大，完全可以替代

HTML，但面對成千上萬已有的站點，直接采用

XML還為時過早。因此，我們在

HTML4.0的基礎(chǔ)上，用

XML的規(guī)則對其進行擴展，得到

XHTML。簡單地說，建立XHTML的目的就是實現(xiàn)

HTML向

XML的過渡。1.2.2表現(xiàn)標(biāo)準(zhǔn)表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是層疊樣式表（cascadingstylesheet，CSS）W3C創(chuàng)建

CSS標(biāo)準(zhǔn)的目的是以

CSS為基礎(chǔ)進行網(wǎng)頁布局，控制網(wǎng)頁的表現(xiàn)。CSS布局與

XHTML結(jié)構(gòu)語言相結(jié)合能幫助設(shè)計師分離外觀與結(jié)構(gòu)，使站點的訪問及維護更加容易。1.2.3行為標(biāo)準(zhǔn)行為是指網(wǎng)頁模型的定義及交互的編寫，主要包括文檔對象模型（documentobject

model，DOM）和

ECMAScript兩部分。DOM是一種中立于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。ECMAScript是以

JavaScript為基礎(chǔ)制定的標(biāo)準(zhǔn)腳本語言。JavaScript是一種基于對象和事件的驅(qū)動，并具有相對安全性的客戶端腳本語言，廣泛用于

Web開發(fā)，常用來給

HTML網(wǎng)頁添加動態(tài)功能，如響應(yīng)用戶的各種操作。第三節(jié)PART.03網(wǎng)站開發(fā)流程網(wǎng)站的創(chuàng)建需要經(jīng)歷前期準(zhǔn)備（需求分析）、中期制作及后期測試和發(fā)布3個大階段。前期準(zhǔn)備包括了解網(wǎng)站的業(yè)務(wù)背景、明確網(wǎng)站的設(shè)計風(fēng)格、確定網(wǎng)站的內(nèi)容等；中期制作主要包括創(chuàng)建站點、制作頁面、制作樣式；后期的測試和發(fā)布工作包括檢查頁面效果是否美觀、鏈接是否完好、是否與瀏覽器兼容，以及發(fā)布網(wǎng)站等。網(wǎng)站開發(fā)流程如圖1-3所示。1.確定主題確定網(wǎng)站主題可以分為分析策劃和資料收集兩個部分。制作網(wǎng)站前，首先需要對網(wǎng)站進行整體分析，分析網(wǎng)站的功能與建站的目的，確定用戶群和網(wǎng)站內(nèi)容，即確定網(wǎng)站的主題。在確定主題后，可繪制網(wǎng)站架構(gòu)圖，并搜集建站所需的相關(guān)資料和素材，例如，圖1-4為某企業(yè)的網(wǎng)站架構(gòu)圖。另外，可要求客戶提供與公司相關(guān)的文字和圖片等資料，如公司介紹、產(chǎn)品圖片等。圖1-4網(wǎng)站架構(gòu)圖2.設(shè)計頁面網(wǎng)站設(shè)計師與客戶溝通，并了解客戶的基本要求后，制定網(wǎng)站建設(shè)方案并使用

Photoshop等圖像處理軟件進行頁面效果圖設(shè)計。頁面效果圖主要包括首頁效果圖和各欄目效果圖。將效果圖設(shè)計好后交給客戶查看，客戶查看后提出修改意見，設(shè)計人員根據(jù)客戶意見進行修改，并最終確定網(wǎng)站頁面效果圖。3.效果圖切片當(dāng)效果圖得到客戶認可后，設(shè)計師可使用

Photoshop等圖像處理軟件中的切片工具將效果圖切割保存為

JPG、GIP或

PNG等格式的小圖片，將它們作為網(wǎng)頁制作的圖像素材。4.設(shè)計網(wǎng)站目錄從這一步開始進入到網(wǎng)頁制作階段，首先在本地磁盤創(chuàng)建網(wǎng)站根目錄及子文件目錄，將制作網(wǎng)頁需要的素材資源分類放置在各文件夾中，如圖1-5所示。圖1-5網(wǎng)站目錄5.制作網(wǎng)頁網(wǎng)頁的制作可以分為結(jié)構(gòu)層制作和樣式行為層制作。結(jié)構(gòu)層制作就是使用

HTML代碼搭建網(wǎng)頁的主體結(jié)構(gòu)，如文字、圖片、超鏈接等。在結(jié)構(gòu)層制作好后，就可以使用

CSS（層疊樣式表）及

JavaScript（動態(tài)腳本語言）來制作網(wǎng)頁的樣式層及行為層，完成網(wǎng)頁布局和外觀設(shè)置。6.測試、上傳網(wǎng)站在將網(wǎng)站上傳到服務(wù)器前，需要對其進行測試及優(yōu)化，測試包括兼容性測試、鏈接測試等；優(yōu)化是盡可能減小網(wǎng)頁文件的體積及日后發(fā)生錯誤的概率。完成測試和優(yōu)化后，就可以利用

FTP工具將網(wǎng)站發(fā)布到所申請的空間服務(wù)器上。網(wǎng)站上傳成功后，可通過瀏覽器進行實際測試。7.網(wǎng)站推廣網(wǎng)站上傳后，需要進行推廣和宣傳，以提高網(wǎng)站的訪問量及知名度。推廣網(wǎng)站的方法有很多，如群發(fā)郵件、注冊到搜索引擎、借助同類網(wǎng)站留言、加入友情鏈接、傳統(tǒng)媒體宣傳等。8.維護、更新制作好網(wǎng)站后，還需要對網(wǎng)站進行維護和更新。站點只有不斷地補充新內(nèi)容，才能吸引瀏覽者，延長使用壽命。第四節(jié)PART.04Web前端開發(fā)工具網(wǎng)頁制作過程中，為了開發(fā)方便，通常我們會選擇一些較便捷的工具，如

Notepad++、SublimeText、HBuilderX、Dreamweaver、VisualStudioCode等。1.4.1Notepad++Notepad++是Windows操作系統(tǒng)下的一套文本編輯器（軟件版權(quán)許可證：GPL），有完整的中文化接口及支持多國語言編寫的功能（UTF8技術(shù)），支持的語言包括

C、C++、Java、C#、XML、HTML、PHP、JavaScript。Notepad++功能比Windows中的Notepad（記事本）強大，除了可以用來制作一般的純文字說明文件，也十分適合編寫計算機程序代碼。Notepad++不僅有語法高亮度顯示，也有語法折疊功能，并且支持宏以及擴充基本功能的外掛模組，其工作界面如圖1-6所示。1.4.1Notepad++圖1-6Notepad++編輯器界面1.4.2SublimeTextSublimeText是一個代碼編輯器，具有漂亮的用戶界面和強大的功能，如代碼縮略圖、Python的插件、代碼段等，還可自定義按鍵綁定、菜單和工具欄。SublimeText的主要功能包括：拼寫檢查、書簽、完整的PythonAPI、Goto功能、即時項目切換、多選擇、多窗口等等。SublimeText是一個跨平臺的編輯器，同時支持

Windows、Linux、MacOSX等操作系統(tǒng)，其工作界面如圖1-7所示。1.4.2SublimeText圖1-7Sublimetext編輯器界面1.4.3HBuilderXHBuilderX是

DCloud（數(shù)字天堂）推出的一款支持

HTML5的

Web開發(fā)

IDE。HBuilderX的編寫用到

Java、C、Web和

Ruby。HBuilderX的主體是由

Java編寫。它基于

Eclipse，所以順其自然地兼容了

Eclipse的插件，其工作界面如圖1-8所示。圖1-8HbuilderX編輯器界面1.4.4DreamweaverAdobeDreamweaver，簡稱“DW”，中文名稱“夢想編織者”，是美國

Macromedia公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得的網(wǎng)頁編輯器，DW是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。DW是一款易掌握的可視化網(wǎng)頁編輯工具，如圖1-9所示。圖1-9Dreamweaver編輯界面1.4.5VisualStudioCodeVisualStudioCode（簡稱“VSCode”）是

Microsoft在2015年4月30日

Build開發(fā)者大會上正式宣布一個運行于MacOSX、Windows和Linux之上的，針對編寫現(xiàn)代

Web

和云應(yīng)用的跨平臺源代碼編輯器，可在桌面上運行，并且可用于

Windows、MacOS和

Linux。它具有對

JavaScript，TypeScript和

Node.js的內(nèi)置支持，并具有豐富的其他語言（如C++，C＃，Java，Python，PHP，Go）和運行時（如.NET和Unity）擴展的生態(tài)系統(tǒng)。其工作界面如圖1-10所示。1.4.5VisualStudi