向網(wǎng)頁(yè)中加入表格
!DOCTYPE html> html> head> meta charset="utf-8"> title>測(cè)試 表格標(biāo)簽/title> /head> body> !-- 展示一個(gè)3行3列的表格 --> !-- table是表格標(biāo)簽，bgcolor設(shè)置背景色 width是表格的寬度 border是表格的邊框 cellspacing是單個(gè)元的間距 --> table bgcolor="pink" width="300px" border="1px" cellspacing="0"> tr> !-- tr是表里的行 --> td colspan="2">11/td> !-- colspan合并列 --> td>13/td>!-- td是行里的列 --> /tr> tr> td>21/td> td>22/td> td rowspan="2">23/td> !-- colspan合并行--> /tr> tr> td>31/td> td>32/td> /tr> /table> /body> /html>
table 標(biāo)簽用來(lái)表示表格
tr 標(biāo)簽表示表里的一行
td 標(biāo)簽表示行里的列
border 設(shè)置邊框
cellspacing 設(shè)置單元格的間距
bgcolor 設(shè)置背景色
width 設(shè)置寬度
height 設(shè)置高度
colspan 合并列
rowspan 合并行
用來(lái)提交數(shù)據(jù)，本質(zhì)上就是在一個(gè)表格標(biāo)簽的外面用form包起來(lái)
!DOCTYPE html> html> head> meta charset="utf-8"> title>測(cè)試 表單標(biāo)簽/title> /head> body> form> table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0"> tr> td colspan="2"> h1 align="center">注冊(cè)表單/h1> /td> /tr> tr> td>用戶(hù)名：/td> td> input type="text" /> /td> /tr> tr> td>密碼：/td> td> input type="password" /> /td> /tr> tr> td>確認(rèn)密碼：/td> td> input type="password" /> /td> /tr> tr> td>昵稱(chēng)：/td> td> input type="text" /> /td> /tr> tr> td>郵箱：/td> td> input type="email" /> /td> /tr> tr> td>性別：/td> td> input type="radio" />男 input type="radio" />女 /td> /tr> tr> td>愛(ài)好：/td> td> input type="checkbox" />籃球 input type="checkbox" />足球 input type="checkbox" />乒球 /td> /tr> tr> td>城市：/td> td> select> option>北京/option> option>上海/option> option>山東/option> option>東北/option> /select> /td> /tr> tr> td>頭像：/td> td> input type="file" /> /td> /tr> tr> td>驗(yàn)證碼：/td> td> input type="text" /> img src="a.png"> input type="button" value="點(diǎn)我換一張" /> /td> /tr> tr> td>自我描述：/td> td> textarea>請(qǐng)輸入自我描述~~/textarea> /td> /tr> tr> td colspan="2" align="center"> input type="submit" value="提交"/> input type="button" value="重置"/> /td> /tr> /table> /form> /body> /html>
form標(biāo)簽用來(lái)提交表單里的數(shù)據(jù)
table標(biāo)簽用來(lái)實(shí)現(xiàn)表格
tr標(biāo)簽用來(lái)表示表格里的行
td標(biāo)簽表示行里的列
img標(biāo)簽表示插入圖片
select標(biāo)簽表示下拉框，option是下拉選項(xiàng)
textarea標(biāo)簽是文本域
input表示輸入框，類(lèi)型很豐富
text類(lèi)型是普通的文本輸入框
password是密碼輸入框
email是郵箱的輸入框
file是上傳文件
radio是單選框
checkbox是多選框
button是普通的按鈕
submit是提交按鈕，比button多了數(shù)據(jù)提交的功能
align屬性用來(lái)設(shè)置元素的位置center是居中
bordercolor設(shè)置邊框的顏色
–1，提交按鈕必須submit類(lèi)型，不然不會(huì)提交數(shù)據(jù)的
–2，哪些數(shù)據(jù)需要提交的話(huà)，必須在網(wǎng)頁(yè)上配置name屬性
–3，提交的數(shù)據(jù)都在地址欄中展示 http://127.0.0.1:8848/cgb2105/html4.html?username=1314
username=1314 ，其中username是頁(yè)面中name屬性的值，1314是網(wǎng)頁(yè)中輸入的數(shù)據(jù)
!DOCTYPE html> html> head> meta charset="utf-8"> title>測(cè)試 表單標(biāo)簽/title> /head> body> !-- 默認(rèn)會(huì)把數(shù)據(jù)在地址欄中拼接，，，，，GET方式提交數(shù)據(jù) http://127.0.0.1:8848/cgb2105/html4.html?username=1pwd=2repwd=2 GET方式提交數(shù)據(jù)：好處是展示的效果明確，壞處是不安全，地址欄太長(zhǎng) POST方式提交數(shù)據(jù)：好處是安全對(duì)數(shù)據(jù)的大小沒(méi)上線(xiàn)，壞處是看不見(jiàn)數(shù)據(jù) --> form method="post" action="http://www.baidu.com"> table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0"> tr> td colspan="2"> h1 align="center">注冊(cè)表單/h1> /td> /tr> tr> td>用戶(hù)名：/td> td> input type="text" name="username"/> /td> /tr> tr> td>密碼：/td> td> input type="password" name="pwd"/> /td> /tr> tr> td>確認(rèn)密碼：/td> td> input type="password" name="repwd" /> /td> /tr> tr> td>昵稱(chēng)：/td> td> input type="text" name="nick"/> /td> /tr> tr> td>郵箱：/td> td> input type="email" name="mail" /> /td> /tr> tr> td>性別：/td> td> !-- radio是單選，擁有相同的name值才能實(shí)現(xiàn)單選，不然就是雙選了 必須設(shè)置value屬性，否則永遠(yuǎn)提交on --> input type="radio" name="sex" value="1"/>男 input type="radio" name="sex" value="0"/>女 /td> /tr> tr> td>愛(ài)好：/td> td> !-- 擁有相同的name值，必須設(shè)置value屬性否則提交的是on --> input type="checkbox" name="like" value="1"/>籃球 input type="checkbox" name="like" value="2"/>足球 input type="checkbox" name="like" value="3"/>乒乒球 /td> /tr> tr> td>城市：/td> td> !-- 配置value屬性，否則提交的是漢字，網(wǎng)絡(luò)傳輸時(shí)字符串沒(méi)有數(shù)字快 --> select name="city"> option value="1">北京/option> option value="2">上海/option> option value="3">山東/option> option value="4">東北/option> /select> /td> /tr> tr> td>頭像：/td> td> input type="file" name="head"/> /td> /tr> tr> td>驗(yàn)證碼：/td> td> input type="text" name="code" /> img src="a.png"> input type="button" value="點(diǎn)我換一張" /> /td> /tr> tr> td>自我描述：/td> td> textarea>請(qǐng)輸入自我描述~~/textarea> /td> /tr> tr> td colspan="2" align="center"> input type="submit" value="提交"/> input type="button" value="重置"/> /td> /tr> /table> /form> /body> /html>
!DOCTYPE html> html> head> meta charset="utf-8"> title>練習(xí)form表單/title> /head> body> !-- 默認(rèn)的數(shù)據(jù)提交是get方式 --> form> table> tr> td> h3>學(xué)生信息管理系統(tǒng)MIS/h3> /td> /tr> tr> td> 姓名： /td> /tr> tr> td> input type="text" placeholder="請(qǐng)輸入姓名" name="user" /> /td> /tr> tr> td> 年齡： /td> /tr> tr> td> input type="number" placeholder="請(qǐng)輸入年齡" name="age" /> /td> /tr> tr> td> 性別：(單選框) input type="radio" name="sex" value="1"/>男 input type="radio" name="sex" value="0"/>女 /td> /tr> tr> td> 愛(ài)好：(多選) input type="checkbox" name="like" value="1"/>乒乓球 input type="checkbox" name="like" value="2"/>爬山 input type="checkbox" name="like" value="3"/>唱歌 /td> /tr> tr> td> 學(xué)歷：(下拉框) select name="edu"> option value="1">本科/option> option value="2">專(zhuān)科/option> option value="3">高中/option> option value="4">小學(xué)/option> /select> /td> /tr> tr> td> 入學(xué)日期： br/> input type="date" name="time"/> /td> /tr> tr> td> input type="submit" value="保存" /> input type="button" value="取消" /> /td> /tr> /table> /form> /body> /html>
用來(lái)修飾網(wǎng)頁(yè)的，變得好看。層疊樣式表stylesheet
td{ text-align : center; } 選擇器{ 屬性名 : 屬性值 ; }
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>測(cè)試 css修飾網(wǎng)頁(yè)/title>
!-- css寫(xiě)法2：內(nèi)部css，插入css代碼 -->
style>
/* 語(yǔ)法：選擇器{ 屬性名:屬性值; } */
/* 給所有div */
div{
color:green; /* 設(shè)置字的顏色紅色 */
background-color: #008000;/* 設(shè)置背景色 */
}
/style>
/head>
body>
!-- css寫(xiě)法1：行內(nèi)css-->
div style="color: red;">我是div1/div>
div style="background-color: aquamarine;" >我是div2/div>
div style="color: red;">我是div3/div>
div>我是div4/div>
div>我是div5/div>
/body>
/html>
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>測(cè)試 css的選擇器/title>
!-- style向HTML中嵌入css代碼 -->
style>
/* 1. 標(biāo)簽名選擇器： */
/* 練習(xí)1：選中標(biāo)簽名叫div的所有元素*/
div{
background-color: #008000; /* 設(shè)置背景色 */
color: black; /* 設(shè)置字的顏色*/
font-size: 30px ; /* 設(shè)置字號(hào) */
font-family: "宋體" ; /* 設(shè)置字體 */
}
/* 練習(xí)2：選中標(biāo)簽名叫input的所有元素*/
input{
background-color: pink; /* 設(shè)置背景色 */
}
/* 2. class選擇器：先設(shè)置class屬性 + 通過(guò).獲取class的值 */
.a{ /* 選中網(wǎng)頁(yè)中所有class=a的元素們，其中class的值可以重復(fù)*/
color: yellow;/* 字的顏色 */
}
/* 3. id選擇器：先設(shè)置id屬性 + 通過(guò)#獲取id的值 */
#x{ /* 選中網(wǎng)頁(yè)中id=x的元素，由于id的值不能相同，所以只選中了一個(gè)元素*/
font-size: 100px; /* 加大字號(hào) */
}
/style>
/head>
body>
!-- div span p input -->
div class="a">我是div1/div>
div id="x">我是div2/div>
div id="y">我是div3/div>
span class="a">我是span1/span>
span>我是span2/span>
p class="a">我是p/p>
input type="text" placeholder="我是input1">/input>
input type="text" placeholder="我是input2">/input>
/body>
/html>
本篇文章就到這里了，希望能給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
標(biāo)簽：邵陽(yáng) 滄州 賀州 鶴壁 萊蕪 廣安 混顯 貴州
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《html form表單基礎(chǔ)入門(mén)案例講解》，本文關(guān)鍵詞 html,form,表單,基礎(chǔ),入門(mén),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
