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

1、使用使用HTML制作網(wǎng)頁制作網(wǎng)頁第二單元第二單元 靜態(tài)網(wǎng)頁制作靜態(tài)網(wǎng)頁制作2 2 / 56/ 56本門課程目標本門課程目標u學完本門課程后，你能夠：學完本門課程后，你能夠：n使用HTML進行網(wǎng)頁布局n使用CSS美化網(wǎng)頁n使用JavaScript制作網(wǎng)頁特效 3 3 / 56/ 56課程項目展示課程項目展示u當當網(wǎng)上書城當當網(wǎng)上書城 演示示例：演示示例：當當網(wǎng)上書城當當網(wǎng)上書城4 4 / 56/ 56本課任務(wù)本課任務(wù)u制作圖文并茂的簡單網(wǎng)頁制作圖文并茂的簡單網(wǎng)頁n李清照簡介頁面n家用電器排行榜頁面4/375 5 / 56/ 56本課目標本課目標u學完本次課程后，你能夠：學完本次課程后，你能夠：n

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

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

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

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

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

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

8、 / 5656標簽規(guī)范標簽規(guī)范 u標簽規(guī)范（標簽規(guī)范（ XHTMLXHTML標簽規(guī)范）：標簽規(guī)范）：n標簽名應(yīng)小寫nHTML標簽應(yīng)閉合n標簽應(yīng)正確嵌套n應(yīng)添加文檔類型聲明 書寫書寫HTML頁面時，請遵循頁面時，請遵循XHTML標簽規(guī)范標簽規(guī)范注意注意1919 / / 5656課堂練習課堂練習u需求說明需求說明n標題用標題標簽，人名加粗顯示，時間斜體顯示，并制作頁面版權(quán)部分完成時間：完成時間：10分鐘分鐘共性問題集中講解共性問題集中講解2020 / / 5656圖像標簽圖像標簽2-12-1u常見的圖像格式常見的圖像格式圖像類型優(yōu)點缺點*.jpg體積小，較清晰.適合色彩豐富的圖像有損壓縮，畫面失真

9、*.gif體積小、支持動畫圖片，較為常用的網(wǎng)頁圖片類型支持有限的透明度,效果不如其他PNG圖片*.bmp支持24位顏色深度，兼容性好不支持壓縮，容量大*.png最新的圖片格式，兼有GIF和JPG的優(yōu)勢部分瀏覽器（IE.6）不支持透明2121 / / 5656圖像標簽圖像標簽2-22-2 圖像路徑圖像路徑（絕對路徑絕對路徑&相對路徑相對路徑）圖像的替代文字圖像的替代文字 語法語法鼠標懸停提示文字鼠標懸停提示文字圖像寬度圖像寬度圖像高度圖像高度 示例示例 演示示例：圖像標簽演示示例：圖像標簽2222 / / 5656超鏈接標簽超鏈接標簽 鏈接文本或圖像鏈接文本或圖像 鏈接路徑鏈接路徑鏈接在

10、哪個窗口打開鏈接在哪個窗口打開,常用值：常用值：_self、_blank 語法語法 示例示例 演示示例：超鏈接演示示例：超鏈接2323 / / 5656錨鏈接錨鏈接u錨鏈接錨鏈接n 從A頁面的甲位置跳轉(zhuǎn)到本頁中的乙位置(同一頁面)n 從A頁面的甲位置跳轉(zhuǎn)到B頁面中的乙位置(兩個頁面)u創(chuàng)建步驟創(chuàng)建步驟n 創(chuàng)建跳轉(zhuǎn)標記n 創(chuàng)建跳轉(zhuǎn)鏈接乙位置乙位置甲位置甲位置 演示示例：錨鏈接演示示例：錨鏈接2424 / / 5656課堂練習課堂練習u需求說明需求說明n 制作家用電器排行榜頁面n 標題使用標題標簽n 家電名稱加上超鏈接n 商品之間使用水平線分隔教員講需求教員講需求u 實現(xiàn)思路實現(xiàn)思路n 家用電器排

11、行榜放在標題標簽中n 圖像使用標簽n 商品名稱使用超鏈接標簽n 商品之間使用標簽實現(xiàn)分隔完成時間：完成時間：10分鐘分鐘共性問題集中講解共性問題集中講解2525 / / 5656HTMLHTML列表列表u無序列表無序列表u有序列表有序列表u定義列表定義列表2626 / / 5656無序列表無序列表u語法語法u說明說明n 沒有順序，每個標簽獨占一行n 默認標簽項前有實心小圓點n 一般用于無序類型的列表，如導(dǎo)航，側(cè)邊欄新聞列表等 列表項內(nèi)容一列表項內(nèi)容一 列表項內(nèi)容列表項內(nèi)容x 列表項內(nèi)容最后一項列表項內(nèi)容最后一項2727 / / 5656有序列表有序列表u語法語法u說明說明n 有順序，每個標簽獨

12、占一行n 默認標簽項前有順序標記n 可通過修改標簽的type屬性值(a,A等)更改n 一般用于排序類型的列表，如試卷，問卷選項等 列表項內(nèi)容一列表項內(nèi)容一 列表項內(nèi)容列表項內(nèi)容x 列表項內(nèi)容最后一項列表項內(nèi)容最后一項2828 / / 5656定義列表定義列表u語法語法u說明說明n沒有順序,每個、標簽獨占一行n默認沒有標記 咖啡咖啡 黑色的熱飲料黑色的熱飲料 Milk 白色的冷飲料白色的冷飲料2929 / / 5656表單表單學習目標學習目標u了解什么是表單了解什么是表單u知道表單的作用知道表單的作用u掌握如何制作表單掌握如何制作表單3030 / / 5656為什么使用表單為什么使用表單 用戶登

13、錄用戶登錄/注冊注冊收集用戶反收集用戶反饋信息饋信息提供搜索提供搜索工具工具u 表單的典型應(yīng)用表單的典型應(yīng)用3131 / / 5656表單的執(zhí)行原理表單的執(zhí)行原理 Internet12客戶端：請求登錄客戶端：請求登錄，通過表單填寫，通過表單填寫賬戶信息賬戶信息服務(wù)器端：驗證發(fā)服務(wù)器端：驗證發(fā)來的賬號信息，來的賬號信息，然后給出反饋然后給出反饋客戶端和服務(wù)器類似客戶端和服務(wù)器類似兩人溝通一樣，從兩人溝通一樣，從而建立交互活動而建立交互活動u表單的典型應(yīng)用：假定登錄表單的典型應(yīng)用：假定登錄 126 126 郵箱郵箱3232 / / 5656單行文本框單行文本框(text)單選按鈕單選按鈕(radi

14、o)復(fù)選框復(fù)選框(checkbox)下拉列表下拉列表(select)重置按鈕重置按鈕(reset)提交按鈕提交按鈕(submit)密碼框密碼框(password)常見的表單元素常見的表單元素文本域文本域(textarea)文件選擇框文件選擇框(file)3333 / / 5656 文本框、按鈕等表單元素文本框、按鈕等表單元素 表單基本結(jié)構(gòu)表單基本結(jié)構(gòu)-標簽標簽語法語法action屬性：屬性： 如果為空則代表向當前頁面提交method屬性：屬性：可選值 post | get get方法提交參數(shù)在地址欄可見 post方法一般用于多數(shù)據(jù)、保密數(shù)據(jù)提交 注意注意3434 / / 5656表單基本元素表

15、單基本元素-標簽標簽 語法語法type屬性：屬性：可選值 text（默認）、password、button、checkbox、radio等checked屬性：屬性： 僅與 或 配合使用，選中值為 checked 注意注意3535 / / 5656課堂演示課堂演示u需求說明需求說明n使用表單元素制作注冊頁面n要求：l制作注冊頁面內(nèi)容l使用HTML基本標簽完成 演示示例：商城注冊頁面演示示例：商城注冊頁面2-12-13636 / / 5656小結(jié)小結(jié)各類表單元素各類表單元素type功能例子text單行文本輸入password密碼radio單選男女checkbox多選書畫reset重置表單數(shù)據(jù)fil

16、e文件上傳submit提交表單數(shù)據(jù)hidden隱藏域button普通按鈕小結(jié)小結(jié)3737 / / 5656課堂練習課堂練習u需求說明：需求說明：n完成網(wǎng)站登錄頁面完成時間：完成時間：10分鐘分鐘共性問題集中講解共性問題集中講解1、提交地址：、提交地址：login.html2、提交方法：、提交方法：post 3838 / / 5656其他表單元素其他表單元素 文本內(nèi)容文本內(nèi)容 u列表框列表框u文本域文本域3939 / / 5656u 關(guān)聯(lián)表單元素關(guān)聯(lián)表單元素 姓名姓名: 或或姓名姓名: 表單的高級用法表單的高級用法2-12-1點擊點擊label標簽鼠標聚焦文本框中標簽鼠標聚焦文本框中 語法語法示

17、例示例4040 / / 5656u只讀屬性只讀屬性n readonly：希望某個框內(nèi)的內(nèi)容只允許用戶看，不能修改u禁用屬性禁用屬性n disabled：因沒達到使用的條件，限制用戶使用 u示例示例表單的高級用法表單的高級用法2-2 2-2 4141 / / 5656課堂演示課堂演示u需求說明需求說明n使用表單元素制作注冊頁面n要求l繼續(xù)完善注冊頁面l完成“出生日期”項l完成“注冊條款”項l給輸入框加上關(guān)聯(lián)元素標簽 演示示例：商城注冊頁面演示示例：商城注冊頁面2-22-24242 / / 5656課堂練習課堂練習u需求說明：需求說明：n使用表單相關(guān)標簽制作簡易求職表表單完成時間：完成時間：10分

18、鐘分鐘“協(xié)議協(xié)議”只讀，只讀，“提交提交”按鈕禁用按鈕禁用用隱藏域提交求職者用隱藏域提交求職者姓名姓名“zhangsan” 共性問題集中講解共性問題集中講解4343 / / 5656表格表格學習目標學習目標u掌握表格的基本結(jié)構(gòu)掌握表格的基本結(jié)構(gòu)u掌握表格跨行、跨列的實現(xiàn)方式掌握表格跨行、跨列的實現(xiàn)方式4444 / / 5656表格應(yīng)用場景表格應(yīng)用場景u哪里用到表格？哪里用到表格？論壇中應(yīng)用論壇中應(yīng)用表格表格系統(tǒng)中應(yīng)用系統(tǒng)中應(yīng)用表格表格4545 / / 5656 第第1個單元格的內(nèi)容個單元格的內(nèi)容 第第2個單元格的內(nèi)容個單元格的內(nèi)容 . 第第1個單元格的內(nèi)容個單元格的內(nèi)容 第第2個單元格的內(nèi)容個

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