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

下載本文檔

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

文檔簡(jiǎn)介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

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

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入（8min）【教師】提出以下問(wèn)題HTML5表單控件<input>的新增類(lèi)型包括哪些內(nèi)容？【學(xué)生】思考、舉手回答【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)通過(guò)問(wèn)題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知

（25min）2.14HTML5新增表單控件及屬性2.14.1表單控件<input>的新增類(lèi)型【教師】講解表單控件<input>新增類(lèi)型的語(yǔ)法格式與示例1.數(shù)字框number當(dāng)type的值為number時(shí)，可獲得數(shù)字框控件，它可以生成一個(gè)只能輸入數(shù)字的輸入框，且該輸入框右側(cè)有微調(diào)按鈕，可以增減輸入框中的數(shù)值，步長(zhǎng)默認(rèn)為1。【課堂互動(dòng)】?【教師】提問(wèn)數(shù)字框可以配合哪些屬性使用？?【學(xué)生】聆聽(tīng)、思考、回答數(shù)字框可以配合max和min屬性使用，用于設(shè)置可微調(diào)的最大值和最小值，還可以使用step屬性改變步長(zhǎng)值。該控件的語(yǔ)法格式如下：<inputtype="number"name="控件名稱(chēng)"value="初始值"min="微調(diào)最小值"max="微調(diào)最大值"step="步長(zhǎng)值"/></iframe>【示例2-14-1】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 請(qǐng)輸入一個(gè)數(shù)字： <inputtype="number"name="number"value="10"min="0"max="50"step="2"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“頁(yè)面加載后數(shù)字框初始狀態(tài)”“數(shù)字框中的值增加至50不能再增加”圖片（詳見(jiàn)教材），并講解效果：頁(yè)面加載后，數(shù)字框中的初始值為10。該數(shù)字框的微調(diào)最小值為0，微調(diào)最大值為50，步長(zhǎng)值為2。當(dāng)數(shù)字框中的值為0時(shí)，就不能再微調(diào)減小了；當(dāng)數(shù)字框中的值為50時(shí)，就不能再微調(diào)增大了。【提示】用戶(hù)可以手動(dòng)輸入不在0-50范圍內(nèi)的值。2.顏色選擇器color當(dāng)type的值為color時(shí)，可獲得顏色選擇器控件，它可以生成一個(gè)允許用戶(hù)選擇顏色的顏色選擇器。該控件的語(yǔ)法格式如下：<inputtype="color"name="控件名稱(chēng)"value="初始顏色值"/>【示例2-14-2】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> <inputtype="color"name="myColor"value="#FF0000"/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“顏色選擇器初始效果”“單擊打開(kāi)顏色選擇器初始效果”“選擇新顏色的效果“圖片（詳見(jiàn)教材），并講解效果：頁(yè)面中顯示一個(gè)初始顏色為紅色的顏色選擇器。單擊打開(kāi)顏色選擇器。選擇一個(gè)新顏色，顏色選擇器效果。3.郵箱地址框email當(dāng)type的值為email時(shí)，可獲得郵箱地址框控件，它可以生成一個(gè)可以驗(yàn)證E-mail地址格式的輸入框，還可以指定多個(gè)E-mail地址。若使用屬性multiple="multiple"，則該控件可以接受多個(gè)地址，每個(gè)地址之間用英文標(biāo)點(diǎn)逗號(hào)隔開(kāi)。該控件的語(yǔ)法格式如下：<inputtype="email"name="控件名稱(chēng)"value="初始值"multiple="multiple"/>【示例2-14-3】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> <inputtype="email"name="myEmail"value="521521@"/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“郵箱地址框應(yīng)用初始效果”“提交時(shí)郵箱地址框內(nèi)容不符合規(guī)則效果”圖片（詳見(jiàn)教材），并講解效果：頁(yè)面加載后，若輸入的E-mail地址沒(méi)有@符號(hào)時(shí)，單擊“提交”按鈕會(huì)出現(xiàn)提示。4.網(wǎng)址框url當(dāng)type的值為url時(shí)，可獲得網(wǎng)址框控件，它可以生成一個(gè)能夠驗(yàn)證URL的輸入框。該控件的語(yǔ)法格式如下：<inputtype="url"name="控件名稱(chēng)"value="初始值"/>【示例2-14-4】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> <inputtype="url"name="myUrl"value=""/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“網(wǎng)址框應(yīng)用初始效果”“提交時(shí)網(wǎng)址框內(nèi)容不符合規(guī)則效果”圖片（詳見(jiàn)教材），并講解效果：頁(yè)面加載后，將URL地址中的http://去掉，單擊“提交”按鈕出現(xiàn)提示。5.電話(huà)號(hào)碼框tel【課堂互動(dòng)】?【教師】提問(wèn)如何生成一個(gè)只能輸入電話(huà)號(hào)碼的輸入框？?【學(xué)生】聆聽(tīng)、思考、回答當(dāng)type的值為tel時(shí)，可獲得電話(huà)號(hào)碼框控件，它可以生成一個(gè)只能輸入電話(huà)號(hào)碼的輸入框。該控件的語(yǔ)法格式如下：<inputtype="tel"name="控件名稱(chēng)"/>【提示】由于世界各地的電話(huà)號(hào)碼格式有所差別，瀏覽器一般不對(duì)其做太多檢查。電話(huà)號(hào)碼框控件在使用上與文本域控件沒(méi)有太多區(qū)別，但是在移動(dòng)端，該控件則會(huì)自動(dòng)喚醒數(shù)字鍵盤(pán)?！臼纠?-14-5】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> <inputtype="tel"name="myTel"/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“電話(huà)號(hào)碼框的應(yīng)用效果”圖片（詳見(jiàn)教材），并講解效果：在輸入框中輸單擊“提交”按鈕，提交的參數(shù)myTel示在地址欄中。6.搜索框search當(dāng)type的值為search時(shí)，可獲得搜索框控件，它可以生成一個(gè)用于輸入搜索關(guān)鍵字的輸入框。該控件的語(yǔ)法格式如下：<inputtype="search"name="控件名稱(chēng)"/>【提示】搜索框控件在使用上與文本域控件沒(méi)有太多區(qū)別，但是在移動(dòng)端，該控件則會(huì)自動(dòng)喚醒搜索鍵盤(pán)?！臼纠?-14-6】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> <inputtype="search"name="mysch"/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“搜索框的應(yīng)用效果”圖片（詳見(jiàn)教材），并講解效果：在搜索框中輸入web，搜索框右側(cè)顯示關(guān)閉按鈕。單擊“提交”按鈕，提交的參數(shù)mysch=web顯示在地址欄中。【學(xué)生】聆聽(tīng)、記錄、理解通過(guò)教師講解、課堂互動(dòng)、演示操作等方式，使學(xué)生了解HTML5表單控件<input>新增類(lèi)型的語(yǔ)法及使用頭腦風(fēng)暴（10min）【教師】根據(jù)頭腦風(fēng)暴主題，組織學(xué)生分組開(kāi)展討論根據(jù)各隊(duì)伍的網(wǎng)站主題，討論如何具體使用本節(jié)課中的標(biāo)簽設(shè)計(jì)一個(gè)右側(cè)有微調(diào)按鈕的藍(lán)色輸入框、能夠驗(yàn)證URL的輸入框，以及用于輸入搜索關(guān)鍵字的輸入框?！緦W(xué)生】思考、討論通過(guò)頭腦風(fēng)暴的形式，活躍課堂氣氛，引發(fā)學(xué)生思考，培養(yǎng)學(xué)生的創(chuàng)新能力和團(tuán)隊(duì)精神第二節(jié)課問(wèn)題導(dǎo)入（5min）【教師】提出以下問(wèn)題除了之前所講的內(nèi)容外，表單控件<input>還有哪些新增類(lèi)型？【學(xué)生】思考、舉手回答通過(guò)提問(wèn)引導(dǎo)學(xué)生思考本節(jié)課內(nèi)容傳授新知

（25min）2.14.1表單控件<input>的新增類(lèi)型【教師】講解表單控件<input>其他新增類(lèi)型的語(yǔ)法格式與示例7.拖動(dòng)條range當(dāng)type的值為range時(shí)，可獲得拖動(dòng)條控件，它可以生成一個(gè)指定范圍的拖動(dòng)條，默認(rèn)范圍為0～100，默認(rèn)值為最大值的50%。拖動(dòng)條可以配合max和min屬性使用，用于指定拖動(dòng)條的最大值和最小值，還可以使用step屬性修改步長(zhǎng)值。該控件的語(yǔ)法格式如下：<inputtype="range"name="控件名稱(chēng)"value="初始值"max="最大值"min="最小值"step="步長(zhǎng)值"/>【示例2-14-7】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> <inputtype="range"name="myrange"value=""max="80"min="0"step="2"/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“<input>控件range類(lèi)型的應(yīng)用”圖片（詳見(jiàn)教材），并講解效果：頁(yè)面中顯示一個(gè)拖動(dòng)條，當(dāng)前值為40，單擊“提交”按鈕，提交的參數(shù)myrange=40顯示在地址欄中。8.日期框date【課堂互動(dòng)】?【教師】提問(wèn)如何獲得日期框控件？?【學(xué)生】聆聽(tīng)、思考、回答當(dāng)type的值為date時(shí)，可獲得日期框控件，它可以直接輸入年、月、日，或從選擇器中選擇日期。該控件的語(yǔ)法格式如下：<inputtype="date"name="控件名稱(chēng)"/>【示例2-14-8】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> <inputtype="date"name="myDate"/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“日期框的應(yīng)用效果”“展開(kāi)的日期選擇器“圖片（詳見(jiàn)教材），并講解效果：頁(yè)面中，可以直接輸入年、月、日，也可以單擊右側(cè)圖標(biāo)展開(kāi)選擇器選擇日期。9.月份框month當(dāng)type的值為month時(shí)，可獲得月份框控件，它可以直接輸入年和月，或從選擇器中選擇年和月。該控件的語(yǔ)法格式如下：<inputtype="month"name="控件名稱(chēng)"/>【示例2-14-9】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> <inputtype="month"name="myMonth"/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“月份框的應(yīng)用效果”“展開(kāi)的月份選擇器“圖片（詳見(jiàn)教材），并講解效果：頁(yè)面中，可以直接輸入年和月，也可以單擊右側(cè)圖標(biāo)展開(kāi)選擇器選擇年和月。10.星期框week當(dāng)type的值為week時(shí)，可獲得星期框控件，它可以直接輸入年和周，或從選擇器中選擇年和周。該控件的語(yǔ)法格式如下：<inputtype="week"name="控件名稱(chēng)"/>【示例2-14-10】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> <inputtype="week"name="myWeek"/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“星期框的應(yīng)用效果”“展開(kāi)的周選擇器“圖片（詳見(jiàn)教材），并講解效果：頁(yè)面中，可以直接輸入年和周，也可以單擊右側(cè)圖標(biāo)展開(kāi)選擇器選擇年和周。11.時(shí)間框time當(dāng)type的值為time時(shí)，可獲得時(shí)間框控件，它可以直接輸入時(shí)和分，或從選擇器中選擇時(shí)和分。該控件的語(yǔ)法格式如下：<inputtype="time"name="控件名稱(chēng)"/>【示例2-14-11】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> <inputtype="time"name="myTime"/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“時(shí)間框的應(yīng)用效果”“展開(kāi)的時(shí)間選擇器“圖片（詳見(jiàn)教材），并講解效果：頁(yè)面中，可以直接輸入時(shí)和分，也可以單擊右側(cè)圖標(biāo)展開(kāi)選擇器選擇時(shí)和分。【學(xué)生】聆聽(tīng)、記錄、理解2.14.2新增表單控件<output>【教師】講解表單控件<output>的語(yǔ)法格式與示例【課堂互動(dòng)】?【教師】提問(wèn)<output>標(biāo)簽的作用是什么？?【學(xué)生】聆聽(tīng)、思考、回答<output>標(biāo)簽用于定義不同類(lèi)型的輸出，如腳本輸出，其可選擇的屬性有for、name。其中，for用于定義與輸出域相關(guān)的一個(gè)或多個(gè)元素；name用于定義<output>控件的名稱(chēng)。該標(biāo)簽的語(yǔ)法格式如下：<inputtype="time"name="控件名稱(chēng)"/>【示例2-14-12】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <h4>兩個(gè)整數(shù)相乘：</h4> <formaction=""oninput="result.value=parseInt(num1.value)*parseInt(num2.value)"> <inputtype="number"name="num1"id="num1"value=""placeholder="請(qǐng)輸入一個(gè)數(shù)"/>* <inputtype="number"name="num2"id="num2"value=""placeholder="請(qǐng)輸入另一個(gè)數(shù)"/>= <outputname="result"for="num1num2"></output> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“output控件應(yīng)用初始效果”“outpu

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論