HTML5,CSS3,js

html5

html基本结构

1.html5文档的基本结构

2.head中常用的标签

<title></title>	
<meta/>
<link/>

3.添加网页图标的代码

<link rel="icon" href="img/icon.jpg"/>

4.常见才字符集编码格式
GB2312、GBK、UTF-8
5.meta标签的常用属性代码
charset、http-equiv+content、name

块级标签和行级标签

1.常用的列表

1.无序列表标签
<ul>
	<li></li>
</ul>	
2.有序列表标签
<ol>
	<li></li>
</ol>
3.定义列表标签
<dl>
	<dt></dt>
	<dd></dd>
</dl>		

2.常用的块级标签

	<div></div>
	<br/>
	<p></p>
	<h1></h1>...<h6></h6>
	<ul><li></li></ul>
	<dl></dl>

3.常见的行级标签

	![在这里插入图片描述]()
	<a></a>
	<span></span>
	<strong></strong>
	<em></em>
	<i></i>
	<b></b>	

4.img标签的常用属性及作用
src属性：引用图片的路径
height属性：图片的高度
width属性：图片的宽度
title属性：图片的标题，鼠标在图片上显示的文字
alt属性：图片无法显示时的文字
5.a标签的常用属性及作用
href属性：链接的地址
target属性：_self 在当前页打开新页面
_blank 在新窗口打开新页面
6.设置指定锚链接

         在本页跳转
		1，设置锚点：
		<a name="top"></a>
		2，添加跳转锚点链接
		<a href="#top"></a>
		在页面间跳转
		1，在指定页面设置锚点：
		<a name="top"></a>
		2，在本页添加跳转锚点链接
		<a href="index.html#top"></a>

7.html5新增的结构标签

	<section></section>
	<article></article>
	<header></header>
	<footer></footer>
	<nav></nav>
	<aside></aside>
	<canvas></canvas>
	<video></video>
	<audio></audio>

8.块级标签和行级标签的区别

区别	块级标签	行级标签
是否换行	是	否
宽度	100%	由内容确定
设置属性	可以	不可以

html5表格

1.表格的基本结构

	<table>
		<tr>
			<th>表头</th>
		</tr>
		<tr>
			<td>第一行1</td>
		</tr>
	</table>

2.表格的属性

属性	含义	属性值
border	表格的边框	数字
width	表格的宽度	数字
height	表格的高度	数字
bgcolor	表格的背景色	颜色值
bordercolor	表格的边框颜色	颜色值
cellspacing	表格的单元格间距	数字
cellpadding	表格的单元格内边距	数字
align	表格的对齐属性	可选值center,left,right

2.行列（单元格）的属性（横行数列）

属性	含义	属性值
width	单元格的宽度	数字
height	单元格的高度	数字
bgcolor	单元格的背景色	颜色值
align	单元格的内容水平对齐属性	可选值center,left,right
valign	单元格的内容垂直对齐属性	可选值center,top,bottom
colspan	单元格的跨行属性	数字
rowspan	单元格的跨列属性	数字

当表格属性与行列属性冲突时，以行列属性为准（近者优先）

区别	表格	单元格
align属性控制位置	浏览器的显示位置	文字在单元格中的对齐方式
align属性是否影响文字对齐方式	否	是

html5表单

1.表单的常用属性
action：表单发送的服务器地址
method：表单提交数据的方法，包括get和post
enctype：表单以post提交时，发送的编码方式，包括：application/x-www-form-urlencode 默认值
multipart/form-data 不对字符编码，用于文件上传
text/plain 将空格转换为“+”，用于发送电子邮件
2.post和get方法的区别

区别	post	get
安全性	安全	不安全
数据传递形式	不显示在地址栏	显示在地址栏
数据大小限制	不限制	限制

3.表单的常用标签

	输入框
	<input type="" name=""> 
	下拉框
	<select>
			<option></option>
	</select>
	文本域
	<textarea></textarea>
	按钮
	<button></button>
	表单分组
	<fieldset></fieldset>

4.input常用属性
type属性，name属性，value属性，placeholder属性，tabindex属性，checked属性，disabled属性（该属性的数据不会传到表单中），hidden属性
5.input的type属性分类
text：文本输入框
password：密码输入框
radio：单选按钮
checkbox：复选按钮
file：文件上传按钮
submit：表单提交按钮
reset：重置按钮
image：图形提交按钮
6.select标签的属性
multipe=“mulpite” select控件为多选
size=“1” 表示下拉列表滚动条
7.html5新增元素

	1.可输入下拉框
	<input type="text" name="" list="list">
		<datalist id="list">
				<option></option>
		</datalist>
	2.	input新增输入类型
		<input type="color" name=""> 拾色器
		<input type="date" name="">	日期选择
		<input type="email" name="">	电子邮件
		<input type="number" name="">	数字输入
		<input type="range" name="">	滑块输入
		<input type="search" name="">	搜索框

css3

css使用方法

1.应用css的三种方式

	1.行内样式表
	<a style="color:red;"></a>
	2.内部样式表
	<style>
		div{
			color:red;
		}
	</style>
	3.外部样式表
	<link ref="stylesheet" type="text/css" href="css/style.css"/>

2.css选择器

	通用选择器：*{}
	标签选择器：div{}
	类选择器：.class{}
	id选择器：#id{}
	后代选择器：div .class{}
	子代选择器：div > ul{}
	交集选择器：.list#id{}
	并集选择器：.list,#id{}
	伪类选择器：a:hover{}

3.常见的伪类状态
link：未访问状态
visited：已访问状态
hover：鼠标悬浮在元素上时
active：鼠标点下没松开
focus：获得焦点时
!important代表不可更改的样式属性

css常用属性

1.文本属性

	div{
		font-family:'Microsoft Yahei'; /*字体*/
		font-style:normal/italic;/*字体样式*/
		font-weight:bold/lighter/100~900;/*字体粗细*/
		font-size:10px/10%; /*字体大小*/
		color:颜色名如red/颜色值如#FFFFFF /*字体颜色*/
		opacity:0~1;/*字体透明度0全透明，1不透明*/
		line-height:10px;/*文本高度*/
		text-align:left/center/right; /*文本对齐方式*/
		letter-spacing:10px;/*文本字与字之间的间距*/
		text-decoration:underline/line-through/overline/none;/*文本修饰属性*/
		overflow:auto/scroll/hidden;/*文本超出范围显示方式，自动显示滚动条/始终显示滚动条/超出文本隐藏*/
		text-overflow:clip/ellipsis;/*多余文字显示方式，裁剪/使用...代替*/
		white-space:normal/nowrap/pre;/*元素内空白符，忽略/行末不断行/保留*/
		text-shadow:5px 6px 6px blue;/*文本阴影 水平/垂直/模糊距离/颜色*/
		text-indent:10px;/*首行缩进*/
		-webkit-text-stroke:2px yellow;/*文字描边*/
		font:italic bold 75%/1.8 'Microsoft Yahei';(font:font-style font-weight font-size/line-height font-family)
	}

2.背景属性

	div{
		background-color:red;/*背景颜色*/
		background-image:url(../image/share.jpg);/*背景图像*/
		background-repeat:no-repeat/repeat/repeat-x/repeat-y;/*背景图是否平铺，不平埔/平铺/水平平铺/垂直平铺*/
		background-size:200px/contain/cover;/*背景图大小，指定宽度和高度/等比缩放（不会完全覆盖）/等比缩放（完全覆盖）*/
		background-position:left/right/top/bottom/center/50px -50px;/*背景图的起始位置*/
		background-origin:border-box/padding-box/content-box;/*背景图定位方式 边框外缘/内缘/文字内容区*/
		background-clip:border-box/padding-box/content-box;/*裁切背景和背景色显示区域*/
		background-attachment:scroll/fixed;/*背景图是否固定*/
		background:red url(../image/share.jpg) no-repeat fixed 50px -50px;/*背景简写，color image repeat attachment position */
	}

3.超链接四种状态
a:link 未访问
a:visited 已访问
a:hover 鼠标停留
a:active 正在被点击
去掉超链接下划线a{text-decoration:none;}

css3的过渡和变换

1.过渡 transition

	div{
		transition:property duration timing-function delay; /*过渡的属性 过渡使用时间 过渡运行速度 过渡前时间*/
	}
	transition-timing-function 是过渡效果的运行速度 分为：ease(逐渐变慢，默认)/linear(匀速)/ease-in(加速)/ease-out(减速)/ease-in-out(加速后减速)

2.常见的变换属性值有
transform：定义元素向2D或3D的变换
transform-origin：改变转换元素的位置

css3的动画属性和多列属性

1.动画属性animation
2.多列属性columns

css盒模型与浮动定位

1.盒模型
盒模型结构从内到外依次是 content、padding、border、margin
margin：外边距
border：边框
padding：内边距

	margin:0 auto；/*水平居中*/
	border-style:上 右 下 左；/*常用属性：none无边框，hidden无边框，dotted点状边框，dashed虚线边框，solid实线边框，double双线边框*/
	border-width:上 右 下 左；/*常用属性：thin细边框，medium 中等边框默认，thick粗边框，10px自定义边框*/
	border-color:上 右 下 左;	/*设置边框颜色值*/
	padding:上 右 下 左; /*设置内边距值px*/

盒模型相关属性有

	overflow:visible/auto/scroll/hidden; /*内容溢出控制*/
	outline:10px;/*外围线*/
	box-shadow:x轴阴影距离 y轴阴影距离 阴影模糊半径 阴影扩展半径 阴影颜色 内外阴影; /*盒子阴影*/
	border-radius:有8个参数;/*边框圆角*/ 
	border-image:路径 切片宽度/边框宽度 重复方式(stretch拉伸,round铺满,repeat重复);/*图片边框4个参数*/	

2.浮动

	float:left/right/none;/*使元素浮动 向左/右/不浮动*/

3.定位

	position:relative/absolute/fixed/static;/*相对/绝对/固定/没有 定位*/

4.元素层叠顺序

  z-index:10px;/*只有在使用地位的情况下可用，>0是在父级元素的上方*/	

移动开发css样式要求

1.viewport 视口

	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	width=device-width /*视口宽度等于屏幕宽度*/
	initial-scale=1.0 /*页面初始缩放比例*/
	maximum-scale=1	/*不允许放大窗口*/
	minimum-scale=1	/*不允许缩小窗口*/
	user-scalable=no	/*禁止缩放*/

js

javascript基础

1.页面使用javascript的三种方式

	1.html标签中内嵌
	<button onclick="javascript:alert(1);">查看</button>
	2.html页面中直接使用
	<script>
		function showMsg(){
			alert('1')
		}
	</script>
	3.引用javascript文件
	<script src="js/act.js"></script>

2.javascript变量的命名规范
不能以数字开头，区分大小写，小驼峰命名法 如：helloJavaScript，匈牙利命名法 hello_java_script
3.javascript变量的数据类型

	1.undefined 未定义
	2.null 			空引用
	3.boolean    布尔类型
	4.number 	数值类型
	5.string		字符串类型
	6.object		对象类型

4.javascript中的变量函数

1.Number()	/*变量转换为数值类型*/
		Number("111") /*输出111*/
		Number("") /*输出0*/
		Number("111a") /*输出NaN*/
		Number(true) /*输出1*/
		Number(false) /*输出0*/
		Number(null) /*输出0*/
		Number(undefined) /*输出NaN*/
2.isNaN()	/*判断变量是否为 非数字 */
		isNaN("111")	/*输出fasle*/
		isNaN("")	/*输出fasle*/
		isNaN("111q")	/*输出true*/
		isNaN(false)	/*输出fasle*/
3.parseInt() /*变量转换为整型,只能转换string类型，其余转换输出NaN*/
		parseInt("")	/*输出NaN*/
		parseInt("111.11")	/*输出111*/
		parseInt("111.1a")	/*输出111*/
		parseInt("a111.11")	/*输出NaN*/
4.parseFloat()	/*变量转换为浮点型,只能转换string类型，其余转换输出NaN*/
		parseFloat('123.11a')	/*输出123.11*/
		parseFloat('a123.11a')	/*输出NaN*/	
5.typeof()	/*检测变量类型*/
		函数写法 typeof('1111')
		指令写法	typeof '1111'
6.document.write()	/*文档中打印输出*/
7.alert()	/*浏览器弹窗输出*/
8.prompt('提示信息','默认内容') /*浏览器弹窗输入*/
9.confirm()	/*浏览器弹窗确认*/
10.console.log()	/*浏览器控制台输出*/									   

5.javascript中的注释

	//单行注释
	/*多行注释*/
	/**
	*文档注释
	*/

6.javascript中的运算符

1.算术运算符
+、-、*、/、%、++、--
2.赋值运算符
=、+=、-=、*=、/=、%=
3.关系运算符
==、===、!=、>、<、>=、<=
4.逻辑运算符
&&、||、!
5.多目运算
表达式1?表达式2:表达式3  /*当表达式1为true执行表达式2，为false执行表达式3*/

7.javascript中的流程控制语句

1.if结构	
	if(){
	
	}
if-else 结构	
	if(){
	
	}else{
	
	}
2.多重if 结构
	if(){
	
	}else if(){
	
	}else{
	
	}
3.嵌套if 结构
if(){
	if(){
	
	}
}else{

}
4.switch-case 结构
switch(表达式){
	case 常量表达式1:
		语句1;
		break;
	default:
		语句n;
		break;
		
}
5.while 循环
while(true){
	
}
6.do-while 循环
do{

}while(true)
7.for 循环
for(var i=0;i<5;i++){
	
}	
8.for-in 循环
var arr=[1,2,3,4]
for(item in arr){

}
9.常用的流程控制语句
break:跳出本层循环
continue:跳过本次循环，继续下一个循环
return:终止当前函数执行	

javascript函数

1.匿名函数的声明

	1.	事件调用匿名函数
	window.onload-function(){
	}
	2.	匿名函数表达式
	var func=function(){}
	func()	/*只能在函数表达式声明后调用*/
	3.自执行函数
	!function(num){
	}(1)
	(function(num){
	})(1)							/*官方推荐*/
	(function(num){
	})(1)
	4.在函数中调用自身使用 arguments.callee()

BOM

1.window对象的属性

	screen		屏幕
	history		历史纪录
	location	当前网页url
	navigator	浏览器的信息
	document	文档信息
	frames		命名框架信息

2.window 常用方法

	alert()				弹窗提示
	window.open()		打开窗口
	window.close()		关闭窗口
	window.confirm()	确认弹窗
	window.prompt()		输入弹窗
	setTimeout()		设置延时n秒后，执行一次
	clearTimeout()		清除定时器
	setInterval()		设置循环每n秒执行一次
	clearInterval()		清除定时器
	location.href		当前完整路径
	location.protocol	协议名 http://或https:/等
	location.host		主机名+端口号
	location.hostname	主机名
	location.port		端口号
	location.pathname	文件路径
	location.search		?开头的参数列表
	location.hash		#开头的锚点
	location.reload()	刷新
	location.replace()	新文档替换旧文档,不可回退
	location.assign()	新文档替换旧文档,可回退
	history.length		浏览历史个数
	history.back()		后退
	history.forward()	前进
	history.go()		前进:history.go(1),后退:history.go(-1)  
	navigator.userAgent	代理信息
	window.onload		页面文档加载完成后执行
	window.focus()		获取焦点
	window.blur()		移除焦点
	screen.availHeight()屏幕的高度（除windows任务栏之外）
	screen.availWidth() 屏幕的宽度（除windows任务栏之外）

DOM

1.操作元素节点

	getElementById()			获取id元素节点
	getElementByName()			获取name属性元素节点
	getElementByTagName()		获取标签名元素节点
	getElementByClassName()		获取css元素节点
	querySelector()				匹配css元素节点
	querySelectorAll()			匹配所有css元素节点

2.修改元素样式

	className
	style
	style.cssText

3.获取层次节点

	childNodes/children						子节点
	firstChild/firstElementChild
	lastChild/lastElementChild
	parentNode								父节点
	previousSibling/previousElementSibling	兄弟节点
	nextSibling/nextElementSibling			兄弟节点
	attributes								当前节点

4.创建新节点

	createElement()		创建节点
	insterBefore()		在之前插入节点
	cloneNode()			复制节点
	appendChild()		创建节点
	removeChild()		删除节点
	replaceChild()		替换节点

5.表格对象

	rows			
	insterRow()
	deleteRow()
	cells
	rowIndex
	insterCell()
	deleteCell()

6.document对象集合

	document.all
	document.forms
	document.links
	document.images
	document.anchors
	document.body
	document.cookie
	document.domain	 当前文档的服务器域名
	document.referrer	当前文档的URL
	document.URL		当前文档的URL		

7.element(元素)对象 element=document.getElementById(‘id’)

	element.attributes
	element.childNodes
	element.className
	element.clientWidth	可见宽度
	element.offsetWidth	本身宽度
	element.scrollWidth	整体宽度
	element.contentEditable
	element.dir
	element.firstChild
	element.lastChild
	element.innerHTML
	element.textContent
	element.style
	element.nextSibling
	element.previousSibling
	element.appendChild()
	element.insertBefore()
	element.cloneNode()
	element.getAttribute()
	element.setAttribute()
	element.removeAttribute()
	element.getAttributeNode()
	element.setAttributeNode()
	element.removeAttributeNode()
	element.removeChild()
	element.replaceChild()

javascript事件

1.鼠标事件
	onclick						单击
	ondbclick					双击
	onmouseover					鼠标移入
	onmouseout					鼠标移出
	onmousemove					鼠标被移动
	onmousedown					鼠标按下,属性clientX,clientY,screenX,screenY  X坐标和Y坐标
	onmouseup					鼠标松开
2.键盘事件
	onkeydown					键盘按下
	onkeypress					键盘按下并松开瞬间
	onkeyup						键盘松开
3.html事件
	onload						加载完成
	onfocus						获取焦点
	onblur						失去焦点
	onselect					文本选中
	onchange					内容被修改
	onsubmit					表单提交
	onscroll					文档被滚动
	onresize					窗口被改变
4.绑定事件
btn.addEventListener('click',function(){},false/true)	添加事件绑定
btn.removeEventListener('click',function(){},false/true)取消事件绑定	

数组和对象

1.数组对象的方法

	delete arr[n]	/*删除数组的第n个值*/
	arr.push()		/*在数组后添加一个值*/
	arr.unshift()	/*在数组前第0位添加一个值*/
	arr.pop()		/*删除数组最后一位*/
	arr.shift()		/*删除数组第0位*/
	arr.join(',')	/*用,分隔符连接为字符串*/
	arr.concat(arr1)	/*连接两个数组为一个数组*/
	arr.reverse()	/*数组反转*/
	arr.slice(1,2)	/*截取数组指定位置的元素，返回新数组(不改变原数组)*/
	arr.sort(function(a,b){
		return a-b;		/*升序排序*/
		return b-a;		/*降序排序*/
	})
	arr.splice(2,1)	/*删除指定位置元素，返回删除完的数组(会改变原数组)*/
	arr.indexOf('name') /*匹配name的值，匹配返回大于-1，否则为-1*/
	arr.forEach(function(item,index){
	})					/*遍历数组，不可返回*/
	arr.map(function(item,index){
	})					/*数组映射，可以返回新数组*/
			

2.Number的方法

	num1.toString()		/*数字转换为字符串*/
	num1.toFixed(n)		/*数字转换为字符串，保留n位小数*/
	num1.valueOf()		/*对象的数字值*/

3.String的方法

	str.length		/*字符串的长度*/
	str.charAt(n)	/*截取数组的第n个字符*/
	str.indexOf()	/*查询子串*/
	str.substring(1,n)	/*从1截取到第n个字符，左闭右开，包含左不包含右*/
	str.replace('a','')	/*只替换字符串的第一个a位空*/
	str.split(',')		/*将字符串转换位数组*/

4.Date的方法

	var date=new Date()
	date.getFullYear()		/*年份 4位*/
	date.getMonth()			/*月份0~11*/
	date.getDate()			/*日期1~31*/
	date.getDay()			/*一周0~6*/
	date.getHours()			/*小时0~23*/
	date.getMinutes()		/*分钟0~59*/
	date.getSeconds()		/*秒数0~59*/
	date.getTime()			/*毫秒数乘以1000是秒数*/
	date.getTimezoneOffset()/*标准时间和本地时间的差*/

5.Math的方法

	Math.ceil(x)			/*向上取整*/
	Math.floor(x)			/*向下取整*/
	Math.min(x,y)			/*最小值*/
	Math.max(x,y)			/*最大值*/
	Math.pow(x,y)			/*x的y次幂*/
	Math.random()			/*返回0~1的随机数*/
	Math.round(x)			/*四舍五入为整数*/
	Math.sqrt(x)			/*x的平方根*/

6.对象的声明和调用

	声明
	var obj={
		key:val,
		func:function(){
		
		}
	}
	调用
	obj.key/obj['key']
	obj.func()/obj['func']()
	删除
	delete obj.key

7.闭包的概念
是指能够读取其他函数内部变量的函数。

function func(){
	num=10;
}
func();
console.log(num)	//10

8.继承

	call(this,参数1,...,参数n)
	apply(this,参数1,...,参数n)

9.原型和原型链

	prototype	函数的原型
	__proto__	对象的原型

10.正则表达式

	常用方法
	test()	//   /^[a-zA-Z0-9]{4,10}$/.test(str)	验证4~10位数字或字母
	exec()
	三种匹配模式
	//g		全局匹配
	//i		忽略大小写
	//m     多行匹配
	表达式元字符
	.		匹配除换行符之外的单个字符
	\w		匹配字符：[A-Za-z0-9]
	\W		匹配非字符：[^A-Za-z0-9]
	\d		匹配数字：[0-9]
	\D		匹配非数字：[^0-9]
	\s		匹配空白字符
	\S		匹配非空白字符
	\n		匹配换行符
	特殊字符
	^		匹配开始
	$		匹配结束
	|		匹配字符中任意一个：x|y 匹配x或y
	()		分组匹配
	[]		匹配方括号内的任意一个字符
	[^]		匹配不在方括号内的字符
	{x}		匹配前一项x次
	{x,}	匹配前一项x到n次
	{x,y}	匹配前一项x到y次 但不超过y次
	*		匹配前一项0或多次：{0,}
	+		匹配前一项1或多次：{1,}
	?		匹配前一项0或1次：{0,1}

Cookie

1.特点
大小限制：数量最多300个，每个不超过4kb，每个网站数量不超过20个
不可跨域：不允许跨域使用
时效性： 有过期时间
不安全性：可被篡改
2.用途
纪录用户信息
保存登录信息
3.使用

	1.添加cookie	
	document.cookie='name=1';
	document.write(document.cookie)
	
	2.设置cookie过期时间
	function setCookie(key,value,time){
        var endTime=new Date();
        endTime.setTime(endTime.getTime()+time*60*1000);
        var gmTime=endTime.toGMTString();
        var value=escape(value);
        document.cookie=key+"="+value+";expires="+gmTime;
    }
    setCookie('name','Tom',1);
    document.write(document.cookie);
    
    3.获取cookie
    function getCookie(key) {
        var reg=new RegExp(key+"=([^;]*)");
        var arr=document.cookie.match(reg);
        if (!arr) return null;
        return unescape(arr[1]);
    }
    var value=getCookie('name');
    alert(value);
    
    4.删除cookie
     function delCookie(key) {
        var endTime=new Date();
        endTime.setTime(endTime.getTime()-1);
        var gmTime=endTime.toGMTString();
        document.cookie=key+"=null;expires="+gmTime;
    }
    delCookie('name');
    document.write(document.cookie);

js数据类型转换注意事项

1.null == undefined   返回true
2."3"==3 返回true 
3.false==0 返回true true==1 返回true
4.NaN==NaN 返回false

js的模块

	示例 创建Truck模块
	(function(window){
        'use strict';
        var App=window.App || {};
        function Truck(){
            this.data={};
        }
        Truck.prototype.add=function(key,val){
            this.data[key]=val;
        }
        App.Truck=Truck;
        window.App=App;
    })(window)
    var truck=new App.Truck();
    truck.add('222','000');
    console.log(truck.data);