第課第課應用HTML5中的文本的基基本本PAGE1431應用HTML5應用HTML5中的文本第課321PAGE133212應用HTML5中的文本3212應用HTML5中的文本第課PAGE1

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

編程比賽（15min）

課堂小結（3min）

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

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

（4min）【教師】提出問題，引出本節(jié)課內容網頁主要是通過文本向瀏覽者傳遞信息的，所以說文本是網頁中不可缺少的重要內容使用HTML5語言的第一步就是了解它的標簽和文本格式，在HTML語言中如何正確的使用標簽和文本格式呢【學生】思考、討論通過問答的方式，讓學生主動思考，如何在HTML5語言對標簽和文本格式進行使用，引起學生的學習興趣預備知識

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

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

（4min）【教師】復習上一節(jié)課內容，引出新的知識點上一節(jié)課主要學習了HTML5中的基本標簽，但是為了滿足用戶的需求，在此基礎之上，還增加了許多新的文本標簽，這些新標簽的使用，豐富了HTML5語言的內容?！緦W生】聆聽、思考通過復習上一節(jié)課的內容，讓學生了解HTML5中新增的文本標簽知識講解

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

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

（3mi