Web前端開(kāi)發(fā)電子教案 項(xiàng)目1 HTML文檔結(jié)構(gòu)-1.1項(xiàng)目描述、1.2知識(shí)準(zhǔn)備_第1頁(yè)
Web前端開(kāi)發(fā)電子教案 項(xiàng)目1 HTML文檔結(jié)構(gòu)-1.1項(xiàng)目描述、1.2知識(shí)準(zhǔn)備_第2頁(yè)
Web前端開(kāi)發(fā)電子教案 項(xiàng)目1 HTML文檔結(jié)構(gòu)-1.1項(xiàng)目描述、1.2知識(shí)準(zhǔn)備_第3頁(yè)
Web前端開(kāi)發(fā)電子教案 項(xiàng)目1 HTML文檔結(jié)構(gòu)-1.1項(xiàng)目描述、1.2知識(shí)準(zhǔn)備_第4頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

教學(xué)課題項(xiàng)目1HTML文檔結(jié)構(gòu)—1.1項(xiàng)目描述、1.2知識(shí)準(zhǔn)備授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握HTML5文件的基本結(jié)構(gòu)；2.掌握HTML5基本標(biāo)簽；3.掌握Sublime編輯器的使用；4.了解HTML5語(yǔ)法的變化；5.了解Chrome瀏覽器中的開(kāi)發(fā)者工具。能力目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問(wèn)題和解決問(wèn)題的能力；2.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識(shí)的能力。德育目標(biāo)1.鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專業(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)容之一。本項(xiàng)目來(lái)學(xué)習(xí)HTML基本概念和編寫(xiě)方法及瀏覽HTML文件的方法，使讀者初步了解HTML。教學(xué)重點(diǎn)1.HTML5文件的基本結(jié)構(gòu)；2.HTML5基本標(biāo)簽；3.Sublime編輯器的使用。教學(xué)難點(diǎn)1.HTML5文件的基本結(jié)構(gòu)；2.HTML5基本標(biāo)簽；3.Sublime編輯器的使用技巧。教學(xué)方法項(xiàng)目教學(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é)構(gòu)一個(gè)HTML5文檔中，必須包含<html></html>標(biāo)簽，并且放在一個(gè)HTML5文檔中的開(kāi)始和結(jié)束位置。<html></html>之間通常包含兩個(gè)部分，分別為<head></head>和<body></body>，head標(biāo)簽包含html頭部信息，例如文檔標(biāo)題、樣式定義等。body包含文檔主體部分，即網(wǎng)頁(yè)內(nèi)容。二、HTML5基本標(biāo)簽1.文檔類型說(shuō)明<!DOCTYPEhtml>2.HTML標(biāo)簽<html> …</html>3.head標(biāo)簽<head> …</head>（1）<head>標(biāo)簽中的<title>標(biāo)簽HTML頁(yè)面的標(biāo)題一般是用來(lái)說(shuō)明頁(yè)面用途的，它顯示在瀏覽器的標(biāo)題欄中，在HTML文檔中，標(biāo)題信息設(shè)置在<head>與</head>之間。標(biāo)題標(biāo)簽以<title>開(kāi)始，以</title>結(jié)束。語(yǔ)法格式如下： <title> … </title>（2）<head>標(biāo)簽中的<meta>標(biāo)簽<meta>標(biāo)簽是<head>標(biāo)簽內(nèi)的一個(gè)輔助性標(biāo)簽。<meta>標(biāo)簽提供的信息不顯示在頁(yè)面中，一般用來(lái)定義頁(yè)面的關(guān)鍵字、頁(yè)面的描述等，以方便搜索引擎來(lái)搜索到頁(yè)面的信息。（3）<head>標(biāo)簽中的<link>標(biāo)簽<link>標(biāo)簽用于外部文件的鏈接，一般用于鏈接外部CSS樣式表文件和JS文件。<linkrel="stylesheet"type="text/css"href="theme.css"/>【例1-1】創(chuàng)建一個(gè)link鏈接外部CSS文件的實(shí)例。新建CSS文件夾（此文件夾與1-1.html文件在同一目錄中），在CSS文件夾中創(chuàng)建style.css文件。在chrome瀏覽器中預(yù)覽，效果如圖所示。（4）<head>標(biāo)簽中的<script>標(biāo)簽<script>標(biāo)簽用于定義客戶端頁(yè)面腳本。（5）<head>標(biāo)簽中的<style>標(biāo)簽<style>標(biāo)簽用于定義元素的CSS樣式?！纠?-2】將例1-1用內(nèi)嵌樣式表示。4.body標(biāo)簽網(wǎng)頁(yè)所要顯示的內(nèi)容都要放在body標(biāo)簽內(nèi)，它是HTML文件的重點(diǎn)，<body>標(biāo)簽的作用就是定義了網(wǎng)頁(yè)主題內(nèi)容的開(kāi)始和結(jié)束。5.頁(yè)面注釋標(biāo)簽<!---->注釋是在HTML代碼中插入描述性的文本，用來(lái)解釋該代碼或提示其他信息。<!--注釋的內(nèi)容-->三、Sublime編輯器的使用1．SublimeText編輯器的安裝2．SublimeText3下Emmet的使用技巧四、HTML5語(yǔ)法的變化五、Chrome瀏覽器的開(kāi)發(fā)者工具1．如何打開(kāi)開(kāi)發(fā)者工具2．開(kāi)發(fā)者工具簡(jiǎn)介教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。知識(shí)歸納一、HTML5基本結(jié)構(gòu)如圖所示。二、HTML5基本標(biāo)簽及說(shuō)明如下表所示。三、Sublime編輯器的使用技巧教師講授，學(xué)生歸納總結(jié)，并作適當(dāng)?shù)墓P記。課后作業(yè)一、選擇題1.所有的HTML標(biāo)簽都有固定的格式，必須由_________符號(hào)括起來(lái)。A(…)B<…>C/*…*/D/…/2.下列________標(biāo)簽用于顯示網(wǎng)頁(yè)標(biāo)題。A<head>B<html>C<title>D<body>3.下列________標(biāo)簽用于顯示網(wǎng)頁(yè)主體內(nèi)容。A<head>B<html>C<title

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論