1、使用HTML制作網(wǎng)頁(yè),第二單元 靜態(tài)網(wǎng)頁(yè)制作,本門(mén)課程目標(biāo),學(xué)完本門(mén)課程后，你能夠： 使用HTML進(jìn)行網(wǎng)頁(yè)布局 使用CSS美化網(wǎng)頁(yè) 使用JavaScript制作網(wǎng)頁(yè)特效,課程項(xiàng)目展示,當(dāng)當(dāng)網(wǎng)上書(shū)城,演示示例：當(dāng)當(dāng)網(wǎng)上書(shū)城,本課任務(wù),制作圖文并茂的簡(jiǎn)單網(wǎng)頁(yè) 李清照簡(jiǎn)介頁(yè)面 家用電器排行榜頁(yè)面,4/37,本課目標(biāo),學(xué)完本次課程后，你能夠： 熟練掌握HTML基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁(yè) 熟練掌握HTML的基本標(biāo)簽 掌握超鏈接標(biāo)簽制作頁(yè)面導(dǎo)航 熟練掌握表格標(biāo)簽制作網(wǎng)頁(yè)表格 會(huì)使用表單標(biāo)簽制作提交頁(yè)面 了解XHTML框架結(jié)構(gòu),什么是HTML,HTML Hyper Text Markup Language（超文本標(biāo)記

2、語(yǔ)言）,超文本包括：文字、圖片、音頻、視頻、動(dòng)畫(huà)等,HTML的發(fā)展史,HTML的發(fā)展史,1993-6,超文本標(biāo)記語(yǔ)言,1995-11,HTML2.0,HTML3.2,1996-1-14,HTML4.0,1997-12-18,HTML4.01,1999-12-24,XHTML1.0,2000-1-26,XHTML1.1,2001-5-31,XHTML2.0,HTML5,2014-10-28,W3C標(biāo)準(zhǔn),W3C： World Wide Web Consortium（萬(wàn)維網(wǎng)聯(lián)盟） 成立于1994年，Web技術(shù)領(lǐng)域最權(quán)威和具影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu) / http:

3、// W3C標(biāo)準(zhǔn)包括: 結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言（XHTML 、XML） 表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言（CSS） 行為標(biāo)準(zhǔn)（DOM、ECMAScript ）,網(wǎng)頁(yè)開(kāi)發(fā)軟件,TXT記事本 EditPlus DreamWeaver,演示示例： 使用軟件演示新建網(wǎng)頁(yè),HTML基本結(jié)構(gòu),HTML網(wǎng)頁(yè)基本結(jié)構(gòu), 網(wǎng)頁(yè)標(biāo)題 網(wǎng)頁(yè)內(nèi)容 ,網(wǎng)頁(yè)頭部（用于設(shè)置網(wǎng)頁(yè)的一些屬性）,主體部分（網(wǎng)頁(yè)內(nèi)容編輯區(qū)）,1、等成對(duì)的標(biāo)簽，分別叫開(kāi)放標(biāo)簽和閉合標(biāo)簽; 2、單獨(dú)呈現(xiàn)的標(biāo)簽（空元素），如 ；意為用 / 來(lái)關(guān)閉空元素;,注意,頁(yè)面規(guī)范聲明,DOCTYPE聲明 （告訴瀏覽器使用什么規(guī)范）, 標(biāo)題 網(wǎng)頁(yè)內(nèi)容 ,XHT

4、ML 1.0 版本,網(wǎng)頁(yè)編碼設(shè)置,標(biāo)簽 - 用于定義文件信息,推薦utf-8，還可設(shè)置為gb2312,1、 gb2312包含全部中文字符; utf-8 則包含全世界所有國(guó)家需要用到的字符 2、 頁(yè)面編碼應(yīng)與頁(yè)面文件保存時(shí)的編碼一致,注意,給標(biāo)簽設(shè)置不同屬性，具體不同的功能,案例分析,案例分析,HTML,網(wǎng)頁(yè)分析,標(biāo)題標(biāo)簽,斜體標(biāo)簽,粗體標(biāo)簽,特殊符號(hào) (空格),換行標(biāo)簽,水平線(xiàn)標(biāo)簽,段落標(biāo)簽,課堂演示,需求說(shuō)明： 制作清平樂(lè)詩(shī)詞網(wǎng)頁(yè) 要求：使用HTML標(biāo)簽實(shí)現(xiàn),演示示例：制作清平樂(lè)詩(shī)詞網(wǎng)頁(yè),小結(jié)2-1,網(wǎng)頁(yè)基本標(biāo)簽元素,小結(jié),小結(jié)2-2,注釋和特殊符號(hào),小結(jié),標(biāo)簽規(guī)范,標(biāo)簽規(guī)范（ XHTML標(biāo)

5、簽規(guī)范）： 標(biāo)簽名應(yīng)小寫(xiě) HTML標(biāo)簽應(yīng)閉合 標(biāo)簽應(yīng)正確嵌套 應(yīng)添加文檔類(lèi)型聲明,書(shū)寫(xiě)HTML頁(yè)面時(shí)，請(qǐng)遵循XHTML標(biāo)簽規(guī)范,注意,課堂練習(xí),需求說(shuō)明 標(biāo)題用標(biāo)題標(biāo)簽，人名加粗顯示，時(shí)間斜體顯示，并制作頁(yè)面版權(quán)部分,完成時(shí)間：10分鐘,共性問(wèn)題集中講解,圖像標(biāo)簽2-1,常見(jiàn)的圖像格式,圖像標(biāo)簽2-2,圖像路徑 （絕對(duì)路徑&相對(duì)路徑）,圖像的替代文字,語(yǔ)法,鼠標(biāo)懸停提示文字,圖像寬度,圖像高度,示例,演示示例：圖像標(biāo)簽,超鏈接標(biāo)簽, 鏈接文本或圖像 ,鏈接路徑,鏈接在哪個(gè)窗口打開(kāi),常用值：_self、_blank,語(yǔ)法,示例,演示示例：超鏈接,錨鏈接,錨鏈接 從A頁(yè)面的甲位置跳轉(zhuǎn)到本頁(yè)中的乙位

6、置(同一頁(yè)面) 從A頁(yè)面的甲位置跳轉(zhuǎn)到B頁(yè)面中的乙位置(兩個(gè)頁(yè)面) 創(chuàng)建步驟 創(chuàng)建跳轉(zhuǎn)標(biāo)記 創(chuàng)建跳轉(zhuǎn)鏈接,乙位置,甲位置,演示示例：錨鏈接,課堂練習(xí),需求說(shuō)明 制作家用電器排行榜頁(yè)面 標(biāo)題使用標(biāo)題標(biāo)簽 家電名稱(chēng)加上超鏈接 商品之間使用水平線(xiàn)分隔,教員講需求,實(shí)現(xiàn)思路 家用電器排行榜放在標(biāo)題標(biāo)簽中 圖像使用標(biāo)簽 商品名稱(chēng)使用超鏈接標(biāo)簽 商品之間使用標(biāo)簽實(shí)現(xiàn)分隔,完成時(shí)間：10分鐘,共性問(wèn)題集中講解,HTML列表,無(wú)序列表 有序列表 定義列表,無(wú)序列表,語(yǔ)法 說(shuō)明 沒(méi)有順序，每個(gè)標(biāo)簽獨(dú)占一行 默認(rèn)標(biāo)簽項(xiàng)前有實(shí)心小圓點(diǎn) 一般用于無(wú)序類(lèi)型的列表，如導(dǎo)航，側(cè)邊欄新聞列表等, 列表項(xiàng)內(nèi)容一 列表項(xiàng)內(nèi)容x

7、列表項(xiàng)內(nèi)容最后一項(xiàng) ,有序列表,語(yǔ)法 說(shuō)明 有順序，每個(gè)標(biāo)簽獨(dú)占一行 默認(rèn)標(biāo)簽項(xiàng)前有順序標(biāo)記 可通過(guò)修改標(biāo)簽的type屬性值(a,A等)更改 一般用于排序類(lèi)型的列表，如試卷，問(wèn)卷選項(xiàng)等, 列表項(xiàng)內(nèi)容一 列表項(xiàng)內(nèi)容x 列表項(xiàng)內(nèi)容最后一項(xiàng) ,定義列表,語(yǔ)法 說(shuō)明 沒(méi)有順序,每個(gè)、標(biāo)簽獨(dú)占一行 默認(rèn)沒(méi)有標(biāo)記, 咖啡 黑色的熱飲料 Milk 白色的冷飲料 ,表單學(xué)習(xí)目標(biāo),了解什么是表單 知道表單的作用 掌握如何制作表單,為什么使用表單,用戶(hù)登錄/注冊(cè),收集用戶(hù)反饋信息,提供搜索工具,表單的典型應(yīng)用,表單的執(zhí)行原理,Internet,1,2,客戶(hù)端：請(qǐng)求登錄，通過(guò)表單填寫(xiě)賬戶(hù)信息,服務(wù)器端：驗(yàn)證發(fā)來(lái)的賬

8、號(hào)信息，然后給出反饋,客戶(hù)端和服務(wù)器類(lèi)似兩人溝通一樣，從而建立交互活動(dòng),表單的典型應(yīng)用：假定登錄 126 郵箱,單行文本框(text),單選按鈕(radio),復(fù)選框(checkbox),下拉列表(select),重置按鈕 (reset),提交按鈕(submit),密碼框(password),常見(jiàn)的表單元素,文本域(textarea),文件選擇框(file), 文本框、按鈕等表單元素 ,表單基本結(jié)構(gòu)-標(biāo)簽,語(yǔ)法,action屬性： 如果為空則代表向當(dāng)前頁(yè)面提交 method屬性：可選值 post | get get方法提交參數(shù)在地址欄可見(jiàn) post方法一般用于多數(shù)據(jù)、保密數(shù)據(jù)提交,注意,表單基

9、本元素-標(biāo)簽,語(yǔ)法,type屬性：可選值 text（默認(rèn)）、password、button、checkbox、radio等 checked屬性： 僅與 或 配合使用，選中值為 checked,注意,課堂演示,需求說(shuō)明 使用表單元素制作注冊(cè)頁(yè)面 要求： 制作注冊(cè)頁(yè)面內(nèi)容 使用HTML基本標(biāo)簽完成,演示示例：商城注冊(cè)頁(yè)面2-1,小結(jié),各類(lèi)表單元素,小結(jié),課堂練習(xí),需求說(shuō)明： 完成網(wǎng)站登錄頁(yè)面,完成時(shí)間：10分鐘,共性問(wèn)題集中講解,1、提交地址：login.html 2、提交方法：post,其他表單元素, , 文本內(nèi)容 ,列表框 文本域,關(guān)聯(lián)表單元素,姓名: 或 姓名: ,表單的高級(jí)用法2-1,點(diǎn)擊

10、label標(biāo)簽鼠標(biāo)聚焦文本框中, ,語(yǔ)法,示例,只讀屬性 readonly：希望某個(gè)框內(nèi)的內(nèi)容只允許用戶(hù)看，不能修改 禁用屬性 disabled：因沒(méi)達(dá)到使用的條件，限制用戶(hù)使用 示例,表單的高級(jí)用法2-2, ,課堂演示,需求說(shuō)明 使用表單元素制作注冊(cè)頁(yè)面 要求 繼續(xù)完善注冊(cè)頁(yè)面 完成“出生日期”項(xiàng) 完成“注冊(cè)條款”項(xiàng) 給輸入框加上關(guān)聯(lián)元素標(biāo)簽,演示示例：商城注冊(cè)頁(yè)面2-2,課堂練習(xí),需求說(shuō)明： 使用表單相關(guān)標(biāo)簽制作簡(jiǎn)易求職表表單,完成時(shí)間：10分鐘,“協(xié)議”只讀，“提交”按鈕禁用,用隱藏域提交求職者姓名“zhangsan”,共性問(wèn)題集中講解,表格學(xué)習(xí)目標(biāo),掌握表格的基本結(jié)構(gòu) 掌握表格跨行、跨

11、列的實(shí)現(xiàn)方式,表格應(yīng)用場(chǎng)景,哪里用到表格？,論壇中應(yīng)用表格,系統(tǒng)中應(yīng)用表格, 第1個(gè)單元格的內(nèi)容 第2個(gè)單元格的內(nèi)容 . 第1個(gè)單元格的內(nèi)容 第2個(gè)單元格的內(nèi)容 . ,表格基本語(yǔ)法,語(yǔ)法,演示示例：表格基本組成, 標(biāo)簽定 義列, 標(biāo)簽定義表格,表格的屬性,表格常用屬性,表格的分組標(biāo)簽,表格高級(jí)標(biāo)簽,表格標(biāo)題,數(shù)據(jù)主體,頁(yè)眉,頁(yè)腳,表頭,演示示例：報(bào)表表格,表格的跨行與跨列,跨列 標(biāo)簽的 colspan 屬性，值為數(shù)字，代表合并幾列 跨行 標(biāo)簽的 rowspan 屬性，值為數(shù)字，代表合并幾行,演示示例：表格跨行跨列,課堂練習(xí),完成時(shí)間：10分鐘,共性問(wèn)題集中講解,需求說(shuō)明 使用標(biāo)簽制作年終數(shù)據(jù)報(bào)表,XHTML框架結(jié)構(gòu),標(biāo)簽 作用：創(chuàng)建文檔的內(nèi)聯(lián)框架 屬性 src ( 需引入的文檔路徑 ) width/height ( 設(shè)定框架的寬與高) scrolling (是否顯示滾動(dòng)條，auto | yes | no)