《HTML5+CSS3網站設計基礎教程（第3版）》ppt第1章 HTML5入門-1

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

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

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

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

快速預覽文件1.4.2VisualStudioCode的使用1.4HTML5代碼編輯工具保存和操作文件打開HTML類型的文件，首先在第一行代碼編輯區(qū)