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

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

2、語言）,超文本包括：文字、圖片、音頻、視頻、動(dòng)畫等,HTML的發(fā)展史,HTML的發(fā)展史,1993-6,超文本標(biāo)記語言,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ǎng)聯(lián)盟） 成立于1994年，Web技術(shù)領(lǐng)域最權(quán)威和具影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu) / http:

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

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

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

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

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

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

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

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

11、列的實(shí)現(xiàn)方式,表格應(yīng)用場景,哪里用到表格？,論壇中應(yīng)用表格,系統(tǒng)中應(yīng)用表格, 第1個(gè)單元格的內(nèi)容 第2個(gè)單元格的內(nèi)容 . 第1個(gè)單元格的內(nèi)容 第2個(gè)單元格的內(nèi)容 . ,表格基本語法,語法,演示示例：表格基本組成, 標(biāo)簽定 義列, 標(biāo)簽定義表格,表格的屬性,表格常用屬性,表格的分組標(biāo)簽,表格高級標(biāo)簽,表格標(biāo)題,數(shù)據(jù)主體,頁眉,頁腳,表頭,演示示例：報(bào)表表格,表格的跨行與跨列,跨列 標(biāo)簽的 colspan 屬性，值為數(shù)字，代表合并幾列 跨行 標(biāo)簽的 rowspan 屬性，值為數(shù)字，代表合并幾行,演示示例：表格跨行跨列,課堂練習(xí),完成時(shí)間：10分鐘,共性問題集中講解,需求說明 使用標(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)