Web前端技術(shù)項目式教程(HTML5CSS3FlexBootstrap)教案-HTML5標簽

1、第2章使用HTML5搭建旅游公司網(wǎng)站首頁結(jié)構(gòu)課程名稱Web前端開發(fā)項目名稱HTML5標簽任務(wù)名稱HTML5標簽課時2項目性質(zhì)演示性驗證性設(shè)計性綜合性授課班級授課日期授課地點教學目標能力目標：1. 具備熟練使用HTML標簽的能力2. 具備使用HTML標簽搭建網(wǎng)頁基本結(jié)構(gòu)的能力 知識目標：1. 掌握HTML5的表格標簽的使用2. 掌握div和VSPan標簽的使用3. 掌握HTML5的各種語義化分段元素的使用 素質(zhì)目標：1. 培養(yǎng)學生自主學習能力2. 培養(yǎng)學生團結(jié)協(xié)作、互幫互助的能力教學內(nèi)容1. 任務(wù)描述2. 任務(wù)展示與實現(xiàn)（1）編寫HTML5的表格標簽（2）編寫 HTML5的 div 和 VSPa

2、n標簽（3）編寫HTML5的各種語義化分段元素（5）學生動手操作3. 教師講解本任務(wù)涉及的知識點4. 任務(wù)小結(jié)教學重點1. HTML5標簽的含義2. HTML5標簽的準確使用教學難點1. HTML5標簽的準確使用教學準備1. 裝有SUbIime或者HbUilder 的電腦2. 教學課件PPT3. 教材：Web前端技術(shù)項目式教程作業(yè)設(shè)計1.制作一個包含所學標簽的 HTMLM面教學過程教學環(huán)節(jié)教學內(nèi)容與過程（教學內(nèi)容、教學方法、組織形式、教學手段）課前組織做好課前“ 5分鐘”教學管理（多媒體、實訓室），做好上課前的各項準備工作（打開電腦、打 開課件、打開軟件、打開 U盤中的素材位置、打開授課計劃、

3、教案等），吸引學生注意力。課程說明【課前說明】分別從HTML5表格標簽、vdiv和VSPan標簽、HTML5的各種語義化分段兀素等知識點進行初步 的了解?！灸康摹渴箤W生從了解本單元的學習目標、學習重點、考評方式等方面明確學習本單元知識的要求和目 標。課程內(nèi)容描述一、HTML5的表格標簽HTML5 的表格標簽主要有 VtabIecaptionvtrvtdthvtheadvtbodyvtfoot 等。Vtable標簽：用于定義表格，是表格最外層的標簽。VCaPtiO n標簽：展示一個表格的標題。vtr標簽：代表表格中的行。vtd標簽：代表表格中的單元格。vth標簽：代表表格中的表頭單元格。Vthe

4、ad標簽：代表表格中的表頭。Vtbody標簽：代表表格中的一塊具體數(shù)據(jù)（表格主體）。vtfoot標簽：代表表格中的表尾。二、傳統(tǒng)的布局標簽vdiv和VSPan（1） vdiv 標簽在Web2.0時代，vdiv標簽是最常用的布局容器。vdiv標簽沒有語義，相當于一個區(qū)塊容器，可以容納各種網(wǎng)頁兀素。區(qū)塊容器有兩大特點：區(qū)塊兀素必須獨占一行，不允許本行的后面再有 其他內(nèi)容；區(qū)塊容器默認情況下的寬度與它的父級標簽的寬度相同。因此，可以把vdiv與vdiv中的內(nèi)容視為一個獨立的對象，用于CSS的控制，在div標簽中加上class或id屬性可以應用額外的樣式。（2）span標簽spa n標簽用來組合文檔中

5、的行內(nèi)元素。行內(nèi)元素的特點剛好跟區(qū)塊容器的特點相反： 行內(nèi)元素不需要獨占一行，本行后面還允許有其他的內(nèi)容； 行內(nèi)元素的寬度在默認情況下與它內(nèi)部內(nèi)容的寬度相同。三、HTML5的各種語義化分段元素（1）Vheader標簽Vheader標簽代表"網(wǎng)頁”或"SeCtiOn”的頁眉，可以是“網(wǎng)頁”或任意"SeCtiOn ”的頭部部分， 其通常包含一些引導和導航信息，用法如下。（2）Vfooter 標簽Vfooter標簽代表"網(wǎng)頁”或"SeCtiO n”的頁腳，可以是"網(wǎng)頁”或"SeCtiO n”的底部部分，通常含有該節(jié)的一些基本信息，

6、如作者、相關(guān)文檔鏈接、版權(quán)資料，用法如下。（3）Vhgroup 標簽Vhgroup標簽代表"網(wǎng)頁”或"SeCtiOn”的標題，當元素有多個層級時，該元素可以將 hl到h6 元素放在其內(nèi)，如文章的主標題和副標題的組合，用法如下。（4）Vnav 標簽nav標簽代表頁面的導航鏈接區(qū)域，用于定義頁面的主要導航部分，用法如下。（5）VaSide 標簽VaSide標簽用在article內(nèi)表示主要內(nèi)容的附屬信息，用在article之外可作為側(cè)邊欄，用法如下。（6）VSeCtiOn 標簽VSeCtiOn標簽代表文檔中的“節(jié)”或“段”，“段”可以指一篇文章里按照主題的分段；“節(jié)”可以是指一個

7、頁面里的分組。VSeCtio n通常還帶有標題。VSeCtio n標簽的用法如下。（7）VartiCle 標簽VartiCle標簽最容易與 VSeCtion和Vdiv容易混淆，VartiCle代表一個在文檔、頁面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨立開發(fā)或重用，譬如論壇的帖子、博客的文章、一篇用戶 的評論。除了它的內(nèi)容，VartiCle會有一個標題（通常會在header里）和一個Vfooter頁腳，用法如下。8課堂實訓(1) Vheader>標簽Vheader>VhgrOUp><h1>網(wǎng)站標題<h1><h1>網(wǎng)站副標題<h

8、1><hgroup><header>(2) <footer> 標簽<footer>CoPYRlGHT 小北<footer>(3) Vhgroup>標簽Vhgroup><h1>這是一篇介紹HTML 5語義化標簽和更簡潔的結(jié)構(gòu)Vh2>HTML 5Vh2>Vhgroup>(4) Vnav>標簽Vn av>Vul>Vli>HTML 5Vli><li>CSS3<li>vi>JavaScriptvli>Vul>v/n av>

9、;(5) VaSide>標簽VartiCle>Vp> 內(nèi)容 vp>VaSide>Vh1>作者簡介<h1>Vp>小北，前端一枚 vp>Vh1><aside><article>(6) <section>標簽<secti on><h1>section 是啥？ <h1><article><h2> 關(guān)于 SeCtiOn<h1><p>section 的介紹 <p><secti on><h3&g

10、t;關(guān)于其他<h3><p>關(guān)于其他SeCtiOn的介紹<p><sect ion><article><sect ion><header><h1> 一篇文章 <h1><p><time PUbdate datetime="2012-10-03">20121003<time><p><header><p>文章內(nèi)容<p><footer><p><small> 版權(quán)：html5jscss 網(wǎng)所屬，作者：小北 <small><p><footer><ar