（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目一-1電子教案

1、教學(xué)課題工程1 HTML文檔結(jié)構(gòu)一1. 1工程描述、1. 2知識(shí)準(zhǔn)備授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握HTML 5文件的基本結(jié)構(gòu)；2,掌握HTML 5基本標(biāo)簽；掌握Sublime編輯器的使用；了解HTML5語(yǔ)法的變化；了解Chrome瀏覽器中的開(kāi)發(fā)者工具。能力目標(biāo).培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問(wèn)題和解決問(wèn)題的能力；.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識(shí)的能力。德育目標(biāo)1.鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專(zhuān)業(yè)素質(zhì)；2 ,培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析網(wǎng)絡(luò)已經(jīng)成為人們學(xué)習(xí)、工作和娛樂(lè)中不可缺少的一局部，網(wǎng)頁(yè)設(shè) 計(jì)也成為學(xué)習(xí)計(jì)算機(jī)知識(shí)的重要內(nèi)容之一。本工程來(lái)學(xué)習(xí)HTML基本概念和編寫(xiě)方法及瀏覽HTM

2、L文件的方法， 使讀者初步了解HTML。教學(xué)重點(diǎn)HTML 5文件的基本結(jié)構(gòu)；HTML 5基本標(biāo)簽;Sublime編輯器的使用。教學(xué)難點(diǎn)HTML 5文件的基本結(jié)構(gòu)；HTML 5基本標(biāo)簽；Sublime編輯器的使用技巧。教學(xué)方法工程教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過(guò)程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)新課導(dǎo)入給學(xué)生展示一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)頁(yè)面，并通過(guò)網(wǎng)頁(yè)頁(yè)面的源 代碼，導(dǎo)入HTML文件的基本結(jié)構(gòu)。教師提出問(wèn)題，學(xué) 生可分組討論，協(xié)作探 究。技能學(xué)習(xí)一、HTML5文件基本結(jié)農(nóng)一個(gè)HTML 5文檔中，4 且放在一個(gè)HTML 5文檔中E 之間通 n/l 部信息，例如文檔標(biāo)題、樣3 分，即網(wǎng)頁(yè)內(nèi)容。(DOCTYP

3、E HTML文檔聲明HTML文檔的開(kāi)始標(biāo)簽 HTML的頭部信息開(kāi)始標(biāo)簽HTML的頭部信息、結(jié)束標(biāo)簽 HTML的文檔主體開(kāi)始標(biāo)簽HTML的文檔主體結(jié)束標(biāo)簽HTML文檔的結(jié)束標(biāo)簽g3 須包含 v/html KJ開(kāi)始和結(jié)束位置。常包含兩個(gè)局部, body，head 標(biāo)簽包 t定義等。body包含）meta charsetx UTF-S 網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)內(nèi)容標(biāo)簽，并分別為 含html頭 工檔主體部教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動(dòng)， 共同完成操作任務(wù)，借 此查看教學(xué)效果。教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作

4、任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。二、HTML5基本標(biāo)簽1.文檔類(lèi)型說(shuō)明 !DOCTYPE html2.HTML標(biāo)簽html3.head標(biāo)簽標(biāo)簽中的title標(biāo)簽HTML頁(yè)面的標(biāo)題一般是用來(lái)說(shuō)明頁(yè)面用途的，它顯示在瀏覽器的標(biāo)題欄中，在HTML文檔中，標(biāo)題信息設(shè)置在 vhead與v/head之間。標(biāo)題標(biāo)簽以title,開(kāi)始，以/title, 結(jié)束。語(yǔ)法格式如下：/titlevhead標(biāo)簽中的meta標(biāo)簽meta標(biāo)簽是head標(biāo)簽內(nèi)的一個(gè)輔助性標(biāo)簽。 vmeta標(biāo)簽提供的信息不顯示在頁(yè)面中，一

5、般用來(lái)定義頁(yè)面 的關(guān)鍵字、頁(yè)面的描述等，以方便搜索引擎來(lái)搜索到頁(yè)面的 信息。vhead標(biāo)簽中的vlink標(biāo)簽v|ink標(biāo)簽用于外部文件的鏈接，一般用于鏈接外部 CSS樣式表文件和JS文件。link rel=HstylesheetH type=Htext/cssH href=theme.css” /W 1-11創(chuàng)立一個(gè)link鏈接外部CSS文件的實(shí)例。新建CSS文件夾(此文件夾與1-1.html文件在同一目 錄中)，在CSS文件夾中創(chuàng)立style.css文件。在chrome瀏覽器中預(yù)覽，效果如下圖。vhead標(biāo)簽中的script,標(biāo)簽標(biāo)簽用于定義客戶端頁(yè)面腳本。標(biāo)簽中的style)標(biāo)簽style

6、標(biāo)簽用于定義元素的CSS樣式?！纠?-2將例1-1用內(nèi)嵌樣式表示。.body標(biāo)簽教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動(dòng)， 共同完成操作任務(wù)，借 此查看教學(xué)效果。網(wǎng)頁(yè)所要顯示的內(nèi)容都要放在body標(biāo)簽內(nèi)，它是HTML 文件的重點(diǎn)，標(biāo)簽的作用就是定義了網(wǎng)頁(yè)主題內(nèi)容的 開(kāi)始和結(jié)束。教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動(dòng)， 共同完成操作任務(wù)，借 此查看教學(xué)效果。.頁(yè)面注釋標(biāo)簽注釋是在HTML代碼中插入描述性的文本，用來(lái)解釋該 代碼或提示其他信息。知識(shí)歸納K 頭部局部ITF-8H/title網(wǎng)頁(yè)知識(shí)歸納K 頭部局部ITF-8

7、H/title網(wǎng)頁(yè)meta charset=HDocument網(wǎng)頁(yè)標(biāo)題hello world!網(wǎng)頁(yè)內(nèi)容教師講授，學(xué)生歸 納總結(jié)，并作適當(dāng)?shù)墓P 記。二、HTML5基本標(biāo)簽及說(shuō)明如下表所示。標(biāo)簽y內(nèi)部標(biāo)簽一說(shuō)明一HTML*整個(gè)網(wǎng)頁(yè)是從這里開(kāi)始，然后到 /html 冷束 2head標(biāo)簽代表頁(yè)面 的“頭%定義些 特殊內(nèi)容，這些內(nèi)容 都是在瀏覽器不可 見(jiàn)的head”定義網(wǎng)頁(yè)的標(biāo)題一定義網(wǎng)頁(yè)的基本信息（供搜索引擎，style定義CSS樣式一(link4捱接外部CSS文件或腳本文件。script”定義腳本語(yǔ)言定義頁(yè)面所有遭接的基礎(chǔ)定位（用得很少）*?代表頁(yè)面的“身”，定義網(wǎng)頁(yè)展示內(nèi)容，這些內(nèi)容都是在瀏覽器可

8、 見(jiàn)的。：子元素符號(hào)，表示嵌套的元素；+ ：同級(jí)標(biāo)簽符號(hào)；%可以使該符號(hào)前的標(biāo)簽提升一行。代碼組合使用標(biāo)簽的嵌套和括號(hào)可以快速生成代碼組合隱式標(biāo)簽進(jìn)行快速輸入時(shí)，根據(jù)父標(biāo)簽進(jìn)行判定從而得到不同的代碼。 隱式標(biāo)簽名稱為：li:用于3和ol中；tr：用于 table、tbody、thead 和 tfoot 中夕，td：用于tr中；一option ：用于 select 和 optgroup 中一定義多個(gè)元素。使用符號(hào)來(lái)定義多個(gè)元素定義多個(gè)帶屬性 的萬(wàn)者U使用符號(hào)來(lái)指定編號(hào)，使用符號(hào)來(lái)指定反向編號(hào)，課后作業(yè)一、選擇題.所有的HTML標(biāo)簽都有固定的格式，必須由 符號(hào)括起來(lái)。A （）BC/* */D/,以下標(biāo)簽用于顯示網(wǎng)頁(yè)標(biāo)題。ABCD,以下標(biāo)簽用于顯