5.HTML_CSS(完结)

表单标签

相对路径：
同级文件夹 ：空
下一级文件夹 ：/
上一级文件夹 ：…/
上上级文件夹 ：…/…/
*概念 ：用于采集用户输入的数据的，用于和服务器进行交互
*from : 用于定义表单，可以定义一个范围，代表采集用户数据的范围

*属性：
	1. action: 指定用户提交的URL
	2. method: 指定提交方式
		1. get
			 1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
             2. 请求参数大小是有限制的。
		     3. 不太安全。
		2. post
			 1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
             2. 请求参数的大小没有限制。
             3. 较为安全。

	  * 表单项中的数据要想被提交：必须指定其name属性
*表单项标签：
		* input 
			* type 
				* text
				* password
				* date
				* radio
				* checkbox
				
			* id
			* name
			
			* placeholder
	  	 * lable ：指定输入项的文字描述信息
		  	 * 一般lable中的id 与 input中的id 属性相对应
		  	 * 如果对应了，则点击label区域，会让input输入框获取焦点。
		  	 * 在css定义属性时候 
			  	 * 格式 #XX
			  	 * 此时的XX为id值 
		 * select: 下拉列表
			* 子元素：option，指定列表项
			
		 * textarea：文本域
			* cols：指定列数，每一行有多少个字符
			* rows：默认多少行。

CSS：页面美化和布局控制

1. 概念： Cascading Style Sheets 层叠样式表
	* 层叠：多个样式可以作用在同一个html的元素上，同时生效

2. 好处：
	1. 功能强大
	2. 将内容展示和样式控制分离
		* 降低耦合度。解耦
		* 让分工协作更容易
		* 提高开发效率


3. CSS的使用：CSS与html结合方式
	1. 内联样式
	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>

	* 注意：
		* 3种格式可以写为：
			<style>
		        @import "css/a.css";
		    </style>
	4. 选择器：筛选具有相似特征的元素
		* 分类  优先级 class 元素 id 
			* id选择器
			 	* #id{}
			* 元素选择器 (标签)
				* 标签{}
			* 类选择器
				* .class属性值{}
	5. 扩展选择器：
			1. 选择所有元素：
				* 语法： *{}
			2. 并集选择器：
				* 选择器1,选择器2{}
			
			3. 子选择器：筛选选择器1元素下的选择器2元素
				* 语法：  选择器1 选择器2{}
			4. 父选择器：筛选选择器2的父元素选择器1
				* 语法：  选择器1 > 选择器2{}

			5. 属性选择器：选择元素名称，属性名=属性值的元素
				* 语法：  元素名称[属性名="属性值"]{}

			6. 伪类选择器：选择一些元素具有的状态
				* 语法： 元素:状态{}
				* 如： <a>
					* 状态：
						* link：初始化的状态
						* visited：被访问过的状态
						* active：正在访问状态
						* hover：鼠标悬浮状态
	6. 属性
		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\

完成注册网页效果：

代码： 注释第二日复习补上

新用户注册

User Register

        <div class="rg_center">
            <div class="rg_from">
              <form action="#" method="GET">
                  <table>
                      <tr >
                          <td class="td_left"> <label for="user">用户名 </label></td>
                          <td class="td_right"><input type="text" name="username" id="user" 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">Email</label></td>
                          <td class="td_right"><input type="Email" name="Email" id="Email" placeholder="请输入Email地址"></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="phoneNumber">手机号</label></td>
                          <td class="td_right"><input type="text" name="phoneNumber" id="phoneNumber" placeholder="请输入您的手机号"></td>
                      </tr>
                      <tr>
                          <td class="td_left">
                           <label>性别</label>
                          </td>
                          <td class="td_right">
                              <input type="radio" name="gender" value="male" checked> 男
                              <input type="radio" name="gender" value="female" > 女
                          </td>
                      </tr>
                      <tr>
                          <td class="td_left"><label for="brithday">出生日期</label></td>
                          <td class="td_right"><input type="date" name="brithday" id="brithday" placeholder="请选择您的出生日期"></td>
                      </tr>
                      <tr>
                          <td class="td_left"><label for="yanzhengma">验证码</label></td>
                          <td class="td_right">
                              <input type="text" name="yanzhengma" id="yanzhengma">
                              <img  src="../../image/verify_code.jpg" alt="" id="img_check">
                          </td>
                      </tr>
                      <tr >
                          <td  colspan="2" align="center">
                              <input id = "submit"  type="submit" value="注册" >
                          </td>
                      </tr>
                  </table>
                </form>
            </div>
        </div>
  
  
        <div class="rg_right" >
            <p class="p_3">已有账号? <a href="#"> 点此登录 </a></p>
        </div>
      </div>
</div>