-
2022/09/12、13、14 day02/03/04：HTML和CSS（二）
今日内容
- HTML标签：表单标签
- CSS：
1. HTML标签_表单标签_概述
-
表单：
- 概念：用于采集用户输入数据的。网站上让你输入用户民、密码的就是表单。用于和服务器进行交互。（定义一个HTML表单，用于用户输入）
- 使用标签：form
-
form：用于定义表单的。可以（仅仅是）定义一个范围，范围代表采集用户数据的范围,代表允许提交。
- 属性：
- action：指定提交数据URL（位置）
- method：指定提交方式。
- 分类取值：一共7种，2种常用。（面试题）
- get:
- 请求参数会在地址栏中显示。会封装到请求行中。（HTTP协议后讲解）
- 请求参数长度是有限制的。
- get请求不太安全。可能被别人看到。
- post:
- 请求参数不会在地址栏中显示。会封装在请求体中（HTTP协议后讲解）。
- 请求参数大小没有限制
- post较为安全。
- get:
- 分类取值：一共7种，2种常用。（面试题）
- 属性：
-
表单项中的数据要想被提交，必须指定其name属性(添加上name后，才能被提交，否则不行）
-
总结：一个数据要想被提交，必须满足两个条件；
- 被form表单标签包裹，表示允许提交的范围。
- input标签中添加name属性。才可以提交成功。（提交到服务器端）
-
表单项标签：
- input标签：可以通过type属性值，改变元素展示的样式。
- placeholder属性：指定输入框的提示信息，当输入框的内容发送变化，会自动清空提示信息。
- type属性：
- text：文本输入框，默认值
- password：密码输入框 （隐藏密码，会显示黑点）
- radio：单选框（会显示可勾选的小圆圈，只能勾选一个）
- 注意：
- 想要让多个单选框实现单选的效果，多个单选框的name的属性值必须是一行（同一组）
- 一般会给每一个单选框，提供value属性，来指定其被选中后提交的值。
- checked 默认选中（可以直接是checked，也可以加值=checked）
- 注意：
- checkbox：复选框（会显示可多勾选的小框）
- 注意：
- 一般会给每一个复选框，提供value属性，来指定其被选中后提交的值。
- checked 默认选中（可以直接是checked，也可以加值=checked）
- 注意：
- file：文件选择框：
- hidden：隐藏域。用于提价一些信息。页面上并不会显示，但value会被提交到服务器。
- 按钮：
- submit：提交按钮，可以提交表单。
- button：普通按钮，仅仅是一个按钮。暂时并没有什么用，将来会与JavaSpring一起使用。
- image：使用图片作为按钮，也可以提价表单。
- 可以通过，src属性，来指定图片的路径
- label标签：指定输入项的文字描述信息
- 注意：
- label的for属性一般会和input的id属性值对应，如果对应了，则点击label区域，会让input输入框获取焦点。
- 注意：
- select：下拉列表 记得上传属性：name
- 子元素(标签）：定义列表项标签
- 可以使用value和selected
- 子元素(标签）：定义列表项标签
- textarea：文本域
- 属性cols：指定列数（每一行有多少个字符）
- 属性rows：指定有多少行（当然，会自动扩行）
- input标签：可以通过type属性值，改变元素展示的样式。
-
案例1_注册页面(html)
- 案例效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pXja0Lnu-1663159670483)(en-resource://database/5751:1)]
- 分析：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uWdHJYbh-1663159670484)(en-resource://database/5753:1)]
代码1：表单标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签title> head> <body> <form action="#" method="post"> 用户名：<input name="username"><br> 密码：<input name="password"><br> <input type="submit" value="登录"> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
代码2：表单项标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签title> head> <body> <form action="#" method="get"> <label for="username">用户名：label><input type="text" name="username" placeholder="请输入用户名" id="username"><br> 密码：<input type="password" name="password" placeholder="请输入密码"><br> 性别：<input type="radio" name="gender" value="male" checked="checked"> 男 <input type="radio" name="gender" value="female"> 女 <br> 爱好：<input type="checkbox" name="hobby" value="calligraphy"> 书法 <input type="checkbox" name="hobby" value="leaning"> 学习 <input type="checkbox" name="hobby" value="writing" checked="checked"> 写作 <br> 图片：<input type="file" name="file"> <br> 隐藏域：<input type="hidden" name="id" value="aaa"> <br> 取色器：<input type="color" name="color"> <br> 生日：<input type="date" name="birthday"><br> 生日：<input type="datetime-local" name="birthday"><br> 邮箱：<input type="email" name="email"><br> 年龄：<input type="number" name="age"><br> <input type="submit" value="登录"> <br> <input type="button" value="一个按钮"> <br> <input type="image" src="img/regbtn.jpg"> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
代码3：下拉列表标签和文本域标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签title> head> <body> <form action="#" method="get"> 省份：<select name="province"> <option value=""> ---请选择--- option> <option value="1" selected> 四川 option> <option value="2"> 北京 option> <option value="3"> 上海 option> <br> select><br> 自我描述：<textarea cols="10" rows="3" name="des">textarea><br> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
代码4：案例1_注册页面(html)
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面title> head> <body> <form action="#" method="post"> <table border="1" align="center" width="500"> <tr> <td><label for="username">用户名label> td> <td><input type="text" name="username" id="username">td> tr> <tr> <td><label for="password">密码label> td> <td><input type="password" name="username" id="password">td> tr> <tr> <td><label for="email">Emaillabel> td> <td><input type="email" name="email" id="email">td> tr> <tr> <td><label for="name">姓名label> td> <td><input type="text" name="name" id="name">td> tr> <tr> <td><label for="tel">手机号label> td> <td><input type="text" name="tel" id="tel">td> tr> <tr> <td><label>性别label> td> <td><input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 td> tr> <tr> <td><label for="birthday">出生日期label> td> <td><input type="date" name="name" id="birthday">td> tr> <tr> <td><label for="checkcode">验证码label> td> <td><input type="text" name="checkcode" id="checkcode"> <img src="img/verify_code.jpg"> td> tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册">td> tr> table> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
2. CSS：页面美化和布局控制
- html：是用来展示页面信息的
- CSS：使用来进行页面美化和布局控制
- 概念： cascading style sheets 层叠样式表：
- 层叠：多个样式可以作用在同一个html元素上，同时生效。
- 好处：
- 功能强大
- 将内容的展示和样式控制分离。
- 降低耦合度。解耦。
- 让分工协作更容易
- 提高开发效率
- CSS的使用：CSS与html的结合方式
- 内联样式【不推荐，没有解耦】【当前标签生效】
- 在标签内使用style属性，指定CSS代码
- 如：
hello css
- 内部样式【常用】【当前页面生效】
- 在head标签内，定义style标签，style标签的标签体内容就是CSS的代码
- 如：
- 内联样式【不推荐，没有解耦】【当前标签生效】
- CSS的基本语法：
- 格式：
- 选择器{属性名1:属性值1；属性名2:属性值2；…}
- 选择器：筛选具有相似特征的元素。
- 注意：每一对属性需要使用；隔开，最后一对属性可以不加。
- 格式：
- 选择器有哪些？【掌握】筛选具有相似特征的元素
- 分类：
- 基础的选择器
- id选择器：选择具体的id属性值的元素。建议在一个html页面中，id值唯一。
- 语法：#id属性值{ }
- 元素选择器：选择具有相同标签名称的元素
- 语法：标签名称{ }
- 注意：id选择器的优先级要高于元素选择器。
- 类选择器：选择具有相同的class属性值的元素
- 语法：.class属性值{ }
- 注意：类选择器的优先级要高于元素选择器。
- id选择器>类选择器>元素选择器
- id选择器：选择具体的id属性值的元素。建议在一个html页面中，id值唯一。
- 扩展选择器
- 选择所有元素（通用选择器）
- 语法：*{ }
- 并集选择器
- 语法：选择器1，选择器2{ }
- 子选择器：筛选选择器1元素下的选择器2元素【常用】
- 语法：选择器1 选择器2{ }：表示选择器1下的选择器2
- 父选择器：筛选选择器2的父元素选择器1【常用】
- 语法：选择器1 > 选择器2{ }
- 属性选择器：选择元素名称，属性名=属性值的元素
- 语法：元素名称[ 属性名=‘属性值’ ]{ } 记住没有空格
- 伪类现择器：选择一些元素具有的状态
- 语法：元素:状态{ }
- 如：
- 状态：
- link：初始化的状态
- visited：被访问过的状态
- active：正在访问状态
- hover：鼠标悬浮状态
- 状态：
- 如：
- 语法：元素:状态{ }
- 选择所有元素（通用选择器）
- 基础的选择器
- 分类：
- 属性有哪些？【常见了解】
- 字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：文本对其方式
- line-height：文本行高（也就是边框大小）
- 背景
- background：
- 边框
- border：设置边框，复合属性
- 尺寸
- 宽度：width
- 高度：height
- 盒子模型：主要是控制布局
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8NhqRcQp-1663159670485)(en-resource://database/5755:1)]
- margin：外边距
- padding：内边距
- 默认情况下内边距会影响整个盒子的大小
- 设置一下盒子的属性，让width和height就是最终盒子的大小
- box-sizing: border-box;
- float：浮动
- left
- right
- 字体、文本
- 案例：巩固html和CSS的学习成果
- 案例2_注册页面(css)使用css美化
- 案例效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v2YAmir8-1663159670485)(en-resource://database/5757:1)]
- 分析：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ekUUpq7O-1663159670486)(en-resource://database/5759:0)]
- 案例2_注册页面(css)使用css美化
代码1：基础选择器。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础选择器title> <style> #div1{ color: red; } div{ color: green; } .cls1{ color: blue; } style> head> <body> <div id="div1">传智播客div> <div class="cls1">黑马程序员div> <P class="cls1">传智学院P> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
代码2：扩展选择器
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扩展选择器title> <style> div p{ color: red; } div > p { /*父类写在前面，使div有一个边框*/ border: 1px solid; } input[type='text']{ border: 5px solid; } a:link{/*初始状态*/ color: fuchsia; } a:hover{/*鼠标悬浮*/ color: green; } a:active{/*鼠标点击*/ color: gold; } a:visited{/*鼠标访问过了*/ color: red; } style> head> <body> <div> <p>传智播客p> div> <p>黑马程序员p> <div>meiyoubeixuanzhongdiv> <input type="text"> <input type="password"> <br> <a href="#">传智播客a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
代码3：CSS属性
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体属性title> <style> p{ color: red; font-size: 30px; text-align: center; line-height: 100px; /*border 边框*/ border: 1px solid red; } div{ border: 1px solid red; /*尺寸*/ height: 200px; width: 200px; /*背景*/ background: url("img/logo.jpg") no-repeat center; } style> head> <body> <p>传智播客p> <div>黑马程序员div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
代码4：CSS属性：盒子模型
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体属性title> <style> div{ border: 1px solid red; width: 100px; } .div1{ width: 100px; height: 100px; /*外边距*/ /*margin: 50px;*/ } .div2{ width: 200px; height: 200px; padding: 50px; /*设置一下盒子的属性，让width和height就是最终盒子的大小*/ box-sizing: border-box; } .div3{ float: left; } .div4{ float: left; } .div5{ float: right; } style> head> <body> <div class="div2"> <div class="div1">div> div> <div class="div3">aaadiv> <div class="div4">bbbdiv> <div class="div5">cccdiv> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
代码5：案例2_注册页面(css)使用css美化
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url("img/register_bg.png") no-repeat center; } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; margin-top: 15px; } .rg_left{ /* border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child{ color: #FFD026; font-size: 20px; } .rg_left > p:last-child{ color: #A6A6A6; font-size: 20px; } .rg_center{ /*border: 1px solid red;*/ float: left; /*width: 450px;*/ } .rg_right{ /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child{ font-size: 15px; } .rg_right p a{ color: pink; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px; } #username,#password,#email,#name,#tel,#birthday,#checkcode{ width: 251px; height: 32px; border: 1px solid #A6A6A6; /*设置边框圆角*/ border-radius: 5px; padding-left: 15px; } #checkcode{ width: 110px; } #img_check{ height: 32px; vertical-align: middle; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; } style> head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册p> <p>USER REGISTERp> div> <div class="rg_center"> <div class="rg_form"> <form action="#" method="post"> <table> <tr> <td class="td_left"><label for="username">用户名label>td> <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">td> tr> <tr> <td class="td_left"><label for="password">密码label>td> <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">td> tr> <tr> <td class="td_left"><label for="email">Emaillabel>td> <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱">td> tr> <tr> <td class="td_left"><label for="name">姓名label>td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名">td> tr> <tr> <td class="td_left"><label for="tel">手机号label>td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号">td> tr> <tr> <td class="td_left"><label>性别label>td> <td class="td_right"> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 td> tr> <tr> <td class="td_left"><label for="birthday">出生日期label>td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">td> tr> <tr> <td class="td_left"><label for="checkcode" >验证码label>td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> <img id="img_check" src="img/verify_code.jpg"> td> tr> <tr> <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册">td> tr> table> form> div> div> <div class="rg_right"> <p>已有账号?<a href="#">立即登录a>p> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
——此文档为学习笔记！- 1
-
相关阅读:
[ 渗透测试面试篇 ] 渗透测试面试题大集合(详解)（四）SSRF相关面试题
基于springboot的社区医院管理系统的设计
（附源码）springboot实验室预约管理系统 毕业设计 261141
堆排序（数据结构）
路由和node环境搭建
从零开始搭建React+TypeScript+webpack开发环境-基于axios的Ajax请求工具
【微服务】八. 统一网关gateway
pytorch模型可视化的方法总结
Springboot 实践（15）spring config 配置与运用—自动刷新
当BIM遇上VR。让你体会一把什么是win win~
- 原文地址：https://blog.csdn.net/w2079930908/article/details/126860068
