*HTML : Hyper Text Markup Language---超文本标记语言 *标记语言:指的是通过一组标签的形式描述事物的一门语言 *超文本:比普通的文本更强大 *HTML的作用 *HTML是用来制作页面(静态页面) *HTML的应用 *在设计一些网站的页面的时候,都要使用到HTML *HTML的使用 *HTML的文件的创建 *一个HTML文件,扩展名是.html或.htm结尾 *HTML的结构标签 *根标签 ---html头标签 ---html的体标签 Hello HTML! *HTML的字体标签 *字体标签 *标签:HTML中的字体标签 *字体 *标签的属性: *<标签属性名="属性值" 属性名="属性值"> *属性: *color属性:字体的颜色 *英文单词设置:black,red *使用16进制数设置:#FFFFFF ,#FFF *size属性:字体的大小 *face属性:字体 *

换行 *HTML的排版标签 *排版标签 *标题标签:h标签
..

*

一级标题

*段落标签:p标签 *
一段内容
*字体加粗标签:b标签内容 *字体倾斜标签:i标签内容 *字体加下划线标签内容 *:居中标签 *HTML的标签嵌套 *HTML第一个案例 *步骤1:创建一个HTML文档 *步骤2:设置一个标题 *步骤3:设置4个段落 *步骤4:使用字体标签将第一个段落中的某个部分 *总结 *HTML有标准: *HTML4 *HTML5:支持视频播放,支持css3,支持定位,扩展标签 *
标签:原生标签   
			*标签:横线
	

    *网站图片页面的显示
		*需求
			*图文并茂,如果想在HTML中引入一个图片应如何处理
		*分析
			*技术分析
				*图片标签:
					*属性:
						*src :图片的来源
						*width:图片的宽度
						*height:图片的高度
						*alt:图片找不到显示的内容
				*图片的引入路径的问题:
					*路径:相对路径
						*如果引入图片和文件在同一级路径
							*直接去写文件名或者./文件名
							
						*如果引入的图片在html文件的上一级路径
							*
						*如果引入的图片在html文件的下一级目录
							*
							
	*步骤分析
		*步骤1.创建一个html文档
		*步骤2.引入两个图片到网页
		
		
	*网站列表页面的显示
		*需求:
			在网站的友情链接的页面显示网站的所有友情链接
		*分析
			*技术分析
				*有序列表
					
						
					
				*无序列表(style="list-style:none;")
					
						
					
				*HTML的超链接标签
					
					*属性值
						*href:链接的路径
						*target:打开的方式
							*_self:在自身页面打开
							*_blank:新打开一个窗口
							*_parent:页面存在框架的时候
			*步骤分析
				*步骤1:创建一个html文档
				*步骤2:创建一个无序列表
				*步骤3:在无序列表中添加超链接标签
	*总结
		*无序列表的属性:
			*type属性
				*disc:是新店
				*circle:空心圆
				*square:实心方块
		*有序列表的属性:
			*type属性
				*1 :数字类型
				*a :字母类型
				*i :罗马字符类型
			*start属性
				*100 :数字类型从100开始
	
	*网站首页界面的显示
		*需求:网站的首页设计
		*分析
			*技术分析
				*HTML的表格标签
					*(行)
							
						
						
					
					*属性值
						*width:表格宽度
						*height:表格高度
						*border:边框
						*align:表格水平位置
							*left
							*center
							*right
					*的属性:
						*colspan="列数"
						*rowspan="行数"
	*步骤分析:
		*1:创建一个html的页面
		*2:创建一个8行1列的表格
		*3:为每行填充不同的内容
		
		
	*网站的注册页面的显示
		*需求
			*使用HTML完成注册页面
		*分析
			*技术分析
				*HTML的表单标签
					*常用属性
						*action:表单中数据提交的路径
						*method:提交方式,get和post(默认get)
							*get和post的区别
							*get :数据会显示到地址栏中.get提交时候有大小的限制(请求行中)
							*post:数据不会显示到地址栏中.post方式提交的时候没有大小限制(提交表单使用post,请求体中)
				*HTML中的表单元素:
					* :文本框
						*常用属性:
							*name:表单元素的名称.必须有name属性,后台才可以接受数据
							*value:文本框的默认值
							*size:控制文本框的长度
							*maxlength:最大输入长度
							*readonly:只读文本框
							*disable:不能用灰化
					* :密码框
							*name
					* :单选按钮
						*name
						*value
						*checked:默认被选中
					* :多选按钮
					* :普通按钮.没有任何功能的按钮
					* :提交按钮
					* :重置按钮
					*  :文件上传的表单项
					* :隐藏字段
					* :引入图片按钮
					* :文本域
					
			步骤分析:
				*步骤1:创建一个HTML文档
				*步骤2:使用表格布局页面
				*步骤3:在页面中使用表单标签完成注册页面
				
	*总结
		*html5中的扩展表单标签(h5不是所有的浏览器都支持)
		*HTML的框架标签:framset,与<body>标签不能相互嵌套,冲突.
	*属性
		*rows
		*cols
	*使用<frame>标签,frame代表切分的每个部分	
	
	*特殊字符的标签
		空格: 
		<:<
		>:>
	*常用标签<div><spain><ul><a><i>icon	
		
		
	*使用div+css来重新设计网站首页
			*表格布局存在缺陷
				解析加载速度慢,布局不灵活
		*div页面的任意一块区域	

	*<div> HTML的块标签
		块级元素<div></div>		: div默认自己占一行,可以修改高度和宽度   块级元素转行内元素添加属性 display:inline
		行内元素<span></span>	:默认在同一行,可以修改高度和宽度       行内元素转块级元素添加属性 display:block

		
	*<css的概述>	层叠样式表
		*主要用来美化HTML
	*<css的使用>	
		*任何网站都会使用css去美化页面
	*<css的基础语法>  选择器+一个或多条声明
		*选择器{属性:属性值;属性:属性值}	
		
	*<css的引入方式>	
		*行内样式:直接在HTML的元素上使用style 属性设置css
		*页面内样式:在HTML的头标签中使用是style标签来设置css
		*外部样式:单独去定义一个css文件,在HTML文件中去引用css文件
			*如何引入,使用<link>标签	
				*属性
				*href
				*type
	*<css的选择器>			
		*元素选择器:元素的名称
		*ID选择器:通过元素的唯一标识直接找到这个元素
		*类选择器:
	*选择器的优先级
		ID选择其>类选择器>标签选择器
		
	*<css的浮动>为了让某些标签(块级元素,div,li)横着显示
		*float属性的取值
			*left
			*right
			*none
			*inherit
		*清除浮动
			在浮动的元素后面添加<div style="clear:both"> 不建议使用
			给浮动的元素的父元素添加一个样式clearfix
	*css的继承问题
		*在css中宽度是可以继承的,高度不可以继承
		*注意,浮动以后的元素不可以继承宽度	
		
		div居中
		 margin:0 auto
		*宽度计算
			calc(%30空格-空格2)
			
	*其他选择器
		*属性选择器
			*input[type="text"]{
				
			}
		*后代选择器
			*div span 查找的是所有div中的所有的span元素
		
		*子元素选择器
			*div>span 找这个div中第一层级的span元素.(嵌套在第一层级中的span元素不会查找)
			
	*css的样式
		*背景
			*background-color
			*background-image
			*background-repeat
			*background-position
		*字体
			*
		*文本
			*color
			*text-align
			*word-spacing
			*direction
			*text-shadow
			*text-decoration
		*列表
		
		
	*盒模型
		*外边距:盒子跟盒子的距离,margin	
		*内边距:padding
		*宽度计算方式padding-left+padding-right+border-left+border-right+content;


	*定位
		*position absolute;绝对定位	,是相对于body的
		*position relative:相对定位,
		



		
	*CSS伪类	
		*一个元素不同的状态
			link
			visited
			hover
			active
			href属性中必须有值          
	
	*JavaScript:
	运行在浏览器端的脚本语言!
	ECMAScript  DOM BOM
	(直接运行)
	
	*JS的用途
		*使页面更加丰富,使页面动起来!!!
		
	*JavaScript基本语法
		*区分大小写
		*弱变量类型的语言:(与Java不同)
		*分号可有可无
		*注释同Java类似
		*大括号代表代码块
		
	*JavaScript的数据类型
		*原始类型
			*undefined:未定义类型
			*boolean:布尔类型
			*number:数字类型
			*String:字符串类型
			*null:空
		*引用类型
			*对象类型,对象类型默认值是null
	*JavaScript	的运算符
		js中的运算符和Java中基本一致
		js中有一个===全等于:类型和值全都一样
	*JavaScript的语句	
		for(var i = )
		
	*总结:
		*定义变量 var 变量名= 值
		*变量名:局部变量(定义在方法内部的变量)我们以_开头
		*给变量赋予默认的值
			*如果是基本类型,var num=undefined;
			*如果是引用类型, var person = null ;
		*在控制台打印变量 console.log(变量名)	
		*定义对象 va person{
							name:"张三"
							age:14
							gender:"女"
				}
				
		*定义方法(函数) function 方法名	()	{
		
						}
						function(name, id){}
						functon(){}//匿名方法,当作方法实际参数的时候进行使用
		*方法调用
						方法();
						
		*null和undefined报错					
						
	*JavaScript通常开发的步骤
		*JS通常都由一个事件触发:
			触发一个函数,定义一个函数
			获得操作对象的控制权
			修改要操作的对象的属性或值.
	*在JavaScript中定义函数:
		*function 函数名称(){
		//函数体
		}
		*window.onload=function(){}
		* function (){}
	*常用事件
		*onclick:点击
		*ondblclick,双击
		*onmouseover(onmouseenter),鼠标放在上面
		*onmouseout(onmouseleave),鼠标离开
		*onload
		
	*JavaScript的引入方式
		*通常两种方式:
		一种,使用<script/>
		第二种,将JS的代码编写一个.js的文件,在HTML中引入该JS代码即可	
	

	*JavaScript中正则表达式
		*String.match("正则")
		*正则对象.test("字符串");
		
	*window对象
		*setInterval("change()",5000): 每隔多少毫秒执行某个表达式
			
		*setTimeout("change()",5000)隔多少秒执行一个表达式
		
		
	*CSS的显示和隐藏属性
		*display
			*block:显示元素;
			*none:隐藏元素;
		*visibility:
		*hidden
			*隐藏:继续占位
		*visible
			*显示
			
			
	*window中的方法
		*alert() :弹出对话框
		*setInterval():
		*setTimeout():
		*clearInterval():
		*clearTimeout():
		*confirm():   --弹出一个确认的窗口
		*prompt():   --可输入的对话框 
		*open():  --打开一个新的窗口
		
		
	*Navigator:包含的是浏览器的信息
	
	*常见JS事件总结
	
		onfocus:获得焦点
		onblur:失去焦点
		onsubmit:提交时候
		onload
		onclick
		ondblclick
		onmouseEnter
		onmouseleave
		onsubmit
		onchange:下拉列表的改变事件
		onkeydown:
		onkeyup:
		onkeypress:
		onmousemove
		onmouseout
		onmouseover
		onmousedown
		onmouseup
	
	
	*DOM对象
			*什么是DOM
				*DOM:Document Object Model:文档对象模型
				*首先把文档加载到内存,在内存中形成树状结构(有且仅有一个根节点(HTML))
				*存在两个子节点(head body)
				*没有节点的结点叫做叶子结点	
			*整个的HTML文档称为Document对象
			*HTML所有的标签都可以称为Element对象
			*Attribute属性
			*Text对象代表文本
			*Document Attribute Text Element 都叫做结点(Node)
			
	*document方法
			insertBefore



	*JavaScript的内置对象
		Array: reverse()反转
				sort()排序
				join()连接数组
				
		Boolean:new Boolean 
		Date:new Date()
			*getDate()
			*getTime() 返回Long
		Math: abs
			ceil
		String 
			charAt
			indexOf
			lastIndexOf
			spilt
			replace
			subString
			
	*事件冒泡	
		event.stopPropagation() 停止冒泡
		
	*Jquery介绍
		*工具类  EXTJs
		框架  AngularJS  Angular  Vue
		
		版本:
			1.X兼容IE6.7.8
			2.X不兼容IE6.7.8,对最新的JS语法特性也不支持
			3.X不兼容IE6.7.8,支持JS最新的一些特性
		
	*JQuery的入门
		*引入JQuery的js文件
		*JQuery的入口函数和WINDOW.onload的区别
		
		JQ转JS
		$d1[0].innerHTML=
		$d1.get(0).innerHTML=
		JS转JQ
		*$(d1)
		
	*$("div");jquery对象,实际里面存储了一个DOM数组我们操作jquery对象实际上就是操作里面的每一个元素,只有被$$包裹起来的猜是JQ对象
			$("div").css("border","3px solid black")

	*JQ的效果函数
		主要是show()方法 //显示
			使用1:JQ对象.show();
			使用2:JQ对象.show("slow"); //slow,normal,fast
			使用3:JQ对象.show(毫秒值); //表示用多少毫秒值来显示出什么东西
			使用4:JQ对象.show(毫秒值,function(){}); //表示用多少毫秒值来开始显示 function方法
		hide()方法 //隐藏
			使用1:JQ对象.hide();
			使用2:JQ对象.hide("slow"); //hid,normal,fast
			使用3:JQ对象.hide(毫秒值); //表示用多少毫秒值来隐藏什么东西
			使用4:JQ对象.hide(毫秒值,function(){}); //表示多少毫秒值来开始隐藏 function方法
		sliction(); 向下滑动
		slidedown(); 向上滑动
		fadeout(); 淡出
		fadein();淡入
		animate(); 自定义动画
		toggle(function1(),function2....);用于绑定两个或者多个函数方法,单击一下执行一个函数方法

		
		
		
	*基本过滤选择器
			eq()
			odd()
			even()
	
	*JQuery 中的事件切换
		toggle() 单击鼠标的切换
		hover()	移入的切换
	*JQuery中查找
		find()  查找
		parent() 查找父类
		children()  查找子类
		parentall()
		childredall()
    *JQuery时间处理
		trigger() 
		triggerHandler() 



	  ### BootStrap ###

	*1. 设计一个响应式的页面 BootStrap 是一个响应式框架 www.bootcss.com
		设计一套页面能够通用在不同设备上,在手机,pad上,电脑上都能浏览这个网页,不影响正常的浏览的方式
		
	*2. BootStrap的全局CSS
		BootStrap的框架是提供了一系列的css的样式,这些样式可以直接使用.
		
		布局容器
			.container  不是100%宽度
			.container-fluid 类用于100%宽度
		栅格系统
			将一个屏幕分成最多有12列的形式显示数据.行 row 列 column
			可以使用 .row 样式定义栅格的行

			定义列   .col-lg-n  --->   像素大于1200px
					.col-md-n 	--->  992px<1200px
					.col-sm-n 	--->  768px<992px
					.col-xs-n	--->  <768px