前情提要:
本次主要是继续昨天学的简单的html 补充以及
css的简单入门
一:表单标签
>1:get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!-- get和post的区别？
1）get请求的参数会显示在浏览器地址栏上，而post请求不会把请求参数显示在地址栏；
2）Post请求的安全性比get高；
3）get请求参数的长度有限制，而Post请求的参数大小没有限制；
4）get请求有缓存，而post请求没有缓存；-->
<form action="https://www.baidu.com" method="get"> <span id="123">用户名<input type="text" id="username" name="username" title="请输入账户" placeholder="请输入账户"
value=""/></span><br>
<span>
密 码<input type="password" id="password" name="password" title="请输入密码" placeholder="请输入密码"
/><br>
</span>
<span>
性 别:男<input type="radio" name="genter" value="male" checked/>
<!--默认选择男-->
女<input type="radio" name="genter" value="famale"/>
</span><br>
<span>
<!--同意选择框必须name属性相同-->
兴趣爱好:
吃:<input type="checkbox" name="hobby" value="eat"/>
喝:<input type="checkbox" name="hobby" value="drink"/>
玩:<input type="checkbox" name="hobby" value="play"/> </span><br>
<span>
<select>
<option>
请选择省份
</option>
<option>
广东省
</option>
<option>
湖南省
</option>
</select>
</span>
<span>
<select>
<option>
请选择城市
</option>
<option>
北京
</option>
<option>
上海
</option>
<option>
深圳
</option>
</select>
</span><br> <span>
<font>大头照<input type="file"/></font>
</span><br>
<!--
submit:提交按钮
button:普通按钮
-->
<span>
<a href="https://www.baidu.com/"><input type="button" value="123" name="asdasdad"></a>
</span><br>
<span>
<input type="submit" value="注册">
</span>
</form>
</body>
</html>
>2:post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!-- get和post的区别？
1）get请求的参数会显示在浏览器地址栏上，而post请求不会把请求参数显示在地址栏；
2）Post请求的安全性比get高；
3）get请求参数的长度有限制，而Post请求的参数大小没有限制；
4）get请求有缓存，而post请求没有缓存；-->
<form action="https://www.baidu.com/s?" method="post"> <span id="123">用户名<input type="text" id="username" name="username" title="请输入账户" placeholder="请输入账户"
value=""/></span><br>
<span>
密 码<input type="password" id="password" name="password" title="请输入密码" placeholder="请输入密码"
/><br>
</span>
<span>
性 别:男<input type="radio" name="genter" value="male" checked/>
<!--默认选择男-->
女<input type="radio" name="genter" value="famale"/>
</span><br>
<span>
<!--同意选择框必须name属性相同-->
兴趣爱好:
吃:<input type="checkbox" name="hobby" value="eat"/>
喝:<input type="checkbox" name="hobby" value="drink"/>
玩:<input type="checkbox" name="hobby" value="play"/> </span><br>
<span>
<select>
<option>
请选择省份
</option>
<option>
广东省
</option>
<option>
湖南省
</option>
</select>
</span>
<span>
<select>
<option>
请选择城市
</option>
<option>
北京
</option>
<option>
上海
</option>
<option>
深圳
</option>
</select>
</span><br> <span>
<font>大头照<input type="file"/></font>
</span><br>
<!--
submit:提交按钮
button:普通按钮
-->
<span>
<a href="https://www.baidu.com/"><input type="button" value="123" name="asdasdad"></a>
</span><br>
<span>
<input type="submit" value="注册">
</span>
</form>
</body>
</html>
</body>
</html>
二:事件标签
三:css入门
>1
2:方式2
方式3:
优先级:
四:选择器
单个元素的选择器
多个元素的选择器
五:伪类选择器
六:背景样式
1>背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height:200px;
width: 200px;
background: blue;
background-image: url("mmexport1550366443161.jpg");/* 设置背景图片 */
/*background-repeat: no-repeat; !* 设置背景图片不重复 *!*/
background-position: 50% 50%; /* 设置背景图片的位置 */
/*background-attachment: fixed; !* 设置背景图不滚动 *!*/
}
.qwe{
width: 120px;
height: 120px;
padding-left: 90px;
padding-top: 90px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="qwe">
qwesdfsdf
</div>
</body>
</html>
七:字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: red;
text-align: left; /* 文本对齐方式 */
letter-spacing: 3px; /* 设置文本距离 */
text-transform: capitalize; /* 转换大小写 */ }
p span{
color: blue;
}
span{
color: yellow;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>
设置字体的重量,例如字体加粗<span>加粗字体</span>
</p>
<span>
测试字体2
</span><br> <a href="">baidu</a>
</body>
</html>
八:表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border-color: yellow;
width: 300px;
height: 200px;
align-items: center;
/*border-collapse: collapse; 合并单元格边框 */
border-spacing: 10px; /* 设置单元格边框的距离 */
}
tr {
border-color: red;
font-size: 3px;
}
</style>
</head>
<body>
<table border="1" align="center">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td> </tr>
<tr>
<td>大包</td> <td rowspan="3">男</td>
<td>21</td> </tr>
<tr>
<td>小宝</td>
<td>21</td>
<!--<td>21</td>--> </tr>
<tr>
<td>中宝</td>
<td>22</td>
<!--<td>22</td>--> </tr>
<tr>
<td>平均年龄</td>
<td colspan="2">10</td> </tr> </table>
</body>
</html>
九:边框样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div { border-width: 3px;
color: red;
width: 200px;
height: 200px;
border: 3px solid yellow;
}
</style> </head>
<body>
<div>
EndlessClould
</div>
</body>
</html>
十:盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 180px;
height: 180px;
border: 1px solid red;
}
</style>
</head> <body>
<div>
python
</div>
<div>
java
</div>
</body>
</html>
十一:定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 2000px;
}
div {
width: 200px;
height: 200px;
color: yellow;
border: 1px solid red ;
}
.green{
background-color: green;
/*position: absolute;*/
/*绝对定位*/
/*position: relative; */
/*相对定位*/
position: fixed; /* 固定定位 */
left: 20px;
top: 200px;
}
.red{
background-color: red; }
.pink{
background-color: pink;
}
</style>
</head>
<body >
<div class="green">
green
</div>
<div class="red">
red
</div>
<div class="pink">
pink
</div>
</body>
</html>
十二:小例子
>1选择器
>2样式
>3:模拟qq登录框