Web前端学习Day2：HTML表单标签注册页⾯CSS ⼀、HTML表单标签
1.1 HTML表单标签概述
表单：
*概念：⽤于采集⽤户输⼊的数据的。⽤于和服务器进⾏交互。
* form：⽤于定义表单的。可以定义⼀个范围，范围代表采集⽤户数据的范围
*属性：
* action：指定提交数据的URL
* method：指定提交⽅式
*分类：⼀共7种，2种⽐较常⽤
* get：
1.请求参数会在地址栏中显⽰。会封装到请求⾏中(HTTP协议后讲解)。
2.请求参数⼤⼩是有限制的。
3.不太安全。
* post：
2.请求参数不会再地址栏中显⽰。会封装在请求体中(HTTP协议后讲解)
2.请求参数的⼤⼩没有限制。
3.较为安全。
*表单项中的数据要想被提交：必须指定其name属性
1.2 HTML表单标签_表单项input
表单项标签：
* input：可以通过type属性值，改变元素展⽰的样式
* type属性：
* text：⽂本输⼊框，默认值
* placeholder：指定输⼊框的提⽰信息，当输⼊框的内容发⽣变化，会⾃动清空提⽰信息
* password：密码输⼊框
* radio：单选框
*注意：
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须⼀样。
2.⼀般会给每⼀个单选框提供value属性，指定其被选中后提交的值
3. checked属性，可以指定默认值
* checkbox：复选框
*注意：
1.⼀般会给每⼀个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值
* file：⽂件选择框
* hidden：隐藏域，⽤于提交⼀些信息。
*按钮：
* submit：提交按钮。可以提交表单
* button：普通按钮
textarea中cols表示* image：图⽚提交按钮
* src属性指定图⽚的路径
* label：指定输⼊项的⽂字描述信息
*注意：
* label的for属性⼀般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输⼊框获取焦点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--form，⽤于定义表单的，可以定义⼀个范围，范围代表采集⽤户数据的范围属性：action：指定提交数据的URL
method：指定提交⽅式
-->
<form action="#" method="get">
⽤户名：<input  type="text" name="username"><br>
密码：<input type="password" name="password"><br>
性别：<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
<br>
爱好：<input type="checkbox" name="hobby" value="shopping">逛街<input type="checkbox" name="hobby" value="Java">Java
<input type="checkbox" name="hobby" value="game">游戏
<br>
<input type="file" name="file">
<br>
隐藏域：<input type="hidden" name="id" value="aaa">
取⾊器：<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>
省份：<select name="province">
<option value="">请选择</option>
<option value="1" selected>北京</option>
<option value="2">上海</option>
</select>
<br>
⾃我描述：<textarea cols="20" rows="10" name="des"></textarea><br>
<input type="submit" value="登录">
<input type="button" value="⼀个按钮"><br>
<input type="image" src="img/regbtn.jpg"><br>
</form>
</body>
</ht
1.3 HTML表单标签_表单项select & textarea
* select：下拉列表
*⼦元素：option，指定列表项
* textarea：⽂本域
* cols：指定列数，每⼀⾏有多少个字符
* rows：默认多少⾏。
1.4 HTML注册页⾯案例
<title>注册页⾯</title>
</head>
<body>
<!--定义表单-->
<form action="#" method="post">
<table border="1" align="center" width="500px">
<tr>
<td><label for="username">⽤户名</label></td>
<td><input type="text" name="username" id="username" placeholder="请输⼊⽤户名"></td> </tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="text" name="password" id="password" placeholder="请输⼊密码"></td> </tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email" placeholder="请输⼊邮箱"></td>
</tr>
<tr>
<td><label for="tel">⼿机号</label></td>
<td><input type="text" name="tel" id="tel" placeholder="请输⼊⼿机号"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="gender"  value="male">男
<input type="radio" name="gender" value="female">⼥
</td>
</tr>
<tr>
<td>出⽣⽇期</td>
<td><input type="date" name="birthday"></td>
</tr>
<tr>
<td><label for="checkcode">验证码</label></td>
<td><input align="center" type="text" name="checkcode" id="checkcode">
<img src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"value="注册" name="birthday"></td> </tr>
</table>
</form>
</body>
</html>
⼆、 CSS
2.1 CSS概述
1. 概念： Cascading Style Sheets 层叠样式表
* 层叠：多个样式可以作⽤在同⼀个html的元素上，同时⽣效
2. 好处：
1. 功能强⼤
2. 将内容展⽰和样式控制分离
* 降低耦合度。解耦
* 让分⼯协作更容易
* 提⾼开发效率
2.2 CSS与HTML的结合⽅式
CSS的使⽤：CSS与html结合⽅式
1.内联样式
*在标签内使⽤style属性指定css代码
*如：<div >hello css</div>
2.内部样式
*在head标签内，定义style标签，style标签的标签体内容就是css代码
*如：
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
3.外部样式
1.定义css资源⽂件。
2.在head标签内，定义link标签，引⼊外部的资源⽂件
*如：
* a.css⽂件：
div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
*注意：
*1,2,3种⽅式 css作⽤范围越来越⼤
*1⽅式不常⽤，后期常⽤2,3
*3种格式可以写为：
<style>
@import"css/a.css";
</style>
2.3 CSS语法
css语法：
* 格式：
选择器 {
属性名1：属性值1;
属性名2：属性值2;
…
}
* 选择器：筛选具有相似特征的元素
* 注意：
* 每⼀对属性需要使⽤；隔开，最后⼀对属性可以不加；
2.4 CSS_选择器_基本选择器
选择器：筛选具有相似特征的元素
*分类：
1.基础选择器
1. id选择器：选择具体的id属性值的元素.建议在⼀个html页⾯中id值唯⼀
*语法：#id属性值{}
2.元素选择器：选择具有相同标签名称的元素
*语法：标签名称{}
*注意：id选择器优先级⾼于元素选择器
3.类选择器：选择具有相同的class属性值的元素。
*语法：.class属性值{}
*注意：类选择器选择器优先级⾼于元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
div p{
color: red;
}
div > p{
background-color: green;
}
input[type="text"]{
border:5px;
}
a:hover{
color: yellow;
}
a:active{
color: green;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<div>
你好啊啊
<p>你好</p>
</div>
<p>Java</p>
<input type="text">
<input type="password"><br>
<a href="#">你好</a>
</body>
</h
2.5 CSS_属性_盒⼦模型
1.字体、⽂本
* font-size：字体⼤⼩
* color：⽂本颜⾊
* text-align：对其⽅式
* line-height：⾏⾼
2.背景
* background：
3.边框
* border：设置边框，符合属性
4.尺⼨
* width：宽度
* height：⾼度
5.盒⼦模型：控制布局
* margin：外边距
* padding：内边距
*默认情况下内边距会影响整个盒⼦的⼤⼩
* box-sizing: border-box；设置盒⼦的属性，让width和height就是最终盒⼦的⼤⼩
*float：浮动
* left
* right

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。