HTML5 CSS3網(wǎng)頁設(shè)計與制作（第2版）課件 第1章 HTML5+CSS3網(wǎng)頁設(shè)計概述

第1章

HTML5+CSS3網(wǎng)頁設(shè)計概述《HTML5+CSS3網(wǎng)頁設(shè)計與制作（第2版）》學(xué)習(xí)目標/Target

了解網(wǎng)頁，能夠闡述網(wǎng)頁的作用，并使用瀏覽器查看網(wǎng)頁代碼

熟悉Web標準，能夠歸納Web標準的構(gòu)成

了解HTML，能夠闡述HTML的作用

了解網(wǎng)頁名詞，能夠闡述網(wǎng)頁相關(guān)名詞的含義學(xué)習(xí)目標/Target

了解CSS，能夠闡述CSS的作用

了解瀏覽器，能夠列舉當(dāng)前常見的瀏覽器，并介紹它們各自所使用的內(nèi)核

掌握VisualStudioCode的用法，能夠使用該工具編寫網(wǎng)頁代碼

了解JavaScript，能夠闡述JavaScript的作用章節(jié)概述/Summary近年來，HTML5和CSS3一直是互聯(lián)網(wǎng)技術(shù)中備受矚目的話題。在開始學(xué)習(xí)HTML5和CSS3之前，了解一些與網(wǎng)頁相關(guān)的基礎(chǔ)知識是非常必要的，這有助于初學(xué)者厘清思路，快速進入后續(xù)章節(jié)的學(xué)習(xí)。本章將詳細介紹網(wǎng)頁的相關(guān)內(nèi)容，包括網(wǎng)頁概述、網(wǎng)頁制作入門以及VisualStudioCode網(wǎng)頁代碼編輯工具。通過學(xué)習(xí)這些內(nèi)容，初學(xué)者將能夠建立堅實的基礎(chǔ)，為后續(xù)的HTML5和CSS3學(xué)習(xí)做好充分準備。目錄/Contents010203網(wǎng)頁概述網(wǎng)頁制作入門網(wǎng)頁代碼編輯工具04階段案例——創(chuàng)建第一個網(wǎng)頁網(wǎng)頁概述1.11.1網(wǎng)頁概述什么是網(wǎng)頁？1.1網(wǎng)頁概述網(wǎng)頁究竟是什么？說到網(wǎng)頁，其實大家并不陌生瀏覽新聞查詢信息網(wǎng)上購物1.1網(wǎng)頁概述網(wǎng)頁可以被看作承載各種內(nèi)容的容器，所有可視化的內(nèi)容都可以通過網(wǎng)頁展示給用戶。本節(jié)將詳細介紹網(wǎng)頁的基礎(chǔ)知識。1.1.1認識網(wǎng)頁網(wǎng)頁主要由文字、圖像和超鏈接（超鏈接為單擊可以跳轉(zhuǎn)的網(wǎng)頁元素）等元素構(gòu)成。除了這些元素，網(wǎng)頁中還可以包含音頻、視頻和動畫等元素。1.1.1認識網(wǎng)頁該教程網(wǎng)站首頁的代碼僅包含一些特殊的符號和文本。而用戶瀏覽網(wǎng)頁時看到的圖片、視頻等，正是由這些特殊的符號和文本組成的代碼被瀏覽器渲染之后的結(jié)果。1.1.1認識網(wǎng)頁無論用戶何時何地訪問，網(wǎng)頁都會呈現(xiàn)固定的內(nèi)容，除非網(wǎng)頁源代碼被修改并重新上傳。靜態(tài)網(wǎng)頁的更新不太便捷，但其加載速度較快。靜態(tài)網(wǎng)頁動態(tài)網(wǎng)頁內(nèi)容會根據(jù)用戶操作和時間的不同而實時變化。動態(tài)網(wǎng)頁可以與服務(wù)器實時交換數(shù)據(jù)。1.1.2網(wǎng)頁名詞解釋名詞名詞釋義Internet也稱為互聯(lián)網(wǎng)，是由一些使用公用語言互相通信的計算機連接而成的網(wǎng)絡(luò)WWWWWW（WorldWideWeb，萬維網(wǎng)）是一種網(wǎng)頁瀏覽服務(wù)URLURL（UniformResourceLocator，統(tǒng)一資源定位符）也稱“網(wǎng)址”DNSDNS（DomainNameSystem，域名系統(tǒng)）是互聯(lián)網(wǎng)上進行域名與IP地址映射的系統(tǒng)。HTTP和HTTPSHTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）是一種詳細規(guī)定瀏覽器和萬維網(wǎng)服務(wù)器之間互相通信的協(xié)議。HTTPS是使用HTTP和SSL構(gòu)建的一種安全的網(wǎng)絡(luò)協(xié)議，它能夠提供加密傳輸和身份認證的功能，比HTTP更加安全可靠WebWeb通常指互聯(lián)網(wǎng)的使用環(huán)境。而對網(wǎng)站開發(fā)者而言，Web是一系列技術(shù)的復(fù)合總稱，包括網(wǎng)站的前端頁面、后端程序、視覺設(shè)計、數(shù)據(jù)庫開發(fā)等W3C組織W3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）是國際上最著名的標準化組織之一1.1.3Web標準什么是Web標準？1.1.3Web標準Web標準并不是某一個標準，而是由W3C與其他標準化組織共同制訂的一系列標準的集合，主要包括結(jié)構(gòu)標準、表現(xiàn)標準和行為標準3個方面。1.1.3Web標準由于不同的瀏覽器解析出來的效果可能不一致，開發(fā)者常常需要為多版本的開發(fā)而艱苦工作。通過Web標準展示統(tǒng)一內(nèi)容1.1.3Web標準結(jié)構(gòu)標準表現(xiàn)標準行為標準結(jié)構(gòu)標準用于對網(wǎng)頁元素進行分類與整理，主要包括：HTML、XHTML。表現(xiàn)標準用于設(shè)置網(wǎng)頁的版式、顏色、字體等外在樣式，主要包括：CSS。行為標準是指網(wǎng)頁模型的定義及交互效果的實現(xiàn)，通常使用JavaScript設(shè)置網(wǎng)頁的行為。1.1.3Web標準結(jié)構(gòu)標準表現(xiàn)標準行為標準如果把Web標準看做一棟房子，結(jié)構(gòu)標準就相當(dāng)于房子的框架。1.1.3Web標準結(jié)構(gòu)標準表現(xiàn)標準行為標準表現(xiàn)標準就相當(dāng)于房子的裝修，讓房子看起來更美觀。結(jié)構(gòu)標準表現(xiàn)標準行為標準行為標準相當(dāng)于房間內(nèi)部的設(shè)備，讓房子具有功能性。KTV有唱歌功能廚房有做飯功能1.1.3Web標準網(wǎng)頁制作入門1.21.2網(wǎng)頁制作入門HTML、CSS和JavaScript是網(wǎng)頁制作的基礎(chǔ)，要想學(xué)好網(wǎng)頁制作，首先需要對它們有一個整體的認識。本節(jié)將詳細講解HTML、CSS、JavaScript的發(fā)展歷史、常用版本以及網(wǎng)頁的展示平臺——瀏覽器。1.2.1HTMLHTML主要通過標簽對網(wǎng)頁中的文本、圖片、聲音等內(nèi)容進行描述。HTML提供了許多標簽，如段落標簽、標題標簽、超鏈接標簽、圖片標簽等。概述1.2.1HTMLHTML2.01995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布過時。超文本標簽語言（第一版）1993年，HTML首次以因特網(wǎng)草案的形式發(fā)布，并開始在全球范圍內(nèi)使用。HTML3.21997年1月14日，W3C推薦標準。HTML4.01997年12月18日，W3C推薦標準。HTML4.011999年12月24日，W3C推薦標準。HTML主要通過標簽對網(wǎng)頁中的文本、圖片、聲音等內(nèi)容進行描述。HTML提供了許多標簽，如段落標簽、標題標簽、超鏈接標簽、圖片標簽等。概述1.2.1HTMLHTML52014年10月底，W3C宣布HTML5正式定稿，網(wǎng)頁進入了HTML5開發(fā)的新時代?！究偨Y(jié)】HTML語言發(fā)展至今，經(jīng)歷了六個版本，這個過程中新增了許多HTML標簽，同時也淘汰了一些標簽。HTML主要通過標簽對網(wǎng)頁中的文本、圖片、聲音等內(nèi)容進行描述。HTML提供了許多標簽，如段落標簽、標題標簽、超鏈接標簽、圖片標簽等。概述1.2.2CSSCSS以HTML為基礎(chǔ)，使用它能對網(wǎng)頁進行多種樣式操作。例如對字體、顏色、背景、網(wǎng)頁整體布局和版式等進行控制。概述<styletype="text/css">

p{ font-size:36px; color:red; text-align:center; }</style>字號顏色對齊方式1.2.3JavaScriptJavaScript是一種用于設(shè)置網(wǎng)頁行為的腳本語言，它的前身是LiveScript，最初由Netscape公司開發(fā)。后來，在Sun公司推出著名的Java語言之后，Netscape公司和Sun公司在1995年重新設(shè)計了LiveScript，并將其命名為JavaScript。概述1.2.4網(wǎng)頁的展示平臺——瀏覽器瀏覽器是網(wǎng)頁的展示平臺，只有經(jīng)過瀏覽器的渲染，用戶才能看到圖文并茂的網(wǎng)頁效果。瀏覽器名稱發(fā)布時間/年InternetExplorer（IE）1996Opera（歐朋）1996Safari2003Firefox（火狐）2004Chrome2008Edge20151.2.4網(wǎng)頁的展示平臺——瀏覽器InternetExplorer瀏覽器也稱為IE瀏覽器，由微軟公司推出，直接綁定在Windows操作系統(tǒng)中，無須特地下載和安裝。IE有6.0、7.0、8.0、9.0、10.0等版本，最后一個版本是11.0。1.2.4網(wǎng)頁的展示平臺——瀏覽器Opera瀏覽器也稱為歐朋瀏覽器，是挪威的一家公司開發(fā)的一款優(yōu)秀瀏覽器，具有響應(yīng)快速、節(jié)省系統(tǒng)資源、定制能力強、安全性高和小體積等特點。1.2.4網(wǎng)頁的展示平臺——瀏覽器Safari瀏覽器是macOS內(nèi)置的一款瀏覽器。Safari瀏覽器外觀時尚，響應(yīng)速度快。1.2.4網(wǎng)頁的展示平臺——瀏覽器Firefox瀏覽器也稱為火狐瀏覽器，是Mozilla公司旗下的一款開源的網(wǎng)頁瀏覽器，其可開發(fā)程度很高。但是由于響應(yīng)速度、更新頻率、推廣力度等問題，F(xiàn)irefox瀏覽器現(xiàn)在的市場占有率卻難以和昔日相比。1.2.4網(wǎng)頁的展示平臺——瀏覽器Chrome是由Google公司開發(fā)的一款跨平臺免費瀏覽器，以速度快、簡單易用和強大的擴展生態(tài)系統(tǒng)而著稱，其應(yīng)用非常廣泛，許多網(wǎng)頁制作人員將其作為網(wǎng)頁制作過程中的首選調(diào)試工具。本書涉及的案例在Chrome瀏覽器中演示和調(diào)試。1.2.4網(wǎng)頁的展示平臺——瀏覽器Edge同樣是一款由微軟公司推出的瀏覽器。Edge瀏覽器擁有比IE瀏覽器優(yōu)化程度更高的代碼結(jié)構(gòu)，因此Edge瀏覽器的響應(yīng)速度更快?，F(xiàn)在的網(wǎng)頁兼容調(diào)試也更傾向于使用Edge瀏覽器。1.2.4網(wǎng)頁的展示平臺——瀏覽器Trident內(nèi)核：IE瀏覽器Gecko內(nèi)核：Firefox瀏覽器Webkit內(nèi)核：Safari瀏覽器Presto內(nèi)核：Opera瀏覽器（早期版本）Blink內(nèi)核：Chrome瀏覽器常見瀏覽器內(nèi)核1.2.4網(wǎng)頁的展示平臺——瀏覽器多學(xué)一招：瀏覽器私有前綴瀏覽器私有前綴可用于區(qū)分不同內(nèi)核的瀏覽器。由于CSS3每個新屬性的提出都需要經(jīng)過耗時且復(fù)雜的標準制訂流程，在標準尚未確定前，一些瀏覽器已經(jīng)根據(jù)最初的草案率先實現(xiàn)了CSS3新屬性的功能。為了與之后確定的標準兼容，各瀏覽器使用了自己的私有前綴與標準進行區(qū)分，并在標準確立后逐步支持不帶前綴的CSS3新屬性?！究偨Y(jié)】1.2.4網(wǎng)頁的展示平臺——瀏覽器多學(xué)一招：瀏覽器私有前綴瀏覽器私有前綴Chrome瀏覽器和Safari瀏覽器-webkit-Firefox瀏覽器-moz-Opera瀏覽器-o-網(wǎng)頁代碼編輯工具1.3為了便于編輯網(wǎng)頁代碼，網(wǎng)頁制作人員通常會使用一些便捷的代碼編輯工具。VisualStudioCode（簡稱VSCode）是一款輕量且開源的代碼編輯工具，深受網(wǎng)頁制作人員的喜愛。1.3網(wǎng)頁代碼編輯工具本節(jié)將詳細介紹VisualStudioCode的安裝、設(shè)置和使用技巧。1.3.1Visual

StudioCode的安裝和設(shè)置單擊按鈕彈出下拉列表。打開VisualStudioCode官方網(wǎng)站1.3.1Visual

StudioCode的安裝和設(shè)置③VisualStudioCode安裝完成后，啟動軟件。1.3.1Visual

StudioCode的安裝和設(shè)置1.設(shè)置中文顯示模式①單擊VisualStudioCode左側(cè)工具欄中線框標示的擴展按鈕②在搜索框輸入“Chinese”，擴展面板中會顯示對應(yīng)的擴展③單擊“Install”按鈕，安裝中文擴展若想卸載，可單擊卸載按鈕完成1.3.1Visual

StudioCode的安裝和設(shè)置2.設(shè)置界面顏色單擊工具欄左下方的管理按鈕，彈出設(shè)置列表，選擇“顏色主題”選項中的主題顏色。1.3.1Visual

StudioCode的安裝和設(shè)置3.設(shè)置代碼字號VisualStudioCode中的代碼有默認的字號。如果覺得代碼字號不合適，可以自行設(shè)置。單擊工具欄左下方的管理按鈕，在彈出的設(shè)置列表中選擇“設(shè)置”選項。在右側(cè)的“控制字體大小（像素）”輸入框中調(diào)整字號。1.3.2Visual

StudioCode的使用step1

創(chuàng)建文件夾和文件（1）在計算機的任意盤符下新建一個文件夾。打開VisualStudioCode，選擇“文件”→“打開文件夾”選項，打開新建的文件夾作為項目的根目錄，該目錄用于存放各類項目文件。VisualStudioCode中的文件夾會顯示在資源管理器中。（2）打開文件夾后，在資源管理器的空白區(qū)域右擊，在彈出的快捷菜單中選擇“新建文件”，然后輸入文件名，按“Enter”鍵，即可完成文件的創(chuàng)建。1.3.2Visual

StudioCode的使用step2

保存和操作文件（1）選擇“文件”→“保存”選項（或按“Ctrl+S”快捷鍵），可以將當(dāng)前編輯的文件保存。保存的文件會以默認的文件夾作為根目錄，并顯示在文件夾中。（2）選擇文件后，可以在代碼編輯區(qū)域編輯文件；在空白區(qū)域右擊，在彈出的快捷菜單中可以選擇相應(yīng)選項對文件進行剪切、復(fù)制等操作。1.3.2Visual

StudioCode的使用step3

編寫代碼（1）快速創(chuàng)建HTML5結(jié)構(gòu)。打開HTML文件，在代碼編輯區(qū)域的第1行輸入一個英文感嘆號“!”，在彈出的列表中選擇第一個選項（或按“Enter”鍵），此時，可以快速創(chuàng)建一個固定格式的HTML5結(jié)構(gòu)。1.3.2Visual

StudioCode的使用step3

編寫代碼（2）快速創(chuàng)建標簽。在代碼編輯區(qū)域輸入標簽的名稱，然后按“Enter”鍵即可快速創(chuàng)建標簽。例如，先輸入“div”，然后按“Enter”鍵即可創(chuàng)建一個<div>標簽。1.3.2