第1章緒論主講人：XX老師目錄1.1Web原理基礎1.2Web前端技術基礎1.3Web前端新技術1.4Web開發(fā)工具1.5Web技術的前景與展望1.1Web原理基礎1.1.1Internet與萬維網(wǎng)1.1.2Web架構1.1.3Web應用1.1.1Internet與萬維網(wǎng)1Internet2萬維網(wǎng)1.1.1Internet與萬維網(wǎng)Internet中文名稱叫做“因特網(wǎng)”，也被人們稱為“國際互聯(lián)網(wǎng)”。它是由成千上萬臺計算機設備互相連接，基于TCP/IP協(xié)議進行通信從而形成的全球網(wǎng)絡。Internet最早是在1969年由美國國防部建立的ARPANET網(wǎng)絡的基礎上演變而來的。目前，Internet已正式連接86個國家和地區(qū)，接入了6萬多個網(wǎng)絡。1.1.1Internet與萬維網(wǎng)通過Internet，用戶可以獲得以下服務：WWW瀏覽服務電子郵件服務（E-mail）文件傳輸服務（FTP）遠程登陸服務（Telnet）1.1.1Internet與萬維網(wǎng)萬維網(wǎng)（WWW，WorldWideWeb）是Internet上最重要的服務之一，也常被簡稱為“W3”或“Web”。萬維網(wǎng)主要使用超文本傳輸協(xié)議（HTTP，HypertextTransferProtocol）將互聯(lián)網(wǎng)上的資源結合在了一起，并在瀏覽器中以Web頁面的方式呈現(xiàn)給用戶。每一個網(wǎng)絡資源都有一個唯一的統(tǒng)一資源標識符（URI，UniformResourceIdentifier），因此在Web頁面中可以以超文本鏈接的形式相互引用，從而把不同的頁面關聯(lián)在一起。在使用PC、手機等設備上網(wǎng)瀏覽的網(wǎng)站都屬于WWW提供的服務。它與Internet并不是同一個概念，Internet上除了萬維網(wǎng)還有其他服務，比如電子郵件服務、文件傳輸服務等。1.1.2Web架構Web服務器Web瀏覽器Web應用1.1.2Web架構Web架構是由Web服務器與Web瀏覽器兩部分組成的，也可以稱為是瀏覽器/服務器（B/S，Browser/Server）架構，如圖所示。1.1.2Web架構Web服務器Web服務器是在實體機或虛擬機服務器設備中安裝的服務器軟件，在聯(lián)網(wǎng)環(huán)境中可以接收用戶在Web瀏覽器中輸入的URL（UniformResourceLocator，統(tǒng)一資源定位符）地址，然后將該地址對應的文本、圖片等內容發(fā)送給用戶并顯示在用戶使用的Web瀏覽器中。Web服務器通常用于放置網(wǎng)頁文件和數(shù)據(jù)供用戶訪問和下載。常用的Web服務器有Apache、IIS、Nginx等。1.1.2Web架構Web瀏覽器Web瀏覽器是安裝在客戶端（PC端或移動設備）的軟件，用于訪問和顯示W(wǎng)eb資源。用戶打開Web瀏覽器后輸入正確的URL地址就可以訪問網(wǎng)絡上的資源，Web資源一般會以HTML文件（后綴名為.html或.htm的文件）的形式發(fā)送給瀏覽器。瀏覽器可以解析和運行接收到的HTML文件，使其在瀏覽器中呈現(xiàn)帶有文字、圖像、超鏈接等豐富內容并且具有排版布局效果的畫面，即Web頁面。1.1.2Web架構Web瀏覽器目前常用的瀏覽器有Edge、Chrome、Firefox、Safari、Opera等，其圖標樣式如圖所示。1.1.2Web架構Web應用Web應用不需要安裝，其程序資源都部署在Web服務器中。用戶通過在Web瀏覽器中輸入不同的URL地址就可以遠程訪問Web應用。所有的Web應用都可以理解為存放在Web服務器端，并且可以在瀏覽器中呈現(xiàn)的軟件。這些軟件在瀏覽器中以Web頁面的形式存在，包括文字、圖片、音頻、視頻等內容，這些圖形用戶界面（GraphicUserInterface，GUI）也稱為Web前端。Web應用需要調整更新時，只需要更新服務器端存放的相關內容即可，用戶通過瀏覽器可以直接訪問到最新的內容，免去了客戶端與服務器端同時需要更新的麻煩。1.2Web前端技術基礎1.2.1HTML技術1.2.2CSS技術1.2.3JavaScript技術1.2.1HTML技術1HTML簡介2HTML起源3HTML特點1.2.1HTML技術HTML簡介HTML來源于HypertextMarkupLanguage（超文本標記語言）的首字母縮寫，是用于架構和呈現(xiàn)網(wǎng)頁的一種標記語言，也是萬維網(wǎng)（WorldWideWeb）上應用最廣泛的核心語言。它使用標簽的形式將網(wǎng)頁內容劃分結構層次。HTML還使用超文本鏈接（簡稱“超鏈接”）將網(wǎng)絡上不同的Web資源進行關聯(lián)，任何頁面上的文字或圖片都可以被指定為超鏈接，點擊后可以跳轉到相關聯(lián)的其他Web資源頁面。目前HTML標準由W3C組織（注：其全稱為WorldWideWebConsortium，是萬維網(wǎng)最居權威和影響力的國際技術標準機構）進行維護。1.2.1HTML技術HTML起源（一）HTML最早是在1991年由TimBerners-Lee以“HTML標簽集”的形式公開發(fā)布的，包含了18個最早的元素標簽。1993年由國際互聯(lián)網(wǎng)工程任務組（IETF，TheInternetEngineeringTaskForce）正式發(fā)布了第一份HTML規(guī)范標準草案——“HypertextMarkupLanguage（HTML）InternetDraft”。由于當時HTML有很多不同的標準規(guī)范，因此HTML并沒有正式的第一版。1.2.1HTML技術HTML起源（二）在1994年，IETF設立了HTML工作組來專門負責HTML技術的標準制定工作。1995年，第一個關于HTML的正式規(guī)范標準HTML2.0被提出，這也是未來所有HTML技術的基礎。從1996年開始，HTML標準正式由W3C組織進行維護，同年IETF關閉了HTML工作組。1.2.1HTML技術HTML起源（三）1997年初HTML3.2版作為W3C推薦標準正式發(fā)布，這也是由W3C組織正式發(fā)布的第一版HTML標準規(guī)范，同年7月已經正式發(fā)布HTML4.0版。1999年12月W3C組織發(fā)布了HTML4.01版，對之前的HTML4.0版進行了一些修正，這也是目前使用年限最長的一個版本。在2000年，HTML基于4.01版的嚴謹語法規(guī)則成為了國際標準（ISO/IEC15445:2000）。1.2.1HTML技術HTML的特點簡易性通用性平臺無關性1.2.2CSS技術1CSS簡介2CSS起源3CSS特點1.2.2CSS技術CSS簡介CSS全稱為CascadingStyleSheets（層疊樣式表），用于為網(wǎng)頁文檔中的元素添加各類樣式，如字體大小、背景顏色、對齊方式等，起到了網(wǎng)頁文檔美化作用。層疊樣式表的工作原理是將樣式規(guī)則存放在樣式表中，網(wǎng)頁文檔通過對樣式表的引用可為目標區(qū)域的元素添加樣式。目前所有主流瀏覽器均支持層疊樣式表。目前CSS標準由W3C組織進行維護。1.2.2CSS技術CSS起源（一）最早的CSS1（CascadingStyleSheets,level1）規(guī)范是在1996年12月由W3C組織正式推出，HakonWiumLie與BertBos為聯(lián)合創(chuàng)始人。該版本主要包含了字體樣式，顏色與背景樣式，元素對齊方式，邊框、內外邊距和位置樣式等屬性設置。1.2.2CSS技術CSS起源（二）CSS2（CascadingStyleSheets,level2）規(guī)范在1998年5月正式發(fā)布。在CSS1的基礎上，CSS2新增了元素的定位屬性、新的字體屬性例如陰影效果等。這一版本隨后經歷了漫長的修改過程，直至2011年6月才正式發(fā)布了CSS2.1版。目前CSS技術所保留的大部分功能都是基于CSS2發(fā)展而來的。1.2.2CSS技術CSS的特點內容與表現(xiàn)分離易于應用與維護提高瀏覽器加載速度1.2.3JavaScript技術JavaScript簡介JavaScript是一種輕量級的直譯式編程語言，基于ECMAScript標準（注:一種由ECMA國際組織通過ECMA-262標準化的腳本程序語言）。通常在HTML網(wǎng)頁中使用JavaScript為頁面增加動態(tài)效果和功能。JavaScript和HTML、CSS一起被稱為是Web開發(fā)的三大核心技術，目前JavaScript已經廣泛應用于Web開發(fā)，市面上絕大多數(shù)網(wǎng)頁都使用了JavaScript代碼。可以說當今所有瀏覽器都支持JavaScript，無需額外安裝第三方插件。1.2.3JavaScript技術JavaScript起源JavaScript最早是在1995年的時候由網(wǎng)景（Netscape）公司的BrendanEich用了十天時間開發(fā)出來的，用于當時的網(wǎng)景導航者（NetscapeNavigator）瀏覽器2.0版。最初這種腳本語言的官方名稱為LiveScript，后來應用于網(wǎng)景導航者瀏覽器2.0B3版的時候正式更名為JavaScript。1.2.3JavaScript技術JavaScriptvsJava因為名稱的相近，JavaScript常被誤以為和Java有關，但事實上它們是無論從概念還是設計上都毫無關聯(lián)的兩種語言。JavaScript是Netscape公司的BrendanEich發(fā)明的一種輕量級語言，主要應用于網(wǎng)頁開發(fā)，無需事先編譯；而Java是由Sun公司的JamesGosling發(fā)明的一種面向對象程序語言，根據(jù)應用方向又可分為J2SE（Java2標準版）、J2ME（Java2微型版）和J2EE（Java2企業(yè)版）三個版本，需要先編譯再執(zhí)行。JavaScript的主旨是為非程序開發(fā)者快速上手使用的，而Java是更高級更復雜的一種面向專業(yè)程序開發(fā)者的語言，比JavaScript難度大、應用范圍更廣。1.2.3JavaScript技術JavaScript的特點腳本語言簡單性弱類型跨平臺大小寫敏感1.3Web前端新技術1.3.1HTML5技術1.3.2CSS3技術1.3.3jQuery技術1.3.1HTML5技術HTML5簡介HTML5發(fā)展史HTML5特點1.3.1HTML5技術HTML5簡介HTML5指的是HTML語言的第五次修改版，也是目前HTML語言的最新版。HTML5標準規(guī)范是2014年10月由W3C組織正式發(fā)布，該標準規(guī)范中新增了對于多媒體技術的支持，為PC端和移動平臺帶來無縫銜接的豐富內容。1.3.1HTML5技術HTML5簡介HTML5的正式logo是在2011年4月被最終確定的，如圖1-3所示。在對該logo進行定義的過程中，W3C組織稱HTML5是“現(xiàn)代Web應用的奠基石”。1.3.1HTML5技術2.HTML5發(fā)展史HTML5經歷了相當曲折的發(fā)展歷史。最初在2004年6月，Mozilla和Opera公司向W3C組織呈遞了一份提案，要求致力于提高當今主流瀏覽器的兼容性并制定新的Web標準。由于當時的最終結果為反對意見，因此該提案沒有被列入議程。不久之后支持者另行成立了網(wǎng)頁超文本應用技術工作組（WHATWG，WebHypertextApplicationTechnologyWorkingGroup），基于之前的提案草稿發(fā)布了WebApplication1.0標準規(guī)范。這兩份標準規(guī)范后來合并形成了HTML5，并于2007年由W3C組織下新成立的HTML工作組接納。1.3.1HTML5技術2.HTML5發(fā)展史2008年1月，WHATWG組織正式發(fā)布了該標準的第一份草案，當時大部分主流瀏覽器已經開始逐步對HTML5某些功能實現(xiàn)了支持。到2012年6月，WHATWG與W3C組織正式達成協(xié)議不再繼續(xù)合作。W3C組織將繼續(xù)完善HTML5標準規(guī)范，而WHATWG組織將取消HTML的版本號，將HTML5作為一個動態(tài)標準不斷添加新的內容，沒有最終版這一概念。2014年10月28日，經歷了數(shù)百次修改的HTML5終于形成了W3C標準版。1.3.1HTML5技術2.HTML5發(fā)展史2008年1月，WHATWG組織正式發(fā)布了該標準的第一份草案，當時大部分主流瀏覽器已經開始逐步對HTML5某些功能實現(xiàn)了支持。到2012年6月，WHATWG與W3C組織正式達成協(xié)議不再繼續(xù)合作。W3C組織將繼續(xù)完善HTML5標準規(guī)范，而WHATWG組織將取消HTML的版本號，將HTML5作為一個動態(tài)標準不斷添加新的內容，沒有最終版這一概念。2014年10月28日，經歷了數(shù)百次修改的HTML5終于形成了W3C標準版。1.3.1HTML5技術3.HTML5的特點元素標簽的改進新增API錯誤處理機制1.3.2CSS3技術CSS3簡介CSS3發(fā)展史CSS3特點1.3.2CSS3技術CSS3簡介CSS3（CascadingStyleSheets,level3）是CSS的第三版，也是目前CSS的最新標準。CSS3語言的特點是模塊化，其中各個模塊都新增了新的功能，或者在CSS2的基礎上對功能進行了擴展。其中新增了對于網(wǎng)頁上各類元素邊框、背景、文本和字體等內容的特效。CSS3還新增了動畫技術，無需使用腳本代碼即可實現(xiàn)網(wǎng)頁元素的動畫效果。1.3.2CSS3技術2.CSS3發(fā)展史最早的CSS3草案是在1999年6月公開發(fā)布的，這意味著CSS3標準規(guī)范的定制工作在上一個版本CSS2正式發(fā)布之前就已列入考慮范圍。由于CSS3具有模塊化的特征，不同的模塊也處于各自的定制進度中。2012年6月，CSS工作組公布了CSS3草案中的50多個模塊內容，其中有4個模塊的規(guī)范標準已經作為正式版發(fā)布。1.3.2CSS3技術3.CSS3的特點完全向后兼容模塊化的新增功能變形與動畫效果1.4Web開發(fā)工具1.4.1AdobeDreamweaver1.4.2SublimeText1.4.3NodePad++1.4.4EditPlus1.4.1AdobeDreamweaverAdobeDreamweaver是一款所見即所得的網(wǎng)頁編輯器，中文名稱為“夢想編織者”或“織夢”。該軟件最初的1.0版是1997年由美國Macromedia公司發(fā)布的，后來該公司于2005年被Adobe公司收購。Dreamweaver也是當時第一套針對專業(yè)Web前端工程師所設計的可視化網(wǎng)頁開發(fā)工具，整合了網(wǎng)頁開發(fā)與網(wǎng)站管理的功能。1.4.1AdobeDreamweaver1.4.2SublimeTextSublimeText的界面布局非常有特色，它支持文件夾導航圖和代碼縮略圖效果。該軟件支持多種編程語言的語法高亮，也具有代碼自動完成提示功能。該軟件還具有自動恢復功能，如果在編程過程中意外退出，在下次啟動該軟件時文件會自動恢復關閉之前的編輯狀態(tài)。1.4.2SublimeText1.4.3NodePad++NodePad++的名稱來源于Windows系列操作系統(tǒng)自帶的記事本NotePad，在此基礎上多了兩個加號，立刻帶了質的飛越。這是一款免費開源的純文本編輯器具有完整中文化接口并支持UTF-8技術。由于它具有語法高亮顯示、代碼折疊等功能，因此也非常適合作為計算機程序的編輯器。1.4.3NodePad++1.4.4 VisualStudioCodeVisualStudioCode常被簡稱為VSCode，是微軟公司出品的一款免費開源的開發(fā)工具，支持Windows、MacOS以及Linux操作系統(tǒng)。該軟件具有語法高亮、代碼自動補全、查看定義等功能，也內置了Git版本控制系統(tǒng)和命令行工具。1.4.4 VisualStudioCode該軟件安裝后可以在其內置的擴展程序商店安裝擴展包來拓展軟件功能，例如Chinese漢化包插件、Beautify代碼格式化插件、AutoRenameTag自動補全HTML/XML頭尾標簽插件等，適合喜歡自己DIY配置工具的開發(fā)者。該軟件支持多種編程語言，例如JavaScript、TypeScript、HTML、CSS，也可以通過下載擴展包來支持Java、Python、Go等其他編程語言。1.4.4VisualStudioCode1.4.5WebStormWebStorm是JetBrains公司旗下的一款JavaScript開發(fā)工具，適合進行Web前端開發(fā)以及與JavaScript相關的程序編寫。該軟件直接支持代碼高亮、代碼折疊、代碼補全以及格式化等功能，無需安裝額外的插件。正常版本是付費軟件，但是該軟件對于教育教學行業(yè)非常友好，學生和教師均可使用學校郵箱去申請免費教育版許可證，該許可證有效期為每次1年，到期時如果用戶還在學校仍可免費續(xù)約。1.4.5WebStorm1.5Web技術的前景與展望1.5.1Flash的興衰1.5.2HTML5的前景1.5.3未來展望1.5.1Flash的興衰在不斷變化、推陳出新的IT領域，F(xiàn)lash能夠崛起并保持20年不敗之地實屬不易。直至蘋果公司的前任CEO喬布斯的一篇發(fā)文，為Flash帶來了巨大的創(chuàng)傷。文中聲明蘋果的iOS和MacOS系統(tǒng)都將不再支持FlashPlayer，這幾乎預示著Flash將在移動市場失去大量用戶群體。這一聲明之后又發(fā)生了一系列后續(xù)事件，這些事件如同多米諾骨牌般的紛涌而至，推動Flash進入產品生命周期的末端。1.5.2HTML5的前景由于具有高度跨平臺自適應的特性，HTML5以移動市場作為主戰(zhàn)場開始逐步回歸技術前沿。如今HTML5這個詞已經不僅僅是它本身的意思了，還代表著以它為首的CSS3、jQuery等一系列新技術的合集。1.5.3未來展望HTML5正在不斷崛起，為用戶帶來了一體化的網(wǎng)絡。在此基礎上新的技術將不斷涌現(xiàn)，Web技術潮流也許將迎來一個全新的時代格局。本章小結本章小結本章在Web原理基礎部分解釋了Internet與萬維網(wǎng)的概念，并且介紹了Web架構是由Web服務器與Web瀏覽器組成。HTML、CSS和JavaScript被稱為是Web開發(fā)的三大核心技術，在此基礎上的HTML5和CSS3可以看作是HTML和CSS的升級優(yōu)化版，也是本書主要介紹的內容。HTML5劃分清晰的網(wǎng)頁文檔層次結構，CSS3對內容進行樣式美化，配合JavaScript進行元素操作和事件處理，能實現(xiàn)更加豐富的網(wǎng)頁效果。Thankyou！第2章HTML5基礎主講人：XX老師本章學習目標理解HTML5文檔的基本結構；理解HTML5中元素標簽的作用；掌握HTML5文檔注釋的用法；掌握HTML5保留的常用標簽的用法；掌握HTML5新增的文檔結構標簽的用法；掌握HTML5新增的格式標簽的用法。目錄2.1HTML5基本結構2.2HTML5保留的常用標簽2.3HTML5新增的常用標簽2.4HTML5新增API

2.1HTML5基本結構2.1.1文檔類型聲明<!DOCTYPE>2.1.2根標簽<html>2.1.3首部標簽<head>2.1.4主體標簽<body>2.1.5HTML5文檔注釋2.1.6HTML5文檔規(guī)范2.1.7HTML4.01轉換為HTML52.1HTML5基本結構HTML5實際上不算是一種編程語言，而是一種標記語言。HTML5文件是由一系列成對出現(xiàn)的元素標簽嵌套組合而成，這些標簽以<元素名>的形式出現(xiàn)，用于標記文本內容的含義。瀏覽器通過元素標簽解析文本內容并將結果顯示在網(wǎng)頁上，而元素標簽本身并不會被瀏覽器顯示出來。2.1HTML5基本結構HTML5文檔的基本結構如下：<!DOCTYPEhtml><html><head><title>網(wǎng)頁標題</title></head><body>

主體內容</body></html>2.1HTML5基本結構HTML5元素的內容一般以起始標簽<元素名>開始，以結束標簽</元素名>終止。例如首部標簽<head>中的<title>標簽用于標記網(wǎng)頁標題，該標簽之間的內容將顯示在瀏覽器窗口的標題欄中。主體標簽<body>中的內容顯示到網(wǎng)頁上。2.1HTML5基本結構修改HTML5文檔基本結構中的文字內容，即可快速生成一個簡單的HTML5頁面。【例2-1】第一個HTML5頁面2.1.1文檔類型聲明<!DOCTYPE>DOCTYPE是DocumentType的簡寫，含義為文檔類型。HTML5文檔基礎結構中第一行<!DOCTYPEhtml>就是HTML5的DOCTYPE聲明。2.1.1文檔類型聲明<!DOCTYPE>網(wǎng)頁實際上有多種瀏覽模式，例如兼容模式，標準模式等。HTML5用<!DOCTYPE>標簽定義文檔該基于何種標準在網(wǎng)頁中呈現(xiàn)。<!DOCTYPEhtml>意味著該網(wǎng)頁的呈現(xiàn)標準是基于HTML5。當使用該DOCTYPE聲明方式時，瀏覽器會將此頁面定義為標準兼容模式。2.1.1文檔類型聲明<!DOCTYPE>HTML4.01的文檔類型聲明較為復雜，常見如下：在HTML5中，該聲明被大幅度化簡：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPEhtml>2.1.1文檔類型聲明<!DOCTYPE>在瀏覽器打開的網(wǎng)頁頁面任意位置右鍵點擊，選擇“查看網(wǎng)頁源代碼”，在頁面頂端第一句就是DOCTYPE聲明。HTML5引入了新的特性和元素，同時也取消了對部分過期元素的支持，因此如果在HTML5的DOCTYPE聲明下使用了HTML的過期元素，網(wǎng)頁可能無法正常顯示預期的效果。2.1.2根標簽<html><html>是HTML5文檔的根元素標簽，除頂部<!DOCTYPEhtml>文檔類型聲明以外，所有的HTML5文檔都是以<html>標簽開始，以</html>標簽結束。在<html>和</html>標簽內包含了兩個重要的元素標簽：<head>首部標簽和<body>主體標簽，分別用于標記文檔的首部和主體部分。2.1.3首部標簽<head>HTML5文檔的首部以<head>標簽開始，以</head>標簽結束。<head>標簽中的內容不會顯示在網(wǎng)頁的頁面中。<head>標簽中可包含<title>和<meta>等標簽，用于聲明頁面標題、字符集和關鍵詞等。2.1.3首部標簽<head>1.網(wǎng)頁標題標簽<title>HTML5文檔使用<title>和</title>標簽標記網(wǎng)頁標題，該標題會顯示在瀏覽器窗口的標題欄中，若省略<title>標簽則網(wǎng)頁標題會顯示為“無標題文檔”。建議在網(wǎng)頁代碼中保留該標簽，因為<title>標簽還能用于當網(wǎng)頁被添加到收藏夾時顯示標題，以及作為頁面標題顯示在搜索引擎結果中。2.1.3首部標簽<head>2.基礎地址標簽<base>

<base>標簽用于為頁面上所有的鏈接設置默認URL地址或目標target。當HTML5文檔中使用了相對路徑時，瀏覽器會用<base>標簽指定的URL進行補全。例如：<head><basehref="http://localhost/images/"/></head>

<body><imgsrc="sunflower.jpg"/></body>此時在第一個圖像標簽<img>中src屬性填寫的是一個相對路徑，由于<base>標簽的作用，該路徑會被瀏覽器自動補全為：<imgsrc="http://localhost/images/sunflower.jpg"/>。如果沒有使用<base>標簽來指定URL地址，則瀏覽器會用當前HTML5文檔的URL對圖片地址進行補全。2.1.3首部標簽<head>2.基礎地址標簽<base>

<base>標簽也可以為該網(wǎng)頁上所有超鏈接統(tǒng)一設置打開方式，例如：<head><basetarget="_blank"/></head>

<body><ahref="">百度</a><ahref="">網(wǎng)易</a></body>在<base>標簽中的屬性target="_blank"指的是該網(wǎng)頁文檔中所有未指定打開方式的超鏈接將在新窗口打開。2.1.3首部標簽<head>3.元數(shù)據(jù)標簽<meta>

<meta>標簽用于提供當前HTML文檔的元數(shù)據(jù)，這些數(shù)據(jù)不會直接顯示在網(wǎng)頁上，但是對于機器是可讀的，適用于搜索引擎索引。通常<meta>標簽可用于定義網(wǎng)頁的字符集、關鍵詞、描述、作者等信息。2.1.3首部標簽<head>3.元數(shù)據(jù)標簽<meta>

(1)字符集聲明Charset是CharacterSet的簡寫，含義為字符集設置。瀏覽器統(tǒng)一默認的字符集是ISO-8859-1西文字符集，如果使用了其他字符集，瀏覽器需知道使用何種字符集才能正確地顯示HTML頁面。HTML5文檔使用<meta>標簽進行字符集聲明。萬維網(wǎng)初期使用的是ACSII字符集，該字符集支持數(shù)字0-9、英文字母大寫A-Z和小寫a-z，以及部分特殊字符。由于很多國家使用的字符不被ACSII支持，因此瀏覽器統(tǒng)一默認的字符集是ISO-8859-1西文字符集。2.1.3首部標簽<head>3.元數(shù)據(jù)標簽<meta>

(1)字符集聲明以UTF-8字符集為例，HTML4.01的字符集聲明如下：在HTML5中，同樣的內容聲明方式會更為簡潔，寫法如下：<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><metacharset="utf-8">這行語句表示當前HTML文檔使用的字符集是UTF-8編碼格式。2.1.3首部標簽<head>3.元數(shù)據(jù)標簽<meta>

(2)關鍵詞聲明使用<meta>標簽定義網(wǎng)頁關鍵詞（keywords）的用法如下：<metaname="keywords"content="HTML5,CSS3,jQuery"/>2.1.3首部標簽<head>3.元數(shù)據(jù)標簽<meta>

(3)頁面描述聲明使用<meta>標簽定義頁面描述（description）的用法如下：：<metaname="description"content="ThisisatutorialaboutHTML5,CSS3,jQuery"/>搜索引擎會根據(jù)<meta>標簽中的name和content屬性來索引網(wǎng)頁。2.1.3首部標簽<head>4.樣式標簽<style>樣式標簽<style>可用于定義文檔中指定區(qū)域的字體風格、背景顏色、對齊方式等各類樣式信息。例如：<head><style>p{color:red}</style></head><body><p>這是一個段落。</p></body>這段代碼可以將HTML5文檔中所有未指定字體顏色的段落顯示為紅色。2.1.3首部標簽<head>5.鏈接標簽<link><link>標簽用于連接外部資源和當前HTML5文檔，它只出現(xiàn)在首部標簽<head>和</head>中，通常用于連接外部樣式表。例如：<head><linkrel="stylesheet"href="my.css"/></head>這表示將CSS樣式文件my.css指定的樣式效果應用于當前網(wǎng)頁中。2.1.3首部標簽<head>5.鏈接標簽<link>如果需要同時引用多個外部樣式表文件，則需要為每一個CSS樣式文件單獨使用一次<link>標簽。例如：<head><linkrel="stylesheet"href="my1.css"/><linkrel="stylesheet"href="my2.css"/><linkrel="stylesheet"href="my3.css"/></head>這里對于CSS樣式文件的引用使用了相對路徑，也可以根據(jù)實際需要填寫URL地址2.1.3首部標簽<head>6.腳本標簽<script>

<script>標簽為可選，取決于當前頁面是否需要使用腳本內容，比如JavaScript。該標簽可以直接引用外部腳本文件，也可以直接將腳本命令寫在<script>和</script>標簽中。例如：<head><scriptsrc="test.js"></script></head>這里對于CSS樣式文件的引用使用了相對路徑，也可以根據(jù)實際需要填寫URL地址2.1.3首部標簽<head>6.腳本標簽<script>和引用外部CSS文件類似，如果需要同時引用多個JavaScript文件，則需要為每一個JavaScript文件單獨使用一次<script>標簽。例如：<head><scriptsrc="test1.js"></script><scriptsrc="test2.js"></script><scriptsrc="test3.js"></script></head>2.1.4主體標簽<body>HTML5文檔的主體部分以<body>標簽開始，以</body>標簽結束。<body>標簽中的內容將全部顯示在網(wǎng)頁的頁面中。<body>標簽中可直接添加文本內容，也可繼續(xù)嵌套其他元素標簽，形成多樣化的顯示效果。2.1.5HTML5文檔注釋為增加HTML5文檔的可讀性，可為其添加注釋部分。注釋是文檔中的說明文字，不會被瀏覽器執(zhí)行。HTML5使用<!--...-->標簽為文檔進行注釋，注釋標簽以“<!--”開頭，以“-->”結束，中間的“...”替換為注釋文字內容即可。<!--...-->標簽支持單行和多行注釋。2.1.5HTML5文檔注釋【例2-2】注釋標簽的應用

2.1.6HTML5文檔規(guī)范1.文件類型2.元素標簽格式3.字符實體的使用4.圖像文件的使用2.1.6HTML5文檔規(guī)范1.文件類型一般來說，純HTML5開發(fā)推薦使用.html格式。和HTML4.01一樣，HTML5支持的常用文件后綴名為.html。在早期的DOS操作系統(tǒng)中，文件擴展名限制為最多3個字符，無法識別4位文件名，因此.htm被用于兼容此類操作系統(tǒng)。目前這兩種擴展名方式均被各類瀏覽器廣泛支持，互換后綴名不會引起打開錯誤，但是通過URL地址訪問時需要正確的擴展名。2.1.6HTML5文檔規(guī)范2.元素標簽格式元素標簽一般情況下是成對出現(xiàn)的，首尾標簽的元素名稱保持一致，并且尾標簽中需要加上斜杠符號。早期的HTML規(guī)范中，標簽的大小寫是不敏感的，因此老版本的網(wǎng)頁中可能會存在如下寫法：<HTML><HEAD><TITLE>早期存在的大寫標簽頁面</TITLE></HEAD><BODY>……</BODY></HTML>萬維網(wǎng)聯(lián)盟（W3C）明確規(guī)定了在新版本HTML5中必須使用小寫格式，包括元素標簽本身和其中可能出現(xiàn)的屬性均需要遵守此規(guī)范。2.1.6HTML5文檔規(guī)范2.元素標簽格式在HTML5中，也存在部分標簽是獨立使用，沒有首尾標簽成對出現(xiàn)。例如，換行標簽<br>和水平線標簽<hr>等。由于此類標簽單個就已經可以表達足夠明確的含義，并且不包含其他文本內容需要放置在其首尾標簽之間，因此結束標簽沒有存在的必要性。2.1.6HTML5文檔規(guī)范2.元素標簽格式目前這種無結束標簽的元素標簽有不同的寫法存在，例如水平線標簽可以寫成<hr>或<hr/>。HTML4.01以前版本可以直接寫成<hr>，但在XML規(guī)范中，所有的標簽都必須有結束標簽，因此必須加上斜杠符號表示完結。雖然目前這兩種寫法均能被瀏覽器正確顯示，但是從長遠來看，加上結束標志即斜杠符號的寫法更為標準。2.1.6HTML5文檔規(guī)范3.字符實體的使用在HTML5文檔中存在一些特殊字符無法直接使用。例如小于符號（<）和大于符號（>）是無法直接輸出的，因為它們會被誤認為是元素標簽的組成部分；而連續(xù)空格也無法正確顯示，會被瀏覽器縮減為單個空格。存在此類情況的一系列特殊字符在HTML5中稱為字符實體（CharacterEntities）。2.1.6HTML5文檔規(guī)范3.字符實體的使用字符實體可借助其對應的字符名稱或數(shù)字代碼進行輸出，其格式如下：&實體名稱;&#實體數(shù)字;實體名稱和實體數(shù)字的寫法都是以&符號開頭，以;符號結尾，其中實體數(shù)字前面還加有#符號以示區(qū)分。例如大于符號（>）可以使用>或>表示。2.1.6HTML5文檔規(guī)范3.字符實體的使用常用的字符實體及其對應的表示方式如表2-1所示。2.1.6HTML5文檔規(guī)范3.字符實體的使用實體名稱的出現(xiàn)是為了方便記憶，但是部分實體名稱不能完全被所有瀏覽器支持，在這種情況下可以使用實體數(shù)字代替。更多關于字符符號的用法見第10章。2.1.6HTML5文檔規(guī)范4.圖像文件的使用網(wǎng)頁文件常見的圖像格式有：JPEG格式GIF格式PNG格式2.1.6HTML5文檔規(guī)范4.圖像文件的使用(1)JPEG格式JPEG格式指的是聯(lián)合圖像專家組（JointPhotographicExpertsGroup，JPEG）格式，是第一個國際圖像壓縮標準。該格式的圖像文件后綴名是.jpg或.JPG兩種形式。JPEG格式圖像文件有以下特點：支持高級壓縮彈性壓縮比廣泛支持互聯(lián)網(wǎng)標準2.1.6HTML5文檔規(guī)范4.圖像文件的使用(2)GIF格式GIF格式指的是圖像交換格式（GraphicsInterchangeFormat，GIF），該格式的圖像文件后綴名是.gif或.GIF兩種形式。GIF格式圖像文件有以下特點：無損性256種顏色隔行掃描動畫效果2.1.6HTML5文檔規(guī)范4.圖像文件的使用(3)PNG格式PNG格式指的是圖像交換格式（PortableNetworkGraphicFormat，PNG），該格式的圖像文件后綴名是.png或.PNG兩種形式。PNG格式圖像文件有以下特點：文件體積小支持透明顯示色彩索引模式2.1.7HTML4.01轉換為HTML5基于HTML4.01開發(fā)的網(wǎng)頁可以分成三個步驟轉換為HTML5網(wǎng)頁。2.1.7HTML4.01轉換為HTML5示例代碼如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>HTML4.01網(wǎng)頁轉換HTML5</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><scripttype="text/javascript"src="test.js"></script><linktype="text/css"rel="stylesheet"href="test.css"></head><body>

再見，HTML4.01！

你好，HTML5！</body></html>2.1.7HTML4.01轉換為HTML5基于HTML4.01開發(fā)的網(wǎng)頁可以分成三個步驟轉換為HTML5網(wǎng)頁。步驟一：化簡DOCTYPE聲明方式。步驟二：化簡charset字符集描述方式。步驟三（可選，取決于需要轉換的文件是否包含該內容）：若存在外部css文件或js文件的引用，可以直接省略其中的type描述。2.1.7HTML4.01轉換為HTML5修改后的代碼如下：<!DOCTYPEhtml><html><head><title>HTML4.01網(wǎng)頁轉換HTML5</title><metacharset="utf-8"><scriptsrc=”test.js”></script><linkrel=”stylesheet”href=”test.css”></head><body>

再見，HTML4.01！

你好，HTML5！</body></html>2.2HTML5保留的常用標簽2.2.1基礎標簽2.2.2文本格式標簽2.2.3列表標簽2.2.4圖像標簽2.2.5超鏈接標簽2.2.6表格標簽2.2.7框架標簽2.2.8容器標簽2.2.1基礎標簽1.段落標簽<p>2.標題標簽<h1>-<h6>3.水平線標簽<hr>4.換行標簽<br>2.2.1基礎標簽1.段落標簽<p>段落標簽<p>和</p>用于形成一個新的段落，段落與段落之間默認為空一行進行分割。【例2-3】段落標簽<p>的簡單應用

2.2.1基礎標簽2.標題標簽<h1>-<h6>HTML5使用<hn>和</hn>來標記文本中的標題，其中n需要替換為數(shù)字，從1至6共有6級。<h1>標簽所標記的字體最大，標簽使用的數(shù)字越大則字體越小，直至<h6>標簽所標記的字體最小。標題標簽的默認狀態(tài)為左對齊顯示的黑體字。標題標簽中的字母h來源于英文單詞heading（標題）的首字母?！纠?-4】標題標簽<h1>-<h6>的簡單應用

2.2.1基礎標簽3.水平線標簽<hr>水平線標簽<hr>用于在網(wǎng)頁上畫一條水平線，從而在視覺上將文本分段。<hr>標簽沒有結束標簽，可以單獨使用，默認情況下是一條寬度為1像素的黑色水平線。標簽中的元素名稱hr來源于英文單詞horizontalrule（水平線）的首字母簡寫?！纠?-5】水平線標簽<hr>的簡單應用

2.2.1基礎標簽4.換行標簽<br>換行標簽<br>用于在當前位置產生一個換行，相當于一次回車鍵所產生的效果。該標簽單獨使用，無結束標簽。建議使用該標簽代替回車鍵，因為回車鍵所產生的多個連續(xù)換行會被瀏覽器自動省略。<br>標簽每次只能換一行，如需多次換行，必須寫多個<br>標簽?！纠?-6】換行標簽<br>的簡單應用

2.2.2文本格式標簽1.斜體字標簽<i>2.粗體字標簽<b>和<strong>3.上標標簽<sup>和下標標簽<sub>4.修訂標簽<del>和<ins>5.預格式化標簽<pre>2.2.2文本格式標簽1.斜體字標簽<i>斜體字標簽<i>用于將其首尾標簽之間的文本內容顯示為斜體字型效果?！纠?-7】斜體字標簽<i>的簡單應用

2.2.2文本格式標簽2.粗體字標簽<b>和<strong>粗體字標簽<b>和<strong>均可以將其首尾標簽之間的文本內容顯示為粗體字型效果。區(qū)別在于使用<strong>標簽的文本內容被認為是重要的內容?！纠?-8】粗體字標簽<b>和<strong>的簡單應用

2.2.2文本格式標簽3.上標標簽<sup>和下標標簽<sub>標簽^和標記的文本內容將顯示為上標的樣式，例如數(shù)字上X的平方可以寫成X2；標簽_和標記的文本內容將顯示為下標的樣式，例如二氧化碳的化學方程式可以寫成CO2?！纠?-9】上標標簽<sup>與下標標簽<sub>的簡單應用

2.2.2文本格式標簽4.修訂標簽<del>和<ins>修訂標簽有<del>和<ins>兩種，分別用于為文本內容添加刪除線和下劃線。刪除線標簽<del>可將其首尾標簽之間的文字上顯示一條水平貫穿線，該標簽一般用于定義被刪除的文本內容，標簽中的元素名稱del來源于英文單詞delete（刪除）。下劃線標簽<ins>用于將其首尾標簽之間的文字加上下劃線效果，標簽中的元素名稱來源于英文單詞（）。由于<ins>標簽的下劃線效果容易和網(wǎng)頁上的超鏈接效果混淆，往往需要和<del>標簽配合使用。2.2.2文本格式標簽4.修訂標簽<del>和<ins>HTML4.01版本中另有刪除線標簽<strike>和下劃線標簽<u>顯示同樣的效果，在HTML5中均已不再被支持，建議使用<del>和<ins>代替舊版標簽用于表示修訂文本。【例2-10】修訂標簽<del>和<ins>的簡單應用

2.2.2文本格式標簽5.預格式化標簽<pre>預格式化標簽<pre>和</pre>可以將所標記的文本內容在顯示時保留換行與空格的排版效果。在沒有使用該標簽的普通情況下，瀏覽器將把多次回車鍵形成的換行默認為一次換行，并且把多次空格鍵形成的連續(xù)空格默認為單個空格，在段落開頭的連續(xù)空格甚至會被忽略。當需要多次使用<br>和nbsp;符號分別進行換行和空格時，可以考慮使用此標簽提高效率?！纠?-11】預格式化標簽<pre>的簡單應用

2.2.3列表標簽1.有序列表標簽<ol>2.無序列表標簽<ul>3.定義列表標簽<dl>2.2.3列表標簽1.有序列表標簽<ol>有序列表標簽<ol>和</ol>用于定義帶有編號的有序列表，需要和列表項目標簽<li>配合使用。列表項目標簽<li>需標記在每個表項的開頭，默認為縮進顯示效果。標簽中的元素名稱ol來源于英文單詞orderedlist（有序列表）的首字母簡寫。2.2.3列表標簽1.有序列表標簽<ol>有序列表的基本格式如下：<ol><li>第一項</li><li>第二項</li><li>第三項</li>.......</ol>有序列表標簽<ol>默認的起始數(shù)值為1，可使用start屬性重新定義編號起始值，格式為：<olstart=”n”>。其中n需要替換成指定的編號數(shù)值，例如需要從3開始編號，則寫成：<olstart=”3”>。2.2.3列表標簽1.有序列表標簽<ol>有序列表標簽<ol>默認的編號樣式為標準阿拉伯數(shù)字（1，2，3，4，...），如需使用其他編號樣式，可使用type屬性進行聲明，格式為<oltype=”類型值”>。2.2.3列表標簽1.有序列表標簽<ol>【例2-12】有序列表標簽的應用2.2.3列表標簽2.無序列表標簽<ul>無序列表標簽<ul>和</ul>用于定義不帶編號的無序列表，標簽中的元素名稱ul來源于英文單詞unorderedlist（無序列表）的首字母簡寫。該標簽也需要和列表項目標簽<li>配合使用。列表項目標簽<li>需標記在每個表項的開頭，默認為縮進顯示效果。2.2.3列表標簽2.無序列表標簽<ul>無序列表標簽<ul>和</ul>用于定義不帶編號的無序列表，標簽中的元素名稱ul來源于英文單詞unorderedlist（無序列表）的首字母簡寫。該標簽也需要和列表項目標簽<li>配合使用。列表項目標簽<li>需標記在每個表項的開頭，默認為縮進顯示效果。2.2.3列表標簽2.無序列表標簽<ul>無序列表的基本格式如下：<ul><li>第一項</li><li>第二項</li><li>第三項</li>.......</ul>無序列表標簽<ul>默認的編號樣式為實心圓形，嵌套在其他列表中的二級列表編號樣式默認為空心圓形。2.2.3列表標簽2.無序列表標簽<ul>如需自定義編號樣式，可使用type屬性進行聲明，格式為<ultype=”類型值”>。2.2.3列表標簽2.無序列表標簽<ul>【例2-13】無序列表標簽的應用2.2.3列表標簽3.定義列表標簽<dl>定義列表標簽<dl>和</dl>是用于進行詞條定義的特殊列表，每條表項需要結合詞條標簽<dt>和定義標簽<dd>一起使用。詞條標簽<dt>需要標記在每個詞條的開頭。定義標簽<dd>則需要標記在每個定義部分的開頭，默認為全文縮進顯示。標簽中的元素名稱dl來源于英文單詞definitionlist（定義列表）的首字母簡寫。2.2.3列表標簽3.定義列表標簽<dl>定義列表的基本格式如下：<dl><dt>第一個詞條<dd>第一個詞條的定義<dt>第二個詞條<dd>第二個詞條的定義.......</dl>2.2.3列表標簽3.定義列表標簽<dl>【例2-14】定義列表標簽的應用

2.2.4圖像標簽圖像標簽<img>用于在網(wǎng)頁中嵌入圖片，該標簽無需結束標簽，可單獨使用。標簽中的元素名稱img來源于英文單詞image（圖像）。2.2.4圖像標簽<img>標簽有兩個常用屬性：src屬性和alt屬性。src屬性是英文單詞source（來源）的簡寫，用于指明圖像的存儲路徑，通常是URL形式。alt屬性是英文單詞alternative（替代的、備選的）的簡寫，用于無法找到圖像時顯示替代文本，該屬性可省略不寫。其基本格式如下：<imgsrc="圖像文件URL"/>2.2.4圖像標簽其中圖像文件URL替換為圖片存儲的路徑，例如圖片文件為starrynight.jpg，并存放于本地的images文件夾中，則可以寫成：如果圖片和該網(wǎng)頁文件在同一個目錄中，則可以直接寫圖片名稱即可。<imgsrc="http://localhost/images/starrynight.jpg"/><imgsrc="starrynight.jpg"/>2.2.4圖像標簽【例2-15】圖像標簽<img>的應用

2.2.5超鏈接標簽1.外部鏈接2.內部鏈接2.2.5超鏈接標簽超鏈接標簽<a>用于在網(wǎng)頁中標記文本或圖像從而形成超鏈接，用戶點擊后將跳轉另一個指定的頁面，從而實現(xiàn)瀏覽空間的跨越。標簽中的元素名稱a來源于英文單詞anchor（錨）的首字母簡寫，因此超鏈接按照標準叫法又稱為錨鏈接。2.2.5超鏈接標簽超鏈接可以用于指向其他任何位置，包括Internet上的其他網(wǎng)頁、本地其他文檔甚至當前頁面中其他位置。適用于制作網(wǎng)頁的導航菜單或列表，也可以用于發(fā)送郵件或下載文件等。默認狀態(tài)下，未被訪問的鏈接文本顯示為帶有下劃線的藍色字體，鼠標懸浮在上面會變成手形，點擊訪問后鏈接文本會變成帶有下劃線的紫色字體。2.2.5超鏈接標簽超鏈接標簽有如下兩個重要屬性：href：目標內容的URL地址。target：目標內容的打開方式，其屬性值如表2-4所示。2.2.5超鏈接標簽1.外部鏈接其基本格式如下：外部鏈接可包含文本內容或者圖片內容。例如：<ahref=”URL地址”>鏈接文本或圖片</a>文本示例：<ahref=””>百度</a>

圖片示例：<ahref=””><imgsrc=”logo.png”/></a>2.2.5超鏈接標簽1.外部鏈接【例2-16】外部超鏈接的應用

2.2.5超鏈接標簽2.內部鏈接超鏈接標簽也可以通過點擊跳轉同一頁面的指定區(qū)域，其語法格式如下：這里的“指定區(qū)域名”可以自定義，但是同時目標區(qū)域也必須標記出對應的名稱，其格式如下：<ahref="#指定區(qū)域名">鏈接文本或圖像</a><aname="區(qū)域名">目標內容</a>2.2.5超鏈接標簽2.內部鏈接【例2-17】內部超鏈接的應用

2.2.6表格標簽1.表格標簽<table>2.表格行標簽<tr>3.單元格標簽<td>4.表頭標簽<th>5.表格標題標簽<caption>2.2.6表格標簽表格標簽由<table>和</table>定義，每個表格中包含若干行（由單元行標簽<tr>和</tr>表示），每一行又被分為若干單元格（由單元格標簽<td>和</td>表示）。2.2.6表格標簽1.表格標簽<table>

表格標簽<table>和</table>用于中定義一個完整的表格。2.表格行標簽<tr>

表格行標簽<tr>和</tr>用于定義表格中的一行。2.2.6表格標簽3.單元格標簽<td>

單元格標簽<td>和</td>用于定義表格行中的一個數(shù)據(jù)單元格，其中字母td為tabledata（表格數(shù)據(jù)）的簡寫。數(shù)據(jù)單元格中可以包含表單、文本、水平線、圖片、列表、段落甚至新的表格等內容。默認狀態(tài)下，單元格的內容為左對齊。2.2.6表格標簽4.表頭標簽<th>

表頭標簽<th>和</th>用于定義表格的第一行表頭，默認為粗體字、居中對齊。5.表格標題標簽<caption>

表格標題標簽<caption>和</caption>可用于為表格添加標題，該標題默認為居中對齊并顯示在表格的頂部。2.2.6表格標簽【例2-18】表格標簽的綜合應用

2.2.7框架標簽框架標簽用于在網(wǎng)頁的框架內定義子窗口。由于框架標簽對于網(wǎng)頁的可用性有負面影響，在HTML5中不再支持HTML4.01中原有的框架標簽<frame>和<frameset>。只保留了內聯(lián)框架標簽<iframe>。

2.2.7框架標簽該標簽在HTML5中僅支持src屬性，用于指定框架內部的網(wǎng)頁來源。例如：【例2-19】框架標簽<iframe>的簡單應用<iframesrc="news.html"></iframe>2.2.8容器標簽1.<div>標簽2.<span>標簽2.2.8容器標簽1.<div>標簽標簽<div>可將網(wǎng)頁頁面分割成不同的獨立部分，通常用于定義文檔中的區(qū)域或節(jié)。標簽中的元素名div來源于英文單詞division（區(qū)域）的簡寫。該標簽是一個塊級元素（blocklevelelement），瀏覽器會自動在<div>和</div>所標記的區(qū)域前后自動放置一個換行符。每個標簽可有一個獨立的id號。同樣屬于塊級元素的還有段落標簽<p>、表格標簽<table>、標題標簽<h1>-<h6>等。2.2.8容器標簽1.<div>標簽【例2-20】<div>標簽的簡單應用2.2.8容器標簽2.<span>標簽標簽<span>通常作為文本的容器，它沒有特定的含義和樣式，只有與CSS同時使用才可以為指定文本設置樣式屬性。該標簽是一個內聯(lián)元素（inlineelement），與塊級元素相反，內聯(lián)元素不會自動在前后自動放置換行符，因此內聯(lián)元素會默認在同一行顯示。2.2.8容器標簽2.<span>標簽【例2-21】<span>標簽的簡單應用

2.3HTML5新增的常用標簽2.3.1HTML5新增文檔結構標簽2.3.2HTML5新增格式標簽2.3.1HTML5新增文檔結構標簽1.頁眉標簽<header>2.導航標簽<nav>3.節(jié)標簽<section>4.文章標簽<article>5.側欄標簽<aside>6.頁腳標簽<footer>2.3.1HTML5新增文檔結構標簽在HTML5版本之前通常直接使用<div>標簽進行網(wǎng)頁整體布局，常見布局包括頁眉、頁腳、導航菜單和正文部分。為了區(qū)分文檔結構中不同的<div>內容，一般會為其配上不同的id名稱。例如：<divid="header">這是網(wǎng)頁的頁眉部分</div><divid="content">這是網(wǎng)頁的正文部分</div><divid="footer">這是網(wǎng)頁的頁腳部分</div>由于id名稱是自定義的，如果HTML文檔作者沒有提供明確含義的id名稱，也會導致含義不明確。例如將上述代碼中的<divid="header">替換成<divid="abc">不影響網(wǎng)頁的頁面顯示效果，但是查看網(wǎng)頁代碼時會比較難以理解其含義。2.3.1HTML5新增文檔結構標簽因此HTML5為了代碼更好的語義化，新增了一系列專用文檔結構標簽代替原先用<div>加上id名稱的做法。新增文檔結構標簽如表2-5所示。2.3.1HTML5新增文檔結構標簽1.頁眉標簽<header>頁眉標簽<header>和</header>用于定義網(wǎng)頁文檔或節(jié)的頁眉，通常為網(wǎng)站名稱。2.導航標簽<nav>導航標簽<nav>和</nav>用于定義網(wǎng)頁文檔的導航菜單，可通過超鏈接跳轉其他頁面。其中nav來源于navigation（導航）的簡寫。2.3.1HTML5新增文檔結構標簽3.節(jié)標簽<section>節(jié)標簽<section>和</section>用于定義獨立的專題區(qū)域，里面可包含一篇或多篇文章。4.文章標簽<article>文章標簽<article>和</article>用于定義獨立的文章區(qū)域，里面根據(jù)文章內容的長短也可以包含一個或多個段落元素<p>。2.3.1HTML5新增文檔結構標簽5.側欄標簽<aside>側欄標簽<aside>和</aside>用于定義正文兩側的相關內容，常用作文章的側欄。6.頁腳標簽<footer>頁腳標簽<footer>和</footer>用于定義整個網(wǎng)頁文檔或節(jié)的頁腳，通常包含文檔的作者、版權、聯(lián)系方式等信息。2.3.1HTML5新增文檔結構標簽【例2-22】HTML5新增文檔結構標簽的綜合應用2.3.2HTML5新增格式標簽1.記號標簽<mark>2.進度標簽<progress>3.度量標簽<meter>2.3.2HTML5新增格式標簽1.記號標簽<mark>記號標簽<mark>用于突出顯示指定區(qū)域的文本內容，通常在指定的文本前后分別加上<mark>和</mark>標簽標記，可以為文字添加黃色底色。支持該標簽的瀏覽器有Edge，F(xiàn)irefox，Opera，Chrome和Safari。2.3.2HTML5新增格式標簽1.記號標簽<mark>【例2-23】記號標簽<mark>的簡單應用

2.3.2HTML5新增格式標簽2.進度標簽<progress>進度標簽<progress>用于顯示任務的進度狀態(tài)，可配合JavaScript使用以顯示任務進度的動態(tài)進行效果。支持該標簽的瀏覽器有Edge，F(xiàn)irefox，Opera，Chrome和Safari6。該標簽可以加上屬性value和max分別用于定義任務進度的當前值和最大值。例如，表示目前任務進度已經進行了80%的代碼如下：<progressvalue="80"max="100"></progress>2.3.2HTML5新增格式標簽2.進度標簽<progress>【例2-24】進度標簽<progress>的簡單應用

2.3.2HTML5新增格式標簽3.度量標簽<meter>度量標簽<meter>用于顯示標量測量結果，通常用于顯示磁盤使用量、投票數(shù)據(jù)統(tǒng)計等。該標簽通常應用于已知范圍內的恒定數(shù)值標記，不用于任務進度指示。支持該標簽的瀏覽器有Edge，F(xiàn)irefox，Opera，Chrome和Safari6。2.3.2HTML5新增格式標簽3.度量標簽<meter>度量標簽<meter>有一系列屬性用于輔助顯示效果，這些屬性的相關說明如表2-6所示。2.3.2HTML5新增格式標簽3.度量標簽<meter>【例2-25】度量標簽<meter>的簡單應用

2.4HTML5新增API除去新增的文檔結構標簽和文本格式標簽外，HTML5還有一系列新增的API。2.4HTML5新增API常用的功能性API列舉如下：拖放：實現(xiàn)元素的拖放；畫布：實現(xiàn)2D和3D繪圖效果；音頻和視頻：實現(xiàn)自帶控件播放音頻和視頻；表單：新增一系列輸入類型，例如電話號碼、數(shù)字范圍、email地址等；地理定位：使用瀏覽器進行地理位置經緯度的定位；Web存儲：實現(xiàn)本地持久化存儲大量數(shù)據(jù)；這些API及其相關標簽，會在后續(xù)章節(jié)陸續(xù)介紹。2.5實驗案例——第一個Web頁面嘗試使用本章所學網(wǎng)頁文檔結構基礎知識開發(fā)第一個Web頁面，開發(fā)工具可以任選。2.5實驗案例——第一個Web頁面除此之外，學有余力的開發(fā)者還可以嘗試搭建本章例2-22的內容，使用HTML5新增文檔結構標簽制作一個帶有頁眉、導航欄、側欄、文章、頁腳等內容的Web頁面。本章小結本章小結HTML5文件的基本結構是由根元素<html>及其所包含首部標簽<head>和主體標簽<body>組成的。其中首部標簽<head>所包含的內容為網(wǎng)頁的信息，而主體標簽<body>所包含的內容會直接顯示在網(wǎng)頁上。HTML5保留了HTML4.01中一些常用標簽，包括基礎標簽、文本格式標簽、列表標簽、圖像標簽、超鏈接標簽、表格標簽、框架標簽、容器標簽等。同時HTML5也新增了具有明確語義的文檔結構標簽和格式標簽。HTML5還新增了一系列API用于實現(xiàn)更多的效果，如畫布、音頻視頻、表單、地理定位、Web存儲等。Thankyou！第3章CSS基礎主講人：XX老師本章學習目標了解CSS的基本語法規(guī)則；了解CSS的常見取值與單位；熟悉CSS樣式表的層疊優(yōu)先級；掌握CSS樣式表的三種使用方式；掌握CSS常用選擇器的使用；掌握CSS常用樣式的使用；掌握CSS的四種定位方法。目錄3.1CSS樣式表3.2CSS選擇器3.3語法規(guī)則3.4CSS取值與單位3.5CSS常用樣式3.6CSS定位 3.1CSS樣式表3.1.1內聯(lián)樣式表3.1.2內部樣式表3.1.3外部樣式表3.1.4樣式表層疊優(yōu)先級3.1.1內聯(lián)樣式表內聯(lián)樣式表又稱為行內樣式表，通過使用style屬性為各種HTML元素標簽添加樣式，其作用范圍只在指定的HTML元素內部。3.1.1內聯(lián)樣式表基本語法格式如下：如果有多個屬性需要同時添加，可用分號隔開，顯示如下：例如，為某個標題標簽<h1>設置樣式：<元素名style="屬性名稱:屬性值"><元素名style="屬性名稱1:屬性值1;屬性名稱2:屬性值2;...屬性名稱N:屬性值N"><h1style=”color:blue;background-color:yellow”>標題一</h1>該聲明表示設置當前<h1>和</h1>標簽之間的文本字體顏色為藍色，背景色為黃色。3.1.1內聯(lián)樣式表為方便理解本節(jié)例題，表3-1列出了部分常用CSS屬性和參考值。3.1.1內聯(lián)樣式表【例3-1】內聯(lián)樣式表的用法示例

3.1.2內部樣式表內部樣式表通常位于<head>和</head>標簽內部，通