今日知识
1. HTML表单标签
2. CSS
3.总结表单标签
* 表单：
* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
* 属性：
* action：指定提交数据的URL * method:指定提交方式 * 分类：一共7种，2种比较常用 * get： 1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。 2. 请求参数大小是有限制的。 3. 不太安全。 * post： 1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解) 2. 请求参数的大小没有限制。 3. 较为安全。 * 表单项中的数据要想被提交：必须指定其name属性 * 表单项标签： * input标签可以通过type属性值，改变样式 type类型： 1. text：文本输入框，默认值 *placeholder:指定文本框提示信息，当文本框发生变化是，自动清空提示信息 2. password:密码输入框 3. radio:单选框 *注意； 1. 要想让你多个单选框实现单选的效果，就必须让单选框的name属性值一样 2. 一般会给单选框提供value值，指定被选中后提交的值 3. checked属性：可以默认 4. checkbox:复选框 *注意： 1. 一般会给单选框提供value值，指定被选中后提交的值 2. checked属性：可以默认 5. file:文本选择框 6. hidden:隐藏域，用于提交一些信息 7.按钮： * submit:提交按钮，可以 提交表单 * button:普通按钮 * image：图片提交按钮 * src属性指定图片路径 * lable:指定输入项的文字描述 *注意： * label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。 * select: 下拉列表 * 子元素：option，指定列表项 * textarea：文本域 * cols：指定列数，每一行有多少个字符 * rows：默认多少行。 * filedset：把input框起来，同时设置一个标签 *如： <fieldset name="用户信息"> <input type="text" value=""> </fieldset> * frame框架： <frameset rows="20%,40%,20%"> <frame src="02.html"/> <frame src="02list.html"/> <frame src="03%20href.html"/> </frameset>CSS：页面美化和布局控制
1. 概念： Cascading Style Sheets 层叠样式表
* 层叠：多个样式可以作用在同一个html的元素上，同时生效
2. 好处：
1. 功能强大
2. 将内容与样式分离
* 降低耦合
* 让分工更明确
* 提高开发效率
3. CSS的使用：CSS与HTML结合使用
1. 内联样
* 在标签中使用style属性指定CSS代码
* 如：<div style="color: darkgray">Hello world</div> 2. 内部样式 * 在head标签内定义style标签，style标签内就是css的内容 * 如： <style> div{ color: #000; } </style> <div>Hello world</div> 3. 外部样式 1. 定义CSS资源文件 2. 在head标签内，用link标签引入资源文件 3. 如：a.css文件 ：div{ color: aqua; } <link rel="stylesheet" href="css/a.css"> <div>Hello world</div> <div>Hello world</div> * 注意： * 1,2,3种方式的css的作用的信息越来越大 * 1方式不常用，后期常用2,3 * 第3种格式可以写为： <style>@improt "css/a.css"</style> 4. css语法 * 格式： 选择器{ 属性名1:属性值1; 属性名2:属性值2; ... } * 选择器：筛选具有相似的特征元素 * 注意：每一对属性需要使用;隔开，最后一对可以不用隔开。 5. 选择器：筛选具有相似的特征元素 * 分类： 1. 基础选择器 1. id选择器 * 语法：#firstname{} 选择所有id="firstname"的元素 2. 元素选择器 * 语法： p{} 选择所有<p>元素 3. 类选择器 * 语法： .intro{} 选择所有class="intro"的元素 2. 扩展选择器 1. 选择所有元素 * 语法： *{} 选择所有元素 2. 并集选择器 * 语法：div,p{} 选择所有<div>元素和<p>元素 3. 子选择器 * 语法：div p{} 选择<div>元素内的所有<p>元素 4. 父选择器 * 语法：div>p 选择所有<p>元素的父级<div>元素 5. 属性选择器： * 语法：[target=-blank]{} 选择所有使用target="-blank"的元素 6. 伪类选择器:选择一些元素具有的状态 * <a> *状态： * a:link{} 选择所有未访问链接 * a:visited{} 选择所有访问过的链接 * a:active{} 选择活动链接 ,就是正在访问的连接 * a:hover{} 选择鼠标在链接上面时 6. 属性 1. 文字，文本 * font-size：字体大小 * color：文本颜色 * text—align:对其方式 * line-height:行高 2. 背景 * background url("图片地址") no-repeat center 3. 边框 * border：设置边框，符合属性 4. 尺寸 * width:宽度 * height：高度 5. 盒子模型 * Margin(外边距) - 清除边框外的区域，外边距是透明的。 * Border(边框) - 围绕在内边距和内容外的边框。 * Padding(内边距) - 清除内容周围的区域，内边距是透明的。 * box-sizing: border-box;让width和height就是盒子最终的大小。 * float:浮动。 * left：左浮动 * center：居中 * right：有浮动 * Content(内容) - 盒子的内容，显示文本和图像。 * 实例： * div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } 实例 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <style> *{ margin: 0px; padding: 0px; /*让width和height就是盒子最终的大小。*/ 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: white; margin: auto; margin-top: 30px; } .rg_left{ /* border: 2px solid red ;*/ float: left; margin: 20px; width: 150px; } .rg_left p:first-child{ color: #FFD026; } .rg_left p:last-child{ color:#A6A6A6; } .rg_center{ /* border: 2px solid red ;*/ float: left; width: 500px; height: auto; margin-top:20px ; } .rg_right{ /* border: 2px solid red ;*/ float: right; margin: 20px; } .rg_right p{ font-size:15px ; } .rg_right p a{ color: #ff62ac; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ width: 400px; text-align: left; height: 45px; /*设置文本框和文字的距离*/ padding-left: 50px; color: #A6A6A6; } /*设置文本框的大小*/ #username,#password,#email,#brithday,#name,#phone{ width: 251px; height: 30px; border: 1px solid #A6A6A6; /*设置圆角*/ border-radius: 5px; /*input里面的填充文字，距离input的间距*/ padding-left: 10px; font-size:13px; } /*单独设置验证码的样式*/ #verify{ width: 110px; height: 30px; border: 1px solid #A6A6A6; /*设置圆角*/ border-radius: 5px; /*input里面的填充文字，距离input的间距*/ padding-left: 10px; } /*设置验证码图片*/ #img_checkcode{ height: 30px; /*垂直居中*/ vertical-align:middle; padding-left: 15px; } #btn_submit{ width: 110px; height: 30px; background: #FFD026; border: 2px solid #FFD026; margin-top: 10px; } label{ font-size:14px; color: #A6A6A6; } </style> </head> <body> <!--第二层div--> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form">