Web前端技術(shù)項(xiàng)目式教程(HTML5CSS3FlexBootstrap)教案-HTML5標(biāo)簽

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

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

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

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

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

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

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

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

9、;(5) VaSide>標(biāo)簽VartiCle>Vp> 內(nèi)容 vp>VaSide>Vh1>作者簡(jiǎn)介<h1>Vp>小北，前端一枚 vp>Vh1><aside><article>(6) <section>標(biāo)簽<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