使用HTML制作網(wǎng)頁(yè)

1、使用HTML制作網(wǎng)頁(yè)第二單元 靜態(tài)網(wǎng)頁(yè)制作2 2 / 56/ 56本門課程目標(biāo)本門課程目標(biāo)u學(xué)完本門課程后，你能夠：學(xué)完本門課程后，你能夠：n使用HTML進(jìn)行網(wǎng)頁(yè)布局n使用CSS美化網(wǎng)頁(yè)n使用JavaScript制作網(wǎng)頁(yè)特效 3 3 / 56/ 56課程項(xiàng)目展示課程項(xiàng)目展示u當(dāng)當(dāng)網(wǎng)上書(shū)城當(dāng)當(dāng)網(wǎng)上書(shū)城 演示示例：演示示例：當(dāng)當(dāng)網(wǎng)上書(shū)城當(dāng)當(dāng)網(wǎng)上書(shū)城4 4 / 56/ 56本課任務(wù)本課任務(wù)u制作圖文并茂的簡(jiǎn)單網(wǎng)頁(yè)制作圖文并茂的簡(jiǎn)單網(wǎng)頁(yè)n李清照簡(jiǎn)介頁(yè)面n家用電器排行榜頁(yè)面4/375 5 / 56/ 56本課目標(biāo)本課目標(biāo)u學(xué)完本次課程后，你能夠：學(xué)完本次課程后，你能夠：n熟練掌握HTML基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁(yè)

2、n熟練掌握HTML的基本標(biāo)簽n掌握超鏈接標(biāo)簽制作頁(yè)面導(dǎo)航n熟練掌握表格標(biāo)簽制作網(wǎng)頁(yè)表格n會(huì)使用表單標(biāo)簽制作提交頁(yè)面n了解XHTML框架結(jié)構(gòu)6 6 / 56/ 56 什么是什么是HTMLHTMLuHTMLHTMLnHyper Text Markup Language（超文本標(biāo)記語(yǔ)言）超文本包括：文字、圖超文本包括：文字、圖片、音頻、視頻、動(dòng)片、音頻、視頻、動(dòng)畫(huà)等畫(huà)等7 7 / 56/ 56HTMLHTML的發(fā)展史的發(fā)展史uHTMLHTML的發(fā)展史的發(fā)展史1993-6超文本標(biāo)記語(yǔ)言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999

3、-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML5 2014-10-288 8 / 56/ 56W3CW3C標(biāo)準(zhǔn)標(biāo)準(zhǔn)uW3CW3C：nWorld Wide Web Consortium（萬(wàn)維網(wǎng)聯(lián)盟）n成立于1994年，Web技術(shù)領(lǐng)域最權(quán)威和具影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)n/n/uW3CW3C標(biāo)準(zhǔn)包括標(biāo)準(zhǔn)包括: :n結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言（XHTML 、XML）n表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言（CSS）n行為標(biāo)準(zhǔn)（DOM、ECMAScript ）9 9 / 56/ 56網(wǎng)頁(yè)開(kāi)發(fā)軟件網(wǎng)頁(yè)開(kāi)發(fā)

4、軟件uTXTTXT記事本記事本uEditPlusEditPlusuDreamWeaverDreamWeaver 演示示例：演示示例： 使用軟件演示新建網(wǎng)頁(yè)使用軟件演示新建網(wǎng)頁(yè)1010 / / 5656HTMLHTML基本結(jié)構(gòu)基本結(jié)構(gòu)uHTMLHTML網(wǎng)頁(yè)基本結(jié)構(gòu)網(wǎng)頁(yè)基本結(jié)構(gòu) 網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)標(biāo)題 網(wǎng)頁(yè)內(nèi)容網(wǎng)頁(yè)內(nèi)容 網(wǎng)頁(yè)頭部（用于設(shè)置網(wǎng)網(wǎng)頁(yè)頭部（用于設(shè)置網(wǎng)頁(yè)的一些屬性）頁(yè)的一些屬性）主體部分（網(wǎng)頁(yè)內(nèi)容主體部分（網(wǎng)頁(yè)內(nèi)容編輯區(qū)）編輯區(qū)）1、等成對(duì)的標(biāo)簽，分別叫開(kāi)放標(biāo)簽開(kāi)放標(biāo)簽和閉合標(biāo)簽閉合標(biāo)簽;2、單獨(dú)呈現(xiàn)的標(biāo)簽（空元素），如 ；意為用 / 來(lái)關(guān)閉空元素;注意注意1111 / / 5656頁(yè)面規(guī)范聲明

5、頁(yè)面規(guī)范聲明uDOCTYPEDOCTYPE聲明聲明 （告訴瀏覽器使用什么規(guī)范）（告訴瀏覽器使用什么規(guī)范） 標(biāo)題標(biāo)題 網(wǎng)頁(yè)內(nèi)容網(wǎng)頁(yè)內(nèi)容XHTML 1.0 版本版本1212 / / 5656網(wǎng)頁(yè)編碼設(shè)置網(wǎng)頁(yè)編碼設(shè)置u標(biāo)簽標(biāo)簽 - - 用于定義文件信息用于定義文件信息推薦推薦utf-8，還可設(shè)置為，還可設(shè)置為gb23121、 gb2312包含全部中文字符; utf-8 則包含全世界所有國(guó)家需要用到的字符2、 頁(yè)面編碼應(yīng)與頁(yè)面文件保存時(shí)的編碼一致注意注意給標(biāo)簽設(shè)置不同屬性，具體不同的功能給標(biāo)簽設(shè)置不同屬性，具體不同的功能1313 / / 5656案例分析案例分析u案例分析案例分析HTML1414 /

6、/ 5656網(wǎng)頁(yè)分析網(wǎng)頁(yè)分析標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽斜體標(biāo)簽斜體標(biāo)簽粗體標(biāo)簽粗體標(biāo)簽特殊符號(hào)特殊符號(hào) (空格空格)換行標(biāo)簽換行標(biāo)簽水平線標(biāo)簽水平線標(biāo)簽段落標(biāo)簽段落標(biāo)簽1515 / / 5656課堂演示課堂演示u需求說(shuō)明：需求說(shuō)明：n制作清平樂(lè)詩(shī)詞網(wǎng)頁(yè)n要求：使用HTML標(biāo)簽實(shí)現(xiàn) 演示示例：制作清平樂(lè)詩(shī)詞網(wǎng)頁(yè)演示示例：制作清平樂(lè)詩(shī)詞網(wǎng)頁(yè)1616 / / 5656小結(jié)小結(jié)2-12-1網(wǎng)頁(yè)基本標(biāo)簽元素網(wǎng)頁(yè)基本標(biāo)簽元素標(biāo)簽說(shuō)明例子標(biāo)題標(biāo)簽(head)清平樂(lè)年年雪里 段落標(biāo)簽（paragraph）年年雪里，常插梅花醉. 換行標(biāo)簽（break row）原文：水平線標(biāo)簽（horizontal row） 原

7、文： 斜體標(biāo)簽 朝代:宋代加粗標(biāo)簽李清照小結(jié)小結(jié)1717 / / 5656小結(jié)小結(jié)2-22-2注釋和特殊符號(hào)注釋和特殊符號(hào)特殊符號(hào)字符實(shí)體示例空格 百度 | 新浪大于號(hào)()>如果時(shí)間>晚上6點(diǎn)，就坐車回家小于號(hào)()<如果時(shí)間<早上7點(diǎn)，就走路去上學(xué)引號(hào)()"W3C規(guī)范中，HTML的屬性值必須用成對(duì)的"引起來(lái)版權(quán)符號(hào)©© 2003-2015眾軟小結(jié)小結(jié) u 注釋注釋1818 / / 5656標(biāo)簽規(guī)范標(biāo)簽規(guī)范 u標(biāo)簽規(guī)范（標(biāo)簽規(guī)范（ XHTMLXHTML標(biāo)簽規(guī)范）：標(biāo)簽規(guī)范）：n標(biāo)簽名應(yīng)小寫(xiě)nHTML標(biāo)簽

8、應(yīng)閉合n標(biāo)簽應(yīng)正確嵌套n應(yīng)添加文檔類型聲明 書(shū)寫(xiě)書(shū)寫(xiě)HTML頁(yè)面時(shí)，請(qǐng)遵循頁(yè)面時(shí)，請(qǐng)遵循XHTML標(biāo)簽規(guī)范標(biāo)簽規(guī)范注意注意1919 / / 5656課堂練習(xí)課堂練習(xí)u需求說(shuō)明需求說(shuō)明n標(biāo)題用標(biāo)題標(biāo)簽，人名加粗顯示，時(shí)間斜體顯示，并制作頁(yè)面版權(quán)部分完成時(shí)間：完成時(shí)間：10分鐘分鐘共性問(wèn)題集中講解共性問(wèn)題集中講解2020 / / 5656圖像標(biāo)簽圖像標(biāo)簽2-12-1u常見(jiàn)的圖像格式常見(jiàn)的圖像格式圖像類型優(yōu)點(diǎn)缺點(diǎn)*.jpg體積小，較清晰.適合色彩豐富的圖像有損壓縮，畫(huà)面失真*.gif體積小、支持動(dòng)畫(huà)圖片，較為常用的網(wǎng)頁(yè)圖片類型支持有限的透明度,效果不如其他PNG圖片*.bmp支持24位顏色深度，兼容

9、性好不支持壓縮，容量大*.png最新的圖片格式，兼有GIF和JPG的優(yōu)勢(shì)部分瀏覽器（IE.6）不支持透明2121 / / 5656圖像標(biāo)簽圖像標(biāo)簽2-22-2 圖像路徑圖像路徑（絕對(duì)路徑絕對(duì)路徑&相對(duì)路徑相對(duì)路徑）圖像的替代文字圖像的替代文字 語(yǔ)法語(yǔ)法鼠標(biāo)懸停提示文字鼠標(biāo)懸停提示文字圖像寬度圖像寬度圖像高度圖像高度 示例示例 演示示例：圖像標(biāo)簽演示示例：圖像標(biāo)簽2222 / / 5656超鏈接標(biāo)簽超鏈接標(biāo)簽 鏈接文本或圖像鏈接文本或圖像 鏈接路徑鏈接路徑鏈接在哪個(gè)窗口打開(kāi)鏈接在哪個(gè)窗口打開(kāi),常用值：常用值：_self、_blank 語(yǔ)法語(yǔ)法 示例示例 演示示例：超鏈接演示示例：超鏈接2323

10、/ / 5656錨鏈接錨鏈接u錨鏈接錨鏈接n 從A頁(yè)面的甲位置跳轉(zhuǎn)到本頁(yè)中的乙位置(同一頁(yè)面)n 從A頁(yè)面的甲位置跳轉(zhuǎn)到B頁(yè)面中的乙位置(兩個(gè)頁(yè)面)u創(chuàng)建步驟創(chuàng)建步驟n 創(chuàng)建跳轉(zhuǎn)標(biāo)記n 創(chuàng)建跳轉(zhuǎn)鏈接乙位置乙位置甲位置甲位置 演示示例：錨鏈接演示示例：錨鏈接2424 / / 5656課堂練習(xí)課堂練習(xí)u需求說(shuō)明需求說(shuō)明n 制作家用電器排行榜頁(yè)面n 標(biāo)題使用標(biāo)題標(biāo)簽n 家電名稱加上超鏈接n 商品之間使用水平線分隔教員講需求教員講需求u 實(shí)現(xiàn)思路實(shí)現(xiàn)思路n 家用電器排行榜放在標(biāo)題標(biāo)簽中n 圖像使用標(biāo)簽n 商品名稱使用超鏈接標(biāo)簽n 商品之間使用標(biāo)簽實(shí)現(xiàn)分隔完成時(shí)間：完成時(shí)間：10分鐘分鐘共性問(wèn)題集中講解

11、共性問(wèn)題集中講解2525 / / 5656HTMLHTML列表列表u無(wú)序列表無(wú)序列表u有序列表有序列表u定義列表定義列表2626 / / 5656無(wú)序列表無(wú)序列表u語(yǔ)法語(yǔ)法u說(shuō)明說(shuō)明n 沒(méi)有順序，每個(gè)標(biāo)簽獨(dú)占一行n 默認(rèn)標(biāo)簽項(xiàng)前有實(shí)心小圓點(diǎn)n 一般用于無(wú)序類型的列表，如導(dǎo)航，側(cè)邊欄新聞列表等 列表項(xiàng)內(nèi)容一列表項(xiàng)內(nèi)容一 列表項(xiàng)內(nèi)容列表項(xiàng)內(nèi)容x 列表項(xiàng)內(nèi)容最后一項(xiàng)列表項(xiàng)內(nèi)容最后一項(xiàng)2727 / / 5656有序列表有序列表u語(yǔ)法語(yǔ)法u說(shuō)明說(shuō)明n 有順序，每個(gè)標(biāo)簽獨(dú)占一行n 默認(rèn)標(biāo)簽項(xiàng)前有順序標(biāo)記n 可通過(guò)修改標(biāo)簽的type屬性值(a,A等)更改n 一般用于排序類型的列表，如試卷，問(wèn)卷選項(xiàng)等 列表項(xiàng)

12、內(nèi)容一列表項(xiàng)內(nèi)容一 列表項(xiàng)內(nèi)容列表項(xiàng)內(nèi)容x 列表項(xiàng)內(nèi)容最后一項(xiàng)列表項(xiàng)內(nèi)容最后一項(xiàng)2828 / / 5656定義列表定義列表u語(yǔ)法語(yǔ)法u說(shuō)明說(shuō)明n沒(méi)有順序,每個(gè)、標(biāo)簽獨(dú)占一行n默認(rèn)沒(méi)有標(biāo)記 咖啡咖啡 黑色的熱飲料黑色的熱飲料 Milk 白色的冷飲料白色的冷飲料2929 / / 5656表單表單學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)u了解什么是表單了解什么是表單u知道表單的作用知道表單的作用u掌握如何制作表單掌握如何制作表單3030 / / 5656為什么使用表單為什么使用表單 用戶登錄用戶登錄/注冊(cè)注冊(cè)收集用戶反收集用戶反饋信息饋信息提供搜索提供搜索工具工具u 表單的典型應(yīng)用表單的典型應(yīng)用3131 / / 5656表

13、單的執(zhí)行原理表單的執(zhí)行原理 Internet12客戶端：請(qǐng)求登錄客戶端：請(qǐng)求登錄，通過(guò)表單填寫(xiě)，通過(guò)表單填寫(xiě)賬戶信息賬戶信息服務(wù)器端：驗(yàn)證發(fā)服務(wù)器端：驗(yàn)證發(fā)來(lái)的賬號(hào)信息，來(lái)的賬號(hào)信息，然后給出反饋然后給出反饋客戶端和服務(wù)器類似客戶端和服務(wù)器類似兩人溝通一樣，從兩人溝通一樣，從而建立交互活動(dòng)而建立交互活動(dòng)u表單的典型應(yīng)用：假定登錄表單的典型應(yīng)用：假定登錄 126 126 郵箱郵箱3232 / / 5656單行文本框單行文本框(text)單選按鈕單選按鈕(radio)復(fù)選框復(fù)選框(checkbox)下拉列表下拉列表(select)重置按鈕重置按鈕(reset)提交按鈕提交按鈕(submit)密碼框

14、密碼框(password)常見(jiàn)的表單元素常見(jiàn)的表單元素文本域文本域(textarea)文件選擇框文件選擇框(file)3333 / / 5656 文本框、按鈕等表單元素文本框、按鈕等表單元素 表單基本結(jié)構(gòu)表單基本結(jié)構(gòu)-標(biāo)簽標(biāo)簽語(yǔ)法語(yǔ)法action屬性：屬性： 如果為空則代表向當(dāng)前頁(yè)面提交method屬性：屬性：可選值 post | get get方法提交參數(shù)在地址欄可見(jiàn) post方法一般用于多數(shù)據(jù)、保密數(shù)據(jù)提交 注意注意3434 / / 5656表單基本元素表單基本元素-標(biāo)簽標(biāo)簽 語(yǔ)法語(yǔ)法type屬性：屬性：可選值 text（默認(rèn)）、password、button、checkbox、radio

15、等checked屬性：屬性： 僅與 或 配合使用，選中值為 checked 注意注意3535 / / 5656課堂演示課堂演示u需求說(shuō)明需求說(shuō)明n使用表單元素制作注冊(cè)頁(yè)面n要求：l制作注冊(cè)頁(yè)面內(nèi)容l使用HTML基本標(biāo)簽完成 演示示例：商城注冊(cè)頁(yè)面演示示例：商城注冊(cè)頁(yè)面2-12-13636 / / 5656小結(jié)小結(jié)各類表單元素各類表單元素type功能例子text單行文本輸入password密碼radio單選男女checkbox多選書(shū)畫(huà)reset重置表單數(shù)據(jù)file文件上傳submit提交表單數(shù)據(jù)hidden隱藏域button普通按鈕小結(jié)小結(jié)3737 / / 5656課堂練習(xí)課堂練習(xí)u需求說(shuō)明：需

16、求說(shuō)明：n完成網(wǎng)站登錄頁(yè)面完成時(shí)間：完成時(shí)間：10分鐘分鐘共性問(wèn)題集中講解共性問(wèn)題集中講解1、提交地址：、提交地址：login.html2、提交方法：、提交方法：post 3838 / / 5656其他表單元素其他表單元素 文本內(nèi)容文本內(nèi)容 u列表框列表框u文本域文本域3939 / / 5656u 關(guān)聯(lián)表單元素關(guān)聯(lián)表單元素 姓名姓名: 或或姓名姓名: 表單的高級(jí)用法表單的高級(jí)用法2-12-1點(diǎn)擊點(diǎn)擊label標(biāo)簽鼠標(biāo)聚焦文本框中標(biāo)簽鼠標(biāo)聚焦文本框中 語(yǔ)法語(yǔ)法示例示例4040 / / 5656u只讀屬性只讀屬性n readonly：希望某個(gè)框內(nèi)的內(nèi)容只允許用戶看，不能修改u禁用屬性禁用屬性n d

17、isabled：因沒(méi)達(dá)到使用的條件，限制用戶使用 u示例示例表單的高級(jí)用法表單的高級(jí)用法2-2 2-2 4141 / / 5656課堂演示課堂演示u需求說(shuō)明需求說(shuō)明n使用表單元素制作注冊(cè)頁(yè)面n要求l繼續(xù)完善注冊(cè)頁(yè)面l完成“出生日期”項(xiàng)l完成“注冊(cè)條款”項(xiàng)l給輸入框加上關(guān)聯(lián)元素標(biāo)簽 演示示例：商城注冊(cè)頁(yè)面演示示例：商城注冊(cè)頁(yè)面2-22-24242 / / 5656課堂練習(xí)課堂練習(xí)u需求說(shuō)明：需求說(shuō)明：n使用表單相關(guān)標(biāo)簽制作簡(jiǎn)易求職表表單完成時(shí)間：完成時(shí)間：10分鐘分鐘“協(xié)議協(xié)議”只讀，只讀，“提交提交”按鈕禁用按鈕禁用用隱藏域提交求職者用隱藏域提交求職者姓名姓名“zhangsan” 共性問(wèn)題集中

18、講解共性問(wèn)題集中講解4343 / / 5656表格表格學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)u掌握表格的基本結(jié)構(gòu)掌握表格的基本結(jié)構(gòu)u掌握表格跨行、跨列的實(shí)現(xiàn)方式掌握表格跨行、跨列的實(shí)現(xiàn)方式4444 / / 5656表格應(yīng)用場(chǎng)景表格應(yīng)用場(chǎng)景u哪里用到表格？哪里用到表格？論壇中應(yīng)用論壇中應(yīng)用表格表格系統(tǒng)中應(yīng)用系統(tǒng)中應(yīng)用表格表格4545 / / 5656 第第1個(gè)單元格的內(nèi)容個(gè)單元格的內(nèi)容 第第2個(gè)單元格的內(nèi)容個(gè)單元格的內(nèi)容 . 第第1個(gè)單元格的內(nèi)容個(gè)單元格的內(nèi)容 第第2個(gè)單元格的內(nèi)容個(gè)單元格的內(nèi)容. 表格基本語(yǔ)法表格基本語(yǔ)法語(yǔ)法語(yǔ)法 演示示例：表格基本組成演示示例：表格基本組成標(biāo)簽定標(biāo)簽定義列義列標(biāo)簽定義標(biāo)簽定義表格表

19、格4646 / / 5656表格的屬性表格的屬性u(píng)表格常用屬性表格常用屬性屬性名功能width/height表格的寬/高，單位可以為像素（px）或百分比（%）border默認(rèn)為表格邊框?yàn)?0 （無(wú)邊框），可設(shè)置為數(shù)值cellspacing控制單元格之間的間距，可設(shè)置為數(shù)值cellpadding控制單元格邊框和其內(nèi)容的間距，可設(shè)置為數(shù)值align設(shè)置文本的水平對(duì)齊方式，可為left（左對(duì)齊，默認(rèn)），center（居中對(duì)齊），right（右對(duì)齊）valign設(shè)置文本的數(shù)值方向?qū)R方式，可為top（頂部），middle（豎直居中），bottom（底部）bgcolor設(shè)置背景色，如red，#fff，rgb(255,0,0)4747 / / 5656u表格的分組標(biāo)簽表格的分組標(biāo)簽表格高級(jí)標(biāo)簽表格高級(jí)標(biāo)簽 表格標(biāo)題表格標(biāo)題數(shù)據(jù)主體數(shù)據(jù)主體頁(yè)眉頁(yè)眉頁(yè)腳頁(yè)腳表頭表頭 演示示例：