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
-
每一个你不满意的现在，都有一个你没有努力的曾经。