HTML表格和表單

1、回顧 如何插入圖片在網(wǎng)頁(yè)中并設(shè)置它的寬度、高度和圖片邊框？如何插入圖片在網(wǎng)頁(yè)中并設(shè)置它的寬度、高度和圖片邊框？在什么地方會(huì)用到錨記超鏈接，如何使用？在什么地方會(huì)用到錨記超鏈接，如何使用？有序列表和無(wú)序列表分別是什么標(biāo)簽，列表項(xiàng)放在哪個(gè)標(biāo)簽里面？有序列表和無(wú)序列表分別是什么標(biāo)簽，列表項(xiàng)放在哪個(gè)標(biāo)簽里面？當(dāng)一個(gè)頁(yè)面中的內(nèi)容比較多，有滾動(dòng)條的時(shí)候。使用超鏈接的地方用href=“#目標(biāo)名稱”，在目標(biāo)位置用name=“目標(biāo)名稱”來(lái)使用有序列表;無(wú)序列表;列表項(xiàng)放在里面預(yù)習(xí)檢查 表格是哪個(gè)標(biāo)簽？行用哪個(gè)標(biāo)簽表示？列用哪個(gè)標(biāo)簽表示？ rowspan和colspan屬性分別表示什么？ 層是那個(gè)標(biāo)簽？表格:;行

2、:;列:;rowspan表示單元格跨行;colspan表示單元格跨列；層：預(yù)習(xí)檢查請(qǐng)列舉表單中有哪些常用的表單元素？請(qǐng)列舉表單中有哪些常用的表單元素？input標(biāo)簽用什么屬性去控制元素的類型？標(biāo)簽用什么屬性去控制元素的類型？讓單選按鈕和多選按鈕選中需要用到哪個(gè)關(guān)鍵字？讓單選按鈕和多選按鈕選中需要用到哪個(gè)關(guān)鍵字？文本框，密碼框，單選框，復(fù)選框，下拉框,提交按鈕，重置按鈕typechecked本章任務(wù)制作“用戶注冊(cè)”頁(yè)面 了解表格的作用 掌握表格的創(chuàng)建 掌握表格布局的方法 了解層的作用會(huì)使用表單的基本結(jié)構(gòu)制作表單頁(yè)面 會(huì)使用各種表單元素實(shí)現(xiàn)注冊(cè)頁(yè)面 能理解post和get兩種提交方式的區(qū)別本章目標(biāo)

3、為什么使用表格表格應(yīng)用場(chǎng)合論壇門戶網(wǎng)站購(gòu)物網(wǎng)站論壇中應(yīng)用論壇中應(yīng)用表格表格門戶網(wǎng)站應(yīng)門戶網(wǎng)站應(yīng)用表格用表格購(gòu)物網(wǎng)站購(gòu)物網(wǎng)站應(yīng)用表格應(yīng)用表格什么是表格行行列列單元格單元格在在 HTML 文檔中，廣泛使用文檔中，廣泛使用表格表格來(lái)存放網(wǎng)頁(yè)上的文本和圖像來(lái)存放網(wǎng)頁(yè)上的文本和圖像 表格的基本語(yǔ)法 單元格內(nèi)容單元格內(nèi)容 .定義表格定義表格 定義列定義列 定義行定義行 border用來(lái)設(shè)置表用來(lái)設(shè)置表格邊框尺寸大小格邊框尺寸大小 如何創(chuàng)建表格 移動(dòng)移動(dòng) 聯(lián)通聯(lián)通 鐵通鐵通 IBM 惠普惠普 華碩華碩 什么是跨行跨列的表格跨跨3列列跨跨3行行下圖中的表格哪里用了跨行？哪里用了跨列？下圖中的表格哪里用了跨行？

4、哪里用了跨列？跨了幾行幾列跨了幾行幾列? ? 跨多行的表格 早上菜譜早上菜譜 食物食物 雞蛋雞蛋 飲料飲料 牛奶牛奶 甜點(diǎn)甜點(diǎn) 開心粉開心粉 rowspan =“n” 屬性表示跨多少行？屬性表示跨多少行？ 手機(jī)充值、手機(jī)充值、IP卡卡 辦公設(shè)備、文具辦公設(shè)備、文具 各種卡的總匯各種卡的總匯 鉛筆鉛筆 彩筆彩筆 打印打印 刻錄刻錄 如何創(chuàng)建跨行跨列的表格 如何設(shè)置對(duì)其方式   筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤刻錄盤 align屬性用來(lái)設(shè)置表屬性用來(lái)設(shè)置表格、行、列的對(duì)齊方式格、行、列的對(duì)齊方式 小結(jié)1編寫如下圖所示

5、效果對(duì)應(yīng)的html代碼第一行第一個(gè)第一行第一個(gè)格子跨了格子跨了2行行此格子此格子跨了跨了3列列什么是表格的美化修飾背景圖片背景圖片背景色背景色表格的高度表格的高度表格的寬度表格的寬度文字對(duì)文字對(duì)齊方式齊方式根據(jù)理解根據(jù)理解,下面表格應(yīng)該從哪些方面進(jìn)行美化修飾？下面表格應(yīng)該從哪些方面進(jìn)行美化修飾？ 如何設(shè)置表格的尺寸和邊框 品牌商城品牌商城 筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤刻錄盤 width用來(lái)設(shè)置表格的寬度用來(lái)設(shè)置表格的寬度height用來(lái)設(shè)置表格的高度用來(lái)設(shè)置表格的高度border用來(lái)設(shè)置表用來(lái)設(shè)置表格邊框尺寸大小格邊框

6、尺寸大小bordercolor用來(lái)設(shè)用來(lái)設(shè)置表格邊框顏色置表格邊框顏色 如何設(shè)置背景   筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 background屬性用來(lái)設(shè)置表格的背景圖片屬性用來(lái)設(shè)置表格的背景圖片bgcolor屬性用來(lái)設(shè)置表格、行、列屬性用來(lái)設(shè)置表格、行、列的背景色。的背景色。“#EBEFFF”是用是用RGB表示的一種顏色值，表示的一種顏色值，RGB指的是紅指的是紅綠藍(lán)綠藍(lán) ，下圖就是，下圖就是RGB顏色對(duì)照表顏色對(duì)照表 。 如何設(shè)置對(duì)齊方式   筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī)

7、刻錄盤刻錄盤 align屬性用來(lái)設(shè)置表屬性用來(lái)設(shè)置表格、行、列的對(duì)齊方式格、行、列的對(duì)齊方式 為什么要使用填充屬性單元格里的內(nèi)容太靠近邊線，怎么辦？未填充的效果，字與單元格邊未填充的效果，字與單元格邊框之間的距離靠得太近框之間的距離靠得太近 什么是填充屬性和間距屬性border(邊框的厚度邊框的厚度) 內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容cellpadding(單元格填充單元格填充)cellspacing(單元格間距單元格間距) 如何使用填充、間距屬性border(邊框的厚度邊框的厚度) cellpadding(單元格填充單元格填充)cellspacing(單元格間距單元格間距) 如何設(shè)置表格的填

8、充屬性   筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 .cellspacing屬性用來(lái)設(shè)屬性用來(lái)設(shè)置表格內(nèi)框?qū)挾戎帽砀駜?nèi)框?qū)挾?cellpadding屬性用來(lái)屬性用來(lái)設(shè)置表格內(nèi)填充距離設(shè)置表格內(nèi)填充距離填充之后填充之后的效果的效果小結(jié)2表格的高度、寬表格的高度、寬度、背景圖像、度、背景圖像、邊框和填充屬性邊框和填充屬性行的背景色行的背景色單元格居單元格居中對(duì)齊中對(duì)齊編寫如下圖所示效果對(duì)應(yīng)的HTML代碼如何實(shí)現(xiàn)圖文內(nèi)容的布局，達(dá)到如左圖所示頁(yè)面的效果？分析上圖所示頁(yè)面，應(yīng)該用什么進(jìn)行布局？ 什么是表格布局使用使用表格表格進(jìn)行布局進(jìn)行布局用表格對(duì)網(wǎng)頁(yè)的內(nèi)用表格對(duì)網(wǎng)頁(yè)

9、的內(nèi)容進(jìn)行整體控制容進(jìn)行整體控制 如何使用表格進(jìn)行布局使用表格布局下圖，需要幾行幾列？使用表格布局下圖，需要幾行幾列？需要需要7行行2列列 如何使用表格進(jìn)行布局 超值變形金鋼超值變形金鋼2.5折折! 人們?yōu)樯秾?duì)電視吼叫人們?yōu)樯秾?duì)電視吼叫 為什么要用到層應(yīng)用了應(yīng)用了DIV布局布局的淘寶網(wǎng)主頁(yè)的淘寶網(wǎng)主頁(yè)如何實(shí)現(xiàn)這樣如何實(shí)現(xiàn)這樣的頁(yè)面布局？的頁(yè)面布局？ 什么是層DIV元素是用來(lái)為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素層只有在CSS樣式的配合下才能體現(xiàn)出它的作用 #top,#bt background-color:#EEE000; #mid background-color:#999000;

10、width:250px; #bt width:120px; 第第1個(gè)個(gè)div標(biāo)簽中的內(nèi)容標(biāo)簽中的內(nèi)容第第2個(gè)個(gè)div標(biāo)簽中的內(nèi)容標(biāo)簽中的內(nèi)容第第3個(gè)個(gè)div標(biāo)簽中的內(nèi)容標(biāo)簽中的內(nèi)容層將在學(xué)習(xí)層將在學(xué)習(xí)CSS樣式時(shí)詳細(xì)介紹樣式時(shí)詳細(xì)介紹表單 表單的典型應(yīng)用表單的典型應(yīng)用 注冊(cè)用戶注冊(cè)用戶 收集信息收集信息 反饋信息反饋信息 為網(wǎng)站提供搜索工具為網(wǎng)站提供搜索工具注冊(cè)用戶注冊(cè)用戶收集信息收集信息反饋信息反饋信息表單瀏覽者輸入的數(shù)據(jù)提交到后臺(tái)處理的數(shù)據(jù)提供搜提供搜索工具索工具表單包含的控件單行文本輸入單行文本輸入框框(TEXT)單選按鈕單選按鈕(RADIO)復(fù)選框復(fù)選框(CHECKBOX)下拉列表下拉

11、列表(SELECT)重置按鈕重置按鈕(RESET)提交按鈕提交按鈕(SUBMIT)多行文本框多行文本框(TEXTAREA)密碼框密碼框(PASSWORD)表單的結(jié)構(gòu) HTML頁(yè)面表單表單子元素1表單子元素2表單子元素n表單頁(yè)面的基本結(jié)構(gòu)METHOD =“post或或get”ACTIONMETHOD指定提交后，由服務(wù)器指定提交后，由服務(wù)器上那個(gè)處理程序處理上那個(gè)處理程序處理指定向服務(wù)器提交的方法指定向服務(wù)器提交的方法:一般為一般為post或或get方法方法, post方法比較安全方法比較安全 ACTION = “URL” 演示示例演示示例1 1：使用：使用 postpost提交方式提交方式 和和

12、 getget提交方式提交方式 表單元素的統(tǒng)一格式 指定元素的類型，可指定元素的類型，可為為TEXT、RADIO、SUBMIT等等控件的控件的名稱名稱控件的控件的初始值初始值控件的控件的初始初始寬度寬度控件中輸入的控件中輸入的最多字符個(gè)數(shù)最多字符個(gè)數(shù)控件是否控件是否被被選中選中表單元素的逐一介紹 文本框基本語(yǔ)法 名名  字：字： 查看源代碼查看源代碼單行文本輸入框，單行文本輸入框，字符寬度為字符寬度為20文本區(qū)的寬度文本區(qū)的寬度輸入元素輸入元素的默認(rèn)值的默認(rèn)值文本輸入框文本輸入框表單元素的逐一介紹 密碼框基本語(yǔ)法 密碼區(qū)寬度密碼區(qū)寬度初始密碼初始密碼密碼框密碼框密密&nbs

13、p; 碼：碼： 查看源代碼查看源代碼密碼框，密碼框，22個(gè)字符寬度個(gè)字符寬度表單元素的逐一介紹 單選按鈕基本語(yǔ)法單選按鈕基本語(yǔ)法 初始值初始值單選按鈕單選按鈕默認(rèn)選中默認(rèn)選中性別：性別： 男男  查看源代碼查看源代碼設(shè)置此單選設(shè)置此單選按鈕被選中按鈕被選中表單元素的逐一介紹 復(fù)選框基本語(yǔ)法復(fù)選框基本語(yǔ)法 復(fù)選框復(fù)選框復(fù)選框名復(fù)選框名復(fù)選框值復(fù)選框值 聊天聊天   查看源代碼查看源代碼設(shè)置此復(fù)選設(shè)置此復(fù)選框被選中框被選中 列表框基本語(yǔ)法列表框基本語(yǔ)法 說(shuō)明：說(shuō)明： size確定列表中可同時(shí)看到的行數(shù)。確定列表中可同時(shí)看到的行數(shù)。 selected默認(rèn)被選中

14、的可選項(xiàng)。默認(rèn)被選中的可選項(xiàng)。表單元素的逐一介紹查看源代碼查看源代碼出生日期：出生日期：  年年 選擇月份選擇月份 一月一月 二月二月 月月  日日 設(shè)置此輸入框最多設(shè)置此輸入框最多只能輸入四個(gè)符號(hào)只能輸入四個(gè)符號(hào)設(shè)置設(shè)置“選擇月份選擇月份”選項(xiàng)默認(rèn)被選中選項(xiàng)默認(rèn)被選中表單元素的逐一介紹 按鈕基本語(yǔ)法按鈕基本語(yǔ)法 按鈕名稱按鈕名稱按鈕類型可為按鈕類型可為button、submit按鈕上的標(biāo)簽按鈕上的標(biāo)簽 查看源代碼查看源代碼單擊按鈕，控件的值單擊按鈕，控件的值被重置為被重置為value屬性屬性中指定的初始值中指定的初始值表單元素的逐一介紹 多行文本框基本語(yǔ)法多行文本框基本語(yǔ)

15、法 文本框中的內(nèi)容文本框中的內(nèi)容 文本框文本框的名字的名字文本框文本框的列數(shù)的列數(shù)文本框文本框的行數(shù)的行數(shù)歡迎閱讀服務(wù)條款協(xié)議，歡迎閱讀服務(wù)條款協(xié)議，本協(xié)議闡述之條款和條件適用于您使用本協(xié)議闡述之條款和條件適用于您使用Taobao網(wǎng)站的各種工具和服務(wù)。網(wǎng)站的各種工具和服務(wù)。本服務(wù)協(xié)議雙方為淘寶與淘寶網(wǎng)用戶，本服務(wù)協(xié)議具有合同效力。本服務(wù)協(xié)議雙方為淘寶與淘寶網(wǎng)用戶，本服務(wù)協(xié)議具有合同效力。 淘寶的權(quán)利和義務(wù)淘寶的權(quán)利和義務(wù) 6行行40個(gè)字符寬個(gè)字符寬度的多行文字域度的多行文字域查看源代碼查看源代碼表單元素的逐一介紹 復(fù)選框基本語(yǔ)法復(fù)選框基本語(yǔ)法 隱藏域隱藏域隱藏域名隱藏域名隱藏域值隱藏域值 聊天聊天   表單元素的逐一介紹 復(fù)選框基本語(yǔ)法復(fù)選框基本語(yǔ)法 文件域文件域文件域名文件域名 上傳頭像：上傳頭像： 聊天聊天   查看源代碼查看源代碼小結(jié)1 編寫如左圖所示效果對(duì)應(yīng)的html代碼 在網(wǎng)頁(yè)設(shè)計(jì)中，表單的主要用途有哪些？TEXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX練習(xí)答案練習(xí)答案練習(xí)代碼練習(xí)代碼 總結(jié)1 創(chuàng)建表格最少需要那三個(gè)標(biāo)簽？ 、 簡(jiǎn)述