《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第1課 HTML5基礎(chǔ)

第課HTML5第課HTML5基礎(chǔ)的基基本本PAGE1011HTML51HTML5基礎(chǔ)第課PAGE11《HTML5+CSS3項(xiàng)目開發(fā)案例教程》

教案課時(shí)分配表章序課程內(nèi)容課時(shí)備注1HTML5基礎(chǔ)42應(yīng)用和美化文本43應(yīng)用和美化圖像及多媒體44應(yīng)用和美化列表45應(yīng)用和美化超鏈接46應(yīng)用和美化表格47應(yīng)用和美化表單48CSS3布局基礎(chǔ)49CSS3布局410變形、過渡與動(dòng)畫411網(wǎng)頁設(shè)計(jì)綜合實(shí)例2合計(jì)42

課題HTML5基礎(chǔ)課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）了解HTML5的發(fā)展歷程（2）掌握HTML5的文檔結(jié)構(gòu)、基本語法和主結(jié)構(gòu)元素思政育人目標(biāo)：（1）幫助學(xué)生養(yǎng)成善于探索、善于實(shí)踐的良好習(xí)慣（2）培養(yǎng)學(xué)生的辯證思維和創(chuàng)新思維能力教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：HTML5的文檔結(jié)構(gòu)與基本語法教學(xué)難點(diǎn)：使用記事本和DreamweaverCC2020創(chuàng)建HTML5文檔教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：知識(shí)講解（20min）第2節(jié)課：?jiǎn)栴}導(dǎo)入（4min）

知識(shí)講解（27min）

課堂練習(xí)（10min）

課堂小結(jié)（2min）作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課考勤

（2min）【教師】清點(diǎn)上課人數(shù)，記錄好考勤【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

（4min）【教師】概述介紹HTML5語言互聯(lián)網(wǎng)中的大多數(shù)網(wǎng)頁都是用HTML描述的，這使HTML成為最流行的網(wǎng)頁制作語言，并持續(xù)發(fā)展至今。HTML在20世紀(jì)90年代發(fā)展迅速，從HTML2.0版本發(fā)展到3.2版本、4.0版本，再到4.01版本。就在HTML4.01版本發(fā)布的當(dāng)年，W3C對(duì)HTML未來的發(fā)展做了分析，他們認(rèn)為HTML的形式與內(nèi)容無法分離，且標(biāo)記單一，前途堪憂。于是W3C轉(zhuǎn)向語言更加規(guī)范的XML，但是從1991年HTML出現(xiàn)到1999年的8年時(shí)間里，互聯(lián)網(wǎng)上已經(jīng)有成千上萬由HTML編寫的網(wǎng)頁，直接轉(zhuǎn)向XML是不現(xiàn)實(shí)的，所以W3C只能放慢腳步，開始HTML到XML的過渡，因此出現(xiàn)了XHTML?！窘處煛刻岢鰡栴}試問：同學(xué)們之前使用過HTML語言嗎？知道網(wǎng)站前段開發(fā)技術(shù)有哪些？了解過HTML語言跟其他語言的不同之處嗎？【學(xué)生】聆聽、思考、回答【教師】列舉HTML5語言的優(yōu)勢(shì)HTML文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是WWW盛行的原因之一，其主要特點(diǎn)如下：（1）簡(jiǎn)易性。HTML版本升級(jí)采用超集方式，從而更加靈活方便。（2）可擴(kuò)展性。HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，HTML采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。（3）平臺(tái)無關(guān)性。雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺(tái)上。【學(xué)生】聆聽、記錄介紹HTML5語言的發(fā)展歷程，通過問答的方式，激發(fā)學(xué)生的求知欲，列舉HTML語言的特點(diǎn)，引起學(xué)生對(duì)HTML5語言學(xué)習(xí)的興趣知識(shí)講解

（24min）【教師】介紹網(wǎng)站前端開發(fā)技術(shù)常用的網(wǎng)站開發(fā)技術(shù)主要有PHP、JSP、ASP.NET、HTML、CSS、JavaScript等。其中，前3個(gè)屬于網(wǎng)站后端開發(fā)技術(shù)，不在本書所講的范圍內(nèi)，此處不做介紹。本書主要介紹的是網(wǎng)站前端開發(fā)技術(shù)中最基礎(chǔ)的HTML和CSS，下面簡(jiǎn)單介紹這兩者和JavaScript的相關(guān)知識(shí)。1．HTMLHTML全稱hypertextmarkuplanguage，即超文本標(biāo)記語言。使用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)。瀏覽器能夠識(shí)別并解析這些文檔。2．CSSCSS全稱cascadingstylesheets，即層疊樣式表。它是一種能夠定義網(wǎng)頁樣式的語言，可以直接寫在HTML文檔中或是單獨(dú)存放為樣式表文件。當(dāng)CSS樣式表單獨(dú)存放時(shí)，多個(gè)頁面可以使用同一個(gè)樣式表文件，這樣不僅可以輕松地統(tǒng)一多個(gè)頁面的風(fēng)格，同時(shí)還減輕了HTML文檔的負(fù)擔(dān)。3．JavaScriptJavaScript是一種解釋性腳本語言，簡(jiǎn)稱JS。它可以收集頁面上的數(shù)據(jù)，并記錄用戶對(duì)頁面的操作等，從而使原本靜態(tài)的頁面具有交互性。在網(wǎng)頁制作中，HTML屬于網(wǎng)頁的結(jié)構(gòu)層部分，用于確定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容；CSS屬于網(wǎng)頁的表現(xiàn)層部分，用于設(shè)置網(wǎng)頁的樣式，主要包括各元素的外觀、大小和位置等。兩者既相互獨(dú)立又相互聯(lián)系，熟練掌握它們就能制作出各種靜態(tài)的網(wǎng)頁。JavaScript在網(wǎng)頁制作中主要起錦上添花的作用，使用它可以為網(wǎng)頁添加更復(fù)雜的動(dòng)畫和交互效果慣?！緦W(xué)生】聆聽、思考、記錄【教師】介紹HTML5的發(fā)展歷程HTML在20世紀(jì)90年代發(fā)展迅速，從HTML2.0版本發(fā)展到3.2版本、4.0版本，再到4.01版本。就在HTML4.01版本發(fā)布的當(dāng)年，W3C對(duì)HTML未來的發(fā)展做了分析，他們認(rèn)為HTML的形式與內(nèi)容無法分離，且標(biāo)記單一，前途堪憂。于是W3C轉(zhuǎn)向語言更加規(guī)范的XML，但是從1991年HTML出現(xiàn)到1999年的8年時(shí)間里，互聯(lián)網(wǎng)上已經(jīng)有成千上萬由HTML編寫的網(wǎng)頁，直接轉(zhuǎn)向XML是不現(xiàn)實(shí)的，所以W3C只能放慢腳步，開始HTML到XML的過渡，因此出現(xiàn)了XHTML。1．轉(zhuǎn)向XHTML萬維網(wǎng)聯(lián)盟（worldwidewebconsortium，W3C）在2000年推出了XHTML1.0，它以XML的語法重新整理了HTML4.0，使其具有XML那樣嚴(yán)謹(jǐn)?shù)恼Z法規(guī)則。而后在2002年推出了XHTML2.0，但由于其沒有反映出網(wǎng)站開發(fā)人員在網(wǎng)頁上的交互操作，也未能將網(wǎng)頁上已有的內(nèi)容向后兼容等，最終XHTML2.0宣告失敗。2．HTML5的成功就在XHTML2.0失敗的同時(shí)，HTML5的演化取得了成功。因?yàn)镠TML5在開發(fā)時(shí)就綜合考慮了當(dāng)前與未來需要進(jìn)行的開發(fā)任務(wù)，所以它向后兼容，且包含了HTML4.0的全部特性，并進(jìn)行了少量的修改與完善。2014年，W3C正式宣布，HTML5制作完成并公開發(fā)布。目前HTML5已經(jīng)得到主流瀏覽器的良好支持能?！窘處煛刻岢鰡栴}，讓學(xué)生思考分析HTML5語言成功的原因【學(xué)生】聆聽、思考、討論通過講解知識(shí)點(diǎn)，讓學(xué)生了解HTML5語言，同時(shí)促進(jìn)學(xué)生的創(chuàng)造力交流討論

（15min）【教師】給學(xué)生分組，設(shè)置交流討論的話題（1）HTML之前版本的弊端在哪里（2）HTML5取得成功的原因是什么【學(xué)生】討論、交流、小組代表發(fā)言【教師】安排小組討論未來HTML語言的發(fā)展趨勢(shì)是怎樣的【學(xué)生】討論、交流、小組代表發(fā)言【教師】總結(jié)發(fā)言還值得一提的是，HTML5非常適合未來。如今，人們不僅在家用PC上，而且還在筆記本電腦，智能手機(jī)，平板電腦和其他移動(dòng)設(shè)備以及許多不同平臺(tái)上訪問萬維網(wǎng)。HTML5是唯一可以在多個(gè)平臺(tái)上平穩(wěn)運(yùn)行而無需執(zhí)行額外工作的解決方案。這種變化將幫助開發(fā)人員將更多的精力放在功能上，而不是為不同的平臺(tái)創(chuàng)建類似的產(chǎn)品。因此，想象一下未來不需要多個(gè)版本的情況。HTML5使您無論使用什么設(shè)備都可以訪問您的應(yīng)用程序。這也可能意味著Kindle和其他電子書閱讀器的死亡。由于HTML5可以輕松正確地正確呈現(xiàn)雜志，報(bào)紙和書籍，因此可以更輕松地在許多設(shè)備（包括智能手機(jī)）上閱讀電子書。HTML5還可以為更好的瀏覽器內(nèi)游戲鋪平道路，其中包括允許用戶在網(wǎng)頁上繪圖的應(yīng)用程序。WebGL平臺(tái)還可以使3-D成為現(xiàn)實(shí)通過交流討論，讓學(xué)生了解HTML語言的發(fā)展進(jìn)程，提高學(xué)生交流表達(dá)能力第二節(jié)課問題導(dǎo)入

（4min）【教師】提出問題，讓學(xué)生思考HTML語言具有如此多的特點(diǎn)和優(yōu)勢(shì)，如何正確的使用HTML的語言？它的基本語法是什么？主結(jié)構(gòu)元素如何創(chuàng)建【學(xué)生】聆聽老師的問題、討論、回答問題通過問答的方式，引導(dǎo)學(xué)生思考，激發(fā)學(xué)生的學(xué)習(xí)興趣知識(shí)講解

（27min）【教師】講解HTML5的文檔結(jié)構(gòu)”HTML5使用元素描述頁面結(jié)構(gòu)，元素一般由一個(gè)或兩個(gè)標(biāo)簽（用尖括號(hào)括起來的代碼）組成，由兩個(gè)標(biāo)簽組成的元素包括一個(gè)起始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽（結(jié)束標(biāo)簽中帶有一個(gè)斜杠）。最基本的HTML5文檔結(jié)構(gòu)如下：<!DOCTYPEhtml><html><head> <metacharset="utf-8"/> <title>HTML5實(shí)例</title></head><body> <h1><i>HTML</i>5的文檔結(jié)構(gòu)</h1> <p>最基本的文檔結(jié)構(gòu)</p></body></html>1．DOCTYPE聲明DOCTYPE聲明位于文檔首行，標(biāo)簽為<!DOCTYPEhtml>，它不屬于文檔的結(jié)構(gòu)部分。DOCTYPE聲明用于向?yàn)g覽器說明當(dāng)前文檔使用的標(biāo)準(zhǔn)規(guī)范，“<!DOCTYPEhtml>”即表示當(dāng)前文檔使用HTML5標(biāo)準(zhǔn)。2．html元素html元素是HTML5頁面的根元素，用于告知瀏覽器自身是一個(gè)HTML5文檔，<html>標(biāo)簽標(biāo)志著HTML5文檔的開始，</html>標(biāo)簽標(biāo)志著HTML5文檔的結(jié)束，它們之間的內(nèi)容即為文檔的頭部結(jié)構(gòu)和主體內(nèi)容。3．head元素head元素用于標(biāo)記HTML5文檔的頭部結(jié)構(gòu)，也稱為頭部標(biāo)記，它跟在<html>標(biāo)簽之后，用于封裝其他位于文檔頭部的標(biāo)簽，這些標(biāo)簽中存儲(chǔ)著網(wǎng)頁的各種基本信息，可以使瀏覽器快速解析頁面，其中的內(nèi)容一般不會(huì)顯示在頁面中?！窘處煛窟\(yùn)行參考代碼通過瀏覽器可以查看該文檔的頁面效果（如無特殊說明，本書默認(rèn)使用谷歌瀏覽器展示頁面效果），具體效果如圖1-1所示。圖1-1“HTML5實(shí)例”頁面效果【學(xué)生】聆聽、觀察運(yùn)行結(jié)果、思考、理解【教師】講解HTML5的基本語法與主結(jié)構(gòu)元素HTML5是使用標(biāo)簽來描述網(wǎng)頁的，HTML5文檔中實(shí)質(zhì)上只包含HTML標(biāo)簽和文本。瀏覽器的一個(gè)重要作用就是讀取HTML5文檔，并解釋其中的一個(gè)個(gè)標(biāo)簽，然后將其以“網(wǎng)頁”的形式顯示。1．HTML5標(biāo)簽的分類1.1.3節(jié)中提到的<html>、<head>與<body>等都是HTML5標(biāo)簽，也稱為HTML5標(biāo)記。“標(biāo)簽”和“元素”這兩個(gè)概念通常不做區(qū)分，但是一般來說，一個(gè)元素包括其對(duì)應(yīng)的標(biāo)簽及其中的內(nèi)容。HTML5的標(biāo)簽主要分為以下幾類。（1）雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的標(biāo)簽，基本語法格式為：<標(biāo)簽名>內(nèi)容</標(biāo)簽名>例如，<title>…</title>就是一個(gè)雙標(biāo)簽（2）單標(biāo)簽也稱為空標(biāo)簽，基本語法格式為：<標(biāo)簽名/>例如，<hr/>就是一個(gè)單標(biāo)簽，用于標(biāo)記一條水平線。單標(biāo)簽中的“/”可以省略。（3）注釋標(biāo)簽是HTML5中一種特殊的標(biāo)簽。使用注釋標(biāo)簽括起來的內(nèi)容不會(huì)顯示在頁面上，但是會(huì)保存在頁面的源代碼中。它的基本語法格式為：<!--注釋內(nèi)容-->在各功能模塊的開頭和結(jié)尾處添加注釋可方便合作開發(fā)的人員修改和理解代碼2．HTML5標(biāo)簽的屬性在HTML5中，可以根據(jù)需要為標(biāo)簽設(shè)置屬性，比如在段落標(biāo)簽中設(shè)置該段落的文本顏色或字號(hào)大小等。設(shè)置標(biāo)簽屬性的語法格式為：<標(biāo)簽名屬性1=“屬性值1”屬性2=“屬性值2”>內(nèi)容</標(biāo)簽名>一個(gè)標(biāo)簽可以有多個(gè)屬性，標(biāo)簽名和屬性名之間要用空格隔開，屬性之間不分先后順序。標(biāo)簽的屬性省略時(shí)將使用它們的默認(rèn)值。3．塊級(jí)元素與行內(nèi)元素body元素中的元素分為塊級(jí)元素和行內(nèi)元素。（1）塊級(jí)元素在屏幕上顯示時(shí)類似于首尾各有一個(gè)換行符。例如，圖1-1中顯示的兩行文本內(nèi)容，標(biāo)記它們的h1與p元素都是塊級(jí)元素，它們?cè)谛碌男兄酗@示內(nèi)容，這些元素之后的內(nèi)容同樣也會(huì)另起一行。（2）行內(nèi)元素是可以出現(xiàn)在同一行中的元素。例如，圖1-1中顯示的第一行文本內(nèi)容，其中標(biāo)記斜體的i元素就是一個(gè)行內(nèi)元素HTML5主結(jié)構(gòu)元素HTML5中包含上百個(gè)標(biāo)簽。例如，1.1.3節(jié)代碼中的<h1>是文本類的標(biāo)題標(biāo)簽，<p>是文本類的段落標(biāo)簽，這些標(biāo)簽主要放置在body元素內(nèi)，具體應(yīng)用將在后面的項(xiàng)目中分別講解。在設(shè)計(jì)頁面時(shí)如果任意堆疊各種標(biāo)簽，會(huì)導(dǎo)致頁面的整體結(jié)構(gòu)變得散亂，不便于后期添加樣式。所以，為了方便設(shè)計(jì)頁面結(jié)構(gòu)，在對(duì)頁面排版時(shí)需要將它們放在下列表示結(jié)構(gòu)的元素中。（1）頁眉。表示頁眉的元素是header，它用于標(biāo)記整個(gè)頁面的標(biāo)題欄或一個(gè)內(nèi)容塊的標(biāo)題區(qū)域。一個(gè)頁面可以包含多個(gè)header元素，它可以包含網(wǎng)站Logo、主導(dǎo)航或搜索框等。（2）導(dǎo)航。表示導(dǎo)航的元素是nav，它用來標(biāo)記頁面導(dǎo)航的鏈接組。一個(gè)頁面可以包含多個(gè)nav元素，導(dǎo)航性質(zhì)的鏈接都可以放置在nav元素中，比如主菜單鏈接、側(cè)邊欄導(dǎo)航或頁內(nèi)導(dǎo)航等。頁腳的導(dǎo)航可以不放在該元素中。（3）主要區(qū)域。表示主要區(qū)域的元素是main，它用于標(biāo)記一個(gè)頁面的主要內(nèi)容。一個(gè)頁面中只能包含一個(gè)main元素。main元素不能被放在header、nav、article、aside或footer元素中，在<main>標(biāo)簽中設(shè)置role屬性的值為main可以幫助閱讀器定位頁面的主要區(qū)域。（4）文章塊。表示文章塊的元素是article，它用來標(biāo)記頁面中的一個(gè)獨(dú)立內(nèi)容，比如報(bào)紙文章、博客條目或用戶評(píng)論等。一個(gè)頁面可以包含多個(gè)article元素，在article元素中也可以包含一個(gè)或多個(gè)article元素。（5）區(qū)塊。表示區(qū)塊的元素是section，它用來標(biāo)記文檔中的節(jié)，對(duì)內(nèi)容進(jìn)行分區(qū)，比如文檔中的章節(jié)、頁眉、頁腳等，可以將其嵌套在article元素中。section元素標(biāo)記的是頁面中的特定區(qū)域，可對(duì)其中的內(nèi)容進(jìn)行操作，如存儲(chǔ)到數(shù)據(jù)庫里或輸出到Word文檔中。（6）附欄。表示附欄的元素是aside，它用來標(biāo)記一個(gè)和其余頁面內(nèi)容幾乎無關(guān)的部分，將它單獨(dú)拆分出來后不會(huì)影響整體內(nèi)容。例如，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊廣告等?！緦W(xué)生】聆聽、思考、記錄通過講解知識(shí)點(diǎn)，讓學(xué)生了解HTML5語言的基