柚子快報激活碼778899分享：第三章 表格布局與表單交互
柚子快報激活碼778899分享：第三章 表格布局與表單交互
3.1 表格概述 表格是網(wǎng)頁中的一個重要容器元素，可包含文字和圖像。表格使網(wǎng)頁結(jié)構(gòu)緊湊整齊,使網(wǎng)頁內(nèi)容的顯示一目了然。表格除了用來顯示數(shù)據(jù)外，還用于搭建網(wǎng)頁的結(jié)構(gòu)。幾乎所有HTML頁面都或多或少地采用了表格。表格以簡潔明了和高效快捷的方式將圖片、文本、數(shù)據(jù)和表單的元素有序地顯示在頁面上，從而可以呈現(xiàn)出漂亮的頁面。表格在網(wǎng)頁設(shè)計中能將網(wǎng)頁分成多個任意的矩形區(qū)域。
3.1.1 表格的結(jié)構(gòu) 表格是由行和列組成的二維表，而每行又由一個或多個單元格組成，用于放置數(shù)據(jù)或其他內(nèi)容。表格中的單元格是行與列的交叉部分，是組成表格的最基本單元。單元格的內(nèi)容是數(shù)據(jù)，也稱數(shù)據(jù)單元格。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線或表格等元素。
3.1.2 表格的基本語法 在HTML中，常用表格主要通過5個標記來構(gòu)成:
| ， | |||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
(2)caption 標記是成對標記，
(3)t(Table Row)標記是成對標記，
(4)山(Table Heading 表頭)標記是成對標記，開始，以 結(jié)束表頭可以用 山標記定義，也可以用td 標記定義，但兩標記之間的內(nèi)容不自動中、不加粗。 在一個表格中，可以插入多個t標記，表示多行，一組 標記表示插入一行一行中可以有多個列，列中的內(nèi)容可以是文字、數(shù)據(jù)、圖像、超鏈接、表單元素等。
3.2 表格屬性的設(shè)置 表格是網(wǎng)頁文件中布局的重要元素，制作網(wǎng)頁的過程中常常需要對網(wǎng)頁中的表格做一些設(shè)置，對表格的設(shè)置實質(zhì)是對表格標記屬性的一些設(shè)置。
3.2.1 表格邊框?qū)傩?設(shè)置表格標記中的邊框?qū)傩钥梢愿淖儽砀竦耐庥^。
(1)border 屬性。用于設(shè)置邊框的粗細，單位是像素。 (2)bordereolor 屬性。用于設(shè)置表格邊框的顏色，可以使用 rgb 函數(shù)、十六進制數(shù)和顏色英文名稱。 (3)bordereolorlight屬性。用于設(shè)置表格亮邊框，對表格左上邊框生效。
(4)bordercolordark屬性。用于設(shè)置表格暗邊框，對表格右下邊框生效。
3.2.2 表格的寬度和高度屬性 通過設(shè)置 width 屬性和height,屬性可以設(shè)置表格的寬度和高度。
語法:
3.2.3 表格背景顏色與表格圖像屬性 設(shè)置表格的 bgcolor 屬性可以改變表格的背景顏色，設(shè)置表格的 background 屬性可以為表格增添背景圖像效果，使表格更加美觀。 語法:
(1)bgcolor?？梢杂?rgb 函數(shù)、十六進制、英文顏色名稱來設(shè)置背景顏色。
(2)background。設(shè)置背景圖像，圖像的路徑可以是絕對路徑或相對路徑。
(3)同時設(shè)置背景顏色和背景圖像屬性時，背景圖像會部分或完全覆蓋背景顏色。
3.2.4 表格邊框樣式屬性 設(shè)置表格標記中的fame 屬性可以改變表格邊框的樣式;設(shè)置表格標記中的rles屬性可以改變表格內(nèi)部邊框的樣式。
3.2.5 表格單元格間距、單元格邊距屬性 設(shè)置表格標記中的cellspacing屬性可以改變表格單元格之間的間隔，使網(wǎng)頁中的表格內(nèi)容稍微松散一些。設(shè)置表格標記中的celpadding屬性可以增加表格單元格的內(nèi)容與內(nèi)部邊框之間的距離。 語法:
| …… | 說明:rowspan屬性可以設(shè)置單元格跨行。通過rowspan="n"(n是正整數(shù))，可以設(shè)置某一單元格跨n行，當(dāng)前行下的n-1行內(nèi)的單元格數(shù)量都需要減少一個，即少定義一個td 標記。… | 說明:colspan屬性可以設(shè)置單元格跨列。通過colspan="n"(n是正整數(shù))，可以設(shè)置某一單元格跨n列，當(dāng)前行內(nèi)的單元格數(shù)量需要減少n-1個，即刪除n-1個td 標記。||||||||
| 上午 | 下午 | ||
| 8:00-10:00 | 10: 10-12：00 | 14:00-16:00 | 16:10-18:00 |
| 學(xué)校領(lǐng)導(dǎo)講話 | 大會主題報告 | 行業(yè)企業(yè)專題報告 | 總結(jié)報告 |
| 專家報告 | 分組討論 | ||
| 全天參觀人工智能實訓(xùn)中心 | |||
3.3 表格嵌套
表格嵌套是一種常用的頁面布局方式。利用表格嵌套可以設(shè)計比較復(fù)雜且美觀的頁面效果。通常情況下，使用表格嵌套時，表格不宜過多使用，否則會降低網(wǎng)站訪問速度。表格嵌套一般采用在單元格內(nèi)嵌套表格。
嵌套表格布局頁面
| |||
| |||
| 版權(quán)信息 |
3.4 表單 HTML中的表單是網(wǎng)頁中最常用的元素，是網(wǎng)站服務(wù)器端與客戶端之間溝通的橋梁。-一個完整的交互表單由兩部分組成:一是客戶端包含的表單頁面，用于填寫瀏覽者進行交互的信息;另一個是服務(wù)端的應(yīng)用程序，用于處理瀏覽者提交的信息，瀏覽者在表單中輸入信息，然后將這些信息提交給服務(wù)器;服務(wù)器中的應(yīng)用程序會對這些信息進行處理響應(yīng)，這樣就完成了瀏覽者和服務(wù)器之間的交互。
3.4.1 表單標記 表單 form 標記為成對標記，以
說明:feldset標記沒有屬性，是成對標記。legend標記必須位于feldset標記內(nèi)，也是成對標記:有一個對齊 align 屬性，屬性值分別為left，center 和 night。3.4.3 表單信息輸入 表單的主要功能是為用戶提供輸入信息的接口，將輸人信息發(fā)送到服務(wù)器并等待服務(wù)器響應(yīng)。表單中輸人信息的標記是input標記，可以輸人一行信息。input 標記是單個標記。語法: 說明:imnput 標記的屬性主要有 name 和 type 等，輸人類型是由類型 type 屬性定義的,tpe屬性有很多不同的值，設(shè)置屬性值不同，就會產(chǎn)生不同界面效果。
3.4.3.1 單行文本輸入框 設(shè)置 imput 標記的 type 屬性值為 text，可以實現(xiàn)向表單中插入一個單行文本框。在單行文本框中可以輸人任意類型的數(shù)據(jù)，但是輸入的數(shù)據(jù)只能單行顯示，不能換行。
語法: 說明:單行文本輸人框的主要屬性有 name，maxlength，size，value 和 readonly。
3.4.3.2 密碼輸入框 設(shè)置 input 標記的 type 屬性值為 password,可以實現(xiàn)向表單中插人一個密碼輸人框。密碼輸人框中可以輸入任意類型的數(shù)據(jù)，與單行文本輸人框有所不同，這些數(shù)據(jù)不是實時地顯示在頁面上，而是被顯示字符“·”所取代，這樣設(shè)計可以保障用戶輸入的密碼不被泄露 語法: 說明:密碼輸人框的主要屬性有name，maxlenth和size，取值及說明與單行文本輸人框相同。
3.4.3.3 復(fù)選框 設(shè)置 imput 標記的type 屬性值為checkbox,可以實現(xiàn)向表單中插入一個復(fù)選框，用戶利用復(fù)選框在網(wǎng)頁上設(shè)置多項選擇。 語法: 說明:復(fù)選框的主要屬性有 name，value 和checked，其中 checked 屬性用于設(shè)置初始預(yù)選項。
3.4.3.4 單選按鈕 設(shè)置imput 標記的type 屬性值為radio，可以實現(xiàn)向表單中插入一個單選按鈕，用戶可利用單選按鈕在網(wǎng)頁上為某一選擇設(shè)置多個單選項。 語法: 說明:單選按鈕的屬性有name，vale和checked 等，其屬性、取值及說明與復(fù)選框相同。由于單選按鈕必須是唯一的，在一組單選按鈕中，只能選擇一個單選按鈕，所以一組單選按鈕的所有 name屬性值必須相同，value 屬性取值應(yīng)該不同。
3.4.3.5 圖像按鈕 設(shè)置 imput 標記的type屬性值為image，可以實現(xiàn)向表單中插入一個圖像按鈕，用戶可利用圖像按鈕在網(wǎng)頁中插入一張圖像，通過 src 屬性加載圖像。 語法: 說明:圖像按鈕主要屬性有name，src，width和height。
3.4.3.6 提交按鈕 設(shè)置 imput 標記的 type 屬性值為 submit，可以實現(xiàn)向表單中插入一個提交按鈕，提交按鈕用于將表單的信息提交至服務(wù)器進行處理。 語法: 說明:提交按鈕的屬性主要有 name 和 value。
3.4.3.7 重置按鈕 設(shè)置 input 標記的type 屬性值為reset，可以實現(xiàn)向表單中插入一個重置按鈕，重置按鈕用于將表單中所有的輸人信息清空，然后讓用戶可以重新填寫。 語法: 說明:重置按鈕的屬性主要有name和 value，其屬性、取值及說明與提交按鈕的相同。
3.4.3.8 普通按鈕 設(shè)置 imnput 標記的 type 屬性值為 button，可以實現(xiàn)向表單中插人一個普通按鈕。普通按鈕在網(wǎng)頁設(shè)計中非常有用，如果不通過表單提交按鈕來處理事件，則可以給普通按鈕綁定事件代碼來實現(xiàn)所需的功能， 語法: 說明：普通按鈕的屬性有name,value和onclick。
3.4.3.9 文件選擇框 設(shè)置 imput 標記的type 屬性值為 le，可以實現(xiàn)向表單中插人一個文件選擇框語法: 說明: 定義 input 標記的名稱。頁面上會自動添加一個文本輸入框和一個“瀏覽…name ,按鈕。單擊“瀏覽…”按鈕可以從“選擇要加載的文件”對話框選擇某一個文件，然后自動將文件名稱回填到文本輸人框中。
3.4.3.10 隱藏框 設(shè)置 input 標記的 type 屬性值為 hidden，可以實現(xiàn)向表單中插人一個隱藏框，用戶提交表單時，隱藏框的信息也會一起提交到服務(wù)器，但隱藏框在網(wǎng)頁中是不可見的。 語法: 說明:隱藏框的屬性有 name 和 value。
3.4.4 多行文本輸入框 textarea 標記可以向表單中插人多行文本輸人框。多行文本輸入框可以用來輸人較多的字信息，而且可以換行，并將這些信息提交到服務(wù)器。
語法: 初始信息內(nèi)容 說明:多行文本輸人框textarea標記是成對標記，其主要屬性有name，rows，cols和wrap 等。
3.4.5 下拉列表框 下拉列表可以在表單中接收用戶的輸人。下拉列表通常需要同時使用select 和 opton 標記來在表單中插人下拉菜單和列表項。 語法: 說明:select標記是成對標記，option標記是單個標記，但應(yīng)該把它補成成對標記，結(jié)構(gòu)更為清晰。select 標記有 name,size 和 multiple 等屬性。option 標記有 value 和 selected 等屬性。select 標記與 option 標記必須配合使用。每一選項必須指定一個顯示的文本和一個vadlue值，顯示文本通常附在 option 標記后面。
|
柚子快報激活碼778899分享：第三章 表格布局與表單交互 相關(guān)閱讀 評論可見，查看隱藏內(nèi)容 本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。 轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。 隨便看看換一換最新留言
您暫未設(shè)置收款碼請在主題配置——文章設(shè)置里上傳 掃描二維碼手機訪問 文章目錄  |
MyDeal我的交易