自学java第一天 javaweb的应用

最新推荐文章于 2022-06-03 20:56:34 发布

PTB_JF

最新推荐文章于 2022-06-03 20:56:34 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/PTB_JF/article/details/81172939

版权

自学第一天 html+css

html部分

学习了表单的标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单标签属性介绍</title>
	</head>
	<body>
		<form action="#" method="get">
			隐藏字段:<input type="hidden" name="id" value="" /><br />
			用户名：<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5"  placeholder="请输入用户名"/><br />
			密码：<input type="password" name="password" required="required"/><br />
			确认密码：<input type="password" name="repassword"/><br />
			性别：<input type="radio" name="sex" value="男" checked="checked"/>男的
			<input type="radio" name="sex" value="女" />女的<br />
			爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
			<input type="checkbox" name="hobby" value="打电动" checked="checked"/>打电
			<input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
			头像：<input type="file" name="file"/><br />
			籍贯：<select name="province">
				<option>--请选择--</option>
				<option value="北京">北京</option>
				<option value="上海" selected="selected">上海</option>
				<option value="广州">广州</option>
			</select><br />
			自我介绍：
				<textarea name="zwjs">
					
				</textarea><br />
			提交按钮：<input type="submit" value="注册"/><br />
			普通按钮：<input type="button" value="zhuce"/><br />
			重置按钮：<input type="reset" />
		</form>
	</body>
</html>

以及checked=“checked” required=“required” selected="selected" 图下是这绑定标签的值的应用

、

css部分

div块--span 可以当成一块块的板组成整个网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div效果演示</title>
		<style>
			div{
				border: 1px solid red;
				width: 400px;
				height: 200px;
			}
			
		</style>
	</head>
	<body>
		<div id="">
			<!--内容-->
		</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>span演示</title>
		<style>
			span{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<span>
			文字
		</span>
		
	</body>
</html>

运行结果如下：

元素选择器是用来选中同一元素区域。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			div{
				font-size: 30px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			1
		</div>
		<div>
			2
		</div>
		<div>
			3
		</div>
		<div>
			4
		</div>
		<div>
			5
		</div>
	</body>
</html>

运行结果：

类选择器的是用来选择指定类名的块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			.div2{
				font-size: 30px;
				color: gold;
			}
		</style>
	</head>
	<body>
		<div>
			内容
		</div>
		<div class="div2">
			内容
		</div>
		<div>
			内容
		</div>
		<div class="div2">
			内容
		</div>
		<div>
			内容
		</div>
	</body>
</html>

运行结果：

idi选择器用来选中指定类的名字的块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#div5{
				font-size: 30px;
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			1
		</div>
		<div class="div2">
			2
		</div>
		<div>
			3
		</div>
		<div class="div2">
			4
		</div>
		<div id="div5">
			5
		</div>
	</body>
</html>

结果如下：

层次选择器对应的层被选中

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<style>
			div p{
				font-size: 30px;
				color: green;
			}
		</style>
	</head>

	<body>
		<div>
			11111
		</div>
		<div>
			22222
		</div>
		<div>
			33333
		</div>
		<div>
			<p>
				44444
			</p>
		</div>
		<div>
			55555
		</div>
		<p>
			666666
		</p>
	</body>

</html>

结果如下：

属性选择器对相应的属性进行选择格式的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<style>
			input[type='text']{
				background-color: red;
			}
			
			
			input[type='password']{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		用户名；<input type="text" name="username"/><br />
		密码：<input type="password" name="password"/>
	</body>
</html>

运行结果：

css的引进方式有三：内部引进，行内引进，外部引进。内部和行内引进都是在同一个页面

内部引进

<head>
       <meta charset="UTF-8">
       <title>元素选择器</title>
       <style type="text/css">
           div{
               font-size: 30px;
               color: pink;
           }
       </style>
   </head>

行内引进

<div style="font-size: 20px;color: blue;">
5555
</div>

外部引进

   <head>
       <meta charset="UTF-8">
       <title>元素选择器</title>
       <link rel="stylesheet" href="style.css" type="text/css"/>
   </head>

css浮动块在网页上设置某一块区域的格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS浮动</title>
		<style>
			#one{
				border: 1px solid red;
				width: 600px;
				height: 150px;
				float: right;
			}
			#two{
				border: 1px solid black;
				width: 600px;
				height: 190px;
				float:left;
			}
			#three{
				border: 1px solid blue;
				width: 600px;
				height: 150px;
				float: right;
			}
			/*清除浮动*/
		/*	#clear{
				clear: both;
			}*/
		</style>
	</head>
	<body>
		<div id="one">
			
		</div>
		<div id="clear">
			
		</div>
		<div id="two">
			
		</div>
		<div id="three">
			
		</div>
	</body>
</html>

运行如下：

经过基础的元素标签和div + css学习，对网站的布局基本掌握了...

PTB_JF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学java第一天 javaweb的应用

自学第一天 html+csshtml部分学习了表单的标签：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单标签属性介绍&lt;/title&gt; &am
复制链接

扫一扫