《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程（第3版）》 課件全套 郵 第1-10章 HTML5入門- 實(shí)戰(zhàn)開發(fā) 制作油紙傘網(wǎng)站首頁(yè)

第1章HTML5入門《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程（第3版）》學(xué)習(xí)目標(biāo)/Target了解網(wǎng)頁(yè)基本概念，能夠說出網(wǎng)頁(yè)的構(gòu)成以及網(wǎng)頁(yè)相關(guān)名詞的含義。熟悉Web標(biāo)準(zhǔn)，能夠歸納Web標(biāo)準(zhǔn)的構(gòu)成。了解瀏覽器，能夠說出各主流瀏覽器的特點(diǎn)。了解HTML5技術(shù)，能夠知道HTML5發(fā)展歷程、優(yōu)勢(shì)以及瀏覽器對(duì)HTML5的支持情況。學(xué)習(xí)目標(biāo)/Target掌握HTML5基本結(jié)構(gòu)，能夠在網(wǎng)頁(yè)中應(yīng)用HTML5結(jié)構(gòu)。熟悉HTML5語(yǔ)法，能夠歸納HTML5語(yǔ)法的特點(diǎn)。熟悉HTML5標(biāo)簽，能夠知道HTML5標(biāo)簽類型、標(biāo)簽屬性以及頭部相關(guān)標(biāo)簽的用法。熟悉HTML5常用開發(fā)工具，能夠使用這些開發(fā)工具編寫HTML5網(wǎng)頁(yè)代碼。章節(jié)概述/Summary近年來，Web技術(shù)發(fā)展越來越迅速，HTML5的到來更是把Web技術(shù)推向了巔峰。HTML5不僅保留了HTML絕大多數(shù)的特性，而且增加了許多新的特性。目前HTML5技術(shù)已經(jīng)非常成熟，無論是在PC（個(gè)人計(jì)算機(jī)）端還是在移動(dòng)端，都被廣泛應(yīng)用。本章將詳細(xì)講解HTML5的基礎(chǔ)內(nèi)容，為初學(xué)者深入學(xué)習(xí)HTML5知識(shí)夯實(shí)基礎(chǔ)。目錄/Contents1.1網(wǎng)頁(yè)相關(guān)知識(shí)1.2HTML5概述1.3HTML5基礎(chǔ)1.4HTML5代碼編輯工具1.5階段案例——第一個(gè)HTML5頁(yè)面網(wǎng)頁(yè)相關(guān)知識(shí)1.11.1網(wǎng)頁(yè)相關(guān)知識(shí)我們上網(wǎng)時(shí)瀏覽新聞、查詢信息、看視頻等都是在瀏覽網(wǎng)頁(yè)。1.1網(wǎng)頁(yè)相關(guān)知識(shí)網(wǎng)頁(yè)可以看做承載各種內(nèi)容的容器，所有可視化的內(nèi)容都可以通過網(wǎng)頁(yè)展示給用戶。HTML5和網(wǎng)頁(yè)有什么關(guān)系？網(wǎng)頁(yè)是由什么構(gòu)成的？網(wǎng)頁(yè)有哪些標(biāo)準(zhǔn)？本節(jié)將從網(wǎng)頁(yè)構(gòu)成、網(wǎng)頁(yè)相關(guān)名詞、Web標(biāo)準(zhǔn)、瀏覽器四個(gè)方面詳細(xì)講解網(wǎng)頁(yè)的相關(guān)知識(shí)。1.1網(wǎng)頁(yè)相關(guān)知識(shí)了解網(wǎng)頁(yè)構(gòu)成，能夠知道網(wǎng)頁(yè)是由哪些元素構(gòu)成。學(xué)習(xí)目標(biāo)1.1.1網(wǎng)頁(yè)構(gòu)成1.1網(wǎng)頁(yè)相關(guān)知識(shí)在Chrome瀏覽器地址欄中輸入教程網(wǎng)站的地址，單擊“Enter”鍵，此時(shí)Chrome瀏覽器中顯示的頁(yè)面即為教程網(wǎng)站的首頁(yè)。教程網(wǎng)站首頁(yè)截圖如圖1-2所示。1.1.1網(wǎng)頁(yè)構(gòu)成1.1網(wǎng)頁(yè)相關(guān)知識(shí)1.1.1網(wǎng)頁(yè)構(gòu)成1.1網(wǎng)頁(yè)相關(guān)知識(shí)文字圖像超鏈接分析教程網(wǎng)站首頁(yè)可知，網(wǎng)頁(yè)主要由文字、圖像和超鏈接（超鏈接為單擊可以跳轉(zhuǎn)到其他頁(yè)面的元素）等元素構(gòu)成。當(dāng)然除了這些元素，網(wǎng)頁(yè)中還可以包含音頻、視頻以及動(dòng)畫等。為了讓初學(xué)者快速了解網(wǎng)頁(yè)的構(gòu)成，接下來，我們查看一下網(wǎng)頁(yè)的源代碼。打開谷歌瀏覽器，單擊“F12”快捷鍵，谷歌瀏覽器中便會(huì)彈出當(dāng)前網(wǎng)頁(yè)的源代碼。1.1.1網(wǎng)頁(yè)構(gòu)成1.1網(wǎng)頁(yè)相關(guān)知識(shí)教程網(wǎng)站首頁(yè)的源代碼是一個(gè)純文本文件，僅包含一些特殊的符號(hào)和文本。而我們?yōu)g覽網(wǎng)頁(yè)時(shí)看到的圖片、視頻等，正是這些特殊的符號(hào)和文本組成的代碼被瀏覽器渲染之后的結(jié)果。1.1.1網(wǎng)頁(yè)構(gòu)成1.1網(wǎng)頁(yè)相關(guān)知識(shí)除了首頁(yè)之外，教程網(wǎng)站還包含多個(gè)子頁(yè)面。例如，單擊教程網(wǎng)站首頁(yè)的導(dǎo)航，會(huì)跳轉(zhuǎn)到其他子頁(yè)面?？梢娋W(wǎng)站就是多個(gè)網(wǎng)頁(yè)的集合，網(wǎng)頁(yè)與網(wǎng)頁(yè)之間可以通過鏈接互相訪問。1.1.1網(wǎng)頁(yè)構(gòu)成1.1網(wǎng)頁(yè)相關(guān)知識(shí)網(wǎng)頁(yè)（這里代指靜態(tài)網(wǎng)頁(yè)）的擴(kuò)展名為htm或html，二者在本質(zhì)上并沒有區(qū)別，我們一般使用html作為擴(kuò)展名。更改記事本文件的后綴名可以快速創(chuàng)建一個(gè)網(wǎng)頁(yè)。1.1.1網(wǎng)頁(yè)構(gòu)成1.1網(wǎng)頁(yè)相關(guān)知識(shí)網(wǎng)頁(yè)有靜態(tài)和動(dòng)態(tài)之分。所謂靜態(tài)網(wǎng)頁(yè)是指用戶無論何時(shí)何地訪問，網(wǎng)頁(yè)都會(huì)顯示固定的信息，除非網(wǎng)頁(yè)源代碼被重新修改上傳。靜態(tài)網(wǎng)頁(yè)更新不方便，但是訪問速度快。而動(dòng)態(tài)網(wǎng)頁(yè)顯示的內(nèi)容則會(huì)隨著用戶操作和時(shí)間的不同而變化，這是因?yàn)閯?dòng)態(tài)網(wǎng)頁(yè)可以和服務(wù)器數(shù)據(jù)庫(kù)進(jìn)行實(shí)時(shí)的數(shù)據(jù)交換。現(xiàn)在互聯(lián)網(wǎng)上的大部分網(wǎng)站都是由靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)混合組成的，兩者各有特色，用戶在開發(fā)網(wǎng)站時(shí)可根據(jù)需求酌情采用。本書講解的HTML5和CSS3就是一種靜態(tài)網(wǎng)頁(yè)搭建技術(shù)。1.1.1網(wǎng)頁(yè)構(gòu)成1.1網(wǎng)頁(yè)相關(guān)知識(shí)靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)多學(xué)一招:了解網(wǎng)頁(yè)相關(guān)名詞，能夠說明Internet、WWW、HTTP等網(wǎng)頁(yè)名詞的含義。學(xué)習(xí)目標(biāo)1.1.2網(wǎng)頁(yè)相關(guān)名詞1.1網(wǎng)頁(yè)相關(guān)知識(shí)對(duì)于從事網(wǎng)頁(yè)制作工作的人員來說，有必要了解一些與網(wǎng)頁(yè)相關(guān)的名詞，例如常見的internet、WWW、HTTP等，具體介紹如下。1.1.2網(wǎng)頁(yè)相關(guān)名詞1.1網(wǎng)頁(yè)相關(guān)知識(shí)InternetWWWURLDNSHTTP和HTTPSWebW3C1.1.2網(wǎng)頁(yè)相關(guān)名詞1.1網(wǎng)頁(yè)相關(guān)知識(shí)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)。WWWURLDNSHTTP和HTTPSWebW3C1.1.2網(wǎng)頁(yè)相關(guān)名詞1.1網(wǎng)頁(yè)相關(guān)知識(shí)InternetWWW（WorldWideWeb，萬維網(wǎng)）不是網(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ù)。WWWURLDNSHTTP和HTTPSWebW3C1.1.2網(wǎng)頁(yè)相關(guān)名詞1.1網(wǎng)頁(yè)相關(guān)知識(shí)InternetURL（UniformResourceLocator，統(tǒng)一資源定位符）其實(shí)就是Web地址，也稱“網(wǎng)址”。在萬維網(wǎng)上的所有文件（HTML、CSS、圖片、音樂、視頻等）都有唯一的URL，用戶只要知道文件的URL，就能夠?qū)υ撐募M(jìn)行訪問。URL可以是本地磁盤位置，也可以是局域網(wǎng)上的某一臺(tái)計(jì)算機(jī)，還可以是internet上的站點(diǎn)。WWWURLDNSHTTP和HTTPSWebW3C/1.1.2網(wǎng)頁(yè)相關(guān)名詞1.1網(wǎng)頁(yè)相關(guān)知識(shí)InternetDNS（DomainNameSystem，域名系統(tǒng)）是互聯(lián)網(wǎng)的一項(xiàng)服務(wù)。在internet上域名與IP地址（可以理解為internet上計(jì)算機(jī)的一個(gè)編號(hào)）之間是一一對(duì)應(yīng)的，域名（如：淘寶網(wǎng)域名）雖然便于用戶記憶，但計(jì)算機(jī)只能識(shí)別IP地址（如：）。計(jì)算機(jī)將便于記憶的域名轉(zhuǎn)換成IP的過程被稱為域名解析。DNS就是進(jìn)行域名解析的系統(tǒng)。WWWURLDNSHTTP和HTTPSWebW3C1.1.2網(wǎng)頁(yè)相關(guān)名詞1.1網(wǎng)頁(yè)相關(guān)知識(shí)InternetHTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）是一種詳細(xì)規(guī)定了瀏覽器和互聯(lián)網(wǎng)服務(wù)器之間互相通信的規(guī)則。HTTP是非?？煽康膮f(xié)議，具有強(qiáng)大的自檢能力，所有用戶請(qǐng)求的文件到達(dá)客戶端時(shí)，都是準(zhǔn)確無誤的。WWWURLDNSHTTP和HTTPSWebW3C由于HTTP傳輸?shù)臄?shù)據(jù)都是未加密的，因此用戶使用HTTP傳輸隱私信息不太安全。為了保證這些隱私數(shù)據(jù)能夠安全傳輸，網(wǎng)景公司設(shè)計(jì)了SSL（SecureSocketsLayer，安全套接層協(xié)議），該協(xié)議用于對(duì)HTTP傳輸?shù)臄?shù)據(jù)進(jìn)行加密，從而就誕生了HTTPS。HTTPS是由SSL+HTTP構(gòu)建的，可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議。因此HTTPS要比HTTP更安全。1.1.2網(wǎng)頁(yè)相關(guān)名詞1.1網(wǎng)頁(yè)相關(guān)知識(shí)InternetWeb翻譯為中文是“網(wǎng)絡(luò)”的意思。對(duì)于普通網(wǎng)絡(luò)用戶來說，Web僅僅只是一種環(huán)境——互聯(lián)網(wǎng)的使用環(huán)境。而對(duì)于網(wǎng)頁(yè)制作者來說，Web是一系列技術(shù)的復(fù)合總稱，包括網(wǎng)站的前臺(tái)布局、后臺(tái)程序、界面架構(gòu)、數(shù)據(jù)庫(kù)開發(fā)等。WWWURLDNSHTTP和HTTPSWebW3C1.1.2網(wǎng)頁(yè)相關(guān)名詞1.1網(wǎng)頁(yè)相關(guān)知識(shí)InternetW3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）是國(guó)際最著名的標(biāo)準(zhǔn)化組織。W3C最重要的工作是制定和推廣Web規(guī)范。自1994年成立以來，W3C已經(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ù)的發(fā)展。WWWURLDNSHTTP和HTTPSWebW3C熟悉Web標(biāo)準(zhǔn)，能夠歸納Web標(biāo)準(zhǔn)的構(gòu)成。學(xué)習(xí)目標(biāo)1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)為什么需要Web標(biāo)準(zhǔn)？1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)由于不同的瀏覽器對(duì)同一個(gè)網(wǎng)頁(yè)文件解析出來的效果可能不一致，為了讓用戶能夠看到正常顯示的網(wǎng)頁(yè)，網(wǎng)頁(yè)制作人員常常需要為兼容多個(gè)版本的瀏覽器而苦惱，當(dāng)使用新的硬件和軟件開始瀏覽網(wǎng)頁(yè)時(shí)，這種情況會(huì)變得更加嚴(yán)重。為了Web更好地發(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)的原因：1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)Web標(biāo)準(zhǔn)并不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合，主要包括結(jié)構(gòu)、表現(xiàn)和行為三個(gè)方面。結(jié)構(gòu)表現(xiàn)行為1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)中用到的信息進(jìn)行分類與整理。在結(jié)構(gòu)中用到的技術(shù)主要包括HTML、XML和XHTML。結(jié)構(gòu)HTMLHTML的目的是創(chuàng)建結(jié)構(gòu)化的文檔并為這些文檔提供語(yǔ)義。XMLXML的目的是為了彌補(bǔ)HTML語(yǔ)言的不足，具有強(qiáng)大的擴(kuò)展性，可用于數(shù)據(jù)的轉(zhuǎn)換和描述。XHTMLXHTML的目的是為了實(shí)現(xiàn)HTML語(yǔ)言向XML語(yǔ)言的過渡，已逐漸被HTML5所取代。1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)該結(jié)構(gòu)使用HTML5搭建，四張圖片按照從上到下的次序羅列，沒有任何布局樣式。結(jié)構(gòu)1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)表現(xiàn)表現(xiàn)是指網(wǎng)頁(yè)展示給訪問者的外在樣式，一般包括網(wǎng)頁(yè)的版式、顏色、字體樣式等。在網(wǎng)頁(yè)制作中，通常使用CSS來設(shè)置網(wǎng)頁(yè)的樣式。上圖是網(wǎng)頁(yè)焦點(diǎn)輪播圖加入CSS樣式后的效果。1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)行為行為是指網(wǎng)頁(yè)模型的定義及交互效果的實(shí)現(xiàn)，包括ECMAScript、BOM、DOM三個(gè)部分。ECMAScript是JavaScript的核心，由ECMA（EuropeanComputerManufacturersAssociation）國(guó)際聯(lián)合瀏覽器廠商制定。ECMAScript規(guī)定了JavaScript的語(yǔ)法規(guī)則和核心內(nèi)容，是所有瀏覽器廠商共同遵守的一套JavaScript語(yǔ)法標(biāo)準(zhǔn)。1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)行為行為是指網(wǎng)頁(yè)模型的定義及交互效果的實(shí)現(xiàn)，包括ECMAScript、BOM、DOM三個(gè)部分。BOM即瀏覽器對(duì)象模型。通過BOM可以操作瀏覽器窗口。例如，對(duì)話框彈出、導(dǎo)航跳轉(zhuǎn)等。1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)行為行為是指網(wǎng)頁(yè)模型的定義及交互效果的實(shí)現(xiàn)，包括ECMAScript、BOM、DOM三個(gè)部分。DOM即文檔對(duì)象模型。DOM允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。網(wǎng)頁(yè)設(shè)計(jì)者通過DOM即可對(duì)頁(yè)面中的各種元素進(jìn)行操作。例如，設(shè)置元素的大小、顏色、位置等。1.1.3Web標(biāo)準(zhǔn)1.1網(wǎng)頁(yè)相關(guān)知識(shí)行為網(wǎng)頁(yè)焦點(diǎn)輪播圖加入JavaScript腳本代碼后的效果。每隔一段時(shí)間，焦點(diǎn)輪播圖就會(huì)自動(dòng)切換。當(dāng)用戶將光標(biāo)移上按鈕時(shí)，焦點(diǎn)輪播圖會(huì)顯示和該按鈕對(duì)應(yīng)的圖片。用戶將光標(biāo)移開后，焦點(diǎn)輪播圖又會(huì)按照默認(rèn)的設(shè)置自動(dòng)輪播，這就是網(wǎng)頁(yè)的行為。了解瀏覽器，能夠說出各主流瀏覽器的特點(diǎn)。學(xué)習(xí)目標(biāo)1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)瀏覽器是網(wǎng)頁(yè)展示的平臺(tái)，只有經(jīng)過瀏覽器渲染，用戶才能看到圖文并茂的網(wǎng)頁(yè)。在瀏覽器的發(fā)展歷史中，主流瀏覽器有很多。瀏覽器名稱發(fā)布時(shí)間所屬公司InternetExplorer（IE）1995微軟Opera（歐朋）1995TelenorSafari2003蘋果Firefox（火狐）2004Mozilla基金會(huì)Chrome（谷歌）2008谷歌Edge2015微軟1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)InternetExplorerInternetExplorer也被稱為IE瀏覽器，IE瀏覽器由微軟公司推出，直接綁定在Windows操作系統(tǒng)中，無需下載安裝。我們?cè)谥谱骶W(wǎng)頁(yè)時(shí)，要考慮低版本瀏覽器的兼容問題。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)OperaOpera也被稱為歐朋瀏覽器，歐朋瀏覽器為來自挪威的一個(gè)極為出色的瀏覽器，具有速度快、節(jié)省系統(tǒng)資源、訂制能力強(qiáng)、安全性高以及體積小等特點(diǎn)，但兼容性略差。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)SafariSafari是蘋果操作系統(tǒng)內(nèi)置的瀏覽器。Safari瀏覽器外觀時(shí)尚，速度快。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)FirefoxFirefox也被稱為火狐瀏覽器，火狐瀏覽器是Mozilla公司旗下的一款瀏覽器?；鸷鼮g覽器是一個(gè)自由并開源的網(wǎng)頁(yè)瀏覽器，其可開發(fā)程度很高。任何一個(gè)具有編程知識(shí)的人都可以為火狐瀏覽器編寫代碼，增加一些個(gè)性化功能。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)ChromeChrome也被稱為谷歌瀏覽器，谷歌瀏覽器是由谷歌公司開發(fā)的網(wǎng)頁(yè)瀏覽器。谷歌瀏覽器基于其他開放原始碼軟件所撰寫，極大地提升了瀏覽器的穩(wěn)定性、安全性和響應(yīng)速度。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)Chrome2021年10月~2022年10月，全球?yàn)g覽器的市場(chǎng)份額，其中Chrome瀏覽器占據(jù)全球市場(chǎng)份額高達(dá)66.51%，在瀏覽器市場(chǎng)具有絕對(duì)的優(yōu)勢(shì)。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)Chrome在谷歌瀏覽器中調(diào)試網(wǎng)頁(yè)代碼也非常簡(jiǎn)單，打開谷歌瀏覽器（以谷歌瀏覽器80.0.3987.87版本為例），按“F12”快捷鍵，即可打開調(diào)試面板。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)Chrome在調(diào)試面板中，我們可以查看網(wǎng)頁(yè)的內(nèi)容結(jié)構(gòu)和臨時(shí)顯示樣式。當(dāng)我們選擇“”按鈕后，將鼠標(biāo)指針懸浮在網(wǎng)頁(yè)中的某個(gè)模塊，即可查看該模塊的網(wǎng)頁(yè)代碼。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)EdgeEdge是由微軟公司推出的一款瀏覽器。Edge瀏覽器擁有比IE瀏覽器優(yōu)化程度更高的代碼結(jié)構(gòu)，因此Edge瀏覽器的速度更快?，F(xiàn)在的網(wǎng)頁(yè)兼容調(diào)試也更傾向于Edge。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)瀏覽器內(nèi)核是瀏覽器最核心的部分，主要負(fù)責(zé)渲染網(wǎng)頁(yè)，不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁(yè)代碼的解釋也不同，因此同一網(wǎng)頁(yè)在不同內(nèi)核的瀏覽器中渲染（顯示）效果也可能不同。目前常見的瀏覽器內(nèi)核有Trident、Gecko、Webkit、Presto、Blink五種。Trident內(nèi)核代表瀏覽器是IE瀏覽器，因此Trident內(nèi)核又被稱為IE內(nèi)核。Trident內(nèi)核只能用于Windows平臺(tái)，并且該內(nèi)核不是開源的。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)Gecko內(nèi)核代表瀏覽器是火狐瀏覽器。Gecko內(nèi)核是開源的，最大優(yōu)勢(shì)是可以跨平臺(tái)。Webkit內(nèi)核代表瀏覽器是Safari瀏覽器以及老版本的谷歌瀏覽器。Gecko內(nèi)核也是開源的。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)Presto內(nèi)核代表瀏覽器是歐朋瀏覽器。Presto內(nèi)核渲染速度快，缺點(diǎn)就是為了提升響應(yīng)速度丟掉了一部分網(wǎng)頁(yè)兼容性。Blink內(nèi)核由谷歌公司和歐朋公司共同開發(fā)?，F(xiàn)在谷歌瀏覽器的內(nèi)核是Blink。Edge瀏覽器也采用Blink內(nèi)核。1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)值得一提的是在國(guó)內(nèi)的一些瀏覽器大多采用雙內(nèi)核，例如360瀏覽器、獵豹瀏覽器采用Trident（兼容模式）和Webkit（高速模式）。瀏覽器私有前綴是區(qū)分不同內(nèi)核瀏覽器的標(biāo)示。由于W3C組織每提出一個(gè)新屬性，都需要經(jīng)過一個(gè)耗時(shí)且復(fù)雜的標(biāo)準(zhǔn)制定流程。在標(biāo)準(zhǔn)還未確定時(shí)，部分瀏覽器已經(jīng)根據(jù)最初草案實(shí)現(xiàn)了新屬性的功能，為了與之后確定的標(biāo)準(zhǔn)進(jìn)行兼容，各瀏覽器使用了自己的私有前綴與標(biāo)準(zhǔn)進(jìn)行區(qū)分，當(dāng)標(biāo)準(zhǔn)確立后，各大瀏覽器再逐步支持不帶前綴的CSS3新屬性。瀏覽器私有前綴多學(xué)一招:1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)瀏覽器私有前綴多學(xué)一招:1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)私有前綴瀏覽器-webkit-Chrome（谷歌）瀏覽器-moz-Firefox（火狐）瀏覽器-ms-IE瀏覽器-o-Opera（歐朋）瀏覽器瀏覽器私有前綴多學(xué)一招:1.1.4瀏覽器1.1網(wǎng)頁(yè)相關(guān)知識(shí)現(xiàn)在很多新版本的瀏覽器可以很好地兼容CSS3的新屬性，因此很多私有前綴可以不寫，但為了兼容老版本的瀏覽器，仍可以使用私有前綴。HTML5概述1.21.2HTML5概述HTML5從根本上改變了Web應(yīng)用的方式，無論是PC端還是移動(dòng)端，都可以看到HTML5的身影。作為網(wǎng)頁(yè)設(shè)計(jì)人員，也應(yīng)該順應(yīng)時(shí)代潮流，掌握HTML5的相關(guān)技術(shù)。本節(jié)將從HTML到HTML5的演變、HTML5的優(yōu)勢(shì)以及瀏覽器對(duì)HTML5的兼容情況三個(gè)方面，對(duì)HTML5進(jìn)行簡(jiǎn)單介紹。了解HTML到HTML5的演變，能夠說出HTML5的演變歷史。學(xué)習(xí)目標(biāo)1.2.1HTML的演變歷程1.2HTML5概述在學(xué)習(xí)HTML5之前，我們首先了解一下HTML到HTML5的演變歷程。HTML提供了許多標(biāo)簽，如段落標(biāo)簽、標(biāo)題標(biāo)簽、超鏈接標(biāo)簽、圖片標(biāo)簽等。網(wǎng)頁(yè)中需要定義什么內(nèi)容，就用相應(yīng)的HTML標(biāo)簽描述即可。1.2.1HTML的演變歷程1.2HTML5概述1.2.1HTML的演變歷程1.2HTML5概述HTML2.01995年11月HTML2.0發(fā)布，此時(shí)HTML標(biāo)準(zhǔn)逐漸統(tǒng)一。HTML第1版在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布。HTML3.21997年1月14日。是第一個(gè)被廣泛使用的標(biāo)準(zhǔn)。HTML4.01997年12月18日，發(fā)布的版本。HTML4.011999年12月24日，同樣是一個(gè)被廣泛使用的標(biāo)準(zhǔn)XHTML1.02000年1月26日。XHTML1.0語(yǔ)法規(guī)則更為嚴(yán)格和規(guī)范。1.2.1HTML的演變歷程1.2HTML5概述HTML52014年10月28日HTML5作為W3C推薦標(biāo)準(zhǔn)發(fā)布。了解HTML到HTML5的優(yōu)勢(shì)，能夠列舉HTML的優(yōu)勢(shì)。學(xué)習(xí)目標(biāo)1.2.2HTML5的優(yōu)勢(shì)1.2HTML5概述1.2.2HTML5的優(yōu)勢(shì)1.2HTML5概述1解決了跨瀏覽器、跨平臺(tái)問題2新增了多個(gè)新標(biāo)簽3安全機(jī)制的增強(qiáng)5化繁為簡(jiǎn)的優(yōu)勢(shì)4樣式和結(jié)構(gòu)分離更徹底1.2.2HTML5的優(yōu)勢(shì)1.2HTML5概述1解決了跨瀏覽器、跨平臺(tái)問題在HTML5之前，用戶使用不同的瀏覽器，常常看到不同的頁(yè)面效果。而HTML5是由W3C推薦，眾多知名公司共同遵守的標(biāo)準(zhǔn)。在HTML5中，納入了眾多擴(kuò)展功能和標(biāo)準(zhǔn)，讓不同的瀏覽器或者平臺(tái)都可以使用HTML5，并顯示相同的頁(yè)面效果。從而解決了跨瀏覽器、跨平臺(tái)的問題。1.2.2HTML5的優(yōu)勢(shì)1.2HTML5概述2新增了多個(gè)新標(biāo)簽新的結(jié)構(gòu)標(biāo)簽，例如<header>、<nav>、<section>、<article>、<footer>。新的表單控件類型，例如calendar、date、time、email、url、search。用于繪畫的<canvas>標(biāo)簽。用于嵌入視頻的<video>標(biāo)簽和用于嵌入音頻的<audio>標(biāo)簽。更好的支持本地離線存儲(chǔ)。地理位置、拖拽元素、攝像頭等新的API（應(yīng)用程序接口）。1.2.2HTML5的優(yōu)勢(shì)1.2HTML5概述3安全機(jī)制的增強(qiáng)HTML5中引入了一種新的基于來源的安全模型，該安全模型不僅操作方便，而且適用不同的API（應(yīng)用程序接口）。1.2.2HTML5的優(yōu)勢(shì)1.2HTML5概述4樣式和結(jié)構(gòu)分離更徹底實(shí)際上，樣式和結(jié)構(gòu)的分離早在HTML4.0中就已涉及，但是分離的并不徹底。為了避免可訪問性差、代碼復(fù)雜度高、文件過大等問題，HTML5規(guī)范中更細(xì)致、清晰地分離了樣式和結(jié)構(gòu)。但是考慮到HTML5的兼容性問題，一些陳舊的樣式和結(jié)構(gòu)的代碼咋HTML5中還是可以兼容使用的。1.2.2HTML5的優(yōu)勢(shì)1.2HTML5概述5化繁為簡(jiǎn)的優(yōu)勢(shì)簡(jiǎn)化的字符集聲明。簡(jiǎn)化的DOCTYPE。以瀏覽器原生能力（瀏覽器自身特性功能）替代復(fù)雜的JavaScript代碼。了解瀏覽器對(duì)HTML5的兼容情況，能夠知道哪個(gè)瀏覽器對(duì)HTML5的兼容性最好。學(xué)習(xí)目標(biāo)1.2.3瀏覽器對(duì)HTML5的兼容情況1.2HTML5概述由于瀏覽器種類眾多，同時(shí)每種瀏覽器又有不同的版本。我們?cè)谑褂肏TML5時(shí)有必要了解瀏覽器對(duì)HTML5兼容情況。1.2.3瀏覽器對(duì)HTML5的兼容情況1.2HTML5概述上圖是使用html5test測(cè)試主流瀏覽器部分版本的兼容得分（截至2022年1月的數(shù)據(jù)）。Chrome瀏覽器各版本分?jǐn)?shù)均為最高，證明該瀏覽器對(duì)HTML5的兼容性最好。1.2.3瀏覽器對(duì)HTML5的兼容情況1.2HTML5概述HTML5基礎(chǔ)1.31.3HTML5基礎(chǔ)HTML5是HTML的新版本，越來越多的網(wǎng)站開發(fā)者開始使用HTML5構(gòu)建網(wǎng)站。學(xué)習(xí)HTML5首先需要了解HTML5的基礎(chǔ)知識(shí)。本節(jié)將針對(duì)HTML5的基本結(jié)構(gòu)、語(yǔ)法格式、標(biāo)簽類型、標(biāo)簽的屬性以及文檔頭部相關(guān)標(biāo)簽進(jìn)行講解。掌握HTML5基本結(jié)構(gòu)，能夠在網(wǎng)頁(yè)中應(yīng)用HTML5結(jié)構(gòu)。學(xué)習(xí)目標(biāo)1.3.1HTML5的基本結(jié)構(gòu)1.3HTML5基礎(chǔ)1.3.1HTML5的基本結(jié)構(gòu)1.3HTML5基礎(chǔ)傳智教育：傳智播客教育科技有限公司是一家專門致力于高素質(zhì)軟件開發(fā)人才培養(yǎng)的高科技公司。此致敬禮

學(xué)員【結(jié)論】學(xué)習(xí)任何一門語(yǔ)言，首先需要掌握它的基本結(jié)構(gòu)，就像寫信需要符合書信的格式要求一樣。HTML5語(yǔ)言也不例外，同樣需要遵從一定的結(jié)構(gòu)規(guī)范。1.3.1HTML5的基本結(jié)構(gòu)1.3HTML5基礎(chǔ)XHTML1.0HTML5簡(jiǎn)化后1.3.1HTML5的基本結(jié)構(gòu)1.3HTML5基礎(chǔ)<html>用于告知瀏覽器其是一個(gè)HTML文檔，<html>標(biāo)簽和</html>標(biāo)簽標(biāo)志著HTML文檔的開始和結(jié)束，在它們之間的是文檔的頭部和主體內(nèi)容。<!DOCTYPE>位于文檔的最前面，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種HTML或XHTML標(biāo)準(zhǔn)規(guī)范。<body>用于定義HTML文檔所要顯示的內(nèi)容，瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標(biāo)簽內(nèi)。<head>用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)簽，緊跟在<html>標(biāo)簽之后，主要用來封裝其他位于文檔頭部的標(biāo)簽。熟悉HTML5語(yǔ)法，能夠歸納HTML5語(yǔ)法的特點(diǎn)。學(xué)習(xí)目標(biāo)1.3.2HTML5的語(yǔ)法格式1.3HTML5基礎(chǔ)為了兼容不規(guī)范的HTML文檔，HTML5采用寬松的語(yǔ)法格式。和之前的各版本相比，HTML5的語(yǔ)法變化主要體現(xiàn)在以下幾個(gè)方面。1.3.2HTML5的語(yǔ)法格式1.3HTML5基礎(chǔ)1.標(biāo)簽不區(qū)分大小寫2.允許屬性值不使用引號(hào)3.允許部分屬性值的屬性省略1.3.2HTML5的語(yǔ)法格式1.3HTML5基礎(chǔ)1.標(biāo)簽不區(qū)分大小寫2.允許屬性值不使用引號(hào)3.允許部分屬性值的屬性省略<p>這里的p標(biāo)簽大小寫不一致</P>例如下列代碼：雖然<p>與</P>大小寫并不匹配，但是在HTML5語(yǔ)法中是完全允許的。1.3.2HTML5的語(yǔ)法格式1.3HTML5基礎(chǔ)1.標(biāo)簽不區(qū)分大小寫2.允許屬性值不使用引號(hào)3.允許部分屬性值的屬性省略<inputchecked="a"type="checkbox"/><inputreadonly="readonly"type="text"/>例如：<inputchecked=atype=checkbox/><inputreadonly=readonlytype=text/>可以將上述代碼改為：1.3.2HTML5的語(yǔ)法變化1.3HTML5基礎(chǔ)1.標(biāo)簽不區(qū)分大小寫2.允許屬性值不使用引號(hào)3.允許部分屬性值的屬性省略<inputchecked="checked"type="checkbox"/><inputreadonly="readonly"type="text"/>例如：<inputcheckedtype="checkbox"/><inputreadonlytype="text"/>省略屬性值后可以改為：1.3.2HTML5的語(yǔ)法格式1.3HTML5基礎(chǔ)屬性描述checked省略屬性值后，等價(jià)于checked="checked"。readonly省略屬性值后，等價(jià)于readonly="readonly"defer省略屬性值后，等價(jià)于defer="defer"ismap省略屬性值后，等價(jià)于ismap="ismap"nohref省略屬性值后，等價(jià)于nohref="nohref"noshade省略屬性值后，等價(jià)于noshade="noshade"在HTML5中，可以省略屬性值的屬性如下表。1.3.2HTML5的語(yǔ)法格式1.3HTML5基礎(chǔ)屬性描述nowrap省略屬性值后，等價(jià)于nowrap="nowrap"selected省略屬性值后，等價(jià)于selected="selected"disabled省略屬性值后，等價(jià)于disabled="disabled"multiple省略屬性值后，等價(jià)于multiple="multiple"noresize省略屬性值后，等價(jià)于noresize="noresize"在HTML5中，可以省略屬性值的屬性如下表。1.3.2HTML5的語(yǔ)法格式1.3HTML5基礎(chǔ)注意：雖然HTML5采用比較寬松的語(yǔ)法格式，支持各種不規(guī)范的HTML文檔。但網(wǎng)站開發(fā)人員仍應(yīng)采用嚴(yán)謹(jǐn)?shù)拇a編寫模式，這樣更有利于團(tuán)隊(duì)合作及后期代碼的維護(hù)。熟悉HTML5標(biāo)簽，能夠知道HTML5標(biāo)簽類型。學(xué)習(xí)目標(biāo)1.3.3HTML5標(biāo)簽的類型1.3HTML5基礎(chǔ)什么是HTML標(biāo)簽？1.3.3HTML5標(biāo)簽的類型1.3HTML5基礎(chǔ)帶有“<>”符號(hào)的元素被稱為HTML標(biāo)簽例如：<html>、<head>、<body>都是HTML標(biāo)簽也稱為HTML標(biāo)記或HTML元素1.3.3HTML5標(biāo)簽的類型1.3HTML5基礎(chǔ)HTML中的標(biāo)簽分為三種，分別為單標(biāo)簽、雙標(biāo)簽、注釋標(biāo)簽。雙標(biāo)簽單標(biāo)簽注釋標(biāo)簽1.3.3HTML5標(biāo)簽的類型1.3HTML5基礎(chǔ)3.

HTML標(biāo)簽單標(biāo)簽<標(biāo)簽名/>在上述語(yǔ)法格式中，“標(biāo)簽名”和“/”之間有一個(gè)空格，在HTML5中，空格和斜線均可以省略。例如：<hr/>寫法一：寫法二：<hr>單標(biāo)簽也稱空標(biāo)簽，是指用一個(gè)標(biāo)簽符號(hào)即可完整地描述某個(gè)功能的標(biāo)簽。單標(biāo)簽語(yǔ)法格式：1.3.3HTML5標(biāo)簽的類型1.3HTML5基礎(chǔ)3.

HTML標(biāo)簽雙標(biāo)簽<標(biāo)簽名>內(nèi)容</標(biāo)簽名>雙標(biāo)簽也稱體標(biāo)簽，是指由開始和結(jié)束兩個(gè)標(biāo)簽符組成的標(biāo)簽。雙標(biāo)簽語(yǔ)法格式：表示該標(biāo)記的作用開始，一般稱為“開始標(biāo)簽”表示該標(biāo)記的作用結(jié)束，一般稱為“結(jié)束標(biāo)簽”1.3.3HTML5標(biāo)簽的類型1.3HTML5基礎(chǔ)注釋標(biāo)簽<!--注釋語(yǔ)句-->若需要在HTML文檔中添加注釋文字，就需要使用注釋標(biāo)簽。注釋標(biāo)簽語(yǔ)法格式：注釋內(nèi)容不會(huì)顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，可以被下載到用戶的計(jì)算機(jī)上，查看源代碼時(shí)就可以看到。我們也可以把注釋標(biāo)簽看做一種特殊的單標(biāo)簽。1.3.3HTML5標(biāo)簽的類型1.3HTML5基礎(chǔ)可以把HTML中帶有“<>”符號(hào)的字母或單詞統(tǒng)一被稱為標(biāo)簽。元素是指標(biāo)簽和標(biāo)簽包含的所有內(nèi)容。書寫元素時(shí)，通常不會(huì)帶有“<>”符號(hào)。HTML中標(biāo)簽和元素的差別多學(xué)一招:1.3.3HTML5標(biāo)簽的類型1.3HTML5基礎(chǔ)標(biāo)簽和元素的常見稱謂應(yīng)用示例如下。HTML中標(biāo)簽和元素的差別多學(xué)一招:1.3.3HTML5標(biāo)簽的類型1.3HTML5基礎(chǔ)<div>小美愛學(xué)習(xí)</div><hr/>開始標(biāo)簽：<div>開始標(biāo)簽。標(biāo)簽：<div>標(biāo)簽、<hr/>標(biāo)簽。元素內(nèi)容：小美愛學(xué)習(xí)。結(jié)束標(biāo)簽：</div>結(jié)束標(biāo)簽。元素：div元素、hr元素。熟悉HTML5標(biāo)簽屬性，能夠使用HTML5標(biāo)簽屬性為網(wǎng)頁(yè)增加樣式。學(xué)習(xí)目標(biāo)1.3.4HTML5標(biāo)簽的屬性1.3HTML5基礎(chǔ)通過為HTML5標(biāo)簽設(shè)置屬性的方式可以增加更多的樣式，例如字體、顏色等。1.3.4HTML5標(biāo)簽的屬性1.3HTML5基礎(chǔ)標(biāo)簽的屬性字體位置字號(hào)顏色1.3.4HTML5標(biāo)簽的屬性1.3HTML5基礎(chǔ)<標(biāo)簽名屬性1="屬性值1"屬性2="屬性值2"…>內(nèi)容</標(biāo)簽名>HTML5標(biāo)簽設(shè)置屬性的基本語(yǔ)法格式：在上述語(yǔ)法格式中，標(biāo)簽可以擁有多個(gè)屬性，屬性必須寫在開始標(biāo)簽中，位于標(biāo)簽名后面。屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。1.3.4HTML5標(biāo)簽的屬性1.3HTML5基礎(chǔ)例如下列代碼：<palign="center">我是居中顯示的文本</p>動(dòng)腦筋：上述示例代碼中，哪個(gè)是屬性？哪個(gè)是屬性值？1.3.4HTML5標(biāo)簽的屬性1.3HTML5基礎(chǔ)例如下列代碼：<palign="center">我是居中顯示的文本</p>屬性屬性值需要注意的是大多數(shù)屬性都有默認(rèn)屬性值，例如省略<p>標(biāo)簽的align屬性，段落文本則按默認(rèn)值左對(duì)齊顯示，也就是說<p></p>等價(jià)于<palign="left"></p>。在HTML5開始標(biāo)簽中，可以通過“屬性="屬性值"”的方式為標(biāo)簽添加屬性，其中“屬性”和“屬性值”就是以“鍵值對(duì)”的形式出現(xiàn)的。所謂“鍵值對(duì)”可以簡(jiǎn)單理解為對(duì)“屬性”設(shè)置“屬性值”。鍵值對(duì)有多種表現(xiàn)形式，例如color="red"、width:200px;等，其中color和width即為“鍵值對(duì)”中的“鍵”（英文key），red和200px為“鍵值對(duì)”中的“值”（英文value）?！版I值對(duì)”廣泛地應(yīng)用于編程中，HTML5屬性的定義形式“屬性="屬性值"”只是“鍵值對(duì)”中的一種。認(rèn)識(shí)鍵值對(duì)多學(xué)一招:1.3.4HTML5標(biāo)簽的屬性1.3HTML5基礎(chǔ)熟悉HTML5文檔頭部相關(guān)標(biāo)簽，能夠使用頭部相關(guān)標(biāo)簽設(shè)置頁(yè)面的基本信息。學(xué)習(xí)目標(biāo)1.3.5HTML5文檔頭部相關(guān)標(biāo)簽1.3HTML5基礎(chǔ)制作網(wǎng)頁(yè)時(shí)，經(jīng)常需要設(shè)置頁(yè)面的基本信息。例如，頁(yè)面的標(biāo)題、作者、頁(yè)面描述等。為此HTML提供了一系列的標(biāo)簽，這些標(biāo)簽通常都寫在<head>標(biāo)簽內(nèi)，因此被稱為頭部相關(guān)標(biāo)簽。1.3.5HTML5文檔頭部相關(guān)標(biāo)簽1.3HTML5基礎(chǔ)<title>標(biāo)簽<meta/>標(biāo)簽<title>標(biāo)記用于定義HTML頁(yè)面的標(biāo)題，即給網(wǎng)頁(yè)取一個(gè)名字，必須位于<head>標(biāo)記之內(nèi)。<meta/>標(biāo)記用于定義頁(yè)面的元信息，可重復(fù)出現(xiàn)在<head>頭部標(biāo)記中。<title>標(biāo)簽1.3.5HTML5文檔頭部相關(guān)標(biāo)簽1.3HTML5基礎(chǔ)一個(gè)HTML文檔只能含有一對(duì)<title></title>標(biāo)記，<title></title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。<title>輕松學(xué)習(xí)HTML5</title>基本語(yǔ)法格式：<meta/>標(biāo)簽<title>標(biāo)簽1.3.5HTML5文檔頭部相關(guān)標(biāo)簽1.3HTML5基礎(chǔ)<meta/>標(biāo)簽<metaname="名稱"content="值"/>設(shè)置網(wǎng)頁(yè)關(guān)鍵字設(shè)置網(wǎng)頁(yè)描述設(shè)置網(wǎng)頁(yè)作者<metaname=“keywords”content=“JAVA"/><metaname=“description“content=“IT”/><metaname=“author”content=“傳智教育"/><title>標(biāo)簽1.3.5HTML5文檔頭部相關(guān)標(biāo)簽1.3HTML5基礎(chǔ)<meta/>標(biāo)簽<metahttp-equiv="名稱"content="值"/>設(shè)置字符集設(shè)置頁(yè)面自動(dòng)刷新與跳轉(zhuǎn)<metahttp-equiv="Content-Type"content="text/html;charset=gbk"/><metahttp-equiv="refresh"content="10;url=/"/>HTML5代碼編輯工具1.41.3HTML5基礎(chǔ)為了方便編輯網(wǎng)頁(yè)代碼，網(wǎng)站制作人員通常會(huì)選擇一些較便捷的代碼編輯工具。例如，Editplus、notepad++、Hbuilder、sublime、Dreamweaver、VisualStudioCode等。其中VisualStudioCode輕巧便捷、免費(fèi)開源，并且提供了插件擴(kuò)展功能，深受網(wǎng)站制作人員的青睞。本節(jié)將詳細(xì)介紹VisualStudioCode的安裝、設(shè)置和使用技巧。熟悉HTML5常用開發(fā)工具，能夠安裝和設(shè)置VisualStudioCode。學(xué)習(xí)目標(biāo)1.4.1VisualStudioCode的安裝、設(shè)置1.4HTML5代碼編輯工具1.4.1VisualStudioCode的安裝、設(shè)置1.4HTML5代碼編輯工具步驟一：VisualStudioCode的安裝打開VSCode官方網(wǎng)站。單擊藍(lán)色箭頭按鈕選擇和電腦系統(tǒng)匹配的VSCode版本（推薦Stable穩(wěn)定版），單擊按鈕，下載VSCode安裝包。1.4.1VisualStudioCode的安裝、設(shè)置1.4HTML5代碼編輯工具步驟一：VisualStudioCode的安裝VSCode安裝完成后，啟動(dòng)軟件，VSCode界面結(jié)構(gòu)如下。1.4.1VisualStudioCode的安裝、設(shè)置1.4HTML5代碼編輯工具步驟二：VisualStudioCode的設(shè)置VSCode的初始化設(shè)置主要包括設(shè)置中文顯示模式、界面顏色和代碼字號(hào)。中文顯示模式界面顏色代碼字號(hào)1.4.1VisualStudioCode的安裝、設(shè)置1.4HTML5代碼編輯工具步驟二：VisualStudioCode的設(shè)置設(shè)置中文顯示模式①②③④⑤VSCode界面菜單默認(rèn)顯示為英文。如果我們習(xí)慣中文菜單操作，可以通過安裝中文擴(kuò)展插件的方式，將界面菜單設(shè)置為中文顯示模式。1.4.1VisualStudioCode的安裝、設(shè)置1.4HTML5代碼編輯工具步驟二：VisualStudioCode的設(shè)置VSCode默認(rèn)的界面為黑色背景，我們?nèi)绻胍鼡Q界面顏色，可以單擊工具欄左下方的管理按鈕進(jìn)行設(shè)置。設(shè)置界面顏色1.4.1VisualStudioCode的安裝、設(shè)置1.4HTML5代碼編輯工具步驟二：VisualStudioCode的設(shè)置VSCode有默認(rèn)的字號(hào)。如果感覺代碼字號(hào)不合適可以自行設(shè)置。單擊工具欄左下方的管理按鈕設(shè)置代碼字號(hào)熟悉VisualStudioCode的使用方法，能夠在軟件中執(zhí)行一些基本操作。學(xué)習(xí)目標(biāo)1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具創(chuàng)建文件夾和文件創(chuàng)建文件夾在電腦任意盤符下創(chuàng)建一個(gè)文件夾。打開VSCode，選擇“文件→打開文件夾”選項(xiàng)，導(dǎo)入新建的文件夾作為項(xiàng)目的根目錄，用于存放各類項(xiàng)目文件。創(chuàng)建文件夾打開VSCode在VSCode導(dǎo)入新建的文件夾作為根目錄導(dǎo)入文件夾1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具創(chuàng)建文件夾和文件創(chuàng)建文件打開文件夾后，可以選擇“文件→新建文件”選項(xiàng)（或按“Ctrl+N”快捷鍵）新建文件。新建的文件默認(rèn)是一個(gè)txt格式的純文本。1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具創(chuàng)建文件夾和文件創(chuàng)建文件在新建的文件名稱上右擊，在彈出的菜單選擇“重命名”（或按“F2”快捷鍵）將文件后綴名設(shè)置為html，該文件就會(huì)變成HTML網(wǎng)頁(yè)文件。1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具創(chuàng)建文件夾和文件創(chuàng)建文件在VSCode界面底部單擊“純文本”按鈕，在打開的“語(yǔ)言模式”菜單中，選擇不同類型的語(yǔ)言。1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件選擇“文件→保存”選項(xiàng)（或按“Ctrl+S”快捷鍵），可以將新建或編輯中的文件保存。保存文件會(huì)以默認(rèn)的文件夾作為根目錄，顯示在文件夾中。保存文件1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件選擇文件，可以在“代碼編輯區(qū)域”編輯文件；右擊鼠標(biāo)，在彈出的文件操作菜單中，可以對(duì)文件進(jìn)行剪切、復(fù)制等操作。操作文件1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件在右側(cè)的“代碼編輯區(qū)域”中可以編寫代碼。在編寫這些網(wǎng)頁(yè)代碼時(shí)，有一些快捷操作技巧。編寫代碼快速創(chuàng)建HTML5結(jié)構(gòu)快速創(chuàng)建標(biāo)簽快速創(chuàng)建注釋

快速預(yù)覽文件1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件打開HTML類型的文件，首先在第一行代碼編輯區(qū)域輸入一個(gè)英文感嘆號(hào)“!”，在彈出的菜單中選擇第一個(gè)選項(xiàng)（或按“Enter”鍵直接選擇）編寫代碼——快速創(chuàng)建HTML5結(jié)構(gòu)步驟一1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件此時(shí)，可以快速創(chuàng)建一個(gè)固定的HTML5結(jié)構(gòu)。編寫代碼——快速創(chuàng)建HTML5結(jié)構(gòu)步驟二1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件編寫代碼——快速創(chuàng)建HTML5結(jié)構(gòu)值得一提的是，使用VSCode創(chuàng)建的HTML5結(jié)構(gòu)，和前面所講的HTML5的基本結(jié)構(gòu)略有差異。VSCode創(chuàng)建的HTML5結(jié)構(gòu)多出了第5行和第6行代碼。其中第5行代碼用于設(shè)置瀏覽器對(duì)網(wǎng)頁(yè)的兼容模式。第6行代碼用于適配移動(dòng)端界面。在制作PC端網(wǎng)頁(yè)時(shí)，默認(rèn)設(shè)置即可。1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件在編輯區(qū)域，首先輸入標(biāo)簽的名稱，然后按“Enter”鍵，即可快速創(chuàng)建標(biāo)簽。編寫代碼——快速創(chuàng)建標(biāo)簽例如：輸入“div”，按“Enter”鍵，即可創(chuàng)建一個(gè)<div>標(biāo)簽。1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件如果我們想創(chuàng)建多個(gè)標(biāo)簽，可以采用“標(biāo)簽名*數(shù)量”的方式。例如，創(chuàng)建4個(gè)<div>標(biāo)簽，可以直接輸入“div*4”，然后按“Enter”鍵。使用這個(gè)方法可以一次創(chuàng)建多個(gè)標(biāo)簽。如果標(biāo)簽是嵌套關(guān)系，可以通過“>”建立嵌套關(guān)系。例如，輸入“ul>li*4”，即可創(chuàng)建一個(gè)嵌套4個(gè)<li>子標(biāo)簽的<ul>標(biāo)簽。編寫代碼——快速創(chuàng)建標(biāo)簽注意：使用VSCode編寫代碼時(shí)，縮進(jìn)代碼需要使用“Tab”鍵，取消縮進(jìn)使用“Shift+Tab”快捷鍵，不建議使用空格鍵縮進(jìn)代碼。1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件在編輯區(qū)域，我們按“Ctrl+/”快捷鍵可以在選中的位置快速創(chuàng)建注釋；再次按“Ctrl+/”快捷鍵，可以取消當(dāng)前的注釋。編寫代碼——快速創(chuàng)建注釋1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件選擇擴(kuò)展按鈕在搜索欄中輸入“l(fā)iveserve”，單擊“安裝”按鈕，進(jìn)行安裝。編寫代碼——快速預(yù)覽文件步驟一1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件在文件的代碼編輯區(qū)域，右擊鼠標(biāo)，在彈出的菜單中，選擇線框標(biāo)示的選項(xiàng)。編寫代碼——快速預(yù)覽文件步驟二階段案例——第一個(gè)HTML5頁(yè)面1.51.5階段案例——第一個(gè)HTML5頁(yè)面為了使讀者能夠更好地認(rèn)識(shí)HTML5，并掌握HTML5代碼編輯工具的用法。本節(jié)將通過案例的形式，分步驟帶領(lǐng)大家制作一個(gè)HTML5頁(yè)面。1.5階段案例——第一個(gè)HTML5頁(yè)面1.5.1案例分析本案例重點(diǎn)是讓初學(xué)者掌握VSCode的用法，能夠使用VSCode創(chuàng)建HTML5代碼，并在瀏覽器中預(yù)覽。我們可以按照以下思路完成該案例。在VSCode中創(chuàng)建HTML5基本結(jié)構(gòu)。在<tittle>標(biāo)簽中輸入“HTML5頁(yè)面”。在<body>標(biāo)簽中添加代碼“<p>我是HTML5頁(yè)面</p>”。使用瀏覽器預(yù)覽網(wǎng)頁(yè)效果。1.5階段案例——第一個(gè)HTML5頁(yè)面1.5.2制作頁(yè)面本章小結(jié)本章首先介紹了網(wǎng)頁(yè)的相關(guān)知識(shí)，包括網(wǎng)頁(yè)構(gòu)成、網(wǎng)頁(yè)相關(guān)名詞等，然后介紹了HTML5相關(guān)知識(shí)，包括HTML5的演變、HTML5的優(yōu)勢(shì)、HTML5的基本結(jié)構(gòu)、HTML5的語(yǔ)法變化、HTML5標(biāo)簽、HTML5代碼編輯工具等內(nèi)容。最后通過階段案例帶領(lǐng)大家制作了第一個(gè)HTML5頁(yè)面。通過本章的學(xué)習(xí)，讀者應(yīng)該能夠簡(jiǎn)單地認(rèn)識(shí)網(wǎng)頁(yè)，了解HTML5語(yǔ)言，并能夠熟練地使用VSCode創(chuàng)建HTML5頁(yè)面。希望讀者以此為開端，完成本書的學(xué)習(xí)。第2章HTML5標(biāo)簽和屬性《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程（第3版）》學(xué)習(xí)目標(biāo)/Target掌握文本控制標(biāo)簽的用法，能夠使用文本控制標(biāo)簽設(shè)置文本樣式。掌握?qǐng)D像標(biāo)簽的用法，能夠使用圖像標(biāo)簽在網(wǎng)頁(yè)中嵌入圖片。掌握超鏈接標(biāo)簽的用法，能夠使用超鏈接實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。掌握列表標(biāo)簽的用法，能夠使用列表標(biāo)簽設(shè)置導(dǎo)航選項(xiàng)。學(xué)習(xí)目標(biāo)/Target熟悉結(jié)構(gòu)標(biāo)簽的用法，能夠使用結(jié)構(gòu)標(biāo)簽搭建網(wǎng)頁(yè)結(jié)構(gòu)。熟悉頁(yè)面交互標(biāo)簽的用法，能夠使用頁(yè)面交互標(biāo)簽設(shè)置頁(yè)面展示信息。熟悉全局屬性的用法，能夠使用全局屬性設(shè)置網(wǎng)頁(yè)效果。章節(jié)概述/SummaryHTML5中既包含了大部分原有的標(biāo)簽和屬性，也增加了一些新的標(biāo)簽和屬性。這些標(biāo)簽使網(wǎng)頁(yè)結(jié)構(gòu)更加清晰明確，這些屬性使標(biāo)簽的功能更加強(qiáng)大。掌握這些標(biāo)簽和屬性是熟練使用HTML5構(gòu)建網(wǎng)頁(yè)的基礎(chǔ)。本章將詳細(xì)講解HTML5的各類標(biāo)簽和屬性。目錄/Contents2.1文本控制標(biāo)簽2.2圖像標(biāo)簽2.3列表標(biāo)簽2.4超鏈接標(biāo)簽?zāi)夸?Contents2.5結(jié)構(gòu)標(biāo)簽2.6頁(yè)面交互標(biāo)簽2.7全局屬性2.8階段案例——影片介紹網(wǎng)頁(yè)文本控制標(biāo)簽2.1無論網(wǎng)頁(yè)內(nèi)容如何豐富，文字自始至終都是網(wǎng)頁(yè)中最基本的元素。為了使文字排版整齊、結(jié)構(gòu)清晰，HTML中提供了一系列文本控制標(biāo)簽。例如，頁(yè)面格式化標(biāo)簽、文本格式化標(biāo)簽等。本節(jié)將詳細(xì)講解HTML中的文本控制標(biāo)簽。2.1文本控制標(biāo)簽一篇結(jié)構(gòu)清晰的文章通常都會(huì)通過標(biāo)題、段落、分割線等對(duì)文章進(jìn)行結(jié)構(gòu)排列。2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽網(wǎng)頁(yè)也不例外。為了使網(wǎng)頁(yè)中的文字有條理地顯示出來，HTML提供了相應(yīng)的頁(yè)面格式化標(biāo)簽，如標(biāo)題標(biāo)簽、段落標(biāo)簽、水平線標(biāo)簽、換行標(biāo)簽。2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽標(biāo)題標(biāo)簽段落標(biāo)簽水平線標(biāo)簽換行標(biāo)簽掌握標(biāo)題標(biāo)簽的用法，能夠?qū)懗鰳?biāo)題標(biāo)簽的基本語(yǔ)法格式。學(xué)習(xí)目標(biāo)2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽標(biāo)題標(biāo)簽2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽h1h2h3h4h5h6標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽用于將文本設(shè)置為標(biāo)題，HTML提供了6個(gè)等級(jí)的標(biāo)題標(biāo)簽，即<h1>~<h6>，從<h1>~<h6>標(biāo)題標(biāo)簽的重要性依次遞減。標(biāo)題標(biāo)簽2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽標(biāo)題標(biāo)簽的基本語(yǔ)法格式標(biāo)題標(biāo)簽<hnalign="對(duì)齊方式">標(biāo)題文本</hn>可選屬性，用于指定標(biāo)題的對(duì)齊方式。left

：設(shè)置標(biāo)題文字左對(duì)齊（默認(rèn)值）center：設(shè)置標(biāo)題文字居中對(duì)齊right：設(shè)置標(biāo)題文字右對(duì)齊align屬性值2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽標(biāo)題標(biāo)簽案例演示2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽標(biāo)題標(biāo)簽注意：1.一個(gè)頁(yè)面中最好只使用一個(gè)<h1>標(biāo)簽，該標(biāo)簽通常被用在網(wǎng)站的Logo部分。2.由于標(biāo)題標(biāo)簽擁有特殊的語(yǔ)義。初學(xué)者切勿為了設(shè)置文字加粗或更改文字的大小而使用標(biāo)題標(biāo)簽。3.HTML中一般不建議使用標(biāo)題標(biāo)簽的align屬性設(shè)置對(duì)齊方式，可使用CSS樣式設(shè)置。掌握段落標(biāo)簽的用法，能夠?qū)懗龆温錁?biāo)簽的基本語(yǔ)法格式。學(xué)習(xí)目標(biāo)2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽段落標(biāo)簽2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽段落標(biāo)簽在網(wǎng)頁(yè)中，可以使用<p>標(biāo)簽來定義段落。<p>標(biāo)簽是HTML文檔中常用的標(biāo)簽，默認(rèn)情況下，一個(gè)段落中的文本會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。<palign=“對(duì)齊方式”>段落文本</p>段落標(biāo)簽的基本語(yǔ)法格式2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽段落標(biāo)簽段落示例掌握水平線標(biāo)簽的用法，能夠?qū)懗鏊骄€標(biāo)簽的基本語(yǔ)法格式。學(xué)習(xí)目標(biāo)2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽水平線標(biāo)簽2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽水平線標(biāo)簽水平線可以通過<hr/>標(biāo)簽來定義。<hr屬性="屬性值"/>水平線標(biāo)簽的基本語(yǔ)法格式2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽水平線標(biāo)簽屬性名含義屬性值align設(shè)置水平線的對(duì)齊方式可選擇left、right、center三種值，默認(rèn)為center，居中對(duì)齊顯示size設(shè)置水平線的粗細(xì)以像素為單位，默認(rèn)為2像素color設(shè)置水平線的顏色可用顏色名稱、十六進(jìn)制#RGB、rgb(r,g,b)width設(shè)置水平線的寬度可以是確定的像素值，也可以是瀏覽器窗口的百分比，默認(rèn)為100%<hr/>標(biāo)簽的常用屬性2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽水平線標(biāo)簽水平線示例掌握換行標(biāo)簽的用法，能夠?qū)懗鰮Q行標(biāo)簽的基本語(yǔ)法格式。學(xué)習(xí)目標(biāo)2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽換行標(biāo)簽2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽換行標(biāo)簽如果想要將某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽<br/>。2.1.1頁(yè)面格式化標(biāo)簽2.1文本控制標(biāo)簽換行標(biāo)簽注意：<br/>標(biāo)簽雖然可以實(shí)現(xiàn)換行的效果，但并不能取代結(jié)構(gòu)標(biāo)簽<h>、<p>等。掌握文本格式化標(biāo)簽的用法，能夠?yàn)槲淖衷O(shè)置特殊顯示的文本效果。學(xué)習(xí)目標(biāo)2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽文本格式化標(biāo)簽用于為文字設(shè)置粗體、斜體或下劃線等一些特殊顯示的文本效果2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽常用的文本格式化標(biāo)簽及文本顯示效果標(biāo)簽顯示效果<b>標(biāo)簽和<strong>標(biāo)簽文本以粗體方式顯示<u>標(biāo)簽和<ins>標(biāo)簽文本以添加下劃線方式顯示<i>標(biāo)簽和<em>標(biāo)簽文本以斜體方式顯示<s>標(biāo)簽和<del>標(biāo)簽文本以添加刪除線方式顯示<cite>標(biāo)簽文本以斜體方式顯示，用于標(biāo)注引用的參考文獻(xiàn)<time>標(biāo)簽文本正常顯示，用于標(biāo)注時(shí)間和日期<mark>標(biāo)簽文本以添加底色方式顯示2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽VS<b>標(biāo)簽<b>標(biāo)簽是物理標(biāo)簽只用于設(shè)置顯示樣式<strong>標(biāo)簽<strong>標(biāo)簽是邏輯標(biāo)簽可以設(shè)置顯示樣式可以將標(biāo)簽語(yǔ)義化（強(qiáng)調(diào)重要性）推薦使用<strong>標(biāo)簽1.<b>標(biāo)簽和<strong>標(biāo)簽2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽VS<u>標(biāo)簽<u>標(biāo)簽是物理標(biāo)簽只設(shè)置下劃線顯示樣式<ins>標(biāo)簽<ins>標(biāo)簽是邏輯標(biāo)簽設(shè)置下劃線顯示樣式可以將標(biāo)簽語(yǔ)義化推薦使用<ins>標(biāo)簽2.<u>標(biāo)簽和<ins>標(biāo)簽2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽VS<i>標(biāo)簽<i>標(biāo)簽是物理標(biāo)簽<em>標(biāo)簽<em>標(biāo)簽是邏輯標(biāo)簽推薦使用<em>標(biāo)簽3.<i>標(biāo)簽和<em>標(biāo)簽2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽VS<s>標(biāo)簽<s>標(biāo)簽是物理標(biāo)簽<del>標(biāo)簽<del>標(biāo)簽是邏輯標(biāo)簽推薦使用<del>標(biāo)簽4.<s>標(biāo)簽和<del>標(biāo)簽2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽案例演示<b>標(biāo)簽和<strong>標(biāo)簽<u>標(biāo)簽和<ins>標(biāo)簽<i>標(biāo)簽和<em>標(biāo)簽<s>標(biāo)簽和<del>標(biāo)簽2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽<cite>標(biāo)簽是一個(gè)邏輯標(biāo)簽，該標(biāo)簽嵌套的文本是對(duì)某個(gè)參考文獻(xiàn)的引用。例如，書籍或者雜志中的內(nèi)容。5.<cite>標(biāo)簽2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽<cite>標(biāo)簽中的文本會(huì)以斜體樣式顯示在頁(yè)面中。與<i>標(biāo)簽、<em>標(biāo)簽嵌套的文本顯示樣式相同，它們的差異在于語(yǔ)義不同，<cite>標(biāo)簽著重強(qiáng)調(diào)引用內(nèi)容。5.<cite>標(biāo)簽2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽<time>標(biāo)簽是一個(gè)邏輯標(biāo)簽，用于標(biāo)注時(shí)間（24小時(shí)制）或日期。被<time>標(biāo)簽標(biāo)注的時(shí)間或日期不會(huì)在瀏覽器中呈現(xiàn)任何特殊效果，但是能夠以機(jī)器可讀的方式進(jìn)行編碼。<time>標(biāo)簽的兩個(gè)屬性datetime用于定義相應(yīng)的時(shí)間或日期。其屬性值必須為一個(gè)有效的時(shí)間或日期格式，不會(huì)顯示給用戶。pubdate用于設(shè)置文檔的發(fā)布日期或時(shí)間。取值為“pubdate”，可以省略屬性值。6.<time>標(biāo)簽2.1.2文本格式化標(biāo)簽2.1文本控制標(biāo)簽<mark>標(biāo)簽是一個(gè)邏輯標(biāo)簽，用于高亮顯示文本。7.<mark>標(biāo)簽掌握文本樣式標(biāo)簽的用法，能夠?yàn)槲淖衷O(shè)置效果，例如，字體、字號(hào)、顏色等。學(xué)習(xí)目標(biāo)2.1.3文本樣式標(biāo)簽2.1文本控制標(biāo)簽2.1.3文本樣式標(biāo)簽2.1文本控制標(biāo)簽文本樣式標(biāo)簽可以設(shè)置一些文字效果，例如，字體、字號(hào)、文字顏色，讓網(wǎng)頁(yè)中的文字樣式變得更加豐富。<font屬性="屬性值">文本內(nèi)容</font>文本樣式標(biāo)簽的基本語(yǔ)法格式face：設(shè)置字體，例如，微軟雅黑、黑體、宋體等。size：設(shè)置字號(hào)，可以取1到7之間的整數(shù)值，無需添加單位。color：設(shè)置文字顏色，顏色值可以為英文單詞、十六進(jìn)制顏色值等。常用屬性2.1.3文本樣式標(biāo)簽2.1文本控制標(biāo)簽案例演示在實(shí)際應(yīng)用中，通常會(huì)使用CSS樣式替代<font>標(biāo)簽。掌握特殊字符的用法，能夠?yàn)榫W(wǎng)頁(yè)添加特殊字符，例如，空格、大于號(hào)、小于號(hào)等。學(xué)習(xí)目標(biāo)2.1.4特殊字符2.1文本控制標(biāo)簽2.1.4特殊字符2.1文本控制標(biāo)簽特殊字符描述字符的代碼

空格符

<小于號(hào)<>大于號(hào)>&和號(hào)&￥人民幣¥?版權(quán)©常用特殊字符對(duì)應(yīng)代碼-12.1.4特殊字符2.1文本控制標(biāo)簽特殊字符描述字符的代碼?注冊(cè)商標(biāo)®°度數(shù)符號(hào)°±正負(fù)號(hào)±×乘號(hào)×÷除號(hào)÷2平方2（上標(biāo)2）²3立方3（上標(biāo)3）³常用特殊字符對(duì)應(yīng)代碼-2圖像標(biāo)簽2.2在網(wǎng)頁(yè)中巧妙地使用圖像可以讓網(wǎng)頁(yè)豐富多彩。本節(jié)將通過常用圖像格式、圖像標(biāo)簽、相對(duì)路徑和絕對(duì)路徑3個(gè)知識(shí)點(diǎn)，詳細(xì)講解HTML5中圖像的應(yīng)用方法。2.2圖像標(biāo)簽熟悉常用的圖像格式，能夠說出不同圖像格式的特點(diǎn)。學(xué)習(xí)目標(biāo)2.2.1常用圖像格式2.2圖像標(biāo)簽2.2.1常用圖像格式2.2圖像標(biāo)簽GIFPNGJPEGGIF格式最突出的特點(diǎn)是支持動(dòng)畫，它是一種無損壓縮的圖像格式，即修改圖像之后GIF格式的圖像質(zhì)量沒有損失。而且GIF格式支持透明，很適合在互聯(lián)網(wǎng)上使用。但GIF格式只能處理256種顏色。因此在網(wǎng)頁(yè)制作中，GIF格式常常用于Logo、小圖標(biāo)和其他色彩相對(duì)單一的圖像。2.2.1常用圖像格式2.2圖像標(biāo)簽GIFPNGJPEGPNG格式包括PNG-8格式和真色彩PNG格式（包括PNG-24格式和PNG-32格式）。相對(duì)于GIF格式，PNG格式最大的優(yōu)勢(shì)是體積更小，支持Alpha透明（全透明、半透明），并且顏色過渡更平滑，但PNG格式不支持動(dòng)畫。其中，PNG-8格式與GIF格式類似，只能支持256種顏色，如果用作靜態(tài)圖可以取代GIF格式；真色彩PNG格式可以支持更多的顏色，同時(shí)真色彩PNG格式（特指PNG-32格式）支持半透明圖像效果。2.2.1常用圖像格式2.2圖像標(biāo)簽GIFPNGJPEGJPEG格式是一種有損壓縮的圖像格式，該格式的圖像稍小，但每修改一次圖像都會(huì)造成一些圖像數(shù)據(jù)的丟失。JPEG格式是專為照片設(shè)計(jì)的圖像格式，網(wǎng)頁(yè)中類似于照片的圖像（如橫幅廣告、商品圖像、較大的插圖等）都可以保存為JPEG格式。掌握定義圖像的方法，能夠?qū)懗龆x圖像的語(yǔ)法格式。學(xué)習(xí)目標(biāo)2.2.2圖像標(biāo)簽及其屬性2.2圖像標(biāo)簽2.2圖像標(biāo)簽要想在網(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)簽。在HTML中使用<img/>標(biāo)簽來定義圖像<imgsrc="圖像URL"/>定義圖像的基本語(yǔ)法格式src屬性用于指定圖像的路徑，它是<img/>標(biāo)簽的必需屬性。2.2.2圖像標(biāo)簽及其屬性2.2.2圖像標(biāo)簽及其屬性2.2圖像標(biāo)簽<img/>標(biāo)簽的其他的屬性-1屬性屬性值描述alt文本圖像不能顯示時(shí)的替換文本。title文本鼠標(biāo)指針懸停時(shí)顯示的內(nèi)容。width像素值設(shè)置圖像的寬度。height像素值設(shè)置圖像的高度。border數(shù)字設(shè)置圖像邊框的寬度。vspace像素值設(shè)置圖像頂部和底部的空白（垂直邊距）。2.2.2圖像標(biāo)簽及其屬性2.2圖像標(biāo)簽<img/>標(biāo)簽的其他的屬性-2屬性屬性值描述hspace像素值設(shè)置圖像左側(cè)和右側(cè)的空白（水平邊距）。alignleft將圖像對(duì)齊到左邊。right將圖像對(duì)齊到右邊。top將圖像的頂端和文本的第一行文字對(duì)齊，其他文字居圖像下方。middle將圖像的水平中線和文本的第一行文字對(duì)齊，其他文字居圖像下方。bottom將圖像的底部和文本的第一行文字對(duì)齊，其他文字居圖像下方。2.2.2圖像標(biāo)簽及其屬性2.2圖像標(biāo)簽alt圖像的替換文本屬性，在圖像無法顯示時(shí)告訴用戶該圖片的內(nèi)容。案例演示2.2.2圖像標(biāo)簽及其屬性2.2圖像標(biāo)簽title設(shè)置鼠標(biāo)指針懸停時(shí)，圖像的提示文字案例演示2.2.2圖像標(biāo)簽及其屬性2.2圖像標(biāo)簽width和height用于自定義圖像的寬度和高度，通常只設(shè)置一個(gè)屬性，另一個(gè)會(huì)依據(jù)已設(shè)置的屬性而變化，以等比例顯示原圖。2.2.2圖像標(biāo)簽及其屬性2.2圖像標(biāo)簽border可以為圖像添加邊框，并且可以設(shè)置邊框的寬度；使用HTML的border屬性無法更改邊框顏色。border屬性的取值無需添加單位。案例演示2.2.2圖像標(biāo)簽及其屬性2.2圖像標(biāo)簽在HTML4.01之前，可以通過vspace屬性和hspace屬性分別調(diào)整圖像的垂直邊距和水平邊距。Vspace和hspace2.2.2圖像標(biāo)簽及其屬性2.2圖像標(biāo)簽align使用align屬性實(shí)現(xiàn)圖像和文字環(huán)繞效果案例演示注意：1.實(shí)際制作網(wǎng)頁(yè)時(shí)，HTML5并不支持<img/>標(biāo)簽中使用border、vspace、hspace和align屬性，這四個(gè)屬性在HTML4.01已廢棄，可用CSS樣式替代。2.網(wǎng)頁(yè)制作中，裝飾性的圖像不建議直接插入<img/>標(biāo)簽，最好通過CSS設(shè)置背景圖像的方式來實(shí)現(xiàn)。2.2.2圖像標(biāo)簽及其屬性2.2圖像標(biāo)簽熟悉絕對(duì)路徑和相對(duì)路徑，能夠說出不推薦使用絕對(duì)路徑的原因。學(xué)習(xí)目標(biāo)2.2.3絕對(duì)路徑和相對(duì)路徑2.2圖像標(biāo)簽2.2.3絕對(duì)路徑和相對(duì)路徑2.2圖像標(biāo)簽什么是路徑？2.2.3絕對(duì)路徑和相對(duì)路徑2.2圖像標(biāo)簽路徑在使用計(jì)算機(jī)查找需要的文件時(shí)，需要知道文件的位置，而表示文件位置的方式就是路徑。2.2.3絕對(duì)路徑和相對(duì)路徑2.2圖像標(biāo)簽相對(duì)路徑絕對(duì)路徑相對(duì)路徑不帶有盤符，通常是以HTML網(wǎng)頁(yè)文件為起點(diǎn)，通過