《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第3課 應(yīng)用HTML5中的文本

第課第課應(yīng)用HTML5中的文本的基基本本PAGE1431應(yīng)用HTML5應(yīng)用HTML5中的文本第課321PAGE133212應(yīng)用HTML5中的文本3212應(yīng)用HTML5中的文本第課PAGE1

課題應(yīng)用HTML5中的文本課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握標(biāo)題和段落標(biāo)簽的使用方法（2）掌握基本的文本格式化標(biāo)簽和新增文本標(biāo)簽的使用方法（3）了解特殊字符的使用思政育人目標(biāo)：（1）培養(yǎng)學(xué)生一絲不茍、嚴(yán)謹(jǐn)、認(rèn)真的工作態(tài)度（2）在學(xué)習(xí)中拓展學(xué)生的視野，開(kāi)闊學(xué)生的眼界教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：標(biāo)題和各種標(biāo)簽的使用方法教學(xué)難點(diǎn)：在HTML5中插入標(biāo)題和各種標(biāo)簽教學(xué)方法講授法、啟發(fā)法、問(wèn)答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：知識(shí)講解（35min）第2節(jié)課：導(dǎo)入新知（4min）知識(shí)講解（21min）

編程比賽（15min）

課堂小結(jié)（3min）

作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課考勤

（2min）【教師】清點(diǎn)上課人數(shù)，記錄好考勤【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

（4min）【教師】提出問(wèn)題，引出本節(jié)課內(nèi)容網(wǎng)頁(yè)主要是通過(guò)文本向?yàn)g覽者傳遞信息的，所以說(shuō)文本是網(wǎng)頁(yè)中不可缺少的重要內(nèi)容使用HTML5語(yǔ)言的第一步就是了解它的標(biāo)簽和文本格式，在HTML語(yǔ)言中如何正確的使用標(biāo)簽和文本格式呢【學(xué)生】思考、討論通過(guò)問(wèn)答的方式，讓學(xué)生主動(dòng)思考，如何在HTML5語(yǔ)言對(duì)標(biāo)簽和文本格式進(jìn)行使用，引起學(xué)生的學(xué)習(xí)興趣預(yù)備知識(shí)

（25min）【教師】通過(guò)學(xué)生的回答引入新的知識(shí)點(diǎn)，講解標(biāo)題和段落標(biāo)簽1．標(biāo)題標(biāo)簽HTML5中提供了6個(gè)級(jí)別的標(biāo)題，可用<h1>～<h6>標(biāo)簽來(lái)標(biāo)記，其中<h1>的標(biāo)題級(jí)別最高，<h6>的標(biāo)題級(jí)別最低。默認(rèn)情況下，這些標(biāo)簽都具有字體加粗效果，并按照標(biāo)題級(jí)別的降低，字號(hào)依次減小。標(biāo)題可以看作網(wǎng)頁(yè)的大綱，根據(jù)網(wǎng)頁(yè)內(nèi)容合理安排各級(jí)別標(biāo)題可以更清晰地表達(dá)出網(wǎng)頁(yè)的概要內(nèi)容?！窘處煛垦菔纠?-1】的操作過(guò)程，實(shí)現(xiàn)圖2-1的效果（具體操作詳見(jiàn)教材）圖2-1“詩(shī)詞精選”網(wǎng)頁(yè)的大綱2．段落標(biāo)簽網(wǎng)頁(yè)的正文部分一般使用段落文本顯示，在HTML5中使用<p>標(biāo)簽標(biāo)記段落文本。雖然使用其他標(biāo)簽也能實(shí)現(xiàn)段落文本的顯示效果，但是不建議使用，因?yàn)榭赡軙?huì)妨礙搜索引擎的識(shí)別。【教師】演示例【2-2】的操作過(guò)程，實(shí)現(xiàn)圖2-2的效果（具體操作詳見(jiàn)教材）圖2-2應(yīng)用<p>標(biāo)簽的頁(yè)面效果【學(xué)生】聆聽(tīng)、觀看案例演示、記錄、思考【教師】講述基本的文本格式化標(biāo)簽1．強(qiáng)調(diào)在HTML5中，使用<strong>和<em>標(biāo)簽強(qiáng)調(diào)文本，<em>的強(qiáng)調(diào)語(yǔ)氣輕于<strong>，它們可以嵌套使用。默認(rèn)情況下，<strong>標(biāo)簽中的文本會(huì)添加字體加粗效果，<em>標(biāo)簽中的文本則添加斜體效果，如果<em>嵌套在<strong>中，其中的文本將同時(shí)添加斜體和粗體效果?！窘處煛垦菔纠?-3】的操作過(guò)程，實(shí)現(xiàn)圖2-3的效果（具體操作詳見(jiàn)教材）圖2-3應(yīng)用<strong>和<em>標(biāo)簽的頁(yè)面效果2．上下標(biāo)上標(biāo)與下標(biāo)是很重要的排版格式，在HTML5中，分別使用<sup>與<sub>標(biāo)簽來(lái)標(biāo)記上標(biāo)文本與下標(biāo)文本。上標(biāo)文本比主體文字稍高，常見(jiàn)的上標(biāo)有指數(shù)、商標(biāo)符號(hào)等。下標(biāo)文本比主體文字稍低，常見(jiàn)的下標(biāo)有腳注、化學(xué)符號(hào)腳標(biāo)等。【教師】演示例【2-4】的操作過(guò)程，實(shí)現(xiàn)圖2-4的效果（具體操作詳見(jiàn)教材）圖2-4應(yīng)用<sup>和<sub>標(biāo)簽的頁(yè)面效果3．插入與刪除的文本在HTML5中，分別使用<ins>與<del>標(biāo)簽標(biāo)記插入與刪除的文本。默認(rèn)情況下，<ins>標(biāo)簽中的文本會(huì)添加下劃線效果，<del>標(biāo)簽中的文本會(huì)添加刪除線效果。【教師】演示例【2-5】的操作過(guò)程，實(shí)現(xiàn)圖2-5的效果（具體操作詳見(jiàn)教材）圖2-5應(yīng)用<ins>和<del>標(biāo)簽的頁(yè)面效果4．引用在HTML5中，使用<q>標(biāo)簽標(biāo)記較短的引用文本，其中的文本兩側(cè)會(huì)添加引號(hào)。如果引用的文本過(guò)長(zhǎng)，需要從周?chē)奈谋局蟹蛛x出來(lái)，則可以使用<blockquote>標(biāo)簽，其中的文本兩側(cè)會(huì)添加縮進(jìn)效果，有時(shí)會(huì)添加斜體效果。除此之外，HTML5中還有一個(gè)標(biāo)記引用文本的<cite>標(biāo)簽，表示引用或參考的對(duì)象，其中的文本會(huì)添加斜體效果?！窘處煛垦菔纠?-6】的操作過(guò)程，實(shí)現(xiàn)圖2-6的效果（具體操作詳見(jiàn)教材）圖2-6應(yīng)用引用標(biāo)簽的頁(yè)面效果5．注解在HTML5中，使用<small>標(biāo)簽標(biāo)記行內(nèi)的注解文本，如注意事項(xiàng)、免責(zé)聲明等。默認(rèn)情況下，<small>標(biāo)簽中的文本會(huì)添加字號(hào)減小效果，可以嵌套使用?！窘處煛垦菔纠?-7】的操作過(guò)程，實(shí)現(xiàn)圖2-7的效果（具體操作詳見(jiàn)教材）圖2-7應(yīng)用<small>標(biāo)簽的頁(yè)面效果6．縮寫(xiě)詞在HTML5中，使用<abbr>標(biāo)簽標(biāo)記簡(jiǎn)稱或縮寫(xiě)詞，并使用其title屬性提供簡(jiǎn)稱或縮寫(xiě)詞的全稱，當(dāng)鼠標(biāo)指針移至<abbr>標(biāo)簽上時(shí)，將顯示該全稱?！窘處煛垦菔纠?-8】的操作過(guò)程，實(shí)現(xiàn)圖2-8的效果（具體操作詳見(jiàn)教材）圖2-8應(yīng)用<abbr>標(biāo)簽的頁(yè)面效果7．文本換行與文本方向在HTML5中，使用<br/>標(biāo)簽實(shí)現(xiàn)文本的換行顯示（不建議大量使用），使用<bdo>標(biāo)簽控制文本的輸出方向。<bdo>標(biāo)簽有一個(gè)dir屬性，它有兩個(gè)屬性值，分別是ltr（從左至右）和rtl（從右至左）。dir屬性省略時(shí)默認(rèn)為從左至右顯示?！窘處煛垦菔纠?-9】的操作過(guò)程，實(shí)現(xiàn)圖2-9的效果（具體操作詳見(jiàn)教材）圖2-9應(yīng)用<br/>和<bdo>標(biāo)簽的頁(yè)面效果8．其他文本格式化標(biāo)簽除上述標(biāo)簽外，HTML5還提供了一些其他文本格式化標(biāo)簽，下面簡(jiǎn)單介紹。（1）<code>標(biāo)簽。用于標(biāo)記代碼或文件名。（2）<pre>標(biāo)簽。用于標(biāo)記預(yù)定義格式的文本，可以保留文本固有的換行和空格等。（3）<dfn>標(biāo)簽。用于標(biāo)記專(zhuān)用術(shù)語(yǔ)，其中的文本會(huì)添加斜體效果?！窘處煛垦菔纠?-10】的操作過(guò)程，實(shí)現(xiàn)圖2-10的效果（具體操作詳見(jiàn)教材）圖2-10應(yīng)用其他文本格式化標(biāo)簽的頁(yè)面效果【學(xué)生】聆聽(tīng)、觀看案例演示、記錄、思考【教師】板書(shū)基本的文本格式化標(biāo)簽，著重講解【學(xué)生】記錄板書(shū)內(nèi)容，做好課堂筆記【教師】提出問(wèn)題，讓學(xué)生思考HTML5基本標(biāo)簽中，是否可以混合使用？標(biāo)簽的順序?qū)?biāo)簽的使用是否有影響?！緦W(xué)生】思考、討論、交流【教師】根據(jù)所講知識(shí)出幾個(gè)案例，讓學(xué)生進(jìn)行操作【學(xué)生】根據(jù)所學(xué)知識(shí)進(jìn)行操作【教師】公布正確代碼，并進(jìn)行講解通過(guò)講解知識(shí)點(diǎn)和案例，讓學(xué)生進(jìn)一步了解HTML5中的各類(lèi)文本標(biāo)簽交流討論

（4min）【教師】安排組間討論，設(shè)置討論話題安排小組之間兩兩討論，分析HTML5中使用標(biāo)簽的原因，使用單個(gè)標(biāo)簽和混合使用標(biāo)簽各自的優(yōu)缺點(diǎn)?！緦W(xué)生】完成小組討論，記錄討論內(nèi)容讓學(xué)生有自我反省的意識(shí)，并且及時(shí)回顧學(xué)習(xí)的內(nèi)容第二節(jié)課導(dǎo)入新知

（4min）【教師】復(fù)習(xí)上一節(jié)課內(nèi)容，引出新的知識(shí)點(diǎn)上一節(jié)課主要學(xué)習(xí)了HTML5中的基本標(biāo)簽，但是為了滿足用戶的需求，在此基礎(chǔ)之上，還增加了許多新的文本標(biāo)簽，這些新標(biāo)簽的使用，豐富了HTML5語(yǔ)言的內(nèi)容?！緦W(xué)生】聆聽(tīng)、思考通過(guò)復(fù)習(xí)上一節(jié)課的內(nèi)容，讓學(xué)生了解HTML5中新增的文本標(biāo)簽知識(shí)講解

（21min）【教師】講解HTML5新增的文本標(biāo)簽1．突出顯示文本在HTML5中，使用<mark>標(biāo)簽標(biāo)記頁(yè)面中需要突出顯示的文本內(nèi)容。默認(rèn)情況下，其中的文本會(huì)添加黃色背景。【教師】演示例【2-11】的操作過(guò)程，實(shí)現(xiàn)圖2-11的效果（具體操作詳見(jiàn)教材）圖2-11應(yīng)用<mark>標(biāo)簽的頁(yè)面效果2．進(jìn)度在HTML5中，使用<progress>標(biāo)簽標(biāo)記一項(xiàng)任務(wù)的完成進(jìn)度，在頁(yè)面中顯示為一個(gè)進(jìn)度條，使用標(biāo)簽屬性可以設(shè)置進(jìn)度條的最大值（max，默認(rèn)值為1）和已完成任務(wù)量（value）等，如兩者皆省略則顯示為加載狀態(tài)（谷歌瀏覽器的顯示效果為左右來(lái)回移動(dòng)的色塊）。【教師】演示例【2-12】的操作過(guò)程，實(shí)現(xiàn)圖2-12的效果（具體操作詳見(jiàn)教材圖2-12應(yīng)用<progress>標(biāo)簽的頁(yè)面效果3．計(jì)量在HTML5中，使用<meter>標(biāo)簽標(biāo)記分?jǐn)?shù)的值或某個(gè)范圍的計(jì)量結(jié)果。例如，已售票數(shù)（共800張，已售300張）和磁盤(pán)使用量（共300G，已用180G）等。支持<meter>標(biāo)簽的瀏覽器會(huì)自動(dòng)顯示測(cè)量值，并根據(jù)設(shè)定的屬性值顯示為不同的顏色。<meter>標(biāo)簽包含7個(gè)屬性，下面分別介紹。（1）value。所顯示的實(shí)際值，默認(rèn)值為0，必須標(biāo)注且其值在min與max值之間。（2）max。顯示范圍的最大值，默認(rèn)值為1。（3）min。顯示范圍的最小值，默認(rèn)值為0。（4）low。合理范圍的最低限度，當(dāng)value小于low并大于min時(shí)，計(jì)量條顯示為計(jì)量過(guò)低的顏色。（5）high。合理范圍的最高限度，當(dāng)value大于high并小于max時(shí)，計(jì)量條顯示為計(jì)量過(guò)高的顏色。（6）optimum。最佳值，其值必須在min與max之間。（7）form。設(shè)置<meter>標(biāo)簽所屬的一個(gè)或多個(gè)表單?！窘處煛垦菔纠?-13】的操作過(guò)程，實(shí)現(xiàn)圖2-13的效果（具體操作詳見(jiàn)教材）圖2-13應(yīng)用<meter>標(biāo)簽的頁(yè)面效果4．聯(lián)系信息在HTML5中，使用<address>標(biāo)簽標(biāo)記與頁(yè)面或頁(yè)面某部分有關(guān)的作者、組織的聯(lián)系信息。當(dāng)表示與頁(yè)面有關(guān)的聯(lián)系信息時(shí)，通常位于頁(yè)面底部的<footer>標(biāo)簽中；當(dāng)表示與某個(gè)<article>有關(guān)的聯(lián)系信息時(shí)，則位于該<article>中。聯(lián)系信息可以是作者的電子郵件地址或通信地址，也可以是指向聯(lián)系信息的鏈接。默認(rèn)情況下，其中的文本會(huì)添加斜體效果，有些瀏覽器還會(huì)在其前后增加空行?！窘處煛垦菔纠?-14】的操作過(guò)程，實(shí)現(xiàn)圖2-14的效果（具體操作詳見(jiàn)教材）圖2-14應(yīng)用<address>標(biāo)簽的頁(yè)面效果5．換行斷點(diǎn)在HTML5中，使用<wbr>標(biāo)簽標(biāo)記可換行點(diǎn)。它不會(huì)像<br/>標(biāo)簽一樣直接將文本截?cái)?，而是表示該段文本過(guò)長(zhǎng)，當(dāng)窗口寬度變化需要換行顯示時(shí)可在該標(biāo)簽處截?cái)??！窘處煛垦菔纠?-15】的操作過(guò)程，實(shí)現(xiàn)圖2-15的效果（具體操作詳見(jiàn)教材）圖2-15應(yīng)用<wbr>標(biāo)簽的頁(yè)面效果6．注音在HTML5中，使用<ruby>標(biāo)簽為字符添加注音（也稱旁注）。注音是東亞語(yǔ)言（如中文或日文）中的一種慣用符號(hào)，一般位于要標(biāo)注字符的上方或右側(cè)。<ruby>標(biāo)簽在使用時(shí)需要與<rt>標(biāo)簽連用，<rt>標(biāo)簽標(biāo)記字符需要標(biāo)注的內(nèi)容，也就是注音?！窘處煛垦菔纠?-16】的操作過(guò)程，實(shí)現(xiàn)圖2-16的效果（具體操作詳見(jiàn)教材）圖2-16應(yīng)用<ruby>標(biāo)簽的頁(yè)面效果【學(xué)生】聆聽(tīng)、觀看案例演示、記錄、思考【教師】講解特殊字符在網(wǎng)頁(yè)中編輯文本時(shí)，可能會(huì)遇到無(wú)法直接輸入的字符，如版權(quán)符號(hào)“?”、注冊(cè)商標(biāo)符號(hào)“?”等。HTML5為這些特殊字符準(zhǔn)備了專(zhuān)門(mén)的代碼，如表2-1所示表2-1常用特殊字符的代碼特殊字符含義代碼空格 <大于號(hào)<>小于號(hào)>&邏輯與符號(hào)&￥人民幣符號(hào)¥?版權(quán)符號(hào)©?注冊(cè)商標(biāo)符號(hào)®°度符號(hào)°±正負(fù)號(hào)±×乘號(hào)×÷除號(hào)÷【教師】演示例【2-17】的操作過(guò)程，實(shí)現(xiàn)圖2-17的效果（具體操作詳見(jiàn)教材）圖2-17使用代碼輸出特殊字符的頁(yè)面效果【學(xué)生】聆聽(tīng)、觀看案例演示、記錄、思考通過(guò)講解知識(shí)點(diǎn)，讓學(xué)生了解HTML5中新增的文本標(biāo)簽編程比賽

（15min）【教師】組織編程比賽，設(shè)置比賽題目創(chuàng)建“圖書(shū)簡(jiǎn)介”頁(yè)面【教師】解析比賽題目網(wǎng)絡(luò)技術(shù)的發(fā)展推動(dòng)了電子商務(wù)的發(fā)展與成熟，各種類(lèi)型的電子商務(wù)網(wǎng)站如雨后春筍般涌現(xiàn)出來(lái)，其中就包括網(wǎng)上書(shū)店。本節(jié)將使用HTML5中的文本標(biāo)簽創(chuàng)建網(wǎng)上書(shū)店中常見(jiàn)的“圖書(shū)簡(jiǎn)介”頁(yè)面，最終效果如圖2-18所示圖2-18“圖書(shū)簡(jiǎn)介”頁(yè)面的最終效果【學(xué)生】參加編程比賽，完成編程任務(wù)【教師】巡視課堂，營(yíng)造公平競(jìng)爭(zhēng)的環(huán)境通過(guò)編程比賽的設(shè)置，讓學(xué)生熟練掌握HTML5中新增標(biāo)簽的使用課堂小結(jié)

（3mi