HTML概述專(zhuān)業(yè)大計(jì)算機(jī)大類(lèi)

教學(xué)課題

類(lèi)

靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)授課對(duì)計(jì)算機(jī)應(yīng)用技術(shù)

所屬課程

象專(zhuān)業(yè)學(xué)生

《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教授課地機(jī)房

所選教材

程》點(diǎn)

授課時(shí)長(zhǎng)6課時(shí)

教學(xué)分析

本課程根據(jù)《計(jì)算機(jī)應(yīng)用技術(shù)專(zhuān)業(yè)人才培養(yǎng)方案》，確定該課

程是面向計(jì)算機(jī)相關(guān)專(zhuān)業(yè)的一門(mén)專(zhuān)業(yè)基礎(chǔ)課，通過(guò)本課程的學(xué)習(xí)，

學(xué)生能夠了解網(wǎng)頁(yè)web發(fā)展歷史及其未來(lái)方向，熟悉網(wǎng)頁(yè)設(shè)計(jì)流

程、掌握網(wǎng)絡(luò)中常見(jiàn)的網(wǎng)頁(yè)布局效果及變形和動(dòng)畫(huà)效果，學(xué)會(huì)制作

內(nèi)容分析

各種企業(yè)、門(mén)戶(hù)、電商類(lèi)網(wǎng)站。

“HTML概述”選自《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程》第一

章節(jié)內(nèi)容，為后面章節(jié)的學(xué)習(xí)打下良好的基礎(chǔ)。

授課對(duì)象為高職一計(jì)算機(jī)應(yīng)用技術(shù)專(zhuān)業(yè)學(xué)生。根據(jù)學(xué)生學(xué)情分

析如下：

1.知浜基礎(chǔ)：本曲［程開(kāi)設(shè)在大一第二學(xué)期，大部分學(xué)生對(duì)程序

設(shè)計(jì)語(yǔ)言有了一定的「了解，具備一定的平面設(shè)計(jì)基礎(chǔ)。

學(xué)情分析2.能力基礎(chǔ)：通話L前面的學(xué)習(xí)，能熟練的使用電腦，具備簡(jiǎn)單

的代碼編寫(xiě)能力。

3.行為習(xí)慣：現(xiàn)代吃學(xué)生是生活一個(gè)信息化的時(shí)間，學(xué)生喜歡形

象化，活動(dòng)式的教學(xué)P勺容，適應(yīng)從簡(jiǎn)單到復(fù)雜的學(xué)習(xí)模式。對(duì)網(wǎng)頁(yè)

開(kāi)發(fā)比較感興趣，有4度為豐富的網(wǎng)站使用經(jīng)驗(yàn)。

知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)

1.掌握HTML5文檔能夠使用HTML5相1.培養(yǎng)學(xué)生計(jì)算機(jī)思

基本格式。關(guān)標(biāo)簽及屬性，制作維的能力，幫助學(xué)生

2.掌握文本控制標(biāo)簡(jiǎn)單的網(wǎng)頁(yè)頁(yè)面。樹(shù)立科學(xué)嚴(yán)謹(jǐn)?shù)呢?fù)

教學(xué)目標(biāo)

簽。責(zé)態(tài)度。

3.掌握?qǐng)D像標(biāo)簽。2.培養(yǎng)學(xué)生的團(tuán)隊(duì)協(xié)

作意識(shí)，自主解決問(wèn)

題的能力。

教學(xué)重點(diǎn)文本控制標(biāo)簽和圖像標(biāo)簽。

教學(xué)難點(diǎn)絕對(duì)路徑和相對(duì)路徑的使用。

教學(xué)策略

教學(xué)組織本課以學(xué)生的疑問(wèn)、觀點(diǎn)和觀察結(jié)果為教學(xué)契機(jī)，采用探究式

與實(shí)施學(xué)習(xí)方式。

利用職教云平臺(tái)布置課前任務(wù)，通過(guò)學(xué)生完成任務(wù)分析教學(xué)

重難點(diǎn)，在課堂教學(xué)中引入案例突破教學(xué)重難點(diǎn)，爭(zhēng)取學(xué)生的薄弱

環(huán)節(jié)布置課后任務(wù)鞏固教學(xué)知識(shí)點(diǎn)。

整個(gè)教學(xué)采用線上線下相結(jié)合的模式，借助信息化手段，以學(xué)

生為主體，自主學(xué)習(xí)探究教師輔助加以引導(dǎo)，完成理論實(shí)踐一體化

的教學(xué)。同時(shí)加強(qiáng)德育滲透，注重學(xué)生全面發(fā)展，在教學(xué)過(guò)程中注

重引導(dǎo)和培養(yǎng)學(xué)生的愛(ài)崗敬業(yè)堅(jiān)持不懈的職業(yè)精神，以及精益求

精開(kāi)拓創(chuàng)新的藝術(shù)家精神。

"本課程采用探究式教學(xué)方法，分為三大任務(wù)：一是基礎(chǔ)理論部

分，通過(guò)學(xué)生講解，教師總結(jié)。二是學(xué)生分享分析作品，在相互學(xué)

教學(xué)方法習(xí)中共同提高，加深印象。三是將專(zhuān)業(yè)教育滲透到教學(xué)中，實(shí)踐教

學(xué)案例的選取，以學(xué)生專(zhuān)業(yè)領(lǐng)域?yàn)楸尘?，充分發(fā)揮學(xué)生的主體地

位，為后續(xù)的專(zhuān)業(yè)學(xué)習(xí)打下良好的基礎(chǔ)。

教學(xué)資源電子教學(xué)資料（如PPT,知識(shí)筆記，微課視頻）、職教云平臺(tái)

與手段等，輔助學(xué)生自主學(xué)習(xí)和探究，解決教學(xué)重難點(diǎn)，提高學(xué)習(xí)效率。

教學(xué)實(shí)施

課前

教學(xué)資

教師活動(dòng)學(xué)生活動(dòng)源與手設(shè)計(jì)意圖

段

1.學(xué)生領(lǐng)取任務(wù)單，借助職L教學(xué)資1.學(xué)生預(yù)習(xí)，為課

教云微課初步了解HTML簡(jiǎn)源：中做準(zhǔn)備，培養(yǎng)學(xué)

L發(fā)布學(xué)習(xí)資

介，了解常用的網(wǎng)頁(yè)制作工教學(xué)生的自主學(xué)習(xí)能

源，比如：教學(xué)

具。PPT、知力。

PPT、知識(shí)清單

識(shí)清單、2.教師通過(guò)作業(yè)

等，下達(dá)任務(wù)。

職教云反饋掌握學(xué)生的

2.查看學(xué)生提交

微課。預(yù)習(xí)情況，確定教

職教云平臺(tái)作

2.教學(xué)手學(xué)難點(diǎn)。

業(yè)，根據(jù)提交作

段：

業(yè)調(diào)整教學(xué)策

職教云

略，確定教學(xué)難

平臺(tái)作

點(diǎn)O

業(yè)提交

功能。

課中

第一課時(shí)

（講解HTML5發(fā)展歷程、HTML5優(yōu)勢(shì)、HTML5瀏覽器支持情

況、創(chuàng)建第一個(gè)HTML5頁(yè)面）

1本課時(shí)內(nèi)容學(xué)習(xí)

令分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：

什么是HTML5?為什么要學(xué)習(xí)HTML5語(yǔ)言呢？

請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。

教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)?/p>

?HTML5是超文本標(biāo)簽語(yǔ)言（Hypertextmarkup

language）的第5代版本，目前還處于推廣階段。從

HTML4.0、XHTML至ljHTML5,從某種意義上講，

這是HTML描述性標(biāo)簽語(yǔ)言的一種更加規(guī)范的過(guò)

程。

?隨著時(shí)代的發(fā)展，統(tǒng)一的互聯(lián)網(wǎng)通用標(biāo)準(zhǔn)顯得尤為重

要。在HTML5之前，由于各個(gè)瀏覽器之間的標(biāo)準(zhǔn)不

統(tǒng)一，給網(wǎng)站開(kāi)發(fā)人員帶來(lái)了很大的麻煩。HTML5

的目標(biāo)就是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)。在

HTML5平臺(tái)上，視頻、音頻、圖像、動(dòng)畫(huà)以及同電

教學(xué)過(guò)程

腦的交互都被標(biāo)準(zhǔn)化。

?2014年10月29日，萬(wàn)維網(wǎng)聯(lián)盟宣布，經(jīng)過(guò)8年的艱

辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于制定完成，并公開(kāi)發(fā)

布。HTML5將會(huì)逐漸取代HTML4.01、XHTML1.0

標(biāo)準(zhǔn)，引領(lǐng)時(shí)代的潮流，開(kāi)創(chuàng)互聯(lián)網(wǎng)的新時(shí)代。

令知識(shí)點(diǎn)講解

＞講解“HTML發(fā)展歷程”

（1）教師微課展示對(duì)“HTML語(yǔ)言”的概念及發(fā)展歷史進(jìn)

行簡(jiǎn)單介紹。

（2）教師微課展示對(duì)HTML從2.0版到3.2版、4.0版，

再到1999年的4.01版的各個(gè)版本的區(qū)別與聯(lián)系。

（3）教師微課展示對(duì)HTML5出現(xiàn)的原囚及背景進(jìn)行介

紹。

（4）教師微課展示對(duì)HTML5的出現(xiàn)與發(fā)展進(jìn)行講解，并

分析其優(yōu)缺點(diǎn)。

（5）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“HTML5優(yōu)勢(shì)”

（1）教師展示PPT指出HTML5增加了很多新功能和新特

性。

（2）教師展示PPT,針對(duì)HTML5的“解決了跨瀏覽器問(wèn)

題、新增了多個(gè)新特性、用戶(hù)優(yōu)先的原則、化繁為

簡(jiǎn)的優(yōu)勢(shì)”優(yōu)勢(shì)分別進(jìn)行講解，并聯(lián)系實(shí)際舉例說(shuō)

明。

（3）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“HTML5瀏覽器支持情況”

（1）教師通過(guò)PPT展示一些常見(jiàn)瀏覽器，并進(jìn)行匯總。

（2）教師展示PPT分別講解IE瀏覽器、火狐瀏覽器、

Google瀏覽器、Safari瀏覽器、Opera瀏覽器對(duì)

HTML5語(yǔ)言新功能和新特性的瀏覽器支持情況。

（3）教師分別對(duì)Web標(biāo)準(zhǔn)的“結(jié)構(gòu)標(biāo)準(zhǔn)”、“表現(xiàn)標(biāo)準(zhǔn)”

IE瀏覽已火Ctaauc

倒覺(jué)

GarwaaOsOopaaffl?a

及“行為標(biāo)準(zhǔn)”進(jìn)行詳細(xì)講解，并分別舉例說(shuō)明。

（4）教師分析這些瀏覽器紛紛朝著HTML5的方向邁進(jìn)，

指出HTML5的時(shí)代即將來(lái)臨。

（5）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“創(chuàng)建第一個(gè)HTML5頁(yè)面”

（1）教師和學(xué)生互動(dòng)：我們知道，創(chuàng)建文檔可以使用

word,創(chuàng)建數(shù)據(jù)表可以使用excel,那么創(chuàng)建HTML網(wǎng)頁(yè)可以

使用哪些工具呢？網(wǎng)頁(yè)制作過(guò)程中，創(chuàng)建HMTL5網(wǎng)頁(yè)源代

碼的「具很多,如Fditphis、notepad++xsublime等c

（2）教師指出實(shí)際工作中，最常用的網(wǎng)頁(yè)制作工具是

HBuildero

⑶教師打開(kāi)HBuilder工具，對(duì)HBuilder工具的常見(jiàn)操作

進(jìn)行演示說(shuō)明。

(4)教師打開(kāi)HBuilder,新建一個(gè)HTML5默認(rèn)文檔，演

示如何編寫(xiě)、修改并保存HTML5代碼。

文例F)Md)SA(DX義(O)&WS)MG)*?0)運(yùn)行E發(fā)行＜B)IIKDMKV)

+??N槽索(雙擊Ctrl)?邊改邊1式?

HKQ>■■<S3A-A

a,，▼H

出目管ITH?|rxdmple01.htmla?WebJL?-D

1<IOOCTY?ht?l>

?0"??ZJ<>

2-<htal>；

■Qprojectl

4<?tt?Ch?r$tt?-UTF-B">

tong5

0_________________6</M?d>

QrampMUMmlA<body>

8</body>

9</htal>

(5)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

令階段小結(jié)

＞小結(jié)

重點(diǎn)：創(chuàng)建第一個(gè)HTML5頁(yè)面。

＞答疑

教師詢(xún)問(wèn)學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)

生不理解的知識(shí)點(diǎn)給與解釋。

令鞏固練習(xí)

＞鞏固本課時(shí)知識(shí)點(diǎn)

學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回

顧。以此使學(xué)生了解HTML5發(fā)展歷程、HTML5優(yōu)勢(shì)、HTML5

瀏覽器支持情況，并能夠使用HBuilder創(chuàng)建一個(gè)HTML5頁(yè)

面。

第二課時(shí)

（講解HTML5文檔基本格式、HTML5語(yǔ)法、標(biāo)簽的屬性、

HTML5文檔頭部相關(guān)標(biāo)簽）

U復(fù)習(xí)上節(jié)課內(nèi)容

，本課時(shí)內(nèi)容學(xué)習(xí)

令分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：

學(xué)習(xí)任何一門(mén)語(yǔ)言，都要首先掌握它的基本格式，就像寫(xiě)

信需要符合書(shū)信的格式要求一樣。HTML5標(biāo)簽語(yǔ)言也不例

外，同樣需要遵從一定的規(guī)范。請(qǐng)大家討論下：使用

HBuilder新建HTML5默認(rèn)文檔時(shí)，HTML5文檔的基本格式

包括哪些標(biāo)簽？

請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。

教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)?/p>

?v!DOCTYPE>標(biāo)簽

<!DOCTYPE>標(biāo)簽標(biāo)簽位于文檔的最前面，用于向?yàn)g覽

器說(shuō)明當(dāng)前文檔使用哪種HTML或XHTML標(biāo)準(zhǔn)規(guī)范。

?標(biāo)簽

標(biāo)簽位于<!doctype>標(biāo)簽之后，也稱(chēng)為根標(biāo)簽，用

于告知瀏覽器其自身是一個(gè)HTML文檔。

?<head>標(biāo)簽

<head>標(biāo)簽用于定義HTML文檔的頭部信息，也稱(chēng)為頭

部標(biāo)簽。

?<body>標(biāo)簽

<body>標(biāo)簽用于定義HTML文檔所要顯示的內(nèi)容，也稱(chēng)

為主體標(biāo)簽。

令知識(shí)點(diǎn)講解

>講解“HTML5文檔基本格式”

（1）、教師通過(guò)Dreamweaver工具新建默認(rèn)文檔，并指出

默認(rèn)文檔中會(huì)自帶一些源代碼。

<!doctypehtml>

<html>

<head>

<metacharset=nutf-8H>

無(wú)標(biāo)題文檔〈/title〉

</head>

<body>

＜/body＞

＜/html＞

(2)、教師分析自帶的源代碼，講解HTML5文檔的基本

格式及構(gòu)成標(biāo)簽。

(3)、教師讓學(xué)生自行嘗試,理解＜!DOCTYPE＞文檔類(lèi)型

聲明、根標(biāo)簽、＜head＞頭部標(biāo)簽、＜body＞主體標(biāo)簽的語(yǔ)

義及用法。

(4)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“HTML5語(yǔ)法”

(1)＞教師展示PPT對(duì)“HTML5語(yǔ)法”進(jìn)行簡(jiǎn)單介紹。

(2)、教師展示PPT,對(duì)“HTML5語(yǔ)法”規(guī)則進(jìn)行分析,

并與之前的各種版本進(jìn)行對(duì)比分析。

(3)、教師針對(duì)HTML5語(yǔ)法中的“標(biāo)簽不區(qū)分大小寫(xiě)、

允許屬性值不使用引號(hào)、允許部分屬性值的屬性省略”通過(guò)代

碼演示，并舉例說(shuō)明。

(4)、學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“HTML標(biāo)簽”

(1)＞教師展示PPT對(duì)“單標(biāo)簽與雙標(biāo)簽”、“注釋標(biāo)簽”

的概念進(jìn)行講解，并指出“單標(biāo)簽與雙標(biāo)簽”的不同。

(2)、教師舉例說(shuō)明常見(jiàn)的單標(biāo)簽、雙標(biāo)簽以及注釋標(biāo)簽。

(3)、教師通過(guò)代碼對(duì)“單標(biāo)簽與雙標(biāo)簽”、“注釋標(biāo)簽”

的使用方法進(jìn)行演示。

(4)、學(xué)牛練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“標(biāo)簽的屬性”

11)、教師和學(xué)生互動(dòng)：在網(wǎng)頁(yè)制作時(shí)，如果大家想要控

制標(biāo)簽的樣式，比如：希望標(biāo)題文本的字體為“微

軟雅黑”且居中顯示，或者段落文本中的某些名詞

顏色突出顯示等問(wèn)題。此時(shí)僅僅依靠HTML標(biāo)簽的

默認(rèn)顯示樣式已經(jīng)不能滿(mǎn)足需求了，需要使用

“HTML標(biāo)簽的屬性”進(jìn)行控制。

(2)、教師展示PPT對(duì)“標(biāo)簽的屬性”進(jìn)行講解，并使用

代碼進(jìn)行實(shí)時(shí)演示。

13)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“HTML5文檔頭部相關(guān)標(biāo)簽”

11)、教師展示PPT對(duì)“HTML文檔頭部相關(guān)標(biāo)簽”進(jìn)行

講解。

(2)＞教師分別對(duì)vtitle＞標(biāo)簽、vmeta/＞標(biāo)簽、vlink＞標(biāo)

簽及＜style＞標(biāo)簽的基本語(yǔ)法格式進(jìn)行講解，并進(jìn)行代碼演示。

（3）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

令階段小結(jié)

＞小結(jié)

重點(diǎn)：HTML5語(yǔ)法、HTML5標(biāo)簽、標(biāo)簽的屬性。

＞答疑

教師詢(xún)問(wèn)學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)

生不理解的知識(shí)點(diǎn)給與解釋。

令鞏固練習(xí)

＞鞏固本課時(shí)知識(shí)點(diǎn)

學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回

顧。以此使學(xué)生了解HTML5發(fā)展歷程、HTML5優(yōu)勢(shì)、HTML5

瀏覽器支持情況，并熟練地掌握HTML5語(yǔ)法、HTML5標(biāo)簽

及屬性的使用。

令布置作業(yè)

＞完成“補(bǔ)充案例”，通過(guò)平臺(tái)提交給教師，教師下節(jié)課

進(jìn)行點(diǎn)評(píng)。

＞預(yù)習(xí)L3節(jié)【文本控制標(biāo)簽】。

第三課時(shí)

（講解標(biāo)題和段落標(biāo)簽、文本格式化標(biāo)簽、特殊字符標(biāo)簽）

」復(fù)習(xí)上節(jié)課內(nèi)容

在講解本節(jié)內(nèi)容前，拋出以下問(wèn)題讓學(xué)生回答，以復(fù)習(xí)上

節(jié)課內(nèi)容。

1、簡(jiǎn)要描述“HTML5語(yǔ)法”，并舉例說(shuō)明“HTML5語(yǔ)

法”相對(duì)于以前的語(yǔ)法格式有哪些新變化？

答案：

?標(biāo)簽不區(qū)分大小寫(xiě)

HTML5采用寬松的語(yǔ)法格式，標(biāo)簽可以不區(qū)分大小

寫(xiě)，這是HTML5語(yǔ)法變化的重要體現(xiàn)。例如：

＜P＞這里的p標(biāo)簽大小寫(xiě)不一致＜/P＞

在上面的代碼中，雖然p標(biāo)簽的開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽

大小寫(xiě)并不匹配，但是在HTML5語(yǔ)法中是完全合法

的。

?允許屬性值不使用引號(hào)

在HTML5語(yǔ)法中，屬性值不放在引號(hào)中也是正確

的。例如：

＜inputchecked=atype=checkbox/＞

＜inputreadonly=readonlytype=text/＞

以上代碼都是完全符合HTML5規(guī)范的，等價(jià)于：

<inputchecked=nantype=ncheckbox"/>

<inputreadonly="readonlyHtype="textn/>

?允許部分屬性值的屬性省略

在HTML5中，部分標(biāo)志性屬性的屬性值可以省

略。例如：

<inputchecked=ncheckedHtype=ncheckbox"/>

<inputreadonly="readonly"type="textn/>

說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的回答情況，對(duì)以上問(wèn)題

進(jìn)行簡(jiǎn)單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。

，本課時(shí)內(nèi)容學(xué)習(xí)

<分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：

我們知道，一篇結(jié)構(gòu)清晰的文章通常都有標(biāo)題和段落，那

么如何使用HTML5語(yǔ)言創(chuàng)建網(wǎng)頁(yè)中的標(biāo)題和段落呢？

教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)?/p>

?為了使網(wǎng)頁(yè)更具有語(yǔ)義化，我們經(jīng)常會(huì)在頁(yè)面中用到

標(biāo)題標(biāo)簽，HTML5提供了6個(gè)等級(jí)的標(biāo)題，B|J<hl>>

<h2>><h3>><h4>、<h5>和<h6>,從<hl〉到<h6>重要

性遞減。其基本語(yǔ)法格式如下：

<hnalign="對(duì)齊方式”標(biāo)題文本</hn>

該語(yǔ)法中n的取值為1到6,align屬性為可選屬性，用

于指定標(biāo)題的對(duì)齊方式。

?同樣地，網(wǎng)頁(yè)也可以分為若干個(gè)段落，而段落的標(biāo)簽

就是vp>。默認(rèn)情況下，文本在段落中會(huì)根據(jù)瀏覽器

窗口的大小自動(dòng)換行。<p>是HTML文檔中最常見(jiàn)的

標(biāo)簽，其基本語(yǔ)法格式如下：

<palign="對(duì)齊方式”〉段落文本</p>

該語(yǔ)法中align屬性為<p>標(biāo)簽的可選屬性，和標(biāo)題標(biāo)簽

<hl>~vh6>一樣，同樣可以使用align屬性設(shè)置段落文本的對(duì)

齊方式。

令知識(shí)點(diǎn)講解

>講解“標(biāo)題和段落標(biāo)簽”

（1）、教師展示PPT對(duì)“標(biāo)題標(biāo)簽”、“段落標(biāo)簽”的概

念及基本語(yǔ)法格式進(jìn)行講解。

（2）、教師對(duì)“標(biāo)題標(biāo)簽”、“段落標(biāo)簽”的顯示效果通

過(guò)代碼進(jìn)行演示。

（3）、教師分別對(duì)“標(biāo)題標(biāo)簽”及“段落標(biāo)簽”的align

屬性進(jìn)行講解并通過(guò)代碼進(jìn)行演示。

（4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“文本格式化標(biāo)簽”

（1）＞教師和學(xué)生互動(dòng)：使用“HTML標(biāo)簽的屬性”可以

設(shè)置文本的對(duì)齊方式、顏色等，那么，如果想要為

文字設(shè)置粗體、斜體或下劃線效果需要怎么辦呢？

下面，我們來(lái)學(xué)習(xí)“文本格式化標(biāo)簽”。

（2）、教師展示PPT對(duì)“文本格式化標(biāo)簽”進(jìn)行講解，并

使用代碼進(jìn)行實(shí)時(shí)演示。

（3）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“特殊字符標(biāo)簽”

11）、教師和學(xué)生互動(dòng)：瀏覽網(wǎng)頁(yè)時(shí)常常會(huì)看到一些包含

特殊字符的文本，如數(shù)學(xué)公式、版權(quán)信息等。那么

如何在網(wǎng)頁(yè)上顯示這些包含特殊字符的文本呢？下

面，我們來(lái)學(xué)習(xí)特殊字符標(biāo)簽。

（2）、教師展示PPT對(duì)“常用特殊字符標(biāo)簽”進(jìn)行講解,

分析“字符標(biāo)簽”的構(gòu)成，并使用代碼進(jìn)行實(shí)時(shí)演

示。

（3）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

令階段小結(jié)

＞小結(jié)

重點(diǎn)：段落標(biāo)簽、文本格式化標(biāo)簽。

＞答疑

教師詢(xún)問(wèn)學(xué)牛對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)

生不理解的知識(shí)點(diǎn)給與解釋。

令鞏固練習(xí)

＞鞏固本課時(shí)知識(shí)點(diǎn)

學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行同

顧。以此使學(xué)生掌握段落標(biāo)簽、文本格式化標(biāo)簽、特殊字

符標(biāo)簽的使用。

＞通過(guò)“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)

教師分發(fā)測(cè)試題目及案例素材給學(xué)生，對(duì)于掌握較好的同

學(xué)，可以通過(guò)補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。

令布置作業(yè)

＞完成“補(bǔ)充案例”，通過(guò)平臺(tái)提交給教師，教師下節(jié)課

進(jìn)行點(diǎn)評(píng)。

＞預(yù)習(xí)1.4節(jié)【圖像標(biāo)簽】。

第四課時(shí)

（講解常用圖像格式、圖像標(biāo)簽＜img/＞、絕對(duì)路徑和相對(duì)路

徑）

I、復(fù)習(xí)上節(jié)課內(nèi)容

在講解本節(jié)內(nèi)容前，拋出以下問(wèn)題讓學(xué)生回答，以復(fù)習(xí)上

節(jié)課內(nèi)容。

1、在上節(jié)課中，我們學(xué)習(xí)了文本格式化標(biāo)簽。那么，在文

本格式化標(biāo)簽中，如何將文字設(shè)置為粗體呢？

答案：

將文字以粗體方式顯示的標(biāo)簽是：＜心標(biāo)簽或＜sm）ng＞標(biāo)

簽。其中，使用＜b＞標(biāo)簽定義文本粗體，〈strong〉標(biāo)簽定義強(qiáng)

調(diào)文本。

說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的回答情況，對(duì)以上問(wèn)題

進(jìn)行簡(jiǎn)單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。

，本課時(shí)內(nèi)容學(xué)習(xí)

令分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：

在網(wǎng)站中，我們可以看到絢麗多彩的圖片。那么，目前網(wǎng)

頁(yè)上常用的圖像格式有哪些呢，請(qǐng)結(jié)合它們的優(yōu)缺點(diǎn)進(jìn)行

說(shuō)明？

請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。

教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)?/p>

目前網(wǎng)頁(yè)上常用的圖像格式主要有GIF、JPG和PNG三

種，具體區(qū)別如下：

?GIF格式

GIF最突出的地方就是它支持動(dòng)畫(huà)，同時(shí)GIF也是一種無(wú)

損的圖像格式。另外，GIF支持透明（全透明或全不透明），

因此很適合在互聯(lián)網(wǎng)上使用。但GIF只能處理256種顏色。

在網(wǎng)頁(yè)制作中，GIF格式常常用于Logo、小圖標(biāo)及其他色彩

相對(duì)單一的圖像。

?PNG格式

PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。

相對(duì)于GIF,PNG最大的優(yōu)勢(shì)是體積更小，支持alpha透明

（全透明，半透明，全不透明），并且顏色過(guò)渡更平滑，但

PNG不支持動(dòng)畫(huà)。

?JPG格式

JPG所能顯示的顏色比GIF卻PNG要多的多，可以用來(lái)

保存超過(guò)256種顏色的圖像，但是JPG是一種有損壓縮的圖

像格式，網(wǎng)頁(yè)制作過(guò)程中類(lèi)似于照片的圖像比如橫幅廣告

(banner)＞商品圖片、較大的插圖等都可以保存為JPG格

式。

簡(jiǎn)而言之，在網(wǎng)頁(yè)中小圖片或網(wǎng)頁(yè)基本元素如圖標(biāo)、按

鈕等考慮GIF或PNG-8,半透明圖像考慮PNG-24,類(lèi)似照

片的圖像則考慮JPGo

令知識(shí)點(diǎn)講解

＞講解“常用圖像格式”

11)、教師帶領(lǐng)學(xué)生查看網(wǎng)頁(yè)中的圖像，總結(jié)網(wǎng)頁(yè)中常用

的圖像格式。

(2)、教師展示PPT對(duì)GIF、JPG和PNG三種常用的圖像

格式進(jìn)行講解，比較三種格式的異同，并指出其優(yōu)

缺點(diǎn)。

(3)、學(xué)生提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“圖像標(biāo)簽

(1)、教師和學(xué)生互動(dòng)：在網(wǎng)頁(yè)中隨處可見(jiàn)各種各樣的圖

像，比如：廣告圖、推廣圖、輪播圖等。大家在網(wǎng)頁(yè)中都見(jiàn)過(guò)

哪些圖片呢？然后，教師使用PPT展示網(wǎng)頁(yè)中各式各樣的圖片

效果。

(2)、教師展示PPT對(duì)“圖像標(biāo)簽”及其屬性進(jìn)行講解,

并使用代碼進(jìn)行實(shí)時(shí)演示。

(3)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“絕對(duì)路徑和相對(duì)路徑”

(1)、教師通過(guò)文件夾的層級(jí)關(guān)系對(duì)“路徑”進(jìn)行講解,

并指出網(wǎng)頁(yè)中的路徑通常分為“相對(duì)路徑與絕對(duì)路徑”兩種。

(2)教師展示PPT對(duì)“絕對(duì)路徑”進(jìn)行講解，并舉例說(shuō)

明。

(3)、教師展示PPT對(duì)“相對(duì)路徑”進(jìn)行講解，并通過(guò)

“圖像文件和html文件”的不同位置進(jìn)行演示。

(4)、學(xué)生提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。

說(shuō)明：在網(wǎng)頁(yè)制作時(shí)可適時(shí)停下來(lái)，讓學(xué)生自行嘗試。小

組之間可以協(xié)作討論，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

令階段小結(jié)

＞小結(jié)

重點(diǎn)：圖像標(biāo)簽。

》答疑

教師詢(xún)問(wèn)學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)

生不理解的知識(shí)點(diǎn)給與解釋。

令鞏固練習(xí)

＞鞏固本課時(shí)知識(shí)點(diǎn)

學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回

顧。以此使學(xué)生更熟練地掌握?qǐng)D像標(biāo)簽＜img/＞的使用，并

能夠區(qū)分圖像的相對(duì)路徑與絕對(duì)路徑的不同。

＞通過(guò)“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)

教師分發(fā)測(cè)試題目及案例素材給學(xué)生，對(duì)于掌握較好的同

學(xué)，可以通過(guò)補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。

令布置作業(yè)

＞完成“補(bǔ)充案例”，通過(guò)平臺(tái)提交給教師，教師下節(jié)課

進(jìn)行點(diǎn)評(píng)。

＞預(yù)習(xí)1.5節(jié)【階段案例一制作學(xué)院簡(jiǎn)介頁(yè)面】。

第五課時(shí)

（講解制作學(xué)院簡(jiǎn)介頁(yè)面）

」復(fù)習(xí)上節(jié)課內(nèi)容

[本課時(shí)內(nèi)容學(xué)習(xí)

令分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：

下列選項(xiàng)中，哪一個(gè)屬性不是文本的標(biāo)簽屬性？（）0

A、nbsp;B、alignC、colorD、size

答案：A

align、color、face都是＜p＞標(biāo)簽的屬性，align屬性設(shè)置

段落文本的對(duì)齊方式,color屬性設(shè)置文本的顏色，size屬性設(shè)

置文本的大小。只有“nbsp;”選項(xiàng)不是文本的標(biāo)簽屬性，而

是一個(gè)代表空格符的特殊標(biāo)簽。

說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的回答情況，對(duì)以上問(wèn)

題進(jìn)行簡(jiǎn)單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。

令案例講解

＞案例描述

VWMIBMKWarm????

?fuc?miwaHMEK，MEI

?*?????I1KWL

BOMS.."個(gè)iwaaxWWMMSorovv.

本章前兒節(jié)重點(diǎn)講解了HTML5語(yǔ)法及標(biāo)簽、文本控制標(biāo)

簽以及圖像標(biāo)簽等。為了使讀者能夠更好地認(rèn)識(shí)HTML5,本

節(jié)將通過(guò)案例的形式分步驟地制作一個(gè)HTML5學(xué)院簡(jiǎn)介頁(yè)

面，默認(rèn)效果如下圖所示。

＞案例分析

分析“制作學(xué)院簡(jiǎn)介頁(yè)面”的構(gòu)成元素，將其拆解為幾

個(gè)部分，分析各部分使用了哪些HTML5標(biāo)簽及應(yīng)用了哪些

HTML5標(biāo)簽的屬性。

＞案例實(shí)現(xiàn)

教師帶領(lǐng)學(xué)生分步驟地進(jìn)行網(wǎng)頁(yè)制作，通過(guò)分析效果圖、

制作頁(yè)面、制作頁(yè)面鏈接等步驟完成頁(yè)面的制作，并指出

其中需要注意的事項(xiàng)。

說(shuō)明：在網(wǎng)頁(yè)制作時(shí)可適時(shí)停下來(lái)，讓學(xué)生自行嘗試，

小組之間可以協(xié)作討論，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＜階段小結(jié)

＞小結(jié)

重點(diǎn)：制作學(xué)院簡(jiǎn)介頁(yè)面。

＞答疑

教師詢(xún)問(wèn)學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)

生不理解的知識(shí)點(diǎn)給與解釋。

令鞏固練習(xí)

＞鞏固本課時(shí)知識(shí)點(diǎn)

學(xué)完知識(shí)點(diǎn)后，讓學(xué)生再制作一次“制作學(xué)院簡(jiǎn)介頁(yè)面”。

以此使學(xué)生更熟練地掌握“HTML5語(yǔ)法、文本控制標(biāo)簽、

圖像標(biāo)簽”等知識(shí)點(diǎn)，并能夠通過(guò)創(chuàng)建超鏈接來(lái)實(shí)現(xiàn)頁(yè)面

間的跳轉(zhuǎn)。

＞通過(guò)“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)

教師分發(fā)測(cè)試題目及案例素材給學(xué)生，對(duì)于掌握較好的同

學(xué)，可以通過(guò)補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。

令布置作業(yè)

＞完成“補(bǔ)充案例”，通過(guò)平臺(tái)提交給教師，教師下節(jié)課

進(jìn)行點(diǎn)評(píng)。

＞復(fù)習(xí)本課時(shí)的所有知識(shí)點(diǎn)和案例，加強(qiáng)鞏固。

第六課時(shí)

（上機(jī)測(cè)試）

教師發(fā)放測(cè)試題目及案例素材，學(xué)生進(jìn)行上機(jī)測(cè)試。以

此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)的掌握情況。測(cè)試完成后將作品通

過(guò)立臺(tái)提交給老師。

上機(jī)測(cè)試主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以

及在代碼中容易出

錯(cuò)的操作步驟。通過(guò)上機(jī)測(cè)試可以考察同學(xué)對(duì)HTML5相關(guān)

標(biāo)記及屬性的熟練程度，以及對(duì)“文本控制標(biāo)記”、“圖

像標(biāo)記”、“超鏈接標(biāo)記”等知識(shí)點(diǎn)的掌握程度。

（作品點(diǎn)評(píng)）

教師對(duì)學(xué)生的提交的上機(jī)測(cè)試作品進(jìn)行點(diǎn)評(píng)，指出代

碼口容易出現(xiàn)bug的地方，并給與解答。

課后

教學(xué)資

教師活動(dòng)學(xué)生活動(dòng)源與手設(shè)計(jì)意圖

段

根據(jù)課中修改意見(jiàn)，繼續(xù)完職教云內(nèi)化知識(shí)，學(xué)以致

教師在職教云平

善網(wǎng)頁(yè)簡(jiǎn)介頁(yè)面。平臺(tái)作用。

臺(tái)布置拓展任

業(yè)提交

務(wù)。

功能。

教學(xué)評(píng)價(jià)

1.評(píng)價(jià)構(gòu)成：線上學(xué)習(xí)平臺(tái)記錄成績(jī)和線下實(shí)踐操作成績(jī)構(gòu)成。

2.評(píng)價(jià)結(jié)果：為了多元化全過(guò)程考核評(píng)價(jià)，學(xué)生課堂學(xué)習(xí)評(píng)價(jià)表：科學(xué)量化

學(xué)生各環(huán)節(jié)學(xué)習(xí)情況；學(xué)習(xí)周報(bào)：準(zhǔn)確呈現(xiàn)學(xué)生學(xué)習(xí)趨勢(shì)；好友積分排行

表：顯示與同學(xué)好友學(xué)習(xí)情況的對(duì)比。

教學(xué)反思

本教學(xué)設(shè)計(jì)采用線上線下的混合教學(xué)模式，借助信息化手段，以學(xué)

生為主體，自主學(xué)習(xí)探究教師輔助加以引導(dǎo)，完成理論實(shí)踐一體化

教學(xué)效果

的教學(xué)，同時(shí)加強(qiáng)專(zhuān)業(yè)教育，注重學(xué)生全面發(fā)展，在教學(xué)過(guò)程中注

重引導(dǎo)和培養(yǎng)學(xué)生的愛(ài)崗敬業(yè)堅(jiān)持不懈的職業(yè)精神。

1.教學(xué)過(guò)程中引入了職教云平臺(tái)，平臺(tái)雖然給予了學(xué)生較為中肯的

建議，但還缺乏有效的監(jiān)督手段。

診改措施

2.在今后的工作中，將注重對(duì)學(xué)生的成長(zhǎng)性評(píng)價(jià)，努力為學(xué)生的個(gè)

性化學(xué)習(xí)和終身學(xué)習(xí)提供幫助。

教HTML5標(biāo)簽及屬性計(jì)算機(jī)大類(lèi)

學(xué)

專(zhuān)業(yè)大類(lèi)

課

題

所靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)計(jì)算機(jī)應(yīng)用技術(shù)專(zhuān)

屬業(yè)學(xué)生

授課對(duì)象

課

程

所《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程》機(jī)房

選

授課地點(diǎn)

教

材

授6課時(shí)

課

時(shí)

長(zhǎng)

教學(xué)分析

本課程根據(jù)《計(jì)算機(jī)應(yīng)用技術(shù)專(zhuān)業(yè)人才培養(yǎng)方案》，確定該課程是面

向計(jì)算機(jī)相關(guān)專(zhuān)業(yè)的一門(mén)專(zhuān)業(yè)基礎(chǔ)課，通過(guò)本課程的學(xué)習(xí)，學(xué)生能夠了解

內(nèi)

網(wǎng)頁(yè)web發(fā)展歷史及其未來(lái)方向，熟悉網(wǎng)頁(yè)設(shè)計(jì)流程、掌握網(wǎng)絡(luò)中常見(jiàn)的

容

網(wǎng)頁(yè)布局效果及變形和動(dòng)畫(huà)效果，學(xué)會(huì)制作各種企業(yè)、門(mén)戶(hù)、電商類(lèi)網(wǎng)站。

分

“HTML5標(biāo)簽及屬性”選自《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程》第二

析

章節(jié)內(nèi)容，為后面網(wǎng)頁(yè)的制作打下良好的基礎(chǔ)“

授課對(duì)象為高職計(jì)算機(jī)應(yīng)用技術(shù)專(zhuān)業(yè)學(xué)生。根據(jù)學(xué)生學(xué)情分析如下：

1.知識(shí)基礎(chǔ)：本課程開(kāi)設(shè)在大一第二學(xué)期，大部分學(xué)生對(duì)程序設(shè)計(jì)語(yǔ)

學(xué)言有了一定的了解，具備一定的平面設(shè)計(jì)基礎(chǔ)。

情2.能力基礎(chǔ)：通過(guò)前面的學(xué)習(xí)，能熟練的使用電腦，具備簡(jiǎn)單的代碼

分編寫(xiě)能力。

析3.行為習(xí)慣：現(xiàn)代學(xué)生是生活一個(gè)信息化的時(shí)間，學(xué)生喜歡形象化，

活動(dòng)式的教學(xué)內(nèi)容，適應(yīng)從簡(jiǎn)單到復(fù)雜的學(xué)習(xí)模式。對(duì)網(wǎng)頁(yè)升發(fā)比較感興

趣，有較為豐富的網(wǎng)站使用經(jīng)驗(yàn)。

知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)

教1.掌握HTML文檔的能夠使用HTML5分組標(biāo)1.培養(yǎng)學(xué)生計(jì)算機(jī)思維

學(xué)基本結(jié)構(gòu)，能夠熟練簽、頁(yè)面交互標(biāo)簽，實(shí)現(xiàn)的能力，幫助學(xué)生樹(shù)立

目創(chuàng)建HTML文檔。簡(jiǎn)單的網(wǎng)頁(yè)交互效果?？茖W(xué)嚴(yán)謹(jǐn)?shù)呢?fù)責(zé)態(tài)度。

標(biāo)2.掌握HTML的列表2.培養(yǎng)學(xué)生的團(tuán)隊(duì)協(xié)作

標(biāo)簽、超鏈接標(biāo)簽的意識(shí)，自主解決問(wèn)題的

使用。能力。

3.掌握HTML5新增標(biāo)

簽的使用。

4.理解HTML5語(yǔ)義標(biāo)

簽。

教列表標(biāo)簽的使用和頁(yè)面交互標(biāo)簽。

學(xué)

重

點(diǎn)

教列表標(biāo)簽的嵌套應(yīng)用。

學(xué)

難

點(diǎn)

教學(xué)策略

本課以學(xué)生的疑問(wèn)、觀點(diǎn)和觀察結(jié)果為教學(xué)契機(jī)，采用探究式學(xué)習(xí)方

教式。

學(xué)利用職教云平臺(tái)布置課前任務(wù)，通過(guò)學(xué)生完成任務(wù)分析教學(xué)重難點(diǎn)，

組在課堂教學(xué)中引入案例突破教學(xué)重難點(diǎn)，爭(zhēng)取學(xué)生的薄弱環(huán)節(jié)布置課后任

織務(wù)鞏固教學(xué)知識(shí)點(diǎn)。

與整個(gè)教學(xué)采用線上線下相結(jié)合的模式，借助信息化手段，以學(xué)生為主

實(shí)體，自主學(xué)習(xí)探究教師輔助加以引導(dǎo)，完成理論實(shí)踐一體化的教學(xué)。同時(shí)

施加強(qiáng)德育滲透，注重學(xué)生全面發(fā)展，在教學(xué)過(guò)程中注重引導(dǎo)和培養(yǎng)學(xué)生的

愛(ài)崗敬業(yè)堅(jiān)持不懈的職業(yè)精神，以及精益求精開(kāi)拓創(chuàng)新的藝術(shù)家精神。

本課程采用探究式教學(xué)方法，分為三大任務(wù)：一是基礎(chǔ)理論部分，通

教

過(guò)學(xué)生講解，教師總結(jié)。二是學(xué)生分享分析作品，在相互學(xué)習(xí)中共同提高，

學(xué)

加深印象。三是將專(zhuān)業(yè)教育滲透到教學(xué)中，實(shí)踐教學(xué)案例的選取，以學(xué)生

方

專(zhuān)業(yè)領(lǐng)域?yàn)楸尘埃浞职l(fā)揮學(xué)生的主體地位，為后續(xù)的專(zhuān)業(yè)學(xué)習(xí)打下良好

法

的基礎(chǔ)。

教電子教學(xué)資料（如PPT,知識(shí)筆記，微課視頻）、職教云平臺(tái)等，輔

學(xué)助學(xué)生自主學(xué)習(xí)和探究，解決教學(xué)重難點(diǎn)，提高學(xué)習(xí)效率。

資

源

與

手

段

教學(xué)實(shí)施

課前

教師活動(dòng)學(xué)生活動(dòng)教學(xué)資源與設(shè)計(jì)意圖

手段

1.發(fā)布學(xué)1.學(xué)生領(lǐng)取任務(wù)單，借助職教1教.學(xué)資源：1.學(xué)生預(yù)習(xí)，為謖中

習(xí)資源，云微課初步了解HTML簡(jiǎn)介，教學(xué)PPT、知做準(zhǔn)備，培養(yǎng)學(xué)生的

比如：教了解常用的網(wǎng)頁(yè)制作工具。識(shí)清宣、職教自主學(xué)習(xí)能力。

學(xué)PPT、云微課。2.教師通過(guò)作業(yè)反

知識(shí)清單2教.學(xué)手段：饋掌握學(xué)生的預(yù)習(xí)

等，下達(dá)職教云平臺(tái)情況，確定教學(xué)難

任務(wù)。作業(yè)提交功點(diǎn)。

2.查看學(xué)能。

生提交職

教云平臺(tái)

作業(yè)，根

據(jù)提交作

業(yè)調(diào)整教

學(xué)策略，

確定教學(xué)

難點(diǎn)。

課中

第一課時(shí)

（講解無(wú)序列表標(biāo)簽、有序列表標(biāo)簽、定義列表標(biāo)簽、列表的嵌套應(yīng)

用、超鏈接標(biāo)簽）

［復(fù)習(xí)上節(jié)課內(nèi)容

在講解本節(jié)內(nèi)容前，拋出以下問(wèn)題讓學(xué)生回答，以復(fù)習(xí)第一章“HTML

概述”的基礎(chǔ)知識(shí)。

1、在上一章中，我們學(xué)習(xí)了HTML5的相關(guān)標(biāo)記及其屬性。在

HTML標(biāo)記中，主要分為單標(biāo)記和雙標(biāo)記兩種。那么，什么是“單標(biāo)

記”呢？

教答案：

營(yíng)標(biāo)記也稱(chēng)空標(biāo)記，是指用一個(gè)標(biāo)記符號(hào)即可完整地描述某個(gè)功

學(xué)

能的標(biāo)記。其基本語(yǔ)法格式如下：

過(guò)

程＜標(biāo)記名/＞

例如：

<hr/>

2、瀏覽網(wǎng)頁(yè)時(shí)，我們經(jīng)常閱讀很多的段落文字。在網(wǎng)頁(yè)制作時(shí)，

同樣需要使用段落標(biāo)記搭建頁(yè)面結(jié)構(gòu)，那么如何設(shè)置段落標(biāo)記＜p＞的對(duì)

齊屬性呢？

答案：

段落標(biāo)記＜p＞的基本語(yǔ)法格式如下：

＜palign="對(duì)齊方式”＞段落文本＜/p＞

該語(yǔ)法中align屬性為＜p＞標(biāo)記的可選屬性，使用align屬性可以設(shè)

置標(biāo)題和段落的對(duì)齊方式，其取值如下：

?left設(shè)置標(biāo)題文字左對(duì)齊（默認(rèn)值）

?center設(shè)置標(biāo)題文字居中對(duì)齊

?right設(shè)置標(biāo)題文字右對(duì)齊

說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的叵答情況，對(duì)以上問(wèn)題進(jìn)行簡(jiǎn)單

講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。

[本課時(shí)內(nèi)容學(xué)習(xí)

令分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：

為了使網(wǎng)頁(yè)更易讀，經(jīng)常將網(wǎng)頁(yè)信息以列表的形式呈現(xiàn)，例如，淘

寶商城首頁(yè)的商品服務(wù)分類(lèi)、排列有序，呈現(xiàn)為列表的形式。其實(shí)，在

HTML5中，提供了3種常用的列表，分別為無(wú)序列表、有序列表和定義

列表。那么，請(qǐng)舉例說(shuō)明什么是“無(wú)序列表”和“有序列表”？它們之

間有什么區(qū)別？

請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。

教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)?/p>

?所謂無(wú)序列表就是列表中列表項(xiàng)的前導(dǎo)符號(hào)沒(méi)有一定的次序，

而是用黑點(diǎn)、圓圈、方框等一些特殊符號(hào)標(biāo)識(shí)。無(wú)序列表并不

是使列表項(xiàng)雜亂無(wú)章，而是使列表項(xiàng)的結(jié)構(gòu)更清晰，更合理。

?有序列表是一個(gè)有特定順序的列表項(xiàng)的集合。在有序列表中，

各個(gè)列表項(xiàng)有先后順存之分，它們之間以編號(hào)來(lái)標(biāo)記。使用

＜。1＞標(biāo)簽可以建立有序列表，表項(xiàng)的標(biāo)簽仍為Gi＞。

?無(wú)序列表使用＜ul＞v/ul＞標(biāo)記定義，為具體的列表項(xiàng)。

有序列表使用vol＞＜/ol＞標(biāo)記定義，為具體的列表項(xiàng).

＜知識(shí)點(diǎn)講解

＞講解“ul標(biāo)簽”

（1）、教師展示PPT對(duì)“無(wú)序列表”的概念進(jìn)行講解，并列舉

網(wǎng)頁(yè)中常見(jiàn)的例子進(jìn)行說(shuō)明。

_□H

ID泊物去X+

＜--＞CO:802...☆0：

書(shū)城的支付方式

■貨到時(shí)就

-財(cái)付通

■支付寶

-網(wǎng)銀在線

（2）、教師展示PPT,對(duì)“無(wú)序列表的基本語(yǔ)法格式”及常用屬性

值進(jìn)行講解，并進(jìn)行代碼演示。

（3）、教師指出定義“無(wú)序列表”時(shí)需要注意的問(wèn)題，并給與解答。

（4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“。1標(biāo)簽”

（1）、教師展示PPT對(duì)“有序列表”的概念進(jìn)行講解，并列舉網(wǎng)頁(yè)

中常見(jiàn)的例子進(jìn)行說(shuō)明。

D有序列表x+

＜--＞C0:802...☆?：

網(wǎng)銀在線支付步驟

a.選擇您要使用的銀行；

b.顯示位的應(yīng)付總價(jià)，點(diǎn)擊“付；

c.確認(rèn)您在銀行的預(yù)留信息；

d.輸入您的網(wǎng)銀賬號(hào)、登錄空碼和瞼證碼；

e.支付成功，提示"已完成付款”.

（2）、教師展示PPT,對(duì)“有序列表的基本語(yǔ)法格式”及常用屬性

值進(jìn)行講解，并進(jìn)行代碼演示。

（3）、教師對(duì)比“無(wú)序列表”與“有序列表”的顯示效果，分析其

區(qū)別與聯(lián)系。

（4）、教師指出定義“有序列表”時(shí)需要注意的問(wèn)題，并給與解答。

（5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“dl標(biāo)簽”

（1）、教師展示PPT對(duì)“定義列表”的概念進(jìn)行講解，并列舉網(wǎng)頁(yè)

中常見(jiàn)的例子進(jìn)行說(shuō)明。

（2）、教師展示PPT,對(duì)“定義列表的基本語(yǔ)法格式”及常用屬性

值進(jìn)行講解，并進(jìn)行代碼演示。

（3）、教師對(duì)比“定義列表”與“無(wú)序列表和有序列表”的顯示效

果，分析其區(qū)別與聯(lián)系。

（4）、教師指出定義“定義列表”時(shí)需要注意的問(wèn)題，并給與解答。

（5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“列表的嵌套應(yīng)用“

（1）、教師和學(xué)生互動(dòng)：所謂列表的嵌套應(yīng)用就是無(wú)序列表和有序

列表嵌套混合使用。嵌套列表可以把頁(yè)面分成多個(gè)層次，給

人以很強(qiáng)的層次感。有序列表和無(wú)序列表不僅可以自身嵌套,

而且彼此可以互相嵌套。下面，將對(duì)列表的嵌套進(jìn)行講解。

D列去的而自應(yīng)用x+

■＞C。:8020/prcject2/example0...☆。

網(wǎng)絡(luò)書(shū)城客服中心

?網(wǎng)絡(luò)書(shū)城的支付方式

。貨到付款

。財(cái)付通

。支付寶

。網(wǎng)銀在畿

?網(wǎng)銀在稅支付步驟

1.圖勒要使用的銀行；

2.顯示您的應(yīng)付總價(jià)，點(diǎn)擊"付欺"；

3.%認(rèn)你在銀行的預(yù)留信以；

4.輸入空的網(wǎng)銀賬號(hào)、登錄分碼和驗(yàn)證碼；

5.支付成功，提示”已完成付款".

(2)、教師通過(guò)PPT對(duì)“列表嵌套”在網(wǎng)頁(yè)中的常見(jiàn)效果進(jìn)行展示。

(3)、教師對(duì)“列表嵌套”進(jìn)行講解并通過(guò)代碼進(jìn)行演示。

(4)、教師指出“列表嵌套”時(shí)需要注意的問(wèn)題，并給予解答。

(5)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“創(chuàng)建超鏈接”

(1)、教師和學(xué)生互動(dòng)：教師打開(kāi)360導(dǎo)航網(wǎng)址hup:///,

點(diǎn)擊頁(yè)面中的導(dǎo)航文字，就可以跳轉(zhuǎn)到相應(yīng)的頁(yè)面，這就是通

過(guò)給文字創(chuàng)建超鏈接來(lái)實(shí)現(xiàn)的。教師組織學(xué)生討論：如何通過(guò)

超鏈接實(shí)現(xiàn)頁(yè)面中的跳轉(zhuǎn)呢？

(2)、教師針對(duì)超鏈接的作用以及基本語(yǔ)法格式進(jìn)行講解，并進(jìn)行

演示說(shuō)明。

(3)、教師展示PPT對(duì)“創(chuàng)建超鏈接”進(jìn)行講解，并使用代碼進(jìn)行

實(shí)時(shí)演示。

(4)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“內(nèi)部書(shū)簽”

(1)、教師和學(xué)生互動(dòng)：如果網(wǎng)頁(yè)內(nèi)容較多，頁(yè)面過(guò)長(zhǎng)，瀏覽網(wǎng)頁(yè)

時(shí)就需要不斷地拖動(dòng)滾動(dòng)條，來(lái)查看所需要的內(nèi)容，這樣效

率較低且不方便。那么如何提高信息的檢索速度呢？HTML5

語(yǔ)言提供了一種特殊的鏈接一一錨點(diǎn)鏈接，用戶(hù)能夠快速定

位到目標(biāo)內(nèi)容。

(2)、教師針對(duì)“錨點(diǎn)鏈接”的作用及創(chuàng)建方法進(jìn)行講解，并進(jìn)行

演示說(shuō)明。

武漢的名勝古跡

■困61歸元*II左史占

WWW建于三EDE具黃意二汪(公元223年)?0■也.現(xiàn)在的■“接于1985

華眸外形0.皈印.惟,是客又市的標(biāo)？在就..天下江山第一

8T2H5.與初三拈陽(yáng)嗜,江西”珈開(kāi)際力?二星三大名!F??代聲人?

?-1?8人己中，?去加8空余■?樓,不宜返.白云千枚空尊等.

■tni歷歷漢配掰.芽?■口?伸.日■多關(guān)停tui.遇波：1±使人愁.?己或力

干占圖■.奧使黃修接名?大?.訛琴日的《與史齡中就聽(tīng)UIW上南品》,一為

迂■去長(zhǎng)沙.長(zhǎng)安不見(jiàn)季.中次王笛.二的月首闿T

漢?江ST

（3）、教師對(duì)“創(chuàng)建超鏈接”與“錨點(diǎn)鏈接”進(jìn)行對(duì)比分析，并總

結(jié)其注意事項(xiàng)。

（4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

個(gè)階段小結(jié)

＞小結(jié)

重點(diǎn)：3標(biāo)簽、ol標(biāo)簽、dl標(biāo)簽、列表的嵌套應(yīng)用、超鏈接標(biāo)簽。

＞答疑

教師詢(xún)問(wèn)學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解

的知識(shí)點(diǎn)給與解釋。

e鞏固練習(xí)

＞鞏固本課時(shí)知識(shí)點(diǎn)

學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回顧。以此

使學(xué)生了解無(wú)序列表、有序列表、定義列表的不同，并能熟練地應(yīng)

用3標(biāo)簽、ol標(biāo)簽、dl標(biāo)簽搭建列表結(jié)構(gòu)以及列表的嵌套應(yīng)用、超

鏈接的使用。

＞通過(guò)“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)

教師分發(fā)測(cè)試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以

通過(guò)補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。

_第二課時(shí)_

（講解header標(biāo)簽、nav標(biāo)簽、article標(biāo)簽、aside標(biāo)簽、section

標(biāo)簽、footer標(biāo)簽）

工復(fù)習(xí)上節(jié)課內(nèi)容

在講解本節(jié)內(nèi)容前，拋出以下問(wèn)題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。

在上節(jié)課中，我們已經(jīng)學(xué)習(xí)了如何定義無(wú)序列表和有序列表。本節(jié)

課將學(xué)習(xí)另一種列表一一定義列表。那么，請(qǐng)大家討論下什么是“定

義列表”？以及如何使用“定義列表”？

答案：

請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。

答案：

?定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述，與無(wú)序和有序

列表不同，定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)。

定義列表使用vdl＞＜/dl＞、vdt＞＜/dt＞和＜dd＞＜/dd＞進(jìn)行定義，其中,

標(biāo)記用于指定術(shù)語(yǔ)名詞，＜dd＞v/dd＞標(biāo)記用于對(duì)名詞進(jìn)行

解釋和描述。一對(duì)＜dt＞v/dt＞可以對(duì)應(yīng)多對(duì)＜dd＞＜/dd＞,即可以對(duì)一

個(gè)名詞進(jìn)行多項(xiàng)解釋。

說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的叵答情況，對(duì)以上問(wèn)題進(jìn)行簡(jiǎn)單

講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。

工本課時(shí)內(nèi)容學(xué)習(xí)

令分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：

瀏覽網(wǎng)站時(shí)，我們經(jīng)常需要通過(guò)點(diǎn)擊導(dǎo)航欄目下的鏈接來(lái)查找相應(yīng)

的內(nèi)容，那么如何使用HTML5語(yǔ)言中的相關(guān)標(biāo)記創(chuàng)建網(wǎng)頁(yè)中的導(dǎo)航

欄目呢？

教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)?/p>

在HTML5中，nav標(biāo)簽用于定義導(dǎo)航鏈接，該標(biāo)簽可以將具有導(dǎo)

航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁(yè)面標(biāo)簽的語(yǔ)義更加明確v其中

的導(dǎo)航標(biāo)簽可以鏈接到站點(diǎn)的其他頁(yè)面，或者當(dāng)前頁(yè)的其他部分。例

如下面這段示例代碼：

<nav>

<ul>

<lixahref=n#">WM</li>

<li><ahref="#”>公司概況</li>

<lixahref="#"產(chǎn)品展示</li>

<li><ahref="#">聯(lián)系我們</li>

</ul>

</nav>

在上述代碼中，通過(guò)在nav標(biāo)簽內(nèi)部嵌套無(wú)序列表ul來(lái)搭建導(dǎo)航

結(jié)構(gòu)。通常，一個(gè)HTML頁(yè)面中可以包含多個(gè)nav標(biāo)簽，作為頁(yè)面整

體或不同部分的導(dǎo)航。

弋知識(shí)點(diǎn)講解

>講解“header標(biāo)簽”

(1)、教師展示PPT對(duì)“header標(biāo)簽”的概念及基本語(yǔ)法格式進(jìn)

行講解。

(2)、教師對(duì)“header標(biāo)簽”的顯示效果及應(yīng)用范圍通過(guò)代碼進(jìn)

行演示。

(3)、教師對(duì)“header標(biāo)簽”的注意事項(xiàng)進(jìn)行講解，并使用代碼

進(jìn)行實(shí)時(shí)演示。

(4)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

>講解“nav標(biāo)簽”

(1)、教師和學(xué)生互動(dòng)：打開(kāi)任意公司官網(wǎng)，可以看到首頁(yè)面中的

導(dǎo)航欄，包括首頁(yè)、Java培訓(xùn)、PHP培訓(xùn)、網(wǎng)頁(yè)平面培訓(xùn)等多

個(gè)版塊。在HTML5中，通常通過(guò)nav標(biāo)簽內(nèi)部嵌套無(wú)序列表

ul來(lái)搭建導(dǎo)航結(jié)構(gòu)。一個(gè)HTML頁(yè)面中可以包含多個(gè)nav標(biāo)

簽,下面,我們來(lái)學(xué)習(xí)“nav標(biāo)簽"°

(2)、教師展示PPT對(duì)“nav標(biāo)簽”的適用范圍進(jìn)行總結(jié)，包括傳

統(tǒng)導(dǎo)航條、側(cè)邊欄導(dǎo)航、頁(yè)內(nèi)導(dǎo)航、翻頁(yè)操作等。

(3)、教師針對(duì)“nav標(biāo)簽”進(jìn)行講解，并使用代碼進(jìn)行實(shí)時(shí)演示。

（4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。

＞講解“article標(biāo)簽”