HTML+CSS

B/S架构详解

* 资源分类：
	1. 静态资源
		* 使用静态网页开发技术发布的资源。
		* 特点：
			1. 所有用户访问，得到的结果是一样的。
			2. 如：文本，图片，音频，视频，HTML，CSS，JavaScript
			3. 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
	2. 动态资源：
	 	 * 使用动态网页及时发布资源。
	 	 * 特点：
	 	 	* 所有用户访问，得到的结果可能不一样。
	 	 	* 如：jsp/servlet, php, asp
	 	 	* 如果用户请求的是动态网页，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
	 * 我们要学习动态资源，必须先学习静态资源
	 * 静态资源：
	 	* HTML：用于搭建基础网页，展示页面的内容。
	 	* CSS：用于美化页面，布局页面。
	 	* JavaScript： 控制页面的元素，让页面有一些动态的效果。

HTML基础

1. 概念：
	* Hyper Text Markup Language 超文本标记语言
		* 超文本：
			* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
		* 标记语言：
			* 由标签构成的语言。<标签名称>  如 html , xml。
			* 标记语言不是编程语言。
2.标签学习：
	1.文件标签：构成html最基本的标签
		* html：html文档的根标签
		* head：头标签。用于指定html文档的一些属性。引入外部的资源
		* title：标题标签。
		* body：体标签
		* ：html5中定义该文档是html文档
	2.文本标签：和文本有关的标签
		* 注释：
		* 
 to 
 ：标题文件标签
			* h1 ~ h6 ：字体大小主键递减
		* 
：段落标签
		* 
：换行标签
			* 属性：
				* color：颜色
				* width：宽度
				* size：高度
				* align：对其方式
					* center：居中
					* left：左对齐
					* right：右对齐
		* ：字体加粗
		* ：字体斜体
		* ：文本居中
		* ：字体标签
			* 属性：
				* color：颜色
				* size：大小
				* face：字体
		* 属性定义：
			* color：
				1. 英文单词：red、green、blue
				2. rgb(值1，值2，值3)：值的范围：0~255   如：rgb(0,0,255)
				3. #值1 值2 值3 ： 值的范围：00~FF之间。如：#FF00FF
			* width：
				1. 数值：whdth = '20' ,  数值的单位，默认是px (像素) 
				2. 数值%：表示相对于父元素的比例
	3. 图片标签：
		* 相对路径 ：
			* 以.开头的路径
			 * ./ : 代表当前目录   ./image/1.ipg
			 * ../ : 代表上一级目录
	4. 列表标签：
		* 有序列表：
			

				
  
				
  
				
  
			
		* 无序列表：
			

				
 
				
 
			
  
	5. 链接标签：
		* a：定义一个超链接
			* 属性：
				* href：指定访问资源的URL（统一资源定位符）
				* target：指定打开资源的方式
					* _self：默认值，在当前页面打开
					* _blank：在空白页面打开
	6. div和span：
		* div：每一个div占满一行。块级标签。
		* span：文本信息在一行展示，行内标签，内联标签。
	7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。(结合css一起使用)
		1. 

		2. 
		
	9. 表格标签：
		* table：定义表格
			* width：宽度
			* border：边框
			* cellpadding：定义内容和单元格之间的距离。
			* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。
			* bgcolor：背景色
			* align：对齐方式
		* tr：定义行
			* bgcolor：背景色
			* align：对齐方式
		* td：定义单元格
			* colspan：合并列
			* colspan：合并行
		* th：定义表头单元格
		* ：表格标题
		* ：表示表格的头部分
		* ：表示表头的体部分
		* ：表示表头的脚部分

HTML进阶

1.表单

* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。
	* 属性：
		* action：指定提交数据的URL
		* method：指定提交方式
			* 分类：一共7种，2种比较常用
				 get：
						1. 请求参数会在地址栏中显示。会封装到请求行中。
						2. 请求参数大小是有限制的。
						3. 不太安全
				 post： 
				 		1. 请求参数不会在地址栏中显示。会封装在请求体中(Http协议后讲解)
				 		2. 请求参数的大小没有限制
				 		3. 较为安全
	* 表单项中的数据想要被提交：必须制定其name属性
* 表单项标签：
	* 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输入框获取焦点。
	* select：下拉列表
		* 子元素：option，指定列表项
	*  textarea：文本域
		* cols：指定列数，每一行有多少个字符
		* rows：默认多少行。

<form action="#" method="get">

    <label for="username" >用户名：label><br>
    密码：<br>
    性别：<input type="radio" name="gender" value="male" checked="checked"> 男
         <input type="radio" name="gender" value="female"> 女
             <br>
    爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
    <input type="checkbox" name="hobby" value="Java" checked="checked"> Java
    <input type="checkbox" name="hobby" value="game"> 游戏
    <br>

    文件选择：<input type="file" name="file"><br>
    隐藏域：<br>

    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="birthday"><br>
    生日：<input type="date" name="birthday"><br>
    邮箱：<input type="email" name="email" ><br>
    年龄：<input type="number" name="age"><br>

    省份：<select>
            <option value="">--请选择--option>
            <option value="1">--北京--option>
            <option value="2">--上海--option>
            <option value="3">--陕西--option>
        select>

    自我描述：
        <textarea cols="5" rows="5">textarea>

    <br>
    <input type="submit" value="登录">
    <input type="button" value="一个按钮"><br>
    <input type="image" src="img/regbtn.jpg">
form>

CSS：页面美化和布局控制

1. 概念：Cascading Style Sheets 层叠样式表
	* 层叠：多个样式可以作用在同一个html的元素上，同时生效
2. 好处：
	1. 功能强大
	2. 将内容展现和样式控制分离
		* 降低耦合度。解耦
		* 让分工协作更容易
		* 提高开发效率  
3. CSS的使用：CSS与html结合方式
	1. 内联样式
		* 在标签内使用style属性指定css代码
		* 如：
 hello css 
	2. 内部样式
		* 在head标签内，定义style标签，style标签的标签体内容就是css代码
		* 如：
			
			 
hello css
	3. 外部样式
		1. 定义css资源文件。
		2. 在head标签内，定义link标签，引入外部资源文件
		* 如：
			* a.css文件
				div{
		    		color:green;
				}
			
			
hello css
	* 注意：1，2，3 种方式  css作用范围越来越大
	* 1方式不常用，后期常用2，3
	* 3引用css的格式可以写为：
		
4. css语法
	* 格式
		选择器{
			属性名1 ：属性值1；
			属性名2 ：属性值2；
			属性名3 ：属性值3；
			......
		}
	* 选择器：筛选具有相似特征的元素
	* 注意：
		* 每一对属性需要使用 ; 隔开，最后一对属性可以不加 ；
5. 选择器
	1. 基础选择器
		1. id选择器：选择具体的id属性值的元素。建议在一个html页面中id值唯一
			* 语法：#id属性值{ }
		2. 元素选择器：选择具有相同标签名称的元素
			* 语法：标签名称{ }
			* 注意：id选择器优先级高于元素选择器
		4. 类选择器：选择具有相同的class属性值的元素。
			* 语法：.class属性值{ }
			* 注意：类选择器优先级高于元素选择器
	2. 扩展选择器：
		1. 选择所有元素：
			* 语法：*{ }
		2. 并集选择器
			* 语法：选择器1,选择器2{ }
		3. 子选择器：筛选选择器1元素下的选择器2元素
			* 语法：选择器1  选择器2{ }
				
			

				
传智播客
			
		4. 父选择器：
			* 选择器1 > 选择器2{ }
		5. 属性选择器：选择元素名称，属性名=属性值的元素
			* 语法：元素名称[属性名="属性值"]{ }
			input [type='text']{
				border：5px solid;
			}
			
		6.伪类选择器：选择一些元素具有的状态 
			* 语法 ：元素 : 状态{ }
			* 如：标签
				* 状态：
					* link：初始化的状态
					* visited：被访问过的状态
					* active：正在访问的状态
					* hover：鼠标悬浮的状态
7. 属性
	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
			* rig

"en">

    "UTF-8">
    

    



    
"rg_layout">
        
"rg_left">
            
"">新用户注册
            
USER REGISTER

        

        
"rg_center">
            
"rg_from">

                
                
"#" method="post">
                    

                        

                            
"td_left">"username">用户名
                            
"td_right">"text" name="username" id="username" placeholder="请输入用户名">
                        

                        

                            
"td_left">"password">密码
                            
"td_right">"password" name="password" id="password" placeholder="请输入密码">
                        

                        

                            
"td_left">"email">Email
                            
"td_right">"email" name="email" id="email" placeholder="请输入邮箱">
                        

                        

                            
"td_left">"name">姓名
                            
"td_right">"text" name="name" id="name" placeholder="请输入姓名">
                        

                        

                            
"td_left">"tel">手机号
                            
"td_right">"text" name="tel" id="tel" placeholder="请输入手机号">
                        

                        

                            
"td_left">性别
                            
"td_right">"radio" name="gender" value="male"> 男
                                "radio" name="gender" value="female"> 女
                            
                        

                        

                            
"td_left">"birthday">出生日期
                            
"td_right">"date" name="birthday" id="birthday">
                        

                        

                            
"td_left">"checkcode">验证码
                            
"td_right">"text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                "img_check" src="img/verify_code.jpg">
                            
                        


                        

                            
"2" align="center">"submit" id="btn_sub" value="注册">
                        
                    


                
            

        

        
"rg_right">
            
已有账号?"#">立即登录