Java第二十二天（html表單標籤和css）
1.html表單標籤css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊表單</title>
</head>
<body>
<!--必須放在<form>中，屬性有action提交位置，method提交方式通常7種get/post/delete-->
<form action="#" method="get">
<!--隱藏的不顯示的通常使用代碼設置的-->
隱藏字段：<input type="hidden" name="id" />
姓名：<input type="text" name="username"
size="40px" required="required" maxlength="5" placeholder="請輸入中文用戶名"/>
<br/>
密碼：<input type="password" name="password"
size="40px"required="required" maxlength="16" placeholder="請設置密碼"/>
<br/>
確認密碼：<input type="password" name="repassword"
size="40px"required="required" maxlength="16" />
<br/>
<!--radio是單選，用name分組，命名區分不一樣種類的單選,checked默認選中-->
性別：<input type="radio" name="sex" value="boy" checked="checked"/>男
<input type="radio" name="sex" value="girl"/>女
<br/>
<!--checkbox多選-->
愛好：<input type="checkbox" name="hobbies" value="運動"/>運動
<input type="checkbox" name="hobbies" value="美食"/ checked="checked">美食
<input type="checkbox" name="hobbies" value="美妝"/>美妝
<input type="checkbox" name="hobbies" value="電影"/>電影
<input type="checkbox" name="hobbies" value="旅遊"/>旅遊
<input type="checkbox" name="hobbies" value="攝影"/>攝影
<input type="checkbox" name="hobbies" value="唱歌"/>唱歌
<br/>
頭像：<input type="file" /><br/>
<!--select下拉列表選擇-->
籍貫：<select name="province">
<option>-請選擇-</option>
<option value="北京">北京</option>
<!--selected默認選中-->
<option value="上海" selected="selected">上海</option>
<option value="湖北">湖北</option>
<option value="安徽">安徽</option>
<option value="河南">河南</option>
</select><br/>
<!--<textarea>大段文本輸入-->
自我介紹：<textarea placeholder="請輸入內容" name="自我介紹"></textarea><br/>
<!--按鈕不須要name屬性-->
普通按鈕：<input type="button" value="" />
重置：<input type="reset" name="一鍵重置"/>
<!--提交按鈕-->
<input type="submit" value="提交表單"/>
</form>
</body>
</html>html
2.html和csspost
span和div的區別ui
實際使用中注意區分div和span的不一樣spa
<!DOCTYPE html>
<html>3d
<head>
<meta charset="UTF-8">
<title>某某官網首頁</title>
<style type="text/css">
#top {
background-color: black;
width: 1509px;
height: 598px;
margin: auto;
}
#top1 {
width: 1508px;
height: 90px;
float: left;
}
.top-s {
padding-top: calc(10px);
text-align: center;
width: 500px;
height: 79px;
float: left;
}
#top2 {
width: 1508px;
height: 402px;
float: left;
}
#top2_left {
width: 1125px;
height: 400px;
float: left;
}
#top2_right {
width: 375px;
height: 400px;
float: left;
}
#top3 {
width: 1508px;
height: 95px;
float: left;
}
.top3_s {
padding-top: calc(10px);
text-align: center;
width: 249px;
height: 84px;
float: left;
}
ul li{
display: inline;
font-size: calc(4);
font: "微軟雅黑";
color: lightgrey;
}
</style>
</head>orm
<body>
<!--第一個界面所有黑底-->
<div id="top">
<!--頭部標題、搜索框、註冊分爲三大塊-->
<div id="top1">
<div class="top-s">
<img src="1559553142(1).jpg" height="80%" />
</div>
<div class="top-s">
<img src="1559553302(2).jpg" width="100%" />
</div>
<div class="top-s">
<img src="1559553383(3).jpg" width="70%" />
</div>
</div>
<!--第一個界面的主顯示界面分爲兩部分-->
<div id="top2">
<!--左邊是主顯示界面插入圖片-->
<div id="top2_left">
<img src="1559565087(1).jpg" width="100%" height="100%" />
</div>
<!--右邊爲註冊獲取用戶信息界面，插入表格-->
<div id="top2_right">
<form>
<table style="font-size: calc(15px);font: '微軟雅黑';background-color: dimgray;width: auto;height: auto;">
<tr>
<td width="100%" height="41px">
姓名：<input type="text" name="username" size="40px" required="required" maxlength="5" placeholder="請輸入中文用戶名" />
</td>
</tr>
<tr>
<td width="100%" height="41px">
密碼：<input type="password" name="password" size="40px" required="required" maxlength="16" placeholder="請設置密碼" />
</td>
</tr>
<tr>
<td width="100%" height="41px">
確認密碼：<input type="password" name="repassword" size="40px" required="required" maxlength="16" />
</td>
</tr>
<tr>
<td width="100%" height="41px">
性別：<input type="radio" name="sex" value="boy" checked="checked" />男
<input type="radio" name="sex" value="girl" />女
</td>
</tr>
<tr>
<td width="100%" height="41px">
愛好：<input type="checkbox" name="hobbies" value="運動" />運動
<input type="checkbox" name="hobbies" value="美食" / checked="checked">美食
<input type="checkbox" name="hobbies" value="美妝" />美妝
<input type="checkbox" name="hobbies" value="電影" />電影
<input type="checkbox" name="hobbies" value="旅遊" />旅遊
<input type="checkbox" name="hobbies" value="攝影" />攝影
<input type="checkbox" name="hobbies" value="唱歌" />唱歌
</td>
</tr>
<tr>
<td width="100%" height="41px">
頭像：<input type="file" /><br/>
</td>
</tr>
<tr>
<td width="100%" height="41px">
籍貫：<select name="province">
<option>-請選擇-</option>
<option value="北京">北京</option>
<!--selected默認選中-->
<option value="上海" selected="selected">上海</option>
<option value="湖北">湖北</option>
<option value="安徽">安徽</option>
<option value="河南">河南</option>
</select><br/>
</td>
</tr>
<tr>
<td width="100%" height="41px">
自我介紹：<textarea placeholder="請輸入內容" name="自我介紹"></textarea><br/>
</td>
</tr>
<tr>
<td width="100%" height="41px">
<input type="reset" name="重置" />
<!--提交按鈕-->
<input type="submit" value="提交表單" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!--底部爲推薦分類點擊連接分紅5個部分-->
<div id="top3">
<span class="top3_s">
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
</span>
<span class="top3_s">
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
</span>
<span class="top3_s">
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
</span>
<span class="top3_s">
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
</span>
<span class="top3_s">
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
</span>
<span class="top3_s">
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
<ul>
<a href="#"><li>娛樂</li></a>
<a href="#"><li>電影</li></a>
<a href="#"><li>電視劇</li></a>
<a href="#"><li>綜藝</li></a>
</ul>
</span>
</div>
</div>
</body>htm
</html>blog
- 1. CSS+HTML(二)------HTML標籤（二）
- 2. python學習第二十七天（HTML之表單標籤）
- 3. java第二十一天（html）
- 4. 第二天HTML&CSS
- 5. Struts2day04（二）標籤庫和表單標籤
- 6. （四十二）HTML標籤--3
- 7. HTML：文件標籤（二） - 表格標籤
- 8. Html+CSS 學習第二天
- 9. html標籤（二）
- 10. html標籤二
- 更多相關文章...
- • ASP.NET Web Pages - HTML 表單 - ASP.NET 教程
- • ASP.NET Web Forms - HTML 表單 - ASP.NET 教程
- • Java Agent入門實戰（二）-Instrumentation源碼概述
- • RxJava操作符（二）Transforming Observables
-
每一个你不满意的现在，都有一个你没有努力的曾经。