html第一節(jié)課件

1、沃克科技1第一章第一章HTML的基本標(biāo)簽的基本標(biāo)簽2就業(yè)技能結(jié)構(gòu)圖就業(yè)技能結(jié)構(gòu)圖3本門課程目標(biāo)和課程項(xiàng)目展示本門課程目標(biāo)和課程項(xiàng)目展示v本門課程目標(biāo)本門課程目標(biāo) 學(xué)完本門課程后，你能夠：v課程項(xiàng)目展示課程項(xiàng)目展示演示示例演示示例1 1：課程項(xiàng)目展示課程項(xiàng)目展示 能制作界面美觀大方、面向企業(yè)應(yīng)用的靜態(tài)商業(yè)網(wǎng)站，不含動(dòng)態(tài)腳能制作界面美觀大方、面向企業(yè)應(yīng)用的靜態(tài)商業(yè)網(wǎng)站，不含動(dòng)態(tài)腳本功能。本功能。4預(yù)習(xí)檢查預(yù)習(xí)檢查v請(qǐng)?jiān)斒稣?qǐng)?jiān)斒鯤TML文檔的基本結(jié)構(gòu)。文檔的基本結(jié)構(gòu)。v圖像與文本的對(duì)齊方式有哪幾種？圖像與文本的對(duì)齊方式有哪幾種？v通常使用那個(gè)標(biāo)簽的那個(gè)屬性來創(chuàng)建超鏈接？通常使用那個(gè)標(biāo)簽的那個(gè)屬性來創(chuàng)

2、建超鏈接？5本章任務(wù)本章任務(wù)v制作圖文并茂的制作圖文并茂的“廣告廣告”頁(yè)面頁(yè)面 查看源代碼查看源代碼6本章目標(biāo)本章目標(biāo)v會(huì)使用會(huì)使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁(yè)的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁(yè)v會(huì)使用文本相關(guān)標(biāo)簽實(shí)現(xiàn)文字修飾和布局會(huì)使用文本相關(guān)標(biāo)簽實(shí)現(xiàn)文字修飾和布局v會(huì)使用圖像相關(guān)標(biāo)簽實(shí)現(xiàn)圖文并茂的頁(yè)面會(huì)使用圖像相關(guān)標(biāo)簽實(shí)現(xiàn)圖文并茂的頁(yè)面v會(huì)使用超鏈接相關(guān)標(biāo)簽實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)會(huì)使用超鏈接相關(guān)標(biāo)簽實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)7HTML文件的基本結(jié)構(gòu)文件的基本結(jié)構(gòu)vHTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu)我的第一個(gè)網(wǎng)頁(yè)我的第一個(gè)網(wǎng)頁(yè) Hello World!HTML 網(wǎng)頁(yè)網(wǎng)頁(yè)頭部部分頭部部分主體部分主體部分標(biāo)簽標(biāo)記標(biāo)簽標(biāo)記 HTML 文

3、檔的開始和結(jié)束文檔的開始和結(jié)束網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)內(nèi)容，可以是網(wǎng)頁(yè)內(nèi)容，可以是文本、圖像等文本、圖像等這部分包含文本、圖像和鏈接。它包括在這部分包含文本、圖像和鏈接。它包括在 標(biāo)簽內(nèi)標(biāo)簽內(nèi)查看源代碼查看源代碼這部分包括標(biāo)題和其他說明信息。包括在這部分包括標(biāo)題和其他說明信息。包括在 標(biāo)簽內(nèi)標(biāo)簽內(nèi)8使用記事本創(chuàng)建網(wǎng)頁(yè)使用記事本創(chuàng)建網(wǎng)頁(yè)演示示例演示示例2 2：如何在記事本里創(chuàng)建網(wǎng)頁(yè)如何在記事本里創(chuàng)建網(wǎng)頁(yè) 使用記事本創(chuàng)建網(wǎng)頁(yè)的步驟：使用記事本創(chuàng)建網(wǎng)頁(yè)的步驟： 1、打開記事本、打開記事本2、輸入、輸入HTML代碼代碼3、保存為、保存為*.html或或*.htm文件，注意格式問題文件，注意格式問題4、打開

4、網(wǎng)頁(yè)預(yù)覽效果、打開網(wǎng)頁(yè)預(yù)覽效果v使用記事本創(chuàng)建網(wǎng)頁(yè)使用記事本創(chuàng)建網(wǎng)頁(yè)9標(biāo)簽標(biāo)簽網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)頁(yè)面中出現(xiàn)亂碼，那如何消除亂碼使其正網(wǎng)頁(yè)頁(yè)面中出現(xiàn)亂碼，那如何消除亂碼使其正常顯示？常顯示？使用使用標(biāo)簽標(biāo)簽簡(jiǎn)體中文：簡(jiǎn)體中文：gb2312繁體中文：繁體中文：big5純英文網(wǎng)頁(yè)：純英文網(wǎng)頁(yè)：iso-8859-1可以避免頁(yè)面可以避免頁(yè)面中的亂碼中的亂碼10頁(yè)面背景色或背景圖像頁(yè)面背景色或背景圖像 Hello World！為了使頁(yè)面美麗大方，網(wǎng)頁(yè)背景要盡量地淺為了使頁(yè)面美麗大方，網(wǎng)頁(yè)背景要盡量地淺Hello World!查看源代碼查看源代碼網(wǎng)頁(yè)背景色彩網(wǎng)頁(yè)背景色彩 網(wǎng)頁(yè)背景圖像網(wǎng)頁(yè)背景圖像 11文本

5、相關(guān)標(biāo)簽文本相關(guān)標(biāo)簽v 字體、字號(hào)字體、字號(hào) 標(biāo)題標(biāo)簽 標(biāo)簽 特殊符號(hào)v 行的控制行的控制 段落標(biāo)簽 換行標(biāo)簽使用了使用了 換段了換段了設(shè)置了字體的設(shè)置了字體的大小和顏色大小和顏色換行了換行了特殊符號(hào)特殊符號(hào)12字體、字號(hào)相關(guān)標(biāo)簽字體、字號(hào)相關(guān)標(biāo)簽v 標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽 . #=1, 2, 3, 4, 5, 6 說明：到字體大小依次遞減 一級(jí)標(biāo)題一級(jí)標(biāo)題 二級(jí)標(biāo)題二級(jí)標(biāo)題 三級(jí)標(biāo)題三級(jí)標(biāo)題 四級(jí)標(biāo)題四級(jí)標(biāo)題 五級(jí)標(biāo)題五級(jí)標(biāo)題 六級(jí)標(biāo)題六級(jí)標(biāo)題 H1 到到 H6 標(biāo)簽用于指定不同級(jí)別的標(biāo)題標(biāo)簽用于指定不同級(jí)別的標(biāo)題查看源代碼查看源代碼13 . 字體、字號(hào)相關(guān)標(biāo)簽字體、字號(hào)相關(guān)標(biāo)簽v標(biāo)簽標(biāo)簽v特殊符

6、號(hào)特殊符號(hào)特殊字符特殊字符轉(zhuǎn)義碼轉(zhuǎn)義碼空格空格 引號(hào)引號(hào)(“”)"小于小于()>版權(quán)號(hào)版權(quán)號(hào)( )©字體的字體的大小值大小值字體的字體的顏色顏色字體的字體的類型類型14字體、字號(hào)相關(guān)標(biāo)簽字體、字號(hào)相關(guān)標(biāo)簽查看源代碼查看源代碼. 手機(jī)充值、手機(jī)充值、IP卡卡/電話卡電話卡 移動(dòng)移動(dòng) |  100 |  聯(lián)通聯(lián)通 |  50 Copyright © 2007 "淘寶網(wǎng)淘寶網(wǎng)" All rights.空格效果

7、空格效果15. 淘寶集市歡迎您！淘寶集市歡迎您！ 淘寶網(wǎng)首屆翠友會(huì)！淘寶網(wǎng)首屆翠友會(huì)！ 行的控制相關(guān)標(biāo)簽行的控制相關(guān)標(biāo)簽v 段落標(biāo)簽段落標(biāo)簽 段(Paragraph) (可以看作是空行) v 換行標(biāo)簽換行標(biāo)簽 換行 查看源代碼查看源代碼換段了換段了換行了換行了16圖像標(biāo)簽圖像標(biāo)簽v 常見的圖片格式介紹常見的圖片格式介紹圖像類型圖像類型 優(yōu)點(diǎn)優(yōu)點(diǎn)缺點(diǎn)缺點(diǎn)適用場(chǎng)合適用場(chǎng)合制作工具制作工具*.jpg體積小，比較清晰體積小，比較清晰 有損壓縮有損壓縮 、畫面失真畫面失真 網(wǎng)頁(yè)圖片網(wǎng)頁(yè)圖片Photoshop*.gif支持支持 Internet 標(biāo)準(zhǔn)標(biāo)準(zhǔn) ,支持無損耗支持無損耗壓縮和透明度，很壓縮和透明度

8、，很流行流行 支持有限的支持有限的透明度透明度,效效果不如別的果不如別的圖像圖像網(wǎng)頁(yè)圖片網(wǎng)頁(yè)圖片Photoshop*.swf體積小體積小,便于網(wǎng)絡(luò)便于網(wǎng)絡(luò)傳輸傳輸制作麻煩制作麻煩網(wǎng)頁(yè)動(dòng)畫網(wǎng)頁(yè)動(dòng)畫 Flash*.bmp支持支持 24 位顏色位顏色深度，兼容性好深度，兼容性好不支持壓縮不支持壓縮 容量大容量大桌面墻紙桌面墻紙photoshop17圖像標(biāo)簽圖像標(biāo)簽v 圖像的基本語法圖像的基本語法 查看源代碼查看源代碼鼠標(biāo)移到圖像上，出鼠標(biāo)移到圖像上，出現(xiàn)的提示性文字現(xiàn)的提示性文字圖像的圖像的位置位置圖像的圖像的寬度寬度圖像的圖像的高度高度為圖像添加的提示性文字為圖像添加的提示性文字18圖像標(biāo)簽圖像標(biāo)

9、簽v圖像與文本的對(duì)齊方式圖像與文本的對(duì)齊方式 圖像與文本居中對(duì)圖像與文本居中對(duì)齊齊,還可以取還可以取top, bottom 值值. 請(qǐng)點(diǎn)擊廣告進(jìn)入明星專區(qū)請(qǐng)點(diǎn)擊廣告進(jìn)入明星專區(qū)查看源代碼查看源代碼圖像和文本居圖像和文本居中對(duì)齊中對(duì)齊19小結(jié)小結(jié)1 1字號(hào)大小為字號(hào)大小為3練習(xí)答案練習(xí)答案練習(xí)代碼練習(xí)代碼20文字布局文字布局水平分隔線水平分隔線有序列表有序列表無序列表無序列表用了預(yù)先定義用了預(yù)先定義好的格式好的格式21如何使用內(nèi)容分隔如何使用內(nèi)容分隔標(biāo)簽標(biāo)簽v線的厚度值線的厚度值線的寬度線的寬度查看源代碼查看源代碼 標(biāo)簽用于在頁(yè)面上繪制水平線標(biāo)簽用于在頁(yè)面上繪制水平線 線的顏色線的顏色22如何使

10、用列表如何使用列表v無序列表語法無序列表語法 列表項(xiàng)內(nèi)容 v有序列表語法有序列表語法 列表項(xiàng)內(nèi)容 查看源代碼查看源代碼 注冊(cè)步驟：注冊(cè)步驟： 填寫信息填寫信息 收電子郵件收電子郵件 注冊(cè)成功注冊(cè)成功 新人上路指南新人上路指南 如何激活會(huì)員名？如何激活會(huì)員名？ 如何注冊(cè)淘寶會(huì)員？如何注冊(cè)淘寶會(huì)員？ 注冊(cè)時(shí)密碼設(shè)置有什么要求？注冊(cè)時(shí)密碼設(shè)置有什么要求？ 支付寶認(rèn)證支付寶認(rèn)證 23預(yù)格式文本預(yù)格式文本標(biāo)簽標(biāo)簽 如何實(shí)現(xiàn)如下圖所示的頁(yè)面中的文如何實(shí)現(xiàn)如下圖所示的頁(yè)面中的文字效果？字效果？使用使用 標(biāo)簽可以實(shí)現(xiàn)標(biāo)簽可以實(shí)現(xiàn)24如何使用預(yù)格式文本如何使用預(yù)格式文本標(biāo)簽標(biāo)簽 騰訊騰訊-QQ幣幣/QQ幻想幻想

11、-30元卡元卡 一一 口口 價(jià)：價(jià)：26.45元元 運(yùn)費(fèi)：賣家承擔(dān)運(yùn)費(fèi)運(yùn)費(fèi)：賣家承擔(dān)運(yùn)費(fèi) 剩余時(shí)間：剩余時(shí)間：5天天 寶貝類型：寶貝類型： 全新全新 賣主聲明：貨到付款，可試用賣主聲明：貨到付款，可試用10天！天！查看源代碼查看源代碼HTML中代碼格式與瀏中代碼格式與瀏覽器中顯示效果一樣覽器中顯示效果一樣25頁(yè)面鏈接頁(yè)面鏈接標(biāo)簽標(biāo)簽v鏈接到其他頁(yè)面鏈接到其他頁(yè)面 免費(fèi)注冊(cè)鏈接內(nèi)容鏈接內(nèi)容鏈接的地址鏈接的地址鏈接到其他頁(yè)面鏈接到其他頁(yè)面 免費(fèi)注冊(cè)免費(fèi)注冊(cè) 登錄登錄 單擊單擊”免費(fèi)注冊(cè)免費(fèi)注冊(cè)”之后鏈接到的頁(yè)面之后鏈接到的頁(yè)面查看源代碼查看源代碼26頁(yè)面鏈接頁(yè)面鏈接標(biāo)簽標(biāo)簽v 鏈接到其他頁(yè)面鏈接到

12、其他頁(yè)面 相對(duì)路徑指定相對(duì)于當(dāng)前文件的文件位置。 絕對(duì)路徑指定從根目錄到文件的完整路徑。 在同一個(gè)文件夾下有兩個(gè)在同一個(gè)文件夾下有兩個(gè)html文件，從一個(gè)文件文件，從一個(gè)文件超鏈接到另一個(gè)文件的路徑有幾種方式？超鏈接到另一個(gè)文件的路徑有幾種方式？?jī)煞N方式：相對(duì)路徑和絕對(duì)路徑兩種方式：相對(duì)路徑和絕對(duì)路徑27頁(yè)面鏈接頁(yè)面鏈接標(biāo)簽標(biāo)簽要鏈接到同一目錄要鏈接到同一目錄 (C:HTML) 下的頁(yè)面，可編寫下的頁(yè)面，可編寫 或或 相對(duì)路徑名相對(duì)路徑名絕對(duì)路徑名絕對(duì)路徑名28頁(yè)面鏈接頁(yè)面鏈接標(biāo)簽標(biāo)簽 要實(shí)現(xiàn)如下圖所示的超鏈接效果，怎么要實(shí)現(xiàn)如下圖所示的超鏈接效果，怎么辦？辦？演示示例演示示例3 3：演示錨鏈

13、接的例子演示錨鏈接的例子 使用錨記標(biāo)簽使用錨記標(biāo)簽29頁(yè)面鏈接頁(yè)面鏈接標(biāo)簽標(biāo)簽v鏈接到本頁(yè)面鏈接到本頁(yè)面 錨記標(biāo)簽用于使用戶“跳”到文檔的某個(gè)部分 HTML 的 NAME 屬性用于創(chuàng)建錨標(biāo)記 主題名稱 為達(dá)到這種跳轉(zhuǎn)效果，請(qǐng)?jiān)?HREF 參數(shù)中使用該標(biāo)記主題名稱演示示例演示示例4 4：演示錨鏈接的例子演示錨鏈接的例子 鏈接到其他頁(yè)面鏈接到其他頁(yè)面新人上路新人上路新人上路指南新人上路指南1、定義錨標(biāo)記、定義錨標(biāo)記2、鏈接到錨標(biāo)記所在位置、鏈接到錨標(biāo)記所在位置30頁(yè)面鏈接頁(yè)面鏈接標(biāo)簽標(biāo)簽v 電子郵件鏈接電子郵件鏈接 要鏈接電子郵件，可在鏈接標(biāo)簽中插入”mailto:郵箱地址”站長(zhǎng)信箱演示示例演示示

14、例5 5：演示電子郵件鏈接演示電子郵件鏈接 電子郵件鏈接電子郵件鏈接 站長(zhǎng)信箱站長(zhǎng)信箱單擊單擊”站長(zhǎng)信箱站長(zhǎng)信箱”鏈接后的輸出結(jié)果鏈接后的輸出結(jié)果任何正確的電子郵任何正確的電子郵箱地址均可箱地址均可31滾動(dòng)滾動(dòng)標(biāo)簽標(biāo)簽 滾動(dòng)文字或圖像滾動(dòng)文字或圖像滾動(dòng)延遲滾動(dòng)延遲時(shí)間時(shí)間滾動(dòng)對(duì)象的滾動(dòng)對(duì)象的方向方向v說明：說明： scrolldelay：表示滾動(dòng)延遲時(shí)間，默認(rèn)值為90。 direction：表示滾動(dòng)的方向，默認(rèn)為從右向左。32查看源代碼查看源代碼滾動(dòng)滾動(dòng)標(biāo)簽標(biāo)簽 水平滾動(dòng)水平滾動(dòng) 垂直滾動(dòng)垂直滾動(dòng) Avon化妝品化妝品 雅詩(shī)蘭黛雅詩(shī)蘭黛 水平向水平向左移動(dòng)左移動(dòng)垂直向垂直向上移動(dòng)上移動(dòng)圖片和文字同時(shí)圖片和文字同時(shí)垂直向上移動(dòng)垂直向上移動(dòng)聲明滾動(dòng)聲明滾動(dòng)文字結(jié)束文字結(jié)束聲明滾動(dòng)文字聲明滾動(dòng)文字“水平滾水平滾動(dòng)動(dòng)”開始，并且將會(huì)以開始，并且將會(huì)以默認(rèn)方式從右向左滾動(dòng)默認(rèn)方式從右向左滾動(dòng)33小結(jié)小結(jié)2 2有序列表有序列表OL無序列表無序列表UL練習(xí)答案練習(xí)答案練習(xí)代碼練習(xí)代碼編寫如下圖所示效果對(duì)應(yīng)的編寫如