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

2、語言）,超文本包括：文字、圖片、音頻、視頻、動畫等,HTML的發展史,HTML的發展史,1993-6,超文本標記語言,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標準,W3C： World Wide Web Consortium（萬維網聯盟） 成立于1994年，Web技術領域最權威和具影響力的國際中立性技術標準機構 / http:

3、// W3C標準包括: 結構化標準語言（XHTML 、XML） 表現標準語言（CSS） 行為標準（DOM、ECMAScript ）,網頁開發軟件,TXT記事本 EditPlus DreamWeaver,演示示例： 使用軟件演示新建網頁,HTML基本結構,HTML網頁基本結構, 網頁標題 網頁內容 ,網頁頭部（用于設置網頁的一些屬性）,主體部分（網頁內容編輯區）,1、等成對的標簽，分別叫開放標簽和閉合標簽; 2、單獨呈現的標簽（空元素），如 ；意為用 / 來關閉空元素;,注意,頁面規范聲明,DOCTYPE聲明 （告訴瀏覽器使用什么規范）, 標題 網頁內容 ,XHT

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

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

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

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

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

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

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

11、列的實現方式,表格應用場景,哪里用到表格？,論壇中應用表格,系統中應用表格, 第1個單元格的內容 第2個單元格的內容 . 第1個單元格的內容 第2個單元格的內容 . ,表格基本語法,語法,演示示例：表格基本組成, 標簽定 義列, 標簽定義表格,表格的屬性,表格常用屬性,表格的分組標簽,表格高級標簽,表格標題,數據主體,頁眉,頁腳,表頭,演示示例：報表表格,表格的跨行與跨列,跨列 標簽的 colspan 屬性，值為數字，代表合并幾列 跨行 標簽的 rowspan 屬性，值為數字，代表合并幾行,演示示例：表格跨行跨列,課堂練習,完成時間：10分鐘,共性問題集中講解,需求說明 使用標簽制作年終數據報表,XHTML框架結構,標簽 作用：創建文檔的內聯框架 屬性 src ( 需引入的文檔路徑 ) width/height ( 設定框架的寬與高) scrolling (是否顯示滾動條，auto | yes | no)