一、用戶注冊界面作業要求:
1.用戶名為文本框,名稱為 UserName,長度為 15,最大字符數為 20
2.密碼為密碼框,名稱為 UserPass,長度為 15,最大字符數為 20
3.性別為兩個單選按鈕,名稱為 sex,值分別為男和女,男默認選中
4.愛好是三個多選按鈕,名稱為 like,值分別為寫作、聽音樂、體育
5.省份為下拉框,名稱為 province,選項的鍵-值對為 Key:陜西省,value:shaanxi ;Key:山西省5.
value:shanx;陜西省默認選中
6.自我介紹為多行文本框,名稱為 intro,寬 25,高5,默認值為“這個家伙什么也沒留下”
7.提交按鈕,名稱為“send”,標簽為“提交”
8.重置按鈕,名稱為“reset”,標簽為“重置”8?
9.參照圖使用表格定位表單
代碼如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用戶注冊</title>
</head>
<body><!--使用8*3表格--> <table border="1px" width="300px" height="350px" align="center"><tr><td bgcolor="grey" colspan="3" align="center"><b>用戶注冊</b></td></tr><!--1.用戶名為文本框,名稱為 UserName,長度為 15,最大字符數為 20--><tr><td bgcolor="lightgrey" align="right">用戶名</td><td bgcolor="lightgrey" colspan="2"><input type="text" name="UserName" width="15px" maxlength="20"></td></tr><!--2.密碼為密碼框,名稱為 UserPass,長度為 15,最大字符數為 20--><tr><td bgcolor="lightgrey" align="right" >密碼</td><td bgcolor="lightgrey" colspan="2"><input type="password" name="UserPass width="15px" maxlength="20"></td></tr><!--3.性別為兩個單選按鈕,名稱為 sex,值分別為男和女,男默認選中--><tr><td bgcolor="lightgrey" align="right" >性別</td><td bgcolor="lightgrey" colspan="2">男:<input type="radio" name="sex" value="0">女:<input type="radio" name="sex" value="1"><br></td></tr><!--4.愛好是三個多選按鈕,名稱為 like,值分別為寫作、聽音樂、體育--><tr><td bgcolor="lightgrey" align="right" >愛好</td><td bgcolor="lightgrey" colspan="2"><input type="checkbox" name="like" value="xz">寫作<input type="checkbox" name="like" value="tyy">聽音樂<input type="checkbox" name="like" value="ty">體育<br> </td></tr><!--5.省份為下拉框,名稱為 province,選項的鍵-值對為 Key:陜西省,value:shaanxi ;Key:山西省;value:shanx;陜西省默認選中--><tr><td bgcolor="lightgrey" align="right" >省份</td><td bgcolor="lightgrey" colspan="2"><select name="location"><option value="shanxi" checked>陜西省</option><option value="sx">山西省</option></select></td></tr><!--6.自我介紹為多行文本框,名稱為 intro,寬 25,高5,默認值為“這個家伙什么也沒留下”--><tr><td bgcolor="lightgrey" align="right" >自我介紹</td><td bgcolor="lightgrey" colspan="3"><textarea name="intro" id="" cols="25" rows="5" placeholder="這個家伙什么也沒留下"></textarea></td></tr><!--7.提交按鈕,名稱為“send”,標簽為“提交”--><tr><td bgcolor="lightgrey" colspan="3" align="center" ><button type="submit" name="send"><b>提交</b></button><!--8.重置按鈕,名稱為“reset”,標簽為“重置”8?--><button type="reset" name="reset"><b>重置</b></button> </td></tr></table>
</body>
</html>
結果如下
二、工商銀行電子匯款單
代碼如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>工商銀行電子匯款單</title>
</head>
<body><th><h2>工商銀行電子匯款單</h2></th><table border="1px" width="780px" height="280px" cellspacing="0px"><!--第一行--><tr><!--跨兩列--><td colspan="2"><b>回單類型</b></td><td>網上轉賬匯款</td><td colspan="2"><b>指令序號</b></td><td>HQH0000000000000013878172</td></tr><!--第二行--><tr><!--跨四行--><td rowspan="4"><b>收款人</b></td><td>戶名</td><td>老牟</td><td rowspan="4"><b>付款人</b></td><td>戶名</td><td>老劉</td></tr><tr><td>卡號</td><td>000000000001</td><td>卡號</td><td>000000000002</td></tr><tr><td>地區</td><td>南京</td><td>地區</td><td>杭州</td></tr><tr><td>網點</td><td>工商江蘇南京業務處理中心</td><td>網點</td><td>江蘇蘇州業務中心</td></tr><tr><td colspan="2"><b>幣種</b></td><td>人民幣</td><td colspan="2"><b>鈔匯標志</b></td><td>鈔票</td></tr><tr><td colspan="2"><b>金額</b></td><td>1.00元</td><td colspan="2"><b>手續費</b></td><td>0.57元</td></tr><tr><td colspan="5"><b>合計</b></td><td>人民幣(大寫):壹元整</td></tr><tr><td colspan="2"><b>交易時間</b></td><td><i>2017年6月1日</i></td><td colspan="2"><b>時間截</b></td><td><i>2017-06-01-13.00.00.00000</i></td></tr></table><table><p>票據打印時間:2017-06-01 15:00:12</p><del>測試內容</del><p>操作員:大曾</p></table>
</body>
</html>
結果如下
?
三、?李白詩詞
代碼如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>李白詩詞</title></head>
<body><h1 align="left"><b>將進酒</b><small> 君不見黃河之水天上來</small></h1><table><tr><td><img src="3.png" width="400px" height="600px"><td> <p>君不見,黃河之水天上來,奔流到海不復回。</p><p>君不見,高堂明鏡悲白發,朝如青絲暮成雪!</p><p>人生得意須盡歡,莫使金樽空對月。</p><p>天生我材必有用,千金散盡還復來。</p><p>烹羊宰牛且為樂,會須一飲三百杯。</p><p>岑夫子,丹丘生,將進酒,杯莫停。</p><p>與君歌一曲,請君為我傾耳聽。</p><p>鐘鼓饌玉不足貴,但愿長醉不復醒。</p><p>古來圣賢皆寂寞,惟有飲者留其名。</p><p>陳王昔時宴平樂,斗酒十千恣歡謔。</p><p>主人何為言少錢,徑須沽取對君酌。</p></td></tr></table></body>
</html>
結果如下
四、豆瓣電影
代碼如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>豆瓣電影</title>
</head>
<body><th><h2>熱門電影板塊</h2></th><b>最近熱門電影</b>
<hr> 熱門 最新 豆瓣高分 冷門佳片 華語 歐美 韓國 日本 更多>>
<hr><table><tr><td><img src="千與千尋.webp" width="150px" height="200px"> <p>千與千尋</p> </td><td><img src="哪吒之魔童鬧海webp.webp" width="150px" height="200px"><p>哪吒之魔童鬧海</p></td><td><img src="唐人街探案3.jpg" width="150px" height="200px"><p>唐人街探案3</p></td><td><img src="巨齒鯊.jpg" width="150px" height="200px"><p>巨齒鯊</p></td></tr><tr><td><img src="無間道.webp" width="150px" height="200px"><p>無間道</p></td><td><img src="重啟未來.jpg" width="150px" height="200px"><p>重啟未來</p></td><td><img src="金剛.webp" width="150px" height="200px"><p>金剛</p></td><td><img src="飛馳人生2.jpg" width="150px" height="200px"><p>飛馳人生2</p></td></tr> </table>
</body>
</html>
結果如下
?