1. 学习收获
a(超连接)
(1)超链接的作用
向服务器发送请求,链接到某个资源
(2)链接到网络中的某个资源
<a href="http://www.baidu.com"></a>
(3)链接到本地的某个资源
<a href="本地文件的相对路径或绝对路径都可以"></a>
(4)图片做超链接
<a href=""><img/></a>
(5)超链接的target属性
_blank
_self
_parent
_top
(6)用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果,只不过超链接更傻瓜式。
通过伪类选择器设置超链接样式
form(表单)
表单的作用
用户填写表单,提交数据给服务器,所以表单是专门用来收集用户数据的。
第一个表单
<form action="http://192.168.101.2:8080/crm/login">
用户名<input type="text" name="uname" />
密码<input type="password" name="pwd"/>
<input type="submit" value="登录"/>
<!--普通按钮不具备提交表单的能力-->
<input type="button" value="登录"/>
</form>
<!--submit放到form外部无法提交表单-->
<input type="submit" value="登录"/>
(1)action属性等同于超链接的href属性,填写请求的url
(2)input标签属于输入域标签,input标签的type属性是text,表示文本框,是password,表示密码框
(3)input标签的type是submit表示提交按钮,该按钮可以提交表单,所谓表单的提交是发送请求url,并携带数据给服务器。
(4)所有按钮的value属性都是用来设置按钮上显示的文本内容
(5)发送请求并提交数据时,数据格式遵循HTTP协议,所有浏览器都会采用这种格式:url?name=value&name=value&name=value...,其中name是input标签的name属性,value是input标签的value属性
(6)文本框和密码框的value不需要开发人员指定,用户填写的数据就是value。
(7)submit按钮放到form标签外面无法提交表单
(8)普通按钮不具备提交表单的能力。
表单的method属性
(1)method不写或写上get都属于get请求,method写post才是post请求
(2)get请求在HTTP协议的请求行上提交数据,最终提交的数据会显示在浏览器地址栏上
(3)post请求在HTTP协议的请求体中提交数据,最终提交的数据不会显示到浏览器地址栏上
(4)只有当使用form表单,并且method属性设置为post才是post请求,其他请求均为get,超链接也是get请求。
使用表格给表单排版
<form action="">
<table>
<tr>
<td colspan="3">新用户注册</td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="grender" checked>男<input type="radio" name="grender">女</td>
<td></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="text" placeholder="按格式yyyy-mm-dd"></td>
<td>按格式yyyy-mm-dd</td>
</tr>
<tr>
<td>学校:</td>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td>专业:</td>
<td>
<select name="zhuanye" id="">
<option value="jk">计算机科学与技术</option>
<option value="wl">网络工程</option>
<option value="sm">数字媒体</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>体育特长:</td>
<td>
<input type="checkbox" name="hobby" checked>篮球
<input type="checkbox" name="hobby" checked>排球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">游泳
</td>
<td></td>
</tr>
<tr>
<td>上传文件:</td>
<td><input type="file"></td>
<td></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password"></td>
<td></td>
</tr>
<tr>
<td>个人介绍:</td>
<td><textarea name="" id="" cols="30" rows="5" placeholder="请输入内容"></textarea></td>
<td></td>
</tr>
<tr>
<td colspan="3" >
<div class="container">
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
<!-- <input type="submit" name="提交">
<input type="reset" name="重置"> -->
</td>
</tr>
<tr>
<td colspan="3" >
<div class="fr">已有账号?<a href="">立即登录</a></div>
</td>
</tr>
</table>
</form>
效果如下所示
给其加入CSS样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.fl {
float: left;
}
.fr {
float: right;
}
button {
outline: none;
border: 0;
padding: 6px 15px;
margin: 5px;
margin-right: 1px;
background: #f1c40f;
}
.container {
position: relative;
left: 100px;
}
table {
background-color:#1abc9c;
}
table tr:nth-child(1) td {
color: #ff0; font-size: 18px; margin-bottom: 8px; text-align: center;
}
td {
padding: 5px;
}
效果如下
2. 知识点: 了解
3. 掌握情况:了解
4.. 。。。。。 有图有真相
CSS方面的笔记我都写到XMind文件中了,感兴趣的可以看一下
https://1drv.ms/u/s!At_ScT3dIixRk1PFMJgJsIuJv2Lb?e=b5vZlk(OneDriver/需要梯子)
扩展内容
变换![](https://i-blog.csdnimg.cn/blog_migrate/a2c7c2424e837f1d29aa945453033140.png)
过渡
动漫
扩展练习:“跳动的爱心”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 心跳 */
@keyframes beat {
from {
transform: rotate(45deg) scale(2);
}
to {
transform: rotate(45deg) scale(2.3);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f7f1e3;
}
.love {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(45deg) scale(2);
animation: beat 800ms ease infinite alternate forwards;
}
.score {
width: 80px;
height: 80px;
background-color: #e74c3c;
position: absolute;
top: 10px;
left: 10px;
}
.love,
.love::before,
.love::after {
box-shadow: -5px 16px 12px -3px rgba(0,0,0,0.4) inset;
}
.love::before,
.love::after {
content: "";
display: block;
width: 100px;
height: 100px;
background-color: rgba(231, 76, 60,1.0);
border-radius: 50%;
position: absolute;
}
.love::before {
right: 50%;
}
.love::after {
bottom: 50%;
}
</style>
</head>
<body>
<div class="love"><div class="score"></div></div>
</body>
</html>
效果如下所示