《Web前端設(shè)計(jì)》教案

XXX學(xué)校

課程名稱Web前端開發(fā)授課時(shí)間第1周

第1章初識(shí)HTML5

授課章節(jié)

第2章HTML基礎(chǔ)

1.了解web的由來(lái)以及其與Internet之間的關(guān)系。

2.了解web的相關(guān)概念，包括WWW、Website,URL、Web

Standard、WebBrowserWebServer。

知識(shí)目標(biāo)

3.了解HTML的歷史。

4.精通HTML的結(jié)構(gòu)。

教學(xué)目的

5.了解全局屬性。

1.會(huì)下載安裝開發(fā)工具，

技能目標(biāo)2.會(huì)使用瀏覽器瀏覽HTML文件，

3.會(huì)編寫簡(jiǎn)單的網(wǎng)頁(yè)

教學(xué)重點(diǎn)Web相關(guān)概念,HTML的結(jié)構(gòu)。

教學(xué)難點(diǎn)HTML的結(jié)構(gòu)

教學(xué)方法案例講解法，演示法

教具計(jì)算機(jī)，多媒體

教學(xué)過(guò)程設(shè)計(jì)

（含時(shí)間分配）

第一、二課時(shí)

（講解web的由來(lái)以及其與Intemet之間的關(guān)系，講解Web相關(guān)概念）

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

令分組討論

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

什么是web?了解Web的誕生

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

教師對(duì)上述問(wèn)題進(jìn)行解釋：

?Internet,中文正式譯名為因特網(wǎng)，又叫作國(guó)際互聯(lián)網(wǎng)，是由所有使用公用語(yǔ)

言互相通信的計(jì)算機(jī)連接而組成的全球網(wǎng)絡(luò)。一旦連接到它的任意一個(gè)節(jié)點(diǎn)，

就意味著計(jì)算機(jī)或者其他設(shè)備已經(jīng)連入Internet.目前，Internet的用戶已

經(jīng)遍及全球，截止到2018年，已經(jīng)有超過(guò)40億人在使用Internet,并且它的

用戶數(shù)還在以等比級(jí)數(shù)上升。

?Internet的前身是美國(guó)國(guó)防部高級(jí)研究計(jì)劃局(AdvancedResearchProjects

Agency,ARPA)主持研制的ARPANET網(wǎng)絡(luò)，當(dāng)時(shí)建立這個(gè)網(wǎng)絡(luò)是為了將美國(guó)的

幾臺(tái)軍事和研究用的計(jì)算機(jī)主機(jī)連接起來(lái)。ARPANET網(wǎng)絡(luò)于1969年正式啟用，

但當(dāng)時(shí)僅連接了4臺(tái)計(jì)算機(jī)，供科學(xué)家們進(jìn)行計(jì)算機(jī)聯(lián)網(wǎng)實(shí)驗(yàn)使用。

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

＞講解“Intemet常用的服務(wù)”

⑴、E-mail：電子郵件,具有速度快、成本低、方便靈活等優(yōu)點(diǎn)，是目前Internet

的重要服務(wù)項(xiàng)目之。

(2)、FTP：文件傳輸，用戶通過(guò)該協(xié)議可以進(jìn)行文件傳輸或者文件訪問(wèn)。由于安

全問(wèn)題，其使用場(chǎng)景也越來(lái)越少。

(3)、BBS：電子公告，最早是用來(lái)公布股市價(jià)格等類信息的，現(xiàn)在的BBS已經(jīng)發(fā)

展成功能齊全的社區(qū)，可以實(shí)現(xiàn)信息公告、線上交談、分類討論、經(jīng)驗(yàn)交流、文件共

享等。

(4)、www：WorldWideWeb,中文名為萬(wàn)維網(wǎng)，也被稱為Web,是Internet中

發(fā)展最迅速的部分。

(5)、Web是Internet的一個(gè)應(yīng)用。它的誕生也是極其富有戲劇性的。

＞講解“web的相關(guān)概念”

(1)、www,worldwideweb的縮寫，也可寫為w3、web,中文名為萬(wàn)維網(wǎng)。www

是Internet的最核心部分。它是Internet上那些支持www服務(wù)和HTTP協(xié)議的服務(wù)器

集合。

(2)、Website中文名為網(wǎng)站，是指在Internet上根據(jù)一定的規(guī)則，使用HTML

等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁(yè)的集合。人們可以通過(guò)網(wǎng)站發(fā)布自己想要公

開的資訊，或者利用網(wǎng)站提供相關(guān)的網(wǎng)絡(luò)服務(wù)。

(3)、URL,UniformResourceLocator的縮寫，中文名為統(tǒng)一資源定位符，俗

稱網(wǎng)址，它是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問(wèn)方法的一種簡(jiǎn)潔的表示，是

互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。在WWW上瀏覽或者查詢信息，必須在網(wǎng)頁(yè)瀏覽器上輸入查

詢目標(biāo)的地址。

URL的一般格式如下：

協(xié)議:〃主機(jī)地址(IP地址)+目錄路徑+參數(shù)。

(4)、web應(yīng)用開發(fā)需要遵循的標(biāo)準(zhǔn)就是WebStandard(web標(biāo)準(zhǔn)),這里web

標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)標(biāo)準(zhǔn)(XML、HTML和XHTML),

表現(xiàn)標(biāo)準(zhǔn)(CSS),行為標(biāo)準(zhǔn)是(DOM、JavaScript)。

(5)、web瀏覽器，簡(jiǎn)稱瀏覽器，是一個(gè)顯示網(wǎng)頁(yè)服務(wù)器或者檔案系統(tǒng)內(nèi)的HTML

文件，并讓用戶與這些文件互動(dòng)的軟件。第一個(gè)網(wǎng)頁(yè)瀏覽器就是TimBerners-Lee編

寫的WorldWideWeb,后改名為Nexus。主流瀏覽器如下圖所示：

圖1主流瀏覽器

(6)、Web服務(wù)器的主要功能是提供網(wǎng)上信息瀏覽服務(wù)。Web服務(wù)器可以解析HTTP

協(xié)議，當(dāng)Web服務(wù)器接收到一個(gè)HTTP請(qǐng)求時(shí)，會(huì)返回一個(gè)HTTP響應(yīng)，這樣客戶端就

可以從服務(wù)器上獲取網(wǎng)頁(yè)(HTML),包括CSS、JavaScript,音頻、視頻等資源。

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

＞講解"web開發(fā)”

目前，Web開發(fā)主要分為前端和后端兩部分。前端指的是直接與用戶接觸的網(wǎng)頁(yè)，

網(wǎng)頁(yè)上通常由HTML、CSS、JavaScript等內(nèi)容；后端指的是程序、數(shù)據(jù)庫(kù)和服務(wù)器層

面的開發(fā)。

階段小結(jié)

＞小結(jié)

本章簡(jiǎn)單介紹了Internet的歷史和Web的誕生，重點(diǎn)介紹了Web的相關(guān)概念,

包括www、Website、URL、web標(biāo)準(zhǔn)、web的瀏覽器、Web服務(wù)器。同時(shí)、明確

了web前端開發(fā)需要掌握的內(nèi)容，包括HTML、CSS、JavaScripto

>答疑

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

第三課時(shí)

（講解HTML基礎(chǔ)）

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

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

1、目前，對(duì)HTML5新特性支持最好的瀏覽器是（）。

A、IE6瀏覽器；B、Firefox3.6瀏覽器

C、OperalO.1瀏覽器；D、chrome4.0瀏覽器

答案：D

谷歌瀏覽器對(duì)HTML5及CSS3的兼容性支持較好，而且調(diào)試網(wǎng)頁(yè)非常方便，所以在HTML5

網(wǎng)頁(yè)制作過(guò)程中谷歌瀏覽器是最常用的瀏覽器。

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

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

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

令分組討論

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

學(xué)習(xí)任何一門語(yǔ)言，都要首先掌握它的基本格式，就像寫信需要符合書信的格式要求

一樣。HTML5標(biāo)記語(yǔ)言也不例外，同樣需要遵從一定的規(guī)范。請(qǐng)大家討論下：使用

Dreamweaver新建HTML5默認(rèn)文檔時(shí)，HTML5文檔的基本格式包括哪些標(biāo)記？

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

教師對(duì)上述問(wèn)題進(jìn)行解釋：

?<!DOCTYPE>標(biāo)記

VDOCTYPE〉標(biāo)記標(biāo)記位于文檔的最前面，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種HTML或

XHTML標(biāo)準(zhǔn)規(guī)范。

?標(biāo)記

標(biāo)記位于。doctype>標(biāo)記之后，也稱為根標(biāo)記，用于告知瀏覽器其自身是一個(gè)

HTML文檔。

?<head>標(biāo)記

〈head〉標(biāo)記用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)記。

?<body>標(biāo)記

<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。

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

>講解“標(biāo)記語(yǔ)言”

(1)標(biāo)記語(yǔ)言，是一種將文本(Text)以及與文本相關(guān)的其他信息結(jié)合起來(lái)，

展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。

(2)標(biāo)記語(yǔ)言的種類有很多，常見的有XML、HTML、XHTML等。

>講解“從HTML到XHTML”

HTML,超文本標(biāo)記語(yǔ)言(HyperTextMarkupLanguage,HTML),是為“網(wǎng)頁(yè)創(chuàng)

建和其他可在網(wǎng)頁(yè)瀏覽器中看到的信息”設(shè)計(jì)的一種標(biāo)記語(yǔ)言。人們可以使用

HTML建立自己的Web站點(diǎn)。HTML文檔在瀏覽器上運(yùn)行，并由瀏覽器解析。

?HTML(第1版)：1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布，

這個(gè)版本沒有標(biāo)準(zhǔn)版本，主要是因?yàn)楫?dāng)時(shí)有很多版本的HTML,沒有形成一個(gè)統(tǒng)

一的標(biāo)準(zhǔn)，所以沒有正式的HTMLl.Oo

?HTML2.0：1995年11月作為RFC1866發(fā)布。

?HTML3.2：1997年1月14日，W3c推薦標(biāo)準(zhǔn)，這是第一個(gè)被廣泛使用的標(biāo)準(zhǔn)。

由于該版本年代較早，很多東西都已經(jīng)過(guò)時(shí)，在2018年3月15日被取消作為

標(biāo)準(zhǔn)。官方文檔地址為

https:〃www.w3.org/TR/2018/SPSD-html32-20180315/。

?HTML4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)。

?HTML4.01:1999年12月24日，W3c推薦標(biāo)準(zhǔn)，這也是另一個(gè)被廣泛使用的

標(biāo)準(zhǔn)。官方文檔地址為https：//www.w3.org/TR/1999/REC-html401T9991224/

?XHTML1.0：2000年1月26日，W3c推薦標(biāo)準(zhǔn)。官方文檔地址為

https:〃www.w3.org/TR/2000/REC-xhtmll-20000126/。

,XHTML,可擴(kuò)展超文本標(biāo)記語(yǔ)言(extensibleHyperTextMarkupLanguage,

XHTML),是一種更純潔、更嚴(yán)格、更規(guī)范的HTML代碼。

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

(1)、教師通過(guò)Dreamweaver工具新建默認(rèn)文檔，并指出默認(rèn)文檔中會(huì)自帶一些源代

碼。

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

〈5口0>無(wú)標(biāo)題文檔<八五16>

</head>

<body>

</body>

</html>

(2)、教師分析自帶的源代碼，講解HTML5文檔的基本格式及構(gòu)成標(biāo)記。

(3)、教師讓學(xué)生自行嘗試，理解<!D0CTYPE>文檔類型聲明、<html>根標(biāo)記、<head>

頭部標(biāo)記、<body>主體標(biāo)記的語(yǔ)義及用法。

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

>講解“HTML語(yǔ)法”

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

(2)、教師展示PPT,對(duì)“HTML語(yǔ)法”規(guī)則進(jìn)行分析，并與之前的各種版本進(jìn)行對(duì)比

分析。

(3)、教師針對(duì)HTML語(yǔ)法中的“標(biāo)簽不區(qū)分大小寫、允許屬性值不使用引號(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ō)明常見的單標(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)記的屬性”

(1)、教師和學(xué)生互動(dòng)：在網(wǎng)頁(yè)制作時(shí)，如果大家想要控制標(biāo)記的樣式，比如：希望

標(biāo)題文本的字體為“微軟雅黑”且居中顯示，或者段落文本中的某些名詞顏色突出顯

示等問(wèn)題。此時(shí)僅僅依靠HTML標(biāo)記的默認(rèn)顯示樣式已經(jīng)不能滿足需求了，需要使用

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

(2)、教師展示PPT對(duì)“標(biāo)記的屬性”進(jìn)行講解，并使用代碼進(jìn)行實(shí)時(shí)演示。

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

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

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

(2)、教師分別對(duì)〈title＞標(biāo)記、＜meta/＞標(biāo)記、＜link＞標(biāo)記及〈style〉標(biāo)記的基本語(yǔ)

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

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

令階段小結(jié)

＞小結(jié)

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

＞答疑

教師詢問(wèn)學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎ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)。

＞預(yù)習(xí)2.2節(jié)【全局屬性】。

第四、五課時(shí)

(講解全局屬性、HTML主體元素、無(wú)語(yǔ)義元素、標(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ū)分大小寫

HTML5采用寬松的語(yǔ)法格式，標(biāo)簽可以不區(qū)分大小寫，這是HTML5語(yǔ)法變化的重要體現(xiàn)。

例如：

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

在上面的代碼中，雖然p標(biāo)記的開始標(biāo)記與結(jié)束標(biāo)記大小寫并不匹配，但是在HTML5

語(yǔ)法中是完全合法的。

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

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

＜inputchecked=atype=checkbox/＞

＜inputreadon1y=readon1ytype=text/＞

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

＜inputchecked="a"type="checkbox"/＞

＜inputreadon1y="readon1y"type="text"/＞

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

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

＜inputchecked="checked"type="checkbox"/＞

＜inputreadonly="readonly"type="text"/＞

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

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

1本課時(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)行解釋：

?為了使網(wǎng)頁(yè)更具有語(yǔ)義化，我們經(jīng)常會(huì)在頁(yè)面中用到標(biāo)題標(biāo)記，HTML5提供了

6個(gè)等級(jí)的標(biāo)題，即＜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)記就是＜p＞。默認(rèn)情況下，

文本在段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行?！磒＞是HTML文檔中最常見的

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

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

該語(yǔ)法中align屬性為＜p＞標(biāo)記的可選屬性，和標(biāo)題標(biāo)記＜hl＞~〈h6＞一樣，同樣可以使

用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)行解答。

第六課時(shí)

（制作簡(jiǎn)單的文字頁(yè)面）

綜合運(yùn)用所學(xué)標(biāo)簽，制作一個(gè)簡(jiǎn)單的頁(yè)面，并提交，進(jìn)行作品互評(píng)。

心得

作業(yè)

備注

XXX學(xué)校

課程名稱Web前端開發(fā)授課時(shí)間第2周

授課章節(jié)第2章HTML基礎(chǔ)

了解HTML的注釋方法；

知識(shí)目標(biāo)掌握HTML的格式化元素；

教學(xué)目的

掌握HTML的圖片元素和超鏈接元素

技能目標(biāo)1.會(huì)制作包含圖片和超鏈接的HTML5百科頁(yè)面

HTML5語(yǔ)法、HTML5標(biāo)記及其屬性、文本控制標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)

教學(xué)重點(diǎn)

記

教學(xué)難點(diǎn)HTML5標(biāo)記及屬性、圖像標(biāo)記、超鏈接標(biāo)記

教學(xué)方法案例講解法，演示法

教具計(jì)算機(jī)，多媒體

教學(xué)過(guò)程設(shè)計(jì)

（含時(shí)間分配）

第一課時(shí)

（講解注釋元素、格式化元素）

＞講解“注釋元素”

（1）＜!---〉用于HTML中插入注釋，它的開始標(biāo)簽為結(jié)束標(biāo)簽為一〉，開始

標(biāo)簽和結(jié)束標(biāo)簽不一定在一行，也就是說(shuō)，可以寫多行注釋。瀏覽器不會(huì)顯示注釋。

＞講解“文本格式化元素”

（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)記”

（1）、教師和學(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)記。

＞答疑

教師詢問(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ì)路徑）

說(shuō)明：

將1.4小節(jié)作為兩個(gè)課時(shí)進(jìn)行講解。

1復(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)記是：＜b＞標(biāo)記或〈strong》標(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í)。

1本課時(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ā)表見解。

教師對(duì)上述問(wèn)題進(jìn)行解釋：

目前網(wǎng)頁(yè)上常用的圖像格式主要有GIF、JPG和PNG三種，具體區(qū)別如下：

?GIF格式

GIF最突出的地方就是它支持動(dòng)畫，同時(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)畫。

?JPG格式

JPG所能顯示的顏色比GIF和PNG要多的多，可以用來(lái)保存超過(guò)256種顏色的圖像，但

是JPG是一種有損壓縮的圖像格式，網(wǎng)頁(yè)制作過(guò)程中類似于照片的圖像比如橫幅廣告

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

簡(jiǎn)而言之，在網(wǎng)頁(yè)中小圖片或網(wǎng)頁(yè)基本元素如圖標(biāo)、按鈕等考慮GIF或PNG-8,半透明

圖像考慮PNG-24,類似照片的圖像則考慮JPGo

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

＞講解“常用圖像格式”

(1)、教師帶領(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)記＜img/＞”

（1）、教師和學(xué)生互動(dòng)：在網(wǎng)頁(yè)中隨處可見各種各樣的圖像，比如：廣告圖、推廣圖、

輪播圖等。大家在網(wǎng)頁(yè)中都見過(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)記。

＞答疑

教師詢問(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)記Cimg/＞的使用，并能夠區(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í)【超鏈接標(biāo)記】。

預(yù)習(xí)【階段案例一制作HTML5百科頁(yè)面】。

第四課時(shí)

（講解創(chuàng)建超鏈接、錨點(diǎn)鏈接）

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

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

1、在上節(jié)課中，我們學(xué)習(xí)了圖像標(biāo)記＜img/＞及其〈img/＞標(biāo)記的屬性。那么，請(qǐng)簡(jiǎn)要

說(shuō)明：圖像的alt屬性的用法？

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

教師對(duì)上述問(wèn)題進(jìn)行解釋：

在瀏覽網(wǎng)頁(yè)時(shí)，我們可以發(fā)現(xiàn)由于一些原因圖像可能無(wú)法正常顯示，比如圖片加載錯(cuò)

誤，瀏覽器版本過(guò)低等。因此為頁(yè)面上的圖像加上替換文本是個(gè)很好的習(xí)慣，在圖像

無(wú)法顯示時(shí)告訴用戶該圖片的信息，這就需要使用圖像的alt屬性。

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

令分組討論

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

當(dāng)我們打開一個(gè)網(wǎng)站時(shí)，例如傳智播客官網(wǎng)"http:〃www.itcast.cn/”,通過(guò)點(diǎn)擊頁(yè)

面中的導(dǎo)航或者帶有鏈接地址的文字就可以跳轉(zhuǎn)到不同的頁(yè)面，那么如何實(shí)現(xiàn)網(wǎng)站中

的頁(yè)面跳轉(zhuǎn)呢？

教師對(duì)上述問(wèn)題進(jìn)行解釋：

超鏈接雖然在網(wǎng)頁(yè)中占有不可替代的地位，在HTML5中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用

＜a＞＜/a＞標(biāo)記環(huán)繞需要被鏈接的對(duì)象即可，其基本語(yǔ)法格式如下：

＜ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式"》文本或圖像＜/a＞

在上面的語(yǔ)法中，＜a＞標(biāo)記是一個(gè)行內(nèi)標(biāo)記，用于定義超鏈接，href和target為其常

用屬性，具體解釋如下：

?href：用于指定鏈接目標(biāo)的url地址，當(dāng)為＜a＞標(biāo)記應(yīng)用href屬性時(shí)，它就具

有了超鏈接的功能。

?target：用于指定鏈接頁(yè)面的打開方式，其取值有_self和」3加成兩種，其中

self為默認(rèn)值，意為在原窗口中打開，blank為在新窗口中打開。

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

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

(1)、教師和學(xué)生互動(dòng)：教師打開百度新聞網(wǎng)址http:〃news,baidu.com/,點(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)呢？

Bai好新聞百度一下

A■頁(yè)0內(nèi)國(guó)際軍事財(cái)is蟆樂(lè)體。互聯(lián)網(wǎng)科技游戲女人汽車，產(chǎn)

熱點(diǎn)要聞

?今年清明節(jié)，請(qǐng)幫這100位烈士尋親

■年輕夫妻的絕筆信為誰(shuí)而寫英雄母親鄧玉芬

?一紙繁花I千年古法造紙做活花茂鄉(xiāng)村振興

?全國(guó)公安系統(tǒng)清明主題云詩(shī)會(huì)4日全網(wǎng)播出

?綠水?山這樣”變現(xiàn)"

?為子孫后代呵護(hù)美好家園

?正片來(lái)了！《暗流涌動(dòng)沖國(guó)新儡反恐挑戰(zhàn)》播出

?訪楊豕嶺革命舊址:講好黨史故事讓紅色基因代代科專

?深圳大學(xué)：為雙區(qū)健設(shè)培養(yǎng)高質(zhì)■的創(chuàng)新創(chuàng)業(yè)人才

?黨建弓I領(lǐng)揖州金沙接短惟進(jìn)鄉(xiāng)村16興

?花茂忖：土陶技藝傳承人母先才用1M守?鄉(xiāng)秋

(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)行解答。

＞講解“錨點(diǎn)鏈接”

(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)鏈接，用戶能夠快速定位到目

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

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

(3)、教師對(duì)“創(chuàng)建超鏈接”與“錨點(diǎn)鏈接”進(jìn)行對(duì)比分析，并總結(jié)其注意事項(xiàng)。

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

臺(tái)階段小結(jié)

＞小結(jié)

重點(diǎn)：創(chuàng)建超鏈接、錨點(diǎ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é)生更熟練地掌

握創(chuàng)建超鏈接、錨點(diǎn)鏈接的方法，并能夠通過(guò)創(chuàng)建超鏈接、錨點(diǎn)鏈接來(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)行鞏固。

第五課時(shí)

（講解制作圖文混排的超鏈接頁(yè)面）

＞案例實(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)行解答。

＞通過(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ò)的操作步驟。

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

教師對(duì)學(xué)生的提交的上機(jī)測(cè)試作品進(jìn)行點(diǎn)評(píng)，指出代碼中容易出現(xiàn)bug的地方，

并給與解答，同時(shí)將自己的作品上傳到學(xué)習(xí)通的討論區(qū)。

心得

作業(yè)

備注

XXX學(xué)校

課程名稱Web前端開發(fā)授課時(shí)間第3周

授課章節(jié)第2章HTML基礎(chǔ)

1.掌握結(jié)構(gòu)元素的使用，可以使頁(yè)面分區(qū)更明確。

2.理解分組元素的使用，能夠建立簡(jiǎn)單的標(biāo)題組。

3.掌握表格元素。

知識(shí)目標(biāo)

教學(xué)目的4.掌握HTML表單元素

5.理解HTML框架元素。

6.了解HTML的預(yù)留字符串

技能目標(biāo)熟練使用常用標(biāo)簽編寫網(wǎng)頁(yè)

教學(xué)重點(diǎn)列表元素、表格元素

教學(xué)難點(diǎn)分組元素、表格元素

教學(xué)方法案例講解法，演示法

教具計(jì)算機(jī)，多媒體

教學(xué)過(guò)程設(shè)計(jì)

（含時(shí)間分配）

第一課時(shí)

（講解U1元素、01元素、dl元素、列表的嵌套應(yīng)用）

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

對(duì)上節(jié)課的內(nèi)容進(jìn)行復(fù)習(xí)提問(wèn)

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

令分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論關(guān)于列表的問(wèn)題，并請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見解。

教師對(duì)上述問(wèn)題進(jìn)行解釋：

?無(wú)序列表是網(wǎng)頁(yè)中最常用的列表，之所以稱為“無(wú)序列表”，是因?yàn)槠涓鱾€(gè)列表項(xiàng)之間為

并列關(guān)系，沒有順序級(jí)別之分。如下圖：

?今年清明節(jié)，請(qǐng)幫這100位烈士尋親

■年輕夫妻的絕筆信為誰(shuí)而寫英雄母親鄧玉芬

-一紙繁花I千年古法造紙做活花茂鄉(xiāng)村振興

■全國(guó)公安系統(tǒng)清明主題云詩(shī)會(huì)4日全網(wǎng)播出

?綠水青山這樣"變現(xiàn)"

?為子孫后代呵護(hù)美好家園

■正片來(lái)了！《暗流涌動(dòng)-中國(guó)新疆反恐挑戰(zhàn)》播出

?訪楊家?guī)X革命舊址：講好黨史故事讓紅色基因代代相傳

?深圳大學(xué)：為雙區(qū)建設(shè)培養(yǎng)高質(zhì)量的創(chuàng)新創(chuàng)業(yè)人才

?黨建弓I領(lǐng)貴州金沙接續(xù)推進(jìn)鄉(xiāng)村振興

?花茂村：土陶技藝傳承人母先才用土陶守“鄉(xiāng)愁”

?傳好脫貧攻堅(jiān)接力棒開啟鄉(xiāng)村振興新征程

?重磅！掌舵長(zhǎng)春兩年，王凱回到了家鄉(xiāng)河南

?孫大光被任命為南寧市副市長(zhǎng)、代理市長(zhǎng)

?有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)會(huì)按照一定的順序排列，例如下圖。

百度熱榜0換一換

1云南新增4例本土確診病例489萬(wàn)

2新疆反恐紀(jì)錄片:有廳官接觸暴恐頭目471萬(wàn)

3直播:臺(tái)鐵列車脫軌事故救援現(xiàn)場(chǎng)455萬(wàn)

4教育部力浮生每日睡眠應(yīng)達(dá)10小時(shí)439萬(wàn)

5我國(guó)每68名孩子中約有1名患自閉癥424萬(wàn)

6離開北上廣去農(nóng)村即409萬(wàn)

7臺(tái)鐵脫軌列車上多為清明掃皇民眾394萬(wàn)

8王凱任河南副省長(zhǎng)、代理省長(zhǎng)381萬(wàn)

9羅永浩稱6億債務(wù)年底還完367萬(wàn)

10瑞麗急需流調(diào)人員和緬語(yǔ)翻譯354萬(wàn)

?無(wú)序列表使用標(biāo)記定義，為具體的歹I」表項(xiàng)。有序列表使用標(biāo)記

定義，為具體的列表項(xiàng)。

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

>講解“3元素”

(1)、教師展示PPT對(duì)“無(wú)序列表”的概念進(jìn)行講解，并列舉網(wǎng)頁(yè)中常見的例子進(jìn)行說(shuō)

明。

(2)、教師展示PPT,對(duì)“無(wú)序列表的基本語(yǔ)法格式”及常用屬性值進(jìn)行講解，并進(jìn)行代碼

演示。

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

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

>講解“。1元素”

(1)、教師展示PPT對(duì)“有序列表”的概念進(jìn)行講解，并列舉網(wǎng)頁(yè)中常見的例子進(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)行解答。

>講解“dl元素”

（1）、教師展示PPT對(duì)“定義列表”的概念進(jìn)行講解，并列舉網(wǎng)頁(yè)中常見的例子進(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)行解答。

令階段小結(jié)

>小結(jié)

重點(diǎn)：3元素、ol元素、dl元素、列表的嵌套應(yīng)用。

>答疑

教師詢問(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é)生了解無(wú)序列表、有序

列表、定義列表的不同，并能熟練地應(yīng)用ul元素、ol元素、dl元素搭建列表結(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)行鞏固。

>使用列表元素制作招聘頁(yè)面

第二課時(shí)

（講解表格元素）

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

復(fù)習(xí)上節(jié)課內(nèi)容，請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見解。

答案：

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

項(xiàng)前沒有任何項(xiàng)目符號(hào)。

定義列表使用<dl></dl>、<dt></dt>和<dd></dd>進(jìn)行定義，其中，<dt></dt>標(biāo)記用于指定術(shù)語(yǔ)

名詞，<dd></dd>標(biāo)記用于對(duì)名詞進(jìn)行解釋和描述。一對(duì)<dt></dl>可以對(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í)。

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

>講解“表格基本結(jié)構(gòu)”

表格由一行或多行單元格組成，應(yīng)用表格可以讓數(shù)據(jù)展現(xiàn)更有條理。例如，要展現(xiàn)一組企業(yè)員

工通訊錄，通訊錄包括員工名稱、電話、電子郵件、職務(wù)四項(xiàng)，就可以使用多行四欄的表格來(lái)展現(xiàn)

企業(yè)員工通訊錄。HTML表格元素使用table標(biāo)簽，表格元素的所有內(nèi)容都放置在table的起始標(biāo)簽

和結(jié)束標(biāo)簽內(nèi)，表格的行元素使用tr標(biāo)簽，一對(duì)tr標(biāo)簽（標(biāo)簽的起始標(biāo)簽和結(jié)束標(biāo)簽稱為一對(duì)標(biāo)

簽）表示表格的一行。表格的單元格放置在tr標(biāo)簽內(nèi)，單元格又分為表頭（表格的開頭部分）和表

格單元格（表格的主體部分），表頭使用th標(biāo)簽，表格單元格使用td標(biāo)簽。基本表格結(jié)構(gòu)如下。

<table>

<tr>

<th></th>

</tr>

<tr>

表格單元格

〈竹〉表格單元格n</td>

</tr>

<tr>

表格單元格

<匕二>表格單元格n〈/t二）

</tr>

</table>

假如有下面的企業(yè)員工通訊錄（張三，電話，郵件，研發(fā)工程師）、（王二，電話，郵件，研

發(fā)經(jīng)理）、（李四，電話，郵件、研發(fā)工程師），企業(yè)員工通訊錄可以使用HTML表格元素來(lái)展現(xiàn)。

<html>

<head>

企業(yè)員工通訊錄

</head>

<body>

<卜”企業(yè)員工通訊錄</hl>

<hr>

<tr>

<th>姓名</tn〉

<”>龜話</th>

電字郵件</th>

<th>職務(wù)</tR>

</tr>

<tr>

<td>張三</td>

<td>lt;/td>

<td></t=>

<td>研發(fā)工程加

</tr>

<tr>

<td>王二</td>

<td>16589012689</td>

<t-i></td>

<">研發(fā)經(jīng)速</：w>

</tr>

<tr>

<td>李四〃td>

<td>1723Qei9065</td>

<td>lisi^l63.co?n</td>

<td>研發(fā)工程師</td>

</tr>

</tabl?>

</boyd>

從瀏覽器顯示效果可以看出，表格為四行四列，第一行為表頭，使用tr標(biāo)簽，tr標(biāo)簽內(nèi)的單元

格使用th標(biāo)簽，標(biāo)簽間的內(nèi)容為黑體字體起到強(qiáng)調(diào)的作用；第二、三、四行為表格主體，也使用

tr標(biāo)簽，tr標(biāo)簽內(nèi)的單元格使用td標(biāo)簽，標(biāo)簽間的內(nèi)容為普通字體。

但顯示的表格有個(gè)缺點(diǎn)，欄與欄之間，行與行之間沒有表格線，整個(gè)表格結(jié)構(gòu)不是很清晰?？?/p>

以在table標(biāo)簽內(nèi)添加屬性boder來(lái)設(shè)置表格線，border的值為表格線的寬度，單位為百分?jǐn)?shù)或像

素。在前面HTML文檔的table標(biāo)簽添加border屬性，屬性的值為1像素，并預(yù)覽效果。

<tableborder="l">

A講解“表格欄間距離（cellspacing）

表格欄間距離是指表格欄與欄之間的距離，table標(biāo)簽的cellspacing屬性用于設(shè)置表格欄之間

的距離,cellspacing屬性的值可以是百分?jǐn)?shù)或像素。在前面HTML文檔的table標(biāo)簽添加cellspacing

屬性，屬性的值為20像素，并預(yù)覽效果。

＞講解“如何設(shè)置表格寬度”

前面的table標(biāo)簽沒有設(shè)置表格寬度，表格寬度就是表格中每一列寬度的總和，列的寬度由單

元格的內(nèi)容和cellpadding屬性來(lái)確定?？梢栽趖able標(biāo)簽中添加width屬性來(lái)設(shè)置表格的寬度，單

位為百分?jǐn)?shù)或像素。在前面HTML文檔的table標(biāo)簽添加width屬性，屬性的值為1000像素。，

并預(yù)覽效果。

＞講解“表格單元格內(nèi)容對(duì)齊屬性”

表格單元格內(nèi)容對(duì)齊屬性分為水平對(duì)齊和垂直對(duì)齊兩種方式。水平對(duì)齊又分為左對(duì)齊、居中對(duì)

齊、右對(duì)齊和兩端對(duì)齊；垂直對(duì)齊又分為上對(duì)齊、中對(duì)齊、底對(duì)齊。表格單元格內(nèi)容對(duì)齊屬性可以

應(yīng)用于tr標(biāo)簽、th標(biāo)簽和td標(biāo)簽。

水平對(duì)齊屬性為align,常用值為left（左對(duì)齊）、center（居中對(duì)齊）、right（右對(duì)齊）,justify

（兩端對(duì)齊）.

垂直對(duì)齊屬性為valign,常用值為top（上對(duì)齊）、middle（中對(duì)齊）、bottom（底對(duì)齊）。

上圖中的表格改變寬度后，單元格內(nèi)容沒有在水平方向上居中對(duì)齊，在tr標(biāo)簽添加align屬性，值

為center。

在企業(yè)員工通訊錄中的tr標(biāo)簽添加align屬性后，在瀏覽器顯示。

＞講解“表格的行合并與欄合并”

前面介紹的表格都是由簡(jiǎn)單的行和列組成的，如果要展現(xiàn)一些復(fù)雜的表格就難以勝任了。例如

下面的表格：

銷售統(tǒng)計(jì)表

商品名稱用途價(jià)格金祕(mì)（元）

商品A3*1545

辦公

商品B1*3030

合計(jì)75

網(wǎng)頁(yè)要展現(xiàn)上述表格就需要用到表格的行合并屬性與欄合并屬性。行合并屬性用于一個(gè)單元格

跨越多行，通常使用在td和th標(biāo)簽中，屬性為rowspan；欄合并屬性用于一個(gè)單元格跨越多欄，

通常使用在td和th標(biāo)簽中,屬性為colspan。

＞講解“＜tbody＞、＜thead＞、＜tfoot＞M元素

第三課時(shí)

(講解表單元素)

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

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

1、下列選項(xiàng)中，屬于input控件的有哪些？()

A、單行文本輸入框

B、單選按鈕

C、復(fù)選框

D、提交按鈕

答案：ABCD

答案解析：input控件包括單行文本輸入框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕

等。

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

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

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

令分組討論

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

瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)看到包含多個(gè)選項(xiàng)的下拉菜單，例如選擇所在的城市、出生年月、

興趣愛好等。那么，如何使用表單元素創(chuàng)建下拉菜單效果呢？

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

教師對(duì)上述問(wèn)題進(jìn)行解釋：

在表單中，使用select控件可以定義下拉菜單效果。其中，〈selectX/select〉標(biāo)記

用于在表單中添加一個(gè)下拉菜單，<(^1:1.011〉</(^1:1,011>標(biāo)記嵌套在<5010(^></select>

標(biāo)記中，用于定義下拉菜單中的具體選項(xiàng)，每對(duì)<selectX/select>中至少應(yīng)包含一對(duì)

<optionX/option>o

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

>講解"textarea元素”

(1)、教師通過(guò)PPT對(duì)“textarea元素”定義的多行文本輸入框效果進(jìn)行展示。

(2)、教師對(duì)textarea元素的基本語(yǔ)法格式進(jìn)行講解，并進(jìn)行代碼演示。

(3)、教師對(duì)textarea元素的常用屬性進(jìn)行講解，并進(jìn)行代碼演示。

(4)、教師指出應(yīng)用“textarea元素”時(shí)需要注意的問(wèn)題，并給予解答。

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

＞講解“select元素”

(1)、教師通過(guò)PPT對(duì)“select元素”定義的下拉菜單效果進(jìn)行展示。

"在校區(qū):所在校區(qū):

「請(qǐng)選擇-二］

-請(qǐng)選擇-

提交I

(2)、教師對(duì)使用select元素定義下拉菜單的基本語(yǔ)法格式進(jìn)行講解，并進(jìn)行代碼

演示。

(3)、教師對(duì)select元素的常用屬性進(jìn)行講解，并進(jìn)行代碼演示。

(4)、教師指出應(yīng)用“select元素”時(shí)需要注意的問(wèn)題，并給予解答。

(5),教師對(duì)如何使用Dreamweaver工具生成表單控件進(jìn)行講解，并通過(guò)Dreamweaver

工具進(jìn)行演示。

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

第四課時(shí)

(講解框架元素、預(yù)留字符)

?框架結(jié)構(gòu)標(biāo)簽(＜frameset＞)

A框架結(jié)構(gòu)標(biāo)簽(＜frameset＞)定義如何將窗口分割為框架

A每個(gè)frameset定義了一系列行或列

Arows/columns的值規(guī)定了每行或每列占據(jù)屏幕的面積

?框架標(biāo)簽(Frame)單標(biāo)簽，其屬性見下圖。

注意：不能將＜body＞＜/body＞標(biāo)簽與＜framesetx/frameset＞標(biāo)簽同時(shí)使用！不過(guò)，假如你添

加包含一段文本的＜noframes＞標(biāo)簽，就必須將這段文字嵌套于＜bodyx/body＞標(biāo)簽內(nèi)。

Frame對(duì)象的屬性

屬性

描述j