html第一節(jié)課件

1、沃克科技1第一章第一章HTML的基本標簽的基本標簽2就業(yè)技能結構圖就業(yè)技能結構圖3本門課程目標和課程項目展示本門課程目標和課程項目展示v本門課程目標本門課程目標 學完本門課程后，你能夠：v課程項目展示課程項目展示演示示例演示示例1 1：課程項目展示課程項目展示 能制作界面美觀大方、面向企業(yè)應用的靜態(tài)商業(yè)網(wǎng)站，不含動態(tài)腳能制作界面美觀大方、面向企業(yè)應用的靜態(tài)商業(yè)網(wǎng)站，不含動態(tài)腳本功能。本功能。4預習檢查預習檢查v請詳述請詳述HTML文檔的基本結構。文檔的基本結構。v圖像與文本的對齊方式有哪幾種？圖像與文本的對齊方式有哪幾種？v通常使用那個標簽的那個屬性來創(chuàng)建超鏈接？通常使用那個標簽的那個屬性來創(chuàng)

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

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

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

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

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

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

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

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

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

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

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

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

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