HTML的基本標(biāo)簽-教案_第1頁(yè)
HTML的基本標(biāo)簽-教案_第2頁(yè)
HTML的基本標(biāo)簽-教案_第3頁(yè)
HTML的基本標(biāo)簽-教案_第4頁(yè)
HTML的基本標(biāo)簽-教案_第5頁(yè)
已閱讀5頁(yè)，還剩8頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

HTMLHTML語(yǔ)言開(kāi)發(fā)商業(yè)站點(diǎn)(HTML)3G學(xué)術(shù)部1/121HTML\l“_TOC_250037“本章任務(wù) 2\l“_TOC_250036“本章目標(biāo) 2\l“_TOC_250035“本章重點(diǎn) 2\l“_TOC_250034“本章難點(diǎn) 2\l“_TOC_250033“預(yù)習(xí)檢查、任務(wù)、目標(biāo)局部[10分鐘] 2\l“_TOC_250032“課程學(xué)問(wèn)點(diǎn)講解： 2\l“_TOC_250031“學(xué)問(wèn)點(diǎn)1：HTML文件的根本構(gòu)造[10分鐘] 2\l“_TOC_250030“HTML文件的根本構(gòu)造 2\l“_TOC_250029“<META>標(biāo)簽 3\l“_TOC_250028“頁(yè)面背風(fēng)光或背景圖像 3\l“_TOC_250027“學(xué)問(wèn)點(diǎn)2：文本相關(guān)標(biāo)簽[10分鐘] 4\l“_TOC_250026“字體、字號(hào)標(biāo)簽 4\l“_TOC_250025“行的掌握 5\l“_TOC_250024“學(xué)問(wèn)點(diǎn)3：圖像標(biāo)簽[5分鐘] 6\l“_TOC_250023“常見(jiàn)的圖片格式介紹 6\l“_TOC_250022“圖像的根本語(yǔ)法 6\l“_TOC_250021“圖像與文本的對(duì)齊方式 7\l“_TOC_250020“學(xué)問(wèn)點(diǎn)4：小結(jié)1[10分鐘] 7\l“_TOC_250019“編寫(xiě)如以下圖所示效果對(duì)應(yīng)的html代碼 7\l“_TOC_250018“代碼 7\l“_TOC_250017“學(xué)問(wèn)點(diǎn)5：文字布局[10分鐘] 8\l“_TOC_250016“內(nèi)容分隔<HR>標(biāo)簽 8\l“_TOC_250015“工程列表和編號(hào) 8\l“_TOC_250014“預(yù)格式文本<PRE>標(biāo)簽 9\l“_TOC_250013“學(xué)問(wèn)點(diǎn)6：頁(yè)面鏈接<A>標(biāo)簽[10分鐘] 9\l“_TOC_250012“文件的路徑有幾種方式 9\l“_TOC_250011“鏈接到其他頁(yè)面 9\l“_TOC_250010“鏈接到本頁(yè)面 10\l“_TOC_250009“電子郵件鏈接 10\l“_TOC_250008“學(xué)問(wèn)點(diǎn)7：滾動(dòng)<MARQUEE>標(biāo)簽[10分鐘] 10\l“_TOC_250007“1) <MARQUEE>標(biāo)簽 10\l“_TOC_250006“2) 語(yǔ)法 10\l“_TOC_250005“學(xué)問(wèn)點(diǎn)8：小結(jié)2[10分鐘] 11\l“_TOC_250004“1) 編寫(xiě)如以下圖所示效果對(duì)應(yīng)的html代碼 11\l“_TOC_250003“2) 代碼 11\l“_TOC_250002“本章總結(jié)[5分鐘] 12\l“_TOC_250001“考核點(diǎn) 12\l“_TOC_250000“課后作業(yè) 12授課教師：鐘慧濤課 時(shí)：2課時(shí)本章任務(wù)1〕 制作圖文并茂的“廣告”頁(yè)面本章目標(biāo)HTML會(huì)使用文本相關(guān)標(biāo)簽實(shí)現(xiàn)文字修飾和布局會(huì)使用圖像相關(guān)標(biāo)簽實(shí)現(xiàn)圖文并茂的頁(yè)面會(huì)使用超鏈接相關(guān)標(biāo)簽實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)本章重點(diǎn)1〕 文本、圖像、鏈接標(biāo)簽的運(yùn)用本章難點(diǎn)1) 各種標(biāo)簽的綜合應(yīng)用預(yù)習(xí)檢查、任務(wù)、目標(biāo)局部[10分鐘]課程目標(biāo)：HTMLJavaScriptJSPY2JAVAEE、JAVAMEHTMLJS企業(yè)應(yīng)用的商業(yè)級(jí)網(wǎng)站，便利學(xué)員就業(yè)。教學(xué)案例：理論課學(xué)習(xí)制作淘寶網(wǎng)，上機(jī)課學(xué)員將完成拍拍網(wǎng)的制作，工程案例將完成當(dāng)當(dāng)網(wǎng)的制作。預(yù)習(xí)檢查：HTML通常使用那個(gè)標(biāo)簽的那個(gè)屬性來(lái)創(chuàng)立超鏈接？課程學(xué)問(wèn)點(diǎn)講解：1：HTML[10HTMLHTML<HTML></HTML>HTMLHTML語(yǔ)言開(kāi)發(fā)商業(yè)站點(diǎn)(HTML)3G學(xué)術(shù)部10/12<HEAD></HEAD><TITLE></TITLE><BODY></BODY>這些標(biāo)簽都是成對(duì)消滅：開(kāi)頭標(biāo)簽為<>，完畢標(biāo)簽為</>HTML使用記事本創(chuàng)立網(wǎng)頁(yè)使用記事本創(chuàng)立網(wǎng)頁(yè)的步驟：翻開(kāi)記事本HTML保存為*.html*.htm翻開(kāi)網(wǎng)頁(yè)預(yù)覽效果<META>標(biāo)簽網(wǎng)頁(yè)頁(yè)面中消滅亂碼，那如何消退亂碼使其正常顯示？使用<META>標(biāo)簽<META>標(biāo)簽消滅在網(wǎng)頁(yè)的標(biāo)題局部。正確設(shè)置<META>charset我們一般使用：charset=gb2312語(yǔ)法：其他用法：<META-equiv=“expires“content=“Wed,26Feb199710:10:10GMT“>表示過(guò)期時(shí)間：格林尼治標(biāo)準(zhǔn)時(shí)間1997年2月26日，星期三10:10:10<META-equiv=“refresh“content=“2“>2頁(yè)面背風(fēng)光或背景圖像默認(rèn)狀況下，背風(fēng)光為白色使用<BODY>bgcolor使用<BODY>background一般不會(huì)兩者同時(shí)使用：當(dāng)同時(shí)使用時(shí)，顯示出來(lái)的是背景圖片〔將背風(fēng)光設(shè)置為#FFCCFF，背景圖片設(shè)置成了back_image.GIF〕為了使頁(yè)面秀麗大方，網(wǎng)頁(yè)背景要盡量地淺2：文本相關(guān)標(biāo)簽[10字體、字號(hào)標(biāo)簽標(biāo)題標(biāo)簽分為<H1>－<H6>六級(jí)1.<H#>...</H#>2. #=1,2,3,4,5,6說(shuō)明：<H1>到<H6>字體大小依次遞減H1到H6標(biāo)簽用于指定不同級(jí)別的標(biāo)題作用：吸引讀者的提示作用，說(shuō)明白文章的內(nèi)容分隔大段文字概括下文內(nèi)容依據(jù)規(guī)律構(gòu)造安排信息<FONT>標(biāo)簽用于掌握網(wǎng)頁(yè)上文本的顯示外觀文本大小、字體類(lèi)型和顏色等屬性都可使用<FONT>標(biāo)簽指定size1～7713colorface特別符號(hào)HTMLHTML轉(zhuǎn)義碼由三局部組成：&號(hào)實(shí)體名稱(chēng)分號(hào)(;)留意：轉(zhuǎn)義碼各字符間不能有空格轉(zhuǎn)義碼必需以“;”完畢單獨(dú)的&不被認(rèn)為是轉(zhuǎn)義開(kāi)頭例如：行的掌握段落標(biāo)簽<P><P>用于標(biāo)記段落開(kāi)頭段落完畢標(biāo)簽</P>可以不用，作為良好的編碼習(xí)慣，最好有完畢標(biāo)記可以通過(guò)<Palign如：左對(duì)齊、居中、右對(duì)齊假設(shè)沒(méi)有完畢標(biāo)簽</P>，那么，在遇到下一個(gè)標(biāo)簽<P>時(shí)將開(kāi)頭的一段換行標(biāo)簽<BR>用于想要完畢一行，但又不想開(kāi)頭一個(gè)的段落時(shí)使用<BR>屬于強(qiáng)制換行，沒(méi)有完畢標(biāo)簽3：圖像標(biāo)簽[5常見(jiàn)的圖片格式介紹JPGInternet最適合用于攝影或連貫色調(diào)圖像的高級(jí)格式JPGGIF是網(wǎng)頁(yè)中使用最廣泛、最普遍的一種圖像格式GIF256支持幀動(dòng)畫(huà)，可以被設(shè)計(jì)成動(dòng)畫(huà)：把多幅單幀畫(huà)面連續(xù)顯示SWFSWF能夠用比較小的體積來(lái)表現(xiàn)豐富的多媒體形式可以邊傳輸邊觀看，特別適合網(wǎng)絡(luò)SWF缺點(diǎn)：制作起來(lái)格外耗時(shí)耗力BMPBMPWebWindows一般不在網(wǎng)絡(luò)上使用這種圖片格式，用于桌面墻紙圖像的根本語(yǔ)法<IMG>HTML該標(biāo)簽可以放在要顯示圖像的位置<IMGsrc例如：圖像與文本的對(duì)齊方式<IMG>alignalgintopbottommiddleleftright語(yǔ)法：<IMGalign=“middle“>

圖像與文本居中對(duì)齊,還可以取top,bottom等值41[10html代碼<HTML><HEAD><TITLE>明星一族</TITLE></HEAD><BODY><H1><FONTsize=“3“color=“red“><B><i>讓我們看看這些明星們</i></B></FONT></H1><P><IMGsrc=“images/adv_2.jpg“alt=“明星巡回演出“width=“120“height=“80“align=BOTTOM>底部對(duì)齊</P><IMGsrc=“images/adv_2.jpg“width=“120“height=“80“align=top>頂部對(duì)齊</BODY></HTML>5：文字布局[10文字布局就是使網(wǎng)頁(yè)中的文字合理分隔、排列有序或按設(shè)計(jì)者想要的格式去布局內(nèi)容分隔<HR>標(biāo)簽<HR>〔水平線〕標(biāo)簽用于在頁(yè)面上繪制水平線只有開(kāi)頭標(biāo)簽，沒(méi)有完畢標(biāo)簽使用屬性掌握水平線的顯示size：厚度，單位是像素color：顏色width：寬度，單位可以是像素，也可以是窗口的百分比線的厚度值線的顏色線的厚度值線的顏色線的寬度<HRsize=“5“color=“red“width=“300“>工程列表和編號(hào)無(wú)序列表<UL>就是“工程列表”列表項(xiàng)前面帶有工程符號(hào)包含在無(wú)序列表標(biāo)簽<UL></UL>內(nèi)列表中每項(xiàng)都用列表標(biāo)簽<LI>LI完畢標(biāo)簽</LI>可以不用<UL>typedisc：實(shí)心圓點(diǎn)circle：空心圓環(huán)square：空心正方形有序列表<OL>包含在<OL></OL>標(biāo)簽內(nèi)顯示的列表項(xiàng)是自動(dòng)生成的有序的工程列表中每項(xiàng)都用列表標(biāo)簽<LI>LI完畢標(biāo)簽</LI>可以不用<OL>type1：數(shù)字序列a：小寫(xiě)英文字母序列A：大寫(xiě)英文字母序列i：小寫(xiě)羅馬數(shù)字序列I：大寫(xiě)羅馬數(shù)字序列預(yù)格式文本<PRE>標(biāo)簽<PRE>HTML學(xué)問(wèn)點(diǎn)6：頁(yè)面鏈接<A>標(biāo)簽[10<A>標(biāo)簽用于創(chuàng)立越級(jí)鏈接〔超鏈接，它是到另一個(gè)文檔或文件〔頻〕甚至到同一文檔的另一局部的鏈接。當(dāng)用戶(hù)單擊越級(jí)鏈接時(shí)，就會(huì)進(jìn)入鏈接中指定URL。文件的路徑有幾種方式兩種方式：相對(duì)路徑：指定相對(duì)于當(dāng)前文件的文件位置確定路徑：指定從根名目到文件的完整路徑鏈接到其他頁(yè)面相對(duì)路徑指定從根名目到文件的完整路徑。確定路徑指定相對(duì)于當(dāng)前文件的文件位置。鏈接到本頁(yè)面當(dāng)一個(gè)頁(yè)面的內(nèi)容過(guò)多，導(dǎo)致頁(yè)面過(guò)長(zhǎng)，可以使用錨點(diǎn)鏈接命名錨記也稱(chēng)為錨記錨記標(biāo)簽用于使用戶(hù)“跳”到文檔的某個(gè)局部<A>標(biāo)簽的name屬性用于創(chuàng)立錨標(biāo)記<ANAME=“marker”>主題名稱(chēng)</A>為到達(dá)這種跳轉(zhuǎn)效果，請(qǐng)?jiān)贖REF參數(shù)中使用該標(biāo)記<AHREF=“#marker”>主題名稱(chēng)</A>電子郵件鏈接要鏈接電子郵件，可在鏈接標(biāo)簽中插入”mailto:郵箱地址”<A“mailto:webmaster@sohu“href=“mailto:webmaster@sohu“>站長(zhǎng)信箱</A>點(diǎn)擊此鏈接后，將自動(dòng)調(diào)用默認(rèn)的郵件客戶(hù)端軟件7：滾動(dòng)<MARQUEE>標(biāo)簽[10分鐘]<MARQUEE><MARQUEE>標(biāo)簽可以移動(dòng)文字、圖片語(yǔ)法說(shuō)明：scrolldelay90。direction：表示滾動(dòng)的方向，默認(rèn)為從右向左?？梢匀∷膫€(gè)值：up、down、left、right82[10html代碼<HTML><HEAD><META-equiv=“Content-Type“content=“text/html;charset=gb2312“><TITLE>工程列表和鏈接的應(yīng)用</TITLE></HEAD><BODY><OL>

<LI><Ahref=“windows_me.html“target=“_self“>WindowsMe</A><LI><Ahref=“windows_2023.html“target=“_self“>Windows2023</A><ULtype=“disc“><LI>WindowsServer2023

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論