Web前端学习 Day2：HTML表单标签 / 注册页面 / CSS

最新推荐文章于 2023-01-16 18:35:23 发布

Z知行T

最新推荐文章于 2023-01-16 18:35:23 发布

阅读量420

点赞数 1

分类专栏： web前端文章标签： web

本文链接：https://blog.csdn.net/qq_40027172/article/details/107090667

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、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：普通按钮
						* 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 style="color:red;">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

2.6 CSS_案例

css

.divBody{
    width: 900px;
    height: 500px;
    border: 5px solid #EEEEEE;
    background-color: white;
    margin: auto;/*水平居中*/
    margin-top: 200px;
}
.divLeft{
  /*  border: 1px solid red;*/
    float: left;
    color: red;
    margin: 15px;
}
.divLeft >p:first-child{
    color: #FFD026;
    font-size: 20px;
}
.divLeft >p:last-child{
    color: gray;
    font-size: 20px;
}
.divMid{

    width: 550px;
    float: left;

}
.divRight{
    float: right;
    /*border: 1px solid red;*/
    margin: 15px;
}
.divRight p{
    font-size: 10px;
}
.divRight p a{
    font-size: 10px;
    color: pink;
}
.td_left{
    width: 100px;
    text-align: right;
    height: 45px;
}
.df_right{
    padding-left: 30px;
}
    #username,#password,#email,#tel,#checkcode,#birthday{
        font-style: italic;
        width: 251px;
        height: 32px;
        border: 1px solid gray;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;

    }
#checkcode{
    width: 110px;

}
#id_img_check{
    height: 32px;
    vertical-align: middle;
    margin-left: 30px;
}
#btn_sub{
    width: 150px;
    height: 40px;
    background-color: #FFD026;
    border: 1px solid #FFD026;
    margin-left: 30px;
    margin-top: 20px;
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/register.css">
</head>
<body background="img/register_bg.png">
<div class="divBody">
<div class="divLeft">

    <p>新用户注册</p><br>
    <p>USER REGISTER</p>

</div>
<div class="divMid">
    <div class="rg_form">
        <form action="#" method="post" >
            <table>
                <tr>
                    <td class="td_left"><label for="username">用户名</label></td>
                    <td class="df_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                </tr>
                <tr>
                    <td class="td_left"><label for="password">密码</label></td>
                    <td class="df_right"><input type="text" name="password" id="password" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td class="td_left"><label for="email">Email</label></td>
                    <td class="df_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                </tr>
                <tr>
                    <td class="td_left"><label for="tel">手机号</label></td>
                    <td class="df_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                </tr>
                <tr>
                    <td class="td_left">性别</td>
                    <td class="df_right"><input type="radio" name="gender"  value="male">男
                        <input type="radio" name="gender" value="female">女
                    </td>
                </tr>

                <tr>
                    <td class="td_left">出生日期</td>
                    <td class="df_right"> <input type="date" name="birthday" id="birthday"> </td>
                </tr>
                <tr>
                    <td class="td_left"><label for="checkcode">验证码</label></td>
                    <td class="df_right"><input align="center" type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                        <img id="id_img_check" src="img/verify_code.jpg">
                    </td>
                </tr>
                <tr>

                    <td colspan="2" align="center"><input id="btn_sub" type="submit"value="注册" name="birthday"> </td>
                </tr>
            </table>
        </form>
    </div>
</div>

<div class="divRight">
    <p>已有账号?<a href="#">立即登录</a></p>
    <p></p>

</div>

</div>
</body>
</html>