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

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

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

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

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

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

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

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

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