![e1c1fdab3f26fbb24581d730b56dc608.png](https://img-blog.csdnimg.cn/img_convert/e1c1fdab3f26fbb24581d730b56dc608.png)
java web
表单标签:
type中的text :
<form action="#" method="get">
用户名:<input type="text" name="username">
密码:<input type="text" name="password">
账号:<input type="text" name="user">
<input type="submit" value="登录">
</form>
password和radio:
<form action="#">
<!--默认是文本框-->
<label for="user_id">用户:</label>
<input id="user_id" type="text" name="username"><br>
<!--密码框显示的是黑色点,相对安全-->
密码:<input type="password" name="password"><br>
<!--单选表单:
1:多个单选按钮name属性必须一样,否者无法单选
2: 单选按钮还必须有一个value属性,属性的值不同
3:单选框默认选中:checked="checked"
-->
男:<input type="radio" name="sex" value="1">
女:<input type="radio" name="sex" value="0" checked="checked"><br>
<!--复选框-->
喝酒:<input type="checkbox" value="hejiu" name="ailhao"><br>
抽烟:<input type="checkbox" value="choyuan" name="ailhao"><br>
烫头:<input type="checkbox" value="tangtou" name="ailhao"><br>
<hr>
游泳:<input type="checkbox" value="youyong" name="jianshen"><br>
跳舞:<input type="checkbox" value="tiaowu" name="jianshen"><br>
跑步:<input type="checkbox" value="paobu" name="jianshen"><br>
<!--文件上传-->
上传图片:<input type="file"><br>
<!--隐藏域:不在页面显示的表单项:用户不需要干预数据的提交-->
<input type="hidden" name="hidden" value="公钥ID"><br>
<!--表单项:按钮
type="button":必须绑定事件才能有效
type="image":需要指定图片路径,点击就可以提交。
-->
<input type="button" value="表单button"><br>
<input type="image" src="../../day01/image/banner_1.jpg" height="60" width="180" value="表单image"><br>
<button>点我呀!</button>
<hr>
<!--下拉列表-->
<select name="city" >
<option >--请选择--</option>
<option value="xian">西安</option>
<option value="baoji">宝鸡</option>
<option value="xiangyang">咸阳</option>
<option value="shgnluo">商洛</option>
</select><br>
<!--文本域
cols="30" rows="10"
指定默认大小
共有:10行
可以写:30字
-->
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit" value="提交表单"><br>
<input type="submit" value="提交表单">
样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css入门</title>
</head>
<body>
<!--内部样式-->
<!--<style>
#div_5{
color: red;
font-size: 50px;
}
#div_6{
color: green;
font-size: 10px;
}
</style>-->
<!--外部样式-->
<!--<link rel="stylesheet" href="./03_css样式表.css" >-->
<style>
@import "03_css样式表.css";
</style>
<div>
<font color="red" size="10">
我是第一个div标签
</font>
<font color="green" size="5">
我是第二个标签
</font>
</div>
<hr>
<!-- div的style属性的值可以写多组,用;隔开
属性和属性之间使用空格
属性之间的属性用分号;隔开
1:内联样式:在
2:
-->
<div style="color: #ff0000; font-size: 15px;">我是第三个div</div>
<div style="color: #008000;font-size: 5px">我是第四个div</div>
<hr>
<div id="div_5">我是第五个div</div>
<div id="div_6">我是第六个div</div>
<!--
1: 内联样式优先级最高
2: 内部样式和外部样式,谁靠后谁的优先级更高
-->
</body>
</html>
css:
#div_5{
color: red;
font-size: 50px;
}
#div_6{
color: green;
font-size: 10px;
}
css语法:
<!--内部样式-->
<style>
/*id选择器*/
/* #div_1{
color: aqua;
font-size: 20px;
}
#div_2{
color: #000;
font-size: 25px;
}*/
/*元素选择器*/
/*
div{
color: red;
font-size: 10px;
}
*/
/*类选择器*/
.cls_1{
color: aquamarine;
font-size: 30px;
}
</style>
</head>
<body>
<div id="div_1">我是div1</div>
<div id="div_2">我是div2</div>
<div>我是div3</div>
<div class="cls_1">我是div4</div>
三种选择器的优先级 :
id 选择器的优先级 > 类选择器 > 元素选择器
/*id选择器*/
/* #div_1{
color: aqua;
font-size: 20px;
}
#div_2{
color: #000;
font-size: 25px;
}*/
/*元素选择器*/
/*
div{
color: red;
font-size: 10px;
}
*/
/*类选择器*/
.cls_1{
color: aquamarine;
font-size: 30px;
}
</style>
其他元素选择器:
<style>
/*所有元素选择器*/
/*1.选择全部元素*/
/* *{
color: chartreuse;
font-size: 20px;
}*/
/*2。并集选择器*/
/* div,p{
font-size: 30px;
}*/
/* 子选择器 :筛选选择器1下选择器2*/
/* div p{
color: brown;
font-size: 30px;
}*/
/*父元素选择器*/
/* div > p{
color: chartreuse;
}*/
/*属性选择器*/
span[class=aa]{
color: red;
}
span[class=bb]{
color: chartreuse;
}
/*6.伪类选择器*/
a:link{
color: chartreuse;
}
a:hover{
color: green;
}
a:active{
color: red;
}
a:visited{
color: antiquewhite;
}
</style>
属性及属性的值:
<style>
.div_1{
font-size: 100%;
font-style: oblique;
font-family: 楷体;
opacity: 0.3;
color: #000;
text-align: center;
line-height: 90%;/*行高*/
}
.div_2{
font-size: 200%;
font-style: normal;
font-family: 微软雅黑;
/*opacity: 0.5;*/
/* color: rgb(255,255,0);*/
color: rgba(255,255,0,0.8);
text-align: left;
line-height: 90%;
}
.div_3{
/* font-size: 300%;
font-style: italic;
font-family: 隶书;*/
font: italic 300% 隶书;
opacity: 1;
color: #ff0;
text-align: right;
line-height: 200%;
}
.div_4{
/* background-color: chartreuse;
background-image: url("../../day01/image/hotel_tel.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top; !*定位*!*/
/* background: url("../../day01/image/hotel_tel.png") no-repeat fixed crimson;*/
width: 200px;
height: 100px;
border: 5px red dashed;
}
.div_5{
width: 50%;
height: 50%;
border: 1px solid ;
}
p{
/* margin:0px;无边距
margin-left: 0px;
margin-right: 10px;
*/
/*上 右 下 左*/
margin: 0px 0px 10px 10px;
}
</style>
</head>
<body >
<div class="div_1">我是第一个div</div>
<div class="div_2">我是第二个div</div>
<div class="div_3">我是第三个div</div>
<div class="div_4">
<div class="div_5">
我是第五个div
</div>
</div>
<p>道具农电局【抛开V领老师开始破碎机大V是PSV多少</p>