版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
XXX學(xué)校
課程名稱Web前端開發(fā)授課時間第1周
第1章初識HTML5
授課章節(jié)
第2章HTML基礎(chǔ)
1.了解web的由來以及其與Internet之間的關(guān)系。
2.了解web的相關(guān)概念，包括WWW、Website,URL、Web
Standard、WebBrowserWebServer。
知識目標(biāo)
3.了解HTML的歷史。
4.精通HTML的結(jié)構(gòu)。
教學(xué)目的
5.了解全局屬性。
1.會下載安裝開發(fā)工具，
技能目標(biāo)2.會使用瀏覽器瀏覽HTML文件，
3.會編寫簡單的網(wǎng)頁
教學(xué)重點Web相關(guān)概念,HTML的結(jié)構(gòu)。
教學(xué)難點HTML的結(jié)構(gòu)
教學(xué)方法案例講解法，演示法
教具計算機，多媒體
教學(xué)過程設(shè)計
（含時間分配）
第一、二課時
（講解web的由來以及其與Intemet之間的關(guān)系，講解Web相關(guān)概念）
1本課時內(nèi)容學(xué)習(xí)
令分組討論
對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：
什么是web?了解Web的誕生
請小組代表對以上問題發(fā)表見解。
教師對上述問題進(jìn)行解釋：
?Internet,中文正式譯名為因特網(wǎng)，又叫作國際互聯(lián)網(wǎng)，是由所有使用公用語
言互相通信的計算機連接而組成的全球網(wǎng)絡(luò)。一旦連接到它的任意一個節(jié)點，
就意味著計算機或者其他設(shè)備已經(jīng)連入Internet.目前，Internet的用戶已
經(jīng)遍及全球，截止到2018年，已經(jīng)有超過40億人在使用Internet,并且它的
用戶數(shù)還在以等比級數(shù)上升。
?Internet的前身是美國國防部高級研究計劃局(AdvancedResearchProjects
Agency,ARPA)主持研制的ARPANET網(wǎng)絡(luò)，當(dāng)時建立這個網(wǎng)絡(luò)是為了將美國的
幾臺軍事和研究用的計算機主機連接起來。ARPANET網(wǎng)絡(luò)于1969年正式啟用，
但當(dāng)時僅連接了4臺計算機，供科學(xué)家們進(jìn)行計算機聯(lián)網(wǎng)實驗使用。
令知識點講解
＞講解“Intemet常用的服務(wù)”
⑴、E-mail：電子郵件,具有速度快、成本低、方便靈活等優(yōu)點，是目前Internet
的重要服務(wù)項目之。
(2)、FTP：文件傳輸，用戶通過該協(xié)議可以進(jìn)行文件傳輸或者文件訪問。由于安
全問題，其使用場景也越來越少。
(3)、BBS：電子公告，最早是用來公布股市價格等類信息的，現(xiàn)在的BBS已經(jīng)發(fā)
展成功能齊全的社區(qū)，可以實現(xiàn)信息公告、線上交談、分類討論、經(jīng)驗交流、文件共
享等。
(4)、www：WorldWideWeb,中文名為萬維網(wǎng)，也被稱為Web,是Internet中
發(fā)展最迅速的部分。
(5)、Web是Internet的一個應(yīng)用。它的誕生也是極其富有戲劇性的。
＞講解“web的相關(guān)概念”
(1)、www,worldwideweb的縮寫，也可寫為w3、web,中文名為萬維網(wǎng)。www
是Internet的最核心部分。它是Internet上那些支持www服務(wù)和HTTP協(xié)議的服務(wù)器
集合。
(2)、Website中文名為網(wǎng)站，是指在Internet上根據(jù)一定的規(guī)則，使用HTML
等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。人們可以通過網(wǎng)站發(fā)布自己想要公
開的資訊，或者利用網(wǎng)站提供相關(guān)的網(wǎng)絡(luò)服務(wù)。
(3)、URL,UniformResourceLocator的縮寫，中文名為統(tǒng)一資源定位符，俗
稱網(wǎng)址，它是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是
互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。在WWW上瀏覽或者查詢信息，必須在網(wǎng)頁瀏覽器上輸入查
詢目標(biāo)的地址。
URL的一般格式如下：
協(xié)議:〃主機地址(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)頁主要由三部分組成：結(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瀏覽器，簡稱瀏覽器，是一個顯示網(wǎng)頁服務(wù)器或者檔案系統(tǒng)內(nèi)的HTML
文件，并讓用戶與這些文件互動的軟件。第一個網(wǎng)頁瀏覽器就是TimBerners-Lee編
寫的WorldWideWeb,后改名為Nexus。主流瀏覽器如下圖所示：
圖1主流瀏覽器
(6)、Web服務(wù)器的主要功能是提供網(wǎng)上信息瀏覽服務(wù)。Web服務(wù)器可以解析HTTP
協(xié)議，當(dāng)Web服務(wù)器接收到一個HTTP請求時，會返回一個HTTP響應(yīng)，這樣客戶端就
可以從服務(wù)器上獲取網(wǎng)頁(HTML),包括CSS、JavaScript,音頻、視頻等資源。
(7)、學(xué)生自主提問，教師對疑難問題進(jìn)行解答。
＞講解"web開發(fā)”
目前，Web開發(fā)主要分為前端和后端兩部分。前端指的是直接與用戶接觸的網(wǎng)頁，
網(wǎng)頁上通常由HTML、CSS、JavaScript等內(nèi)容；后端指的是程序、數(shù)據(jù)庫和服務(wù)器層
面的開發(fā)。
階段小結(jié)
＞小結(jié)
本章簡單介紹了Internet的歷史和Web的誕生，重點介紹了Web的相關(guān)概念,
包括www、Website、URL、web標(biāo)準(zhǔn)、web的瀏覽器、Web服務(wù)器。同時、明確
了web前端開發(fā)需要掌握的內(nèi)容，包括HTML、CSS、JavaScripto
>答疑
教師詢問學(xué)生對于知識點還有什么不理解的地方。針對學(xué)生不理解的知識點給與解釋。
第三課時
（講解HTML基礎(chǔ)）
1復(fù)習(xí)上節(jié)課內(nèi)容
在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。
1、目前，對HTML5新特性支持最好的瀏覽器是（）。
A、IE6瀏覽器；B、Firefox3.6瀏覽器
C、OperalO.1瀏覽器；D、chrome4.0瀏覽器
答案：D
谷歌瀏覽器對HTML5及CSS3的兼容性支持較好，而且調(diào)試網(wǎng)頁非常方便，所以在HTML5
網(wǎng)頁制作過程中谷歌瀏覽器是最常用的瀏覽器。
說明：教師可根據(jù)學(xué)生對上述問題的回答情況，對以上問題進(jìn)行簡單講解或直接進(jìn)入
本課時新內(nèi)容的學(xué)習(xí)。
1本課時內(nèi)容學(xué)習(xí)
令分組討論
對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：
學(xué)習(xí)任何一門語言，都要首先掌握它的基本格式，就像寫信需要符合書信的格式要求
一樣。HTML5標(biāo)記語言也不例外，同樣需要遵從一定的規(guī)范。請大家討論下：使用
Dreamweaver新建HTML5默認(rèn)文檔時，HTML5文檔的基本格式包括哪些標(biāo)記？
請小組代表對以上問題發(fā)表見解。
教師對上述問題進(jìn)行解釋：
?<!DOCTYPE>標(biāo)記
VDOCTYPE〉標(biāo)記標(biāo)記位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種HTML或
XHTML標(biāo)準(zhǔn)規(guī)范。
?標(biāo)記
標(biāo)記位于。doctype>標(biāo)記之后，也稱為根標(biāo)記，用于告知瀏覽器其自身是一個
HTML文檔。
?<head>標(biāo)記
〈head〉標(biāo)記用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)記。
?<body>標(biāo)記
<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。
令知識點講解
>講解“標(biāo)記語言”
(1)標(biāo)記語言，是一種將文本(Text)以及與文本相關(guān)的其他信息結(jié)合起來，
展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。
(2)標(biāo)記語言的種類有很多，常見的有XML、HTML、XHTML等。
>講解“從HTML到XHTML”
HTML,超文本標(biāo)記語言(HyperTextMarkupLanguage,HTML),是為“網(wǎng)頁創(chuàng)
建和其他可在網(wǎng)頁瀏覽器中看到的信息”設(shè)計的一種標(biāo)記語言。人們可以使用
HTML建立自己的Web站點。HTML文檔在瀏覽器上運行，并由瀏覽器解析。
?HTML(第1版)：1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布，
這個版本沒有標(biāo)準(zhǔn)版本，主要是因為當(dāng)時有很多版本的HTML,沒有形成一個統(tǒng)
一的標(biāo)準(zhǔn)，所以沒有正式的HTMLl.Oo
?HTML2.0：1995年11月作為RFC1866發(fā)布。
?HTML3.2：1997年1月14日，W3c推薦標(biāo)準(zhǔn)，這是第一個被廣泛使用的標(biāo)準(zhǔn)。
由于該版本年代較早，很多東西都已經(jīng)過時，在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)，這也是另一個被廣泛使用的
標(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)記語言(extensibleHyperTextMarkupLanguage,
XHTML),是一種更純潔、更嚴(yán)格、更規(guī)范的HTML代碼。
>講解“HTML5文檔基本格式”
(1)、教師通過Dreamweaver工具新建默認(rèn)文檔，并指出默認(rèn)文檔中會自帶一些源代
碼。
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
〈5口0>無標(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)記的語義及用法。
(4)、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
>講解“HTML語法”
(1)、教師展示PPT對“HTML語法”進(jìn)行簡單介紹。
(2)、教師展示PPT,對“HTML語法”規(guī)則進(jìn)行分析，并與之前的各種版本進(jìn)行對比
分析。
(3)、教師針對HTML語法中的“標(biāo)簽不區(qū)分大小寫、允許屬性值不使用引號、允許
部分屬性值的屬性省略”通過代碼演示，并舉例說明。
(4)、學(xué)生自主提問，教師對疑難問題進(jìn)行解答。
>講解“HTML標(biāo)記”
(1)、教師展示PPT對“單標(biāo)記與雙標(biāo)記”、“注釋標(biāo)記”的概念進(jìn)行講解，并指出
“單標(biāo)記與雙標(biāo)記”的不同。
(2)、教師舉例說明常見的單標(biāo)記、雙標(biāo)記以及注釋標(biāo)記。
(3)、教師通過代碼對“單標(biāo)記與雙標(biāo)記”、“注釋標(biāo)記”的使用方法進(jìn)行演示。
(4)、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
＞講解“標(biāo)記的屬性”
(1)、教師和學(xué)生互動：在網(wǎng)頁制作時，如果大家想要控制標(biāo)記的樣式，比如：希望
標(biāo)題文本的字體為“微軟雅黑”且居中顯示，或者段落文本中的某些名詞顏色突出顯
示等問題。此時僅僅依靠HTML標(biāo)記的默認(rèn)顯示樣式已經(jīng)不能滿足需求了，需要使用
“HTML標(biāo)記的屬性”進(jìn)行控制。
(2)、教師展示PPT對“標(biāo)記的屬性”進(jìn)行講解，并使用代碼進(jìn)行實時演示。
(3)、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
＞講解“HTML文檔頭部相關(guān)標(biāo)記”
(1)、教師展示PPT對“HTML文檔頭部相關(guān)標(biāo)記”進(jìn)行講解。
(2)、教師分別對〈title＞標(biāo)記、＜meta/＞標(biāo)記、＜link＞標(biāo)記及〈style〉標(biāo)記的基本語
法格式進(jìn)行講解，并進(jìn)行代碼演示。
(3)、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
令階段小結(jié)
＞小結(jié)
重點：HTML語法、HTML標(biāo)記、標(biāo)記的屬性。
＞答疑
教師詢問學(xué)生對于知識點還有什么不理解的地方。針對學(xué)生不理解的知識點給與解釋。
＞通過''補充案例”加強學(xué)習(xí)
教師分發(fā)測試題目及案例素材給學(xué)生，對于掌握較好的同學(xué)，可以通過補充案例對相
關(guān)知識點進(jìn)行鞏固。
令布置作業(yè)
＞完成“補充案例”，通過平臺提交給教師，教師下節(jié)課進(jìn)行點評。
＞預(yù)習(xí)2.2節(jié)【全局屬性】。
第四、五課時
(講解全局屬性、HTML主體元素、無語義元素、標(biāo)題元素和段落元素)
，復(fù)習(xí)上節(jié)課內(nèi)容
在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。
1、簡要描述“HTML5語法”，并舉例說明“HTML5語法”相對于以前的語法格式有哪
些新變化?
答案：
?標(biāo)簽不區(qū)分大小寫
HTML5采用寬松的語法格式，標(biāo)簽可以不區(qū)分大小寫，這是HTML5語法變化的重要體現(xiàn)。
例如：
＜p＞這里的p標(biāo)簽大小寫不一致＜/P＞
在上面的代碼中，雖然p標(biāo)記的開始標(biāo)記與結(jié)束標(biāo)記大小寫并不匹配，但是在HTML5
語法中是完全合法的。
?允許屬性值不使用引號
在HTML5語法中，屬性值不放在引號中也是正確的。例如：
＜inputchecked=atype=checkbox/＞
＜inputreadon1y=readon1ytype=text/＞
以上代碼都是完全符合HTML5規(guī)范的，等價于：
＜inputchecked="a"type="checkbox"/＞
＜inputreadon1y="readon1y"type="text"/＞
?允許部分屬性值的屬性省略
在HTML5中，部分標(biāo)志性屬性的屬性值可以省略。例如：
＜inputchecked="checked"type="checkbox"/＞
＜inputreadonly="readonly"type="text"/＞
說明：教師可根據(jù)學(xué)生對上述問題的回答情況，對以上問題進(jìn)行簡單講解或直接進(jìn)入
本課時新內(nèi)容的學(xué)習(xí)。
1本課時內(nèi)容學(xué)習(xí)
令分組討論
對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：
我們知道，一篇結(jié)構(gòu)清晰的文章通常都有標(biāo)題和段落，那么如何使用HTML5語言創(chuàng)建
網(wǎng)頁中的標(biāo)題和段落呢？
教師對上述問題進(jìn)行解釋：
?為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)記，HTML5提供了
6個等級的標(biāo)題，即＜hl＞、＜h2＞、＜h3＞、＜h4＞、＜h5＞和＜h6＞,從〈hl＞到＜h6＞重
要性遞減。其基本語法格式如下：
＜hnalign="對齊方式"＞標(biāo)題文本＜/hn〉
該語法中n的取值為1到6,align屬性為可選屬性，用于指定標(biāo)題的對齊方式。
?同樣地，網(wǎng)頁也可以分為若干個段落，而段落的標(biāo)記就是＜p＞。默認(rèn)情況下，
文本在段落中會根據(jù)瀏覽器窗口的大小自動換行?！磒＞是HTML文檔中最常見的
標(biāo)記，其基本語法格式如下：
＜palign="對齊方式"＞段落文本＜/p＞
該語法中align屬性為＜p＞標(biāo)記的可選屬性，和標(biāo)題標(biāo)記＜hl＞~〈h6＞一樣，同樣可以使
用align屬性設(shè)置段落文本的對齊方式。
令知識點講解
＞講解”標(biāo)題和段落標(biāo)記”
（1）、教師展示PPT對“標(biāo)題標(biāo)記"、“段落標(biāo)記”的概念及基本語法格式進(jìn)行
講解。
（2）、教師對“標(biāo)題標(biāo)記”、“段落標(biāo)記”的顯示效果通過代碼進(jìn)行演示。
（3）、教師分別對“標(biāo)題標(biāo)記”及“段落標(biāo)記”的align屬性進(jìn)行講解并通過代碼進(jìn)
行演示。
（4）、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
第六課時
（制作簡單的文字頁面）
綜合運用所學(xué)標(biāo)簽，制作一個簡單的頁面，并提交，進(jìn)行作品互評。
心得
作業(yè)
備注
XXX學(xué)校
課程名稱Web前端開發(fā)授課時間第2周
授課章節(jié)第2章HTML基礎(chǔ)
了解HTML的注釋方法；
知識目標(biāo)掌握HTML的格式化元素；
教學(xué)目的
掌握HTML的圖片元素和超鏈接元素
技能目標(biāo)1.會制作包含圖片和超鏈接的HTML5百科頁面
HTML5語法、HTML5標(biāo)記及其屬性、文本控制標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)
教學(xué)重點
記
教學(xué)難點HTML5標(biāo)記及屬性、圖像標(biāo)記、超鏈接標(biāo)記
教學(xué)方法案例講解法，演示法
教具計算機，多媒體
教學(xué)過程設(shè)計
（含時間分配）
第一課時
（講解注釋元素、格式化元素）
＞講解“注釋元素”
（1）＜!---〉用于HTML中插入注釋，它的開始標(biāo)簽為結(jié)束標(biāo)簽為一〉，開始
標(biāo)簽和結(jié)束標(biāo)簽不一定在一行，也就是說，可以寫多行注釋。瀏覽器不會顯示注釋。
＞講解“文本格式化元素”
（1）、教師和學(xué)生互動：使用“HTML標(biāo)記的屬性”可以設(shè)置文本的對齊方式、顏色等，
那么，如果想要為文字設(shè)置粗體、斜體或下劃線效果需要怎么辦呢？下面，我們來學(xué)
習(xí)”文本格式化標(biāo)記”。
（2）、教師展示PPT對“文本格式化標(biāo)記”進(jìn)行講解，并使用代碼進(jìn)行實時演示。
（3）、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
＞講解“特殊字符標(biāo)記”
（1）、教師和學(xué)生互動：瀏覽網(wǎng)頁時常常會看到一些包含特殊字符的文本，如數(shù)學(xué)公
式、版權(quán)信息等。那么如何在網(wǎng)頁上顯示這些包含特殊字符的文本呢？下面，我們來
學(xué)習(xí)特殊字符標(biāo)記。
（2）、教師展示PPT對“常用特殊字符標(biāo)記”進(jìn)行講解，分析“字符標(biāo)記”的構(gòu)成，
并使用代碼進(jìn)行實時演示。
（3）、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
令階段小結(jié)
＞小結(jié)
重點：段落標(biāo)記、文本格式化標(biāo)記。
＞答疑
教師詢問學(xué)生對于知識點還有什么不理解的地方。針對學(xué)生不理解的知識點給與解釋。
令鞏固練習(xí)
＞鞏固本課時知識點
學(xué)完知識點后，教師帶領(lǐng)學(xué)生對本課時所學(xué)知識點進(jìn)行回顧。以此使學(xué)生掌握段落標(biāo)
記、文本格式化標(biāo)記、特殊字符標(biāo)記的使用。
＞通過“補充案例”加強學(xué)習(xí)
教師分發(fā)測試題目及案例素材給學(xué)生，對于掌握較好的同學(xué)，可以通過補充案例對相
關(guān)知識點進(jìn)行鞏固。
令布置作業(yè)
＞完成“補充案例”，通過平臺提交給教師，教師下節(jié)課進(jìn)行點評。
＞預(yù)習(xí)1.4節(jié)【圖像標(biāo)記】。
第二、三課時
（講解常用圖像格式、圖像標(biāo)記＜img/＞、絕對路徑和相對路徑）
說明：
將1.4小節(jié)作為兩個課時進(jìn)行講解。
1復(fù)習(xí)上節(jié)課內(nèi)容
在講解本節(jié)內(nèi)容前，拋出以下問題讓學(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)記定義強調(diào)文本。
說明：教師可根據(jù)學(xué)生對上述問題的回答情況，對以上問題進(jìn)行簡單講解或直接進(jìn)入
本課時新內(nèi)容的學(xué)習(xí)。
1本課時內(nèi)容學(xué)習(xí)
令分組討論
對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：
在網(wǎng)站中，我們可以看到絢麗多彩的圖片。那么，目前網(wǎng)頁上常用的圖像格式有哪些
呢，請結(jié)合它們的優(yōu)缺點進(jìn)行說明？
請小組代表對以上問題發(fā)表見解。
教師對上述問題進(jìn)行解釋：
目前網(wǎng)頁上常用的圖像格式主要有GIF、JPG和PNG三種，具體區(qū)別如下：
?GIF格式
GIF最突出的地方就是它支持動畫，同時GIF也是一種無損的圖像格式。另外，GIF支
持透明(全透明或全不透明)，因此很適合在互聯(lián)網(wǎng)上使用。但GIF只能處理256種
顏色。在網(wǎng)頁制作中，GIF格式常常用于Logo、小圖標(biāo)及其他色彩相對單一的圖像。
?PNG格式
PNG包括PNG-8和真色彩PNG(PNG-24和PNG-32)。相對于GIF,PNG最大的優(yōu)勢是體
積更小，支持alpha透明(全透明，半透明，全不透明)，并且顏色過渡更平滑，但
PNG不支持動畫。
?JPG格式
JPG所能顯示的顏色比GIF和PNG要多的多，可以用來保存超過256種顏色的圖像，但
是JPG是一種有損壓縮的圖像格式，網(wǎng)頁制作過程中類似于照片的圖像比如橫幅廣告
(banner)、商品圖片、較大的插圖等都可以保存為JPG格式。
簡而言之，在網(wǎng)頁中小圖片或網(wǎng)頁基本元素如圖標(biāo)、按鈕等考慮GIF或PNG-8,半透明
圖像考慮PNG-24,類似照片的圖像則考慮JPGo
令知識點講解
＞講解“常用圖像格式”
(1)、教師帶領(lǐng)學(xué)生查看網(wǎng)頁中的圖像，總結(jié)網(wǎng)頁中常用的圖像格式。
（2）、教師展示PPT對GIF、JPG和PNG三種常用的圖像格式進(jìn)行講解，比較三種格
式的異同，并指出其優(yōu)缺點。
（3）、學(xué)生提問，教師對疑難問題進(jìn)行解答。
＞講解“圖像標(biāo)記＜img/＞”
（1）、教師和學(xué)生互動：在網(wǎng)頁中隨處可見各種各樣的圖像，比如：廣告圖、推廣圖、
輪播圖等。大家在網(wǎng)頁中都見過哪些圖片呢？然后，教師使用PPT展示網(wǎng)頁中各式各
樣的圖片效果。
（2）、教師展示PPT對''圖像標(biāo)記”及其屬性進(jìn)行講解，并使用代碼進(jìn)行實時演示。
（3）、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
＞講解“絕對路徑和相對路徑”
（1）、教師通過文件夾的層級關(guān)系對“路徑”進(jìn)行講解，并指出網(wǎng)頁中的路徑通常分
為“相對路徑與絕對路徑”兩種。
（2）教師展示PPT對“絕對路徑”進(jìn)行講解，并舉例說明。
（3）、教師展示PPT對“相對路徑”進(jìn)行講解，并通過“圖像文件和html文件”的
不同位置進(jìn)行演示。
（4）、學(xué)生提問，教師對疑難問題進(jìn)行解答。
說明：在網(wǎng)頁制作時可適時停下來，讓學(xué)生自行嘗試。小組之間可以協(xié)作討論，教師
巡視，對疑難問題進(jìn)行解答。
令階段小結(jié)
＞小結(jié)
重點：圖像標(biāo)記。
＞答疑
教師詢問學(xué)生對于知識點還有什么不理解的地方。針對學(xué)生不理解的知識點給與解釋。
令鞏固練習(xí)
＞鞏固本課時知識點
學(xué)完知識點后，教師帶領(lǐng)學(xué)生對本課時所學(xué)知識點進(jìn)行回顧。以此使學(xué)生更熟練地掌
握圖像標(biāo)記Cimg/＞的使用，并能夠區(qū)分圖像的相對路徑與絕對路徑的不同。
＞通過''補充案例”加強學(xué)習(xí)
教師分發(fā)測試題目及案例素材給學(xué)生，對于掌握較好的同學(xué)，可以通過補充案例對相
關(guān)知識點進(jìn)行鞏固。
＜布置作業(yè)
＞完成“補充案例”，通過平臺提交給教師，教師下節(jié)課進(jìn)行點評。
＞預(yù)習(xí)【超鏈接標(biāo)記】。
預(yù)習(xí)【階段案例一制作HTML5百科頁面】。
第四課時
（講解創(chuàng)建超鏈接、錨點鏈接）
，復(fù)習(xí)上節(jié)課內(nèi)容
對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：
1、在上節(jié)課中，我們學(xué)習(xí)了圖像標(biāo)記＜img/＞及其〈img/＞標(biāo)記的屬性。那么，請簡要
說明：圖像的alt屬性的用法？
請小組代表對以上問題發(fā)表見解。
教師對上述問題進(jìn)行解釋：
在瀏覽網(wǎng)頁時，我們可以發(fā)現(xiàn)由于一些原因圖像可能無法正常顯示，比如圖片加載錯
誤，瀏覽器版本過低等。因此為頁面上的圖像加上替換文本是個很好的習(xí)慣，在圖像
無法顯示時告訴用戶該圖片的信息，這就需要使用圖像的alt屬性。
工本課時內(nèi)容學(xué)習(xí)
令分組討論
對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：
當(dāng)我們打開一個網(wǎng)站時，例如傳智播客官網(wǎng)"http:〃www.itcast.cn/”,通過點擊頁
面中的導(dǎo)航或者帶有鏈接地址的文字就可以跳轉(zhuǎn)到不同的頁面，那么如何實現(xiàn)網(wǎng)站中
的頁面跳轉(zhuǎn)呢？
教師對上述問題進(jìn)行解釋：
超鏈接雖然在網(wǎng)頁中占有不可替代的地位，在HTML5中創(chuàng)建超鏈接非常簡單，只需用
＜a＞＜/a＞標(biāo)記環(huán)繞需要被鏈接的對象即可，其基本語法格式如下：
＜ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式"》文本或圖像＜/a＞
在上面的語法中，＜a＞標(biāo)記是一個行內(nèi)標(biāo)記，用于定義超鏈接，href和target為其常
用屬性，具體解釋如下：
?href：用于指定鏈接目標(biāo)的url地址，當(dāng)為＜a＞標(biāo)記應(yīng)用href屬性時，它就具
有了超鏈接的功能。
?target：用于指定鏈接頁面的打開方式，其取值有_self和」3加成兩種，其中
self為默認(rèn)值，意為在原窗口中打開，blank為在新窗口中打開。
令知識點講解
＞講解“創(chuàng)建超鏈接”
(1)、教師和學(xué)生互動：教師打開百度新聞網(wǎng)址http:〃news,baidu.com/,點擊
頁面中的導(dǎo)航文字，就可以跳轉(zhuǎn)到相應(yīng)的頁面，這就是通過給文字創(chuàng)建超鏈接來實現(xiàn)
的。教師組織學(xué)生討論：如何通過超鏈接實現(xiàn)頁面中的跳轉(zhuǎn)呢？
Bai好新聞百度一下
A■頁0內(nèi)國際軍事財is蟆樂體?；ヂ?lián)網(wǎng)科技游戲女人汽車，產(chǎn)
熱點要聞
?今年清明節(jié)，請幫這100位烈士尋親
■年輕夫妻的絕筆信為誰而寫英雄母親鄧玉芬
?一紙繁花I千年古法造紙做活花茂鄉(xiāng)村振興
?全國公安系統(tǒng)清明主題云詩會4日全網(wǎng)播出
?綠水?山這樣”變現(xiàn)"
?為子孫后代呵護(hù)美好家園
?正片來了！《暗流涌動沖國新儡反恐挑戰(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)、教師針對超鏈接的作用以及基本語法格式進(jìn)行講解，并進(jìn)行演示說明。
(3)、教師展示PPT對“創(chuàng)建超鏈接”進(jìn)行講解，并使用代碼進(jìn)行實時演示。
(4)、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
＞講解“錨點鏈接”
(1)、教師和學(xué)生互動：如果網(wǎng)頁內(nèi)容較多，頁面過長，瀏覽網(wǎng)頁時就需要不斷
地拖動滾動條，來查看所需要的內(nèi)容，這樣效率較低且不方便。那么如何提高信息的
檢索速度呢？HTML5語言提供了一種特殊的鏈接一一錨點鏈接，用戶能夠快速定位到目
標(biāo)內(nèi)容。
(2)、教師針對“錨點鏈接”的作用及創(chuàng)建方法進(jìn)行講解，并進(jìn)行演示說明。
(3)、教師對“創(chuàng)建超鏈接”與“錨點鏈接”進(jìn)行對比分析，并總結(jié)其注意事項。
(4)、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
臺階段小結(jié)
＞小結(jié)
重點：創(chuàng)建超鏈接、錨點鏈接。
＞答疑
教師詢問學(xué)生對于知識點還有什么不理解的地方。針對學(xué)生不理解的知識點給與解釋。
令鞏固練習(xí)
＞鞏固本課時知識點
學(xué)完知識點后，教師帶領(lǐng)學(xué)生對本課時所學(xué)知識點進(jìn)行回顧。以此使學(xué)生更熟練地掌
握創(chuàng)建超鏈接、錨點鏈接的方法，并能夠通過創(chuàng)建超鏈接、錨點鏈接來實現(xiàn)頁面間的
跳轉(zhuǎn)。
＞通過“補充案例”加強學(xué)習(xí)
教師分發(fā)測試題目及案例素材給學(xué)生，對于掌握較好的同學(xué)，可以通過補充案例對相
關(guān)知識點進(jìn)行鞏固。
第五課時
（講解制作圖文混排的超鏈接頁面）
＞案例實現(xiàn)
教師帶領(lǐng)學(xué)生分步驟地進(jìn)行網(wǎng)頁制作，通過分析效果圖、制作頁面、制作頁面鏈
接等步驟完成頁面的制作，并指出其中需要注意的事項。
說明：在網(wǎng)頁制作時可適時停下來，讓學(xué)生自行嘗試。小組之間可以協(xié)作討論，教師
巡視，對疑難問題進(jìn)行解答。
＞通過“補充案例”加強學(xué)習(xí)
教師分發(fā)測試題目及案例素材給學(xué)生，對于掌握較好的同學(xué)，可以通過補充案例
對相關(guān)知識點進(jìn)行鞏固。
令布置作業(yè)
＞完成“補充案例”，通過平臺提交給教師，教師下節(jié)課進(jìn)行點評。
＞復(fù)習(xí)本課時的所有知識點和案例，加強鞏固。
第六課時
（上機測試）
教師發(fā)放測試題目及案例素材，學(xué)生進(jìn)行上機測試。以此檢查學(xué)生對相關(guān)知識點
的掌握情況。測試完成后將作品通過平臺提交給老師。
上機測試主要針對本章中需要重點掌握的知識點，以及在代碼中容易出
錯的操作步驟。
（作品點評）
教師對學(xué)生的提交的上機測試作品進(jìn)行點評，指出代碼中容易出現(xiàn)bug的地方，
并給與解答，同時將自己的作品上傳到學(xué)習(xí)通的討論區(qū)。
心得
作業(yè)
備注
XXX學(xué)校
課程名稱Web前端開發(fā)授課時間第3周
授課章節(jié)第2章HTML基礎(chǔ)
1.掌握結(jié)構(gòu)元素的使用，可以使頁面分區(qū)更明確。
2.理解分組元素的使用，能夠建立簡單的標(biāo)題組。
3.掌握表格元素。
知識目標(biāo)
教學(xué)目的4.掌握HTML表單元素
5.理解HTML框架元素。
6.了解HTML的預(yù)留字符串
技能目標(biāo)熟練使用常用標(biāo)簽編寫網(wǎng)頁
教學(xué)重點列表元素、表格元素
教學(xué)難點分組元素、表格元素
教學(xué)方法案例講解法，演示法
教具計算機，多媒體
教學(xué)過程設(shè)計
（含時間分配）
第一課時
（講解U1元素、01元素、dl元素、列表的嵌套應(yīng)用）
，復(fù)習(xí)上節(jié)課內(nèi)容
對上節(jié)課的內(nèi)容進(jìn)行復(fù)習(xí)提問
工本課時內(nèi)容學(xué)習(xí)
令分組討論
對新課進(jìn)行講解前，先讓學(xué)生分組討論關(guān)于列表的問題，并請小組代表對以上問題發(fā)表見解。
教師對上述問題進(jìn)行解釋：
?無序列表是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因為其各個列表項之間為
并列關(guān)系，沒有順序級別之分。如下圖：
?今年清明節(jié)，請幫這100位烈士尋親
■年輕夫妻的絕筆信為誰而寫英雄母親鄧玉芬
-一紙繁花I千年古法造紙做活花茂鄉(xiāng)村振興
■全國公安系統(tǒng)清明主題云詩會4日全網(wǎng)播出
?綠水青山這樣"變現(xiàn)"
?為子孫后代呵護(hù)美好家園
■正片來了！《暗流涌動-中國新疆反恐挑戰(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)愁”
?傳好脫貧攻堅接力棒開啟鄉(xiāng)村振興新征程
?重磅！掌舵長春兩年，王凱回到了家鄉(xiāng)河南
?孫大光被任命為南寧市副市長、代理市長
?有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列，例如下圖。
百度熱榜0換一換
1云南新增4例本土確診病例489萬
2新疆反恐紀(jì)錄片:有廳官接觸暴恐頭目471萬
3直播:臺鐵列車脫軌事故救援現(xiàn)場455萬
4教育部力浮生每日睡眠應(yīng)達(dá)10小時439萬
5我國每68名孩子中約有1名患自閉癥424萬
6離開北上廣去農(nóng)村即409萬
7臺鐵脫軌列車上多為清明掃皇民眾394萬
8王凱任河南副省長、代理省長381萬
9羅永浩稱6億債務(wù)年底還完367萬
10瑞麗急需流調(diào)人員和緬語翻譯354萬
?無序列表使用標(biāo)記定義，為具體的歹I」表項。有序列表使用標(biāo)記
定義，為具體的列表項。
令知識點講解
>講解“3元素”
(1)、教師展示PPT對“無序列表”的概念進(jìn)行講解，并列舉網(wǎng)頁中常見的例子進(jìn)行說
明。
(2)、教師展示PPT,對“無序列表的基本語法格式”及常用屬性值進(jìn)行講解，并進(jìn)行代碼
演示。
(3)、教師指出定義“無序列表”時需要注意的問題，并給與解答。
(4)、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
>講解“。1元素”
(1)、教師展示PPT對“有序列表”的概念進(jìn)行講解，并列舉網(wǎng)頁中常見的例子進(jìn)行說明。
（2）、教師展示PPT,對“有序列表的基本語法格式”及常用屬性值進(jìn)行講解，并進(jìn)行代碼
演示。
（3）、教師對比“無序列表”與“有序列表”的顯示效果，分析其區(qū)別與聯(lián)系。
（4）、教師指出定義“有序列表”時需要注意的問題，并給與解答。
（5）、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
>講解“dl元素”
（1）、教師展示PPT對“定義列表”的概念進(jìn)行講解，并列舉網(wǎng)頁中常見的例子進(jìn)行說明。
（2）、教師展示PPT,對“定義列表的基本語法格式”及常用屬性值進(jìn)行講解，并進(jìn)行代碼
演示。
（3）、教師對比“定義列表”與“無序列表和有序列表”的顯示效果，分析其區(qū)別與聯(lián)系。
（4）、教師指出定義“定義列表”時需要注意的問題，并給與解答。
（5）、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
令階段小結(jié)
>小結(jié)
重點：3元素、ol元素、dl元素、列表的嵌套應(yīng)用。
>答疑
教師詢問學(xué)生對于知識點還有什么不理解的地方。針對學(xué)生不理解的知識點給與解釋.
令鞏固練習(xí)
>鞏固本課時知識點
學(xué)完知識點后，教師帶領(lǐng)學(xué)生對本課時所學(xué)知識點進(jìn)行回顧。以此使學(xué)生了解無序列表、有序
列表、定義列表的不同，并能熟練地應(yīng)用ul元素、ol元素、dl元素搭建列表結(jié)構(gòu)以及列表的
嵌套應(yīng)用。
>通過“補充案例”加強學(xué)習(xí)
教師分發(fā)測試題目及案例素材給學(xué)生，對于掌握較好的同學(xué)，可以通過補充案例對相關(guān)知識點
進(jìn)行鞏固。
>使用列表元素制作招聘頁面
第二課時
（講解表格元素）
，復(fù)習(xí)上節(jié)課內(nèi)容
復(fù)習(xí)上節(jié)課內(nèi)容，請小組代表對以上問題發(fā)表見解。
答案：
?定義列表常用于對術(shù)語或名詞進(jìn)行解釋和描述，與無序和有序列表不同，定義列表的列表
項前沒有任何項目符號。
定義列表使用<dl></dl>、<dt></dt>和<dd></dd>進(jìn)行定義，其中，<dt></dt>標(biāo)記用于指定術(shù)語
名詞，<dd></dd>標(biāo)記用于對名詞進(jìn)行解釋和描述。一對<dt></dl>可以對應(yīng)多對<dd></dd>,即
可以對一個名詞進(jìn)行多項解釋。
說明：教師可根據(jù)學(xué)生對上述問題的回答情況，對以上問題進(jìn)行簡單講解或直接進(jìn)入本課時新
內(nèi)容的學(xué)習(xí)。
X本課時內(nèi)容學(xué)習(xí)
>講解“表格基本結(jié)構(gòu)”
表格由一行或多行單元格組成，應(yīng)用表格可以讓數(shù)據(jù)展現(xiàn)更有條理。例如，要展現(xiàn)一組企業(yè)員
工通訊錄，通訊錄包括員工名稱、電話、電子郵件、職務(wù)四項，就可以使用多行四欄的表格來展現(xiàn)
企業(yè)員工通訊錄。HTML表格元素使用table標(biāo)簽，表格元素的所有內(nèi)容都放置在table的起始標(biāo)簽
和結(jié)束標(biāo)簽內(nèi)，表格的行元素使用tr標(biāo)簽，一對tr標(biāo)簽（標(biāo)簽的起始標(biāo)簽和結(jié)束標(biāo)簽稱為一對標(biāo)
簽）表示表格的一行。表格的單元格放置在tr標(biāo)簽內(nèi)，單元格又分為表頭（表格的開頭部分）和表
格單元格（表格的主體部分），表頭使用th標(biāo)簽，表格單元格使用td標(biāo)簽?；颈砀窠Y(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表格元素來展現(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)容為黑體字體起到強調(diào)的作用；第二、三、四行為表格主體，也使用
tr標(biāo)簽，tr標(biāo)簽內(nèi)的單元格使用td標(biāo)簽，標(biāo)簽間的內(nèi)容為普通字體。
但顯示的表格有個缺點，欄與欄之間，行與行之間沒有表格線，整個表格結(jié)構(gòu)不是很清晰?？?/p>
以在table標(biāo)簽內(nèi)添加屬性boder來設(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屬性來確定?？梢栽趖able標(biāo)簽中添加width屬性來設(shè)置表格的寬度，單
位為百分?jǐn)?shù)或像素。在前面HTML文檔的table標(biāo)簽添加width屬性，屬性的值為1000像素。，
并預(yù)覽效果。
＞講解“表格單元格內(nèi)容對齊屬性”
表格單元格內(nèi)容對齊屬性分為水平對齊和垂直對齊兩種方式。水平對齊又分為左對齊、居中對
齊、右對齊和兩端對齊；垂直對齊又分為上對齊、中對齊、底對齊。表格單元格內(nèi)容對齊屬性可以
應(yīng)用于tr標(biāo)簽、th標(biāo)簽和td標(biāo)簽。
水平對齊屬性為align,常用值為left（左對齊）、center（居中對齊）、right（右對齊）,justify
（兩端對齊）.
垂直對齊屬性為valign,常用值為top（上對齊）、middle（中對齊）、bottom（底對齊）。
上圖中的表格改變寬度后，單元格內(nèi)容沒有在水平方向上居中對齊，在tr標(biāo)簽添加align屬性，值
為center。
在企業(yè)員工通訊錄中的tr標(biāo)簽添加align屬性后，在瀏覽器顯示。
＞講解“表格的行合并與欄合并”
前面介紹的表格都是由簡單的行和列組成的，如果要展現(xiàn)一些復(fù)雜的表格就難以勝任了。例如
下面的表格：
銷售統(tǒng)計表
商品名稱用途價格金祕（元）
商品A3*1545
辦公
商品B1*3030
合計75
網(wǎng)頁要展現(xiàn)上述表格就需要用到表格的行合并屬性與欄合并屬性。行合并屬性用于一個單元格
跨越多行，通常使用在td和th標(biāo)簽中，屬性為rowspan；欄合并屬性用于一個單元格跨越多欄，
通常使用在td和th標(biāo)簽中,屬性為colspan。
＞講解“＜tbody＞、＜thead＞、＜tfoot＞M元素
第三課時
(講解表單元素)
1復(fù)習(xí)上節(jié)課內(nèi)容
在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。
1、下列選項中，屬于input控件的有哪些？()
A、單行文本輸入框
B、單選按鈕
C、復(fù)選框
D、提交按鈕
答案：ABCD
答案解析：input控件包括單行文本輸入框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕
等。
說明：教師可根據(jù)學(xué)生對上述問題的回答情況，對以上問題進(jìn)行簡單講解或直接進(jìn)入
本課時新內(nèi)容的學(xué)習(xí)。
1本課時內(nèi)容學(xué)習(xí)
令分組討論
對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：
瀏覽網(wǎng)頁時，經(jīng)常會看到包含多個選項的下拉菜單，例如選擇所在的城市、出生年月、
興趣愛好等。那么，如何使用表單元素創(chuàng)建下拉菜單效果呢？
請小組代表對以上問題發(fā)表見解。
教師對上述問題進(jìn)行解釋：
在表單中，使用select控件可以定義下拉菜單效果。其中，〈selectX/select〉標(biāo)記
用于在表單中添加一個下拉菜單，<(^1:1.011〉</(^1:1,011>標(biāo)記嵌套在<5010(^></select>
標(biāo)記中，用于定義下拉菜單中的具體選項，每對<selectX/select>中至少應(yīng)包含一對
<optionX/option>o
令知識點講解
>講解"textarea元素”
(1)、教師通過PPT對“textarea元素”定義的多行文本輸入框效果進(jìn)行展示。
(2)、教師對textarea元素的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。
(3)、教師對textarea元素的常用屬性進(jìn)行講解，并進(jìn)行代碼演示。
(4)、教師指出應(yīng)用“textarea元素”時需要注意的問題，并給予解答。
(5)、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。
＞講解“select元素”
(1)、教師通過PPT對“select元素”定義的下拉菜單效果進(jìn)行展示。
"在校區(qū):所在校區(qū):
「請選擇-二］
-請選擇-
提交I
(2)、教師對使用select元素定義下拉菜單的基本語法格式進(jìn)行講解，并進(jìn)行代碼
演示。
(3)、教師對select元素的常用屬性進(jìn)行講解，并進(jìn)行代碼演示。
(4)、教師指出應(yīng)用“select元素”時需要注意的問題，并給予解答。
(5),教師對如何使用Dreamweaver工具生成表單控件進(jìn)行講解，并通過Dreamweaver
工具進(jìn)行演示。
＞講解“input標(biāo)簽屬性”
第四課時
(講解框架元素、預(yù)留字符)
?框架結(jié)構(gòu)標(biāo)簽(＜frameset＞)
A框架結(jié)構(gòu)標(biāo)簽(＜frameset＞)定義如何將窗口分割為框架
A每個frameset定義了一系列行或列
Arows/columns的值規(guī)定了每行或每列占據(jù)屏幕的面積
?框架標(biāo)簽(Frame)單標(biāo)簽，其屬性見下圖。
注意：不能將＜body＞＜/body＞標(biāo)簽與＜framesetx/frameset＞標(biāo)簽同時使用！不過，假如你添
加包含一段文本的＜noframes＞標(biāo)簽，就必須將這段文字嵌套于＜bodyx/body＞標(biāo)簽內(nèi)。
Frame對象的屬性
屬性
描述j
溫馨提示
- 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年個體戶股東投資合作共識協(xié)議
- 2025年共創(chuàng)輝煌戰(zhàn)略合作伙伴分銷協(xié)議
- 2025年事業(yè)單位電腦設(shè)備租賃合同范文
- 2025年口腔診所醫(yī)生工作合同樣本
- 2025年二手車交易策劃私人合同范本
- 2025年合同銷售合作發(fā)展綱要
- 2025年兒童監(jiān)護(hù)與撫養(yǎng)權(quán)分配合作協(xié)議
- 2025年化工管道帶壓堵漏施工合同范本
- 2025年臨時工試用合同模板
- 2025年兼職策劃活動勞動合同范本
- 雅思學(xué)習(xí)證明范本范例案例模板
- 商業(yè)銀行不良資產(chǎn)處置方式匯總課件
- 注塑生產(chǎn)過程控制流程
- 三相分離器操作手冊
- 一年級下冊口算題(可直接打印)
- 兒童文學(xué)應(yīng)用教程（第二版）完整全套教學(xué)課件 第1-12章 兒童文學(xué)與課程-兒童文學(xué)與小學(xué)語文習(xí)作教學(xué)
- 青島生建z28-75滾絲機說明書
- 公務(wù)員面試應(yīng)急應(yīng)變題目大全及解析
- 學(xué)校年級組長工作計劃
- 2023年廣州市青年教師初中數(shù)學(xué)解題比賽決賽試卷
- 對折剪紙課件
評論
0/150
提交評論