Java第二十二天（html表單標籤和css）
1.html表單標籤
<!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>
2.html和css
span和div的區別
實際使用中注意區分div和span的不同
<!DOCTYPE html>
<html>
<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>
<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><