《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第3課 HTML與HTML5（二）_第1頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第3課 HTML與HTML5（二）_第2頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第3課 HTML與HTML5（二）_第3頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第3課 HTML與HTML5（二）_第4頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第3課 HTML與HTML5（二）_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第3課HTML與HTML5（二）課時2課時（90min）教學(xué)目標知識技能目標：掌握HTML的無語義標簽、文字相關(guān)標簽素質(zhì)目標：掌握HTML的相關(guān)知識，加強學(xué)生的理論基礎(chǔ)，提升學(xué)生的專業(yè)技能教學(xué)重難點教學(xué)重點：HTML無語義標簽、HTML文字相關(guān)標簽教學(xué)難點：HTML文字相關(guān)標簽教學(xué)方法問答法、討論法、講授法、實踐練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學(xué)設(shè)計第1節(jié)課：→→→傳授新知（32min）→頭腦風(fēng)暴（8·min）第2節(jié)課：→傳授新知（25min）→上機操作（10min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請大家了解HTML無語義標簽、HTML文字相關(guān)標簽的相關(guān)概念?！緦W(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生了解本次課的主要內(nèi)容，增加學(xué)生的學(xué)習(xí)興趣考勤

（2min）【教師】使用文旌課堂APP進行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀律性，掌握學(xué)生的出勤情況問題導(dǎo)入（3min）【教師】提出以下問題什么是無語義標簽？HTML文字相關(guān)標簽應(yīng)該包含哪些方面？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知

（32min）2.4HTML無語義標簽【教師】講解HTML無語義標簽的基本語法?【多媒體】組織學(xué)生掃碼播放“HTML無語義標簽”視頻（詳見教材），讓學(xué)生對這部分內(nèi)容有一個大致地了解HTML中的絕大多數(shù)標簽都有確定的語義，以標識該標簽的內(nèi)容在網(wǎng)頁中要如何顯示，如<p>標簽顯示為段落，<h1>～<h6>標簽顯示為標題，<img>顯示為圖像等。此外，HTML中還有兩個重要的無語義標簽<span>和<div>?！緦W(xué)生】聆聽、記錄、理解2.4.1<span>標簽【教師】講解<span>標簽的使用格式與示例<span>標簽沒有確定的語義，通常用于修飾文本，以區(qū)別于周圍其他文本，而且通常需要配合CSS來使用。它是行標簽，其語法格式如下：<spanstyle="文本樣式">修飾文本</span>【示例2-4-1】編輯HTML文檔<body>標簽的內(nèi)容，代碼如下：<body> <p><span>是<spanstyle="font-style:italic;">行標簽</span>，沒有確定的語義；通常用于<spanstyle="font-size:22px;font-style:italic;">修飾文本</span>，以區(qū)別于周圍其他文本。</p></body>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“<span>標簽效果”圖片（詳見教材），并講解效果：<span>標簽內(nèi)的內(nèi)容“行標簽”和“修飾文本”樣式不同于其他文本?！咎崾尽俊?lt;”和“>”用于表示特殊字符，在后面的章節(jié)中會詳細講解。style="font-style:italic;"和style="font-size:22px;font-style:italic;"用于設(shè)置<span>標簽間文本的樣式?！緦W(xué)生】聆聽、記錄、理解2.4.2<div>標簽【教師】講解<div>標簽的基本語法與示例<div>標簽沒有確定的語義，通常用于劃分區(qū)域，從而對頁面進行布局。該標簽可以看作是一個能夠?qū)⑵渌鸋TML元素嵌套在內(nèi)的容器。它是塊標簽，其語法格式如下：<div>待劃分區(qū)域的內(nèi)容</div>【示例2-4-2】編輯HTML文檔<body>標簽的內(nèi)容，代碼如下：<body> <div> <h2>下面是兩個段落</h2> <p><div>是塊標簽，沒有確定的語義，通常用于劃分區(qū)域，從而對頁面進行布局。該標簽可以看作是一個能夠?qū)⑵渌鸋TML元素嵌套在內(nèi)的容器。</p> <p>本頁面中有一個二級標題和兩個段落，都包含在一對<div>標簽內(nèi)。</p> </div></body>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“<div>標簽效果”圖片（詳見教材），并講解【提示】<h2>標簽是二級標題標簽，在后面的章節(jié)中會詳細講解?！緦W(xué)生】聆聽、記錄、理解2.5HTML文字相關(guān)標簽【教師】講解HTML文字相關(guān)標簽的基本語法?【多媒體】組織學(xué)生掃碼播放“HTML文字相關(guān)標簽”視頻（詳見教材），讓學(xué)生對這部分內(nèi)容有一個大致地了解2.5.1標題標簽<h1>～<h6>【教師】講解標題標簽的基本語法與示例【課堂互動】?【教師】提問HTML中標題標簽應(yīng)有什么屬性設(shè)置？?【學(xué)生】聆聽、思考、回答<h1>～<h6>標簽用于提升內(nèi)容的層級，從而構(gòu)建文檔的結(jié)構(gòu)，并且標題文本以加粗格式顯示。標題的對齊方式由align屬性設(shè)置，其值有l(wèi)eft（文字左對齊）、center（文字居中對齊）、right（文字右對齊）。若標題標簽未使用屬性設(shè)置內(nèi)容的對齊方式，則對齊方式默認為左對齊。<h1>～<h6>標簽是塊標簽，其語法格式如下：<h1align="對齊方式">文本內(nèi)容</h1>【示例2-5-1】編輯HTML文檔<body>標簽的內(nèi)容，代碼如下：<body><h1align="center">一級標題</h1><h2align="center">二級標題</h2><h3align="left">三級標題</h3><h4align="right">四級標題</h4><h5>五級標題</h5><h6>六級標題</h6><h7>有七級標題嗎？</h7></body>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“各級標題標簽與對齊方式屬性設(shè)置效果”圖片（詳見教材），并講解效果：h1、h2、h3、h4、h5、h6分別表示一級到六級標題，各自獨占一行，并加粗顯示，而且標題內(nèi)容的字體格式逐漸減小，對齊方式按照屬性設(shè)置或默認設(shè)置顯示。此外，h7內(nèi)容的字體大小明顯比h6內(nèi)容的字體大，也沒有加粗，由此可證實HTML規(guī)則中沒有七級標題標簽。【學(xué)生】聆聽、記錄、理解2.5.2段落標簽<p>【教師】講解段落標簽的基本語法與示例<p>標簽用于定義段落，段前段后會產(chǎn)生比段內(nèi)行距較多的空白，也就是說段間距大于行間距。段落文本的對齊方式同樣由align屬性設(shè)置，其值不再贅述。若段落標簽未使用屬性設(shè)置內(nèi)容的對齊方式，則對齊方式默認為左對齊。<p>標簽是塊標簽，其語法格式如下：<palign="對齊方式">段落文字</p>【示例2-5-2】編輯HTML文檔<body>標簽的內(nèi)容，代碼如下：<body><palign="center">美文欣賞</p><p>人站得高些，不但能有幸早些領(lǐng)略到期望的曙光，還能有幸發(fā)現(xiàn)生命的立體的詩篇。每一個人的人生，都是這詩篇中的一個詞、一個句子或者一個標點。你可能沒有成為一個美麗的詞，一個引人注目的句子，一個驚嘆號，但你依然是這生命的立體詩篇中的一個音節(jié)、一個停頓、一個必不可少的組成部分。這足以使你放棄前嫌，萌發(fā)為人類孕育新的歌聲的興致，為世界帶來更多的詩意。</p><palign="right">——《站在歷史枝頭微笑》</p></body>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“段落標簽與對齊方式屬性設(shè)置效果”圖片（詳見教材），并講解效果：段前段后有多于段內(nèi)行距的空白，第一個段落居中對齊，第二個段落左對齊，第三個段落右對齊?！咎崾尽吭贖TML5中，許多元素的align屬性被廢棄，因此建議使用CSS進行屬性設(shè)置，CSS的相關(guān)知識在后面章節(jié)中會詳細介紹。【學(xué)生】聆聽、記錄、理解2.5.3換行標簽<br/>【教師】講解換行標簽的基本語法與示例<br/>標簽用于強制換行。如果需要多次換行，則可以連續(xù)使用多個換行標簽。該標簽的語法格式如下：<p>一段文字<br/>一段文字</p>【示例2-5-3】在【示例2-5-2】的基礎(chǔ)上，編輯HTML文檔<body>標簽的內(nèi)容，即在第二個段落中添加標簽<br/>，代碼如下：<p>人站得高些，不但能有幸早些領(lǐng)略到期望的曙光，還能有幸發(fā)現(xiàn)生命的立體的詩篇。每一個人的人生，都是這詩篇中的一個詞、一個句子或者一個標點。<br/>你可能沒有成為一個美麗的詞，一個引人注目的句子，一個驚嘆號，但你依然是這生命的立體詩篇中的一個音節(jié)、一個停頓、一個必不可少的組成部分。這足以使你放棄前嫌，萌發(fā)為人類孕育新的歌聲的興致，為世界帶來更多的詩意。</p>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示圖片“使用換行標簽效果”（詳見教材），并講解效果：換行標簽<br/>后面的內(nèi)容另起一行，但沒有像段落一樣加大行距，因此換行標簽<br/>前后的內(nèi)容仍然是一個段落?！緦W(xué)生】聆聽、記錄、理解2.5.4水平線標簽<hr/>【教師】講解水平線標簽的基本語法與示例<hr/>標簽用于在頁面中設(shè)置一條水平線，以有效分隔前后內(nèi)容。該標簽的語法格式如下：<p>一段文字<hr/>一段文字</p>【示例2-5-4】在【示例2-5-2】的基礎(chǔ)上，編輯HTML文檔<body>標簽的內(nèi)容，即在第二個段落中添加標簽<hr/>，代碼如下：<p>人站得高些，不但能有幸早些領(lǐng)略到期望的曙光，還能有幸發(fā)現(xiàn)生命的立體的詩篇。每一個人的人生，都是這詩篇中的一個詞、一個句子或者一個標點。<hr/>你可能沒有成為一個美麗的詞，一個引人注目的句子，一個驚嘆號，但你依然是這生命的立體詩篇中的一個音節(jié)、一個停頓、一個必不可少的組成部分。這足以使你放棄前嫌，萌發(fā)為人類孕育新的歌聲的興致，為世界帶來更多的詩意。</p>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“插入水平線效果”圖片（詳見教材），并講解效果：段落內(nèi)容被水平線分隔開?！緦W(xué)生】聆聽、記錄、理解通過教師講解、課堂互動、知識拓展、演示操作等方式，使學(xué)生了解HTML無語義標簽和部分HTML文字相關(guān)標簽的語法及使用，為后邊的學(xué)習(xí)打好基礎(chǔ)頭腦風(fēng)暴（8min）【教師】根據(jù)頭腦風(fēng)暴主題，組織學(xué)生分組開展討論根據(jù)各隊伍的網(wǎng)站主題，討論如何使用本節(jié)課中介紹的HTML標簽編輯一些標題和段落?！緦W(xué)生】思考、討論通過頭腦風(fēng)暴的形式，活躍課堂氣氛，引發(fā)學(xué)生思考，培養(yǎng)學(xué)生的創(chuàng)新能力和團隊精神第二節(jié)課問題導(dǎo)入（5min）【教師】提出以下問題思考HTML文字標簽還應(yīng)該包括哪些內(nèi)容？【學(xué)生】思考、舉手回答通過提問引導(dǎo)學(xué)生思考本節(jié)課內(nèi)容傳授新知

（25min）2.5.5文字樣式標簽<font>【教師】講解文字樣式標簽的基本語法與示例【課堂互動】?【教師】提問HTML中文字樣式標簽可選的屬性設(shè)置有哪些？?【學(xué)生】聆聽、思考、回答<font>標簽用于規(guī)定文本的大小、顏色和字體，可選的屬性有size、color、face。該標簽是行標簽，其語法格式如下：<fontsize="數(shù)字"color="顏色名"face="字體族">文字內(nèi)容</font>【示例2-5-5】在【示例2-5-2】的基礎(chǔ)上，編輯HTML文檔<body>標簽的內(nèi)容，即將第二個和第三個段落標簽修改為文字樣式標簽，并設(shè)置標簽屬性，代碼如下：<body> <palign="center">美文欣賞</p> <fontsize="3"color="#666"face="隸書">人站得高些，不但能有幸早些領(lǐng)略到期望的曙光，還能有幸發(fā)現(xiàn)生命的立體的詩篇。每一個人的人生，都是這詩篇中的一個詞、一個句子或者一個標點。你可能沒有成為一個美麗的詞，一個引人注目的句子，一個驚嘆號，但你依然是這生命的立體詩篇中的一個音節(jié)、一個停頓、一個必不可少的組成部分。這足以使你放棄前嫌，萌發(fā)為人類孕育新的歌聲的興致，為世界帶來更多的詩意。</font> <fontsize="4"color="#B91720"face="宋體">——《站在歷史枝頭微笑》</font></body>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“字體標簽及其屬性設(shè)置效果”圖片（詳見教材），并講解效果：原本各自成段的第二、三段呈現(xiàn)在同一段落中，且原第二段內(nèi)容字號變?yōu)椤?號”、顏色為“黑灰色”、字體為“隸書”，原第三段內(nèi)容字號變?yōu)椤?號”、顏色為“酒紅色”、字體為“宋體?！咎崾尽吭贖TML4.01中，<font>標簽不被贊成使用；在HTML5中，<font>標簽被廢棄?！緦W(xué)生】聆聽、記錄、理解2.5.6傾斜文字標簽<i>和<em>【教師】講解傾斜文字標簽的基本語法與示例<i>標簽用于定義斜體字，<em>標簽用于定義著重文字，它們都可以將文字修飾為斜體。它們都是行標簽，其語法格式如下：<p><i>斜體文字</i>正常文字<em>斜體文字</em></p>【示例2-5-6】在【示例2-5-2】的基礎(chǔ)上，編輯HTML文檔<body>標簽的內(nèi)容，即在第一個段落中添加傾斜文字標簽<i>和<em>。代碼如下：<palign="center"><i>美文</i>欣<em>賞</em></p>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“斜體修飾標簽使用效果”圖片（詳見教材），并講解效果：文字“美文”和“賞”都變成了斜體?！咎崾尽扛鶕?jù)HTML5規(guī)范，在沒有其他更合適的標簽使用時，才把<i>標簽作為最后的選項，通常建議使用<em>標簽?！緦W(xué)生】聆聽、記錄、理解2.5.7加粗文字標簽<b>和<strong>【教師】講解傾斜文字標簽的基本語法與示例<b>標簽定義粗體文本，<strong>標簽定義加重語氣，它們都可以用于定義粗體文本。它們都是行標簽，其語法格式如下：<p><b>粗體文字</b>正常文字<strong>粗體文字</strong></p>【示例2-5-7】在【示例2-5-2】的基礎(chǔ)上，編輯HTML文檔<body>標簽的內(nèi)容，即在第一個段落中添加加粗文字標簽<b>和<strong>。代碼如下：<palign="center"><b>美文</b>欣<strong>賞</strong></p>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示圖片“粗體文字效果”（詳見教材），并講解效果：文字“美文”和“賞”都變成了粗體。【提示】根據(jù)HTML5規(guī)范，在沒有其他更合適的標簽使用時，才把<b>標簽作為最后的選項，通常建議使用<strong>標簽。【學(xué)生】聆聽、記錄、理解2.5.8文字下劃線標簽<u>【教師】講解文字下劃線標簽的基本語法與示例<u>標簽用于定義帶有下劃線的文字。它是行標簽，其語法格式如下：<p><u>帶有下劃線的文字</u>正常文字</p>【示例2-5-8】在【示例2-5-7】的基礎(chǔ)上，編輯HTML文檔<body>標簽的內(nèi)容，即將第一個段落中的加粗文字標簽<b>修改為文字下劃線標簽<u>。代碼如下：<palign="center"><u>美文</u>欣<strong>賞</strong></p>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示圖片“下劃線標簽修飾文字效果”（詳見教材），并講解效果：文字“美文”加下劃線修飾，“賞”字依然是粗體?！咎崾尽吭贖TML4.01中，<u>標簽不被贊成使用。HTML5不支持<u>標簽?！緦W(xué)生】聆聽、記錄、理解2.5.9預(yù)留字符的使用【教師】講解預(yù)留字符的使用與示例【課堂互動】?【教師】提問HTML中預(yù)留字符有什么作用？?【學(xué)生】聆聽、思考、回答在HTML文檔中，可以直接使用鍵盤輸入多個空格鍵，但是在瀏覽器顯示的網(wǎng)頁上最多只顯示一個空格。要想在網(wǎng)頁中顯示多個空格，可以使用HTML中的預(yù)留字符 。在HTML文檔中輸入該預(yù)留字符，在網(wǎng)頁中便可顯示出空格，而且使用多個 可以在網(wǎng)頁中顯示連續(xù)的空格（英文空格）。【示例2-5-9】在【示例2-5-5】的基礎(chǔ)上，編輯HTML文檔<body>標簽的內(nèi)容，即在第一個段落中添加4個預(yù)留字符 。代碼如下：<palign="center">美文    欣賞</p>【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論