HTML:超文本标记语言
扩展名:.html .htm
结构标签:<html> <head> <body>
<head>中有<meta charset="utf-8">,<title>
字体标签:<font color="颜色" size="大小" face="字体"></font>
标题标签:<h1>..由大到小..<h6>
段落:<p> 加粗:<b> 斜体:<i> 下划线:<u> 居中:<center> 删除线:<del>
分割线:<hr/> 预编译标签:<pre> 回车:<br/>
图片标签:<img src="路径" width="宽度" height="高度" alt="提示信息"/>
有序列表:<ol type="1 | a | A | i |I" start="起始位置" >
<li></li>
</ol>
无序列表:<ul type="disc | circle | square" start="起始位置">
<li></li>
</ul>
超链接:<a href="链接地址" target="_self | _blank | _parent">
表格:<table width="" height="" border="" align="left | center | right">
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td colspan="查列数,横向合表格" rowspan="查行数,纵向合表格"></td>
</tr>
</tbody>
</table>
表单:<form action="提交地址" method="get | post">
默认提交地址为本页面;
get:不安全,数据大小受限
post:安全,数据大小不受限
</form>
表单元素:
文本/密码:<input type="text | password" id="" name="" value="" size="" maxlength="" readonly="readonly" disabled="disabled"/>
单选:<input type="radio" checked="checked"> 多个单选,名字唯一.</input>
复选:<input type="checkbox" checked="checked">多个复选,名字唯一.</input>
按钮:<input type="button | submit | reset | hidden | image图片按钮"/>
文件:<input type="file"/>
下拉列表:<select>
<option></option>
</select>
文本域:<textarea rows="行数" cols="列数">
H5扩展标签: <input type="email | date | number | color"/>
框架:<frameset rows="" cols="" >
列数和行数可用多个百分比表示.
<frame src="" noresize="noresize">边框固定,不可随意拉动</frame>
</frameset>
特殊字符:
空格:&nbsb;
<:<
>:>
":"
Div+CSS
块标签:
<div></div>:独占一行
<span></span>:在同一行
css语法:
选择器{属性:属性值;属性:属性值;}
引入方式:
行内引入:<h1 style="color:red;font-size:200px;">标题</h1>
页面内引入:
<style>
h1{
color:blue;
font-size:40px;
}
</style>
外部引入:<link href="../css/demo1.css" rel="stylesheet" type="text/css"/>
ID选择器用#修饰,类选择器用.修饰
浮动:
float:left | right | none | inherit(继承父元素float属性的值);
clear:left | right | none | inherit(继承父元素clear属性的值);
属性选择器:
input[type="text"]{
background-color:red;
}
后代选择器:(用空格隔开)
div span 查找div中所有span元素
子元素选择器:(用>隔开)
div > span 查找div中span子元素
并列选择器:(用,隔开)
选择器,选择器{}
背景样式:
background
background-attachment
background-color
background-image
background-position
background-repeat
文本样式:
color
direction
line-height
letter-spacing
text-align
text-decoration
text-indent
text-shadow
text-transform
unicode-bidi
white-space
word-spacing
字体样式:
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
列表样式:
list-style
list-style-image
list-style-position
list-style-type
盒子模型:
margin:外边距
padding:内边距
定位属性:
position:relative | absolute | left | top
超链接伪类:
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到连接上
a:active 选定的链接
JS知识点总结
组成:ECMAScript,BOM,DOM
ECMAScript中:
语法:
1.弱变量,用var声明
2.数据类型分 原始类型和引用类型
原始类型:五种,undefined,boolean,string,number,null
3.运算符:===全等
内置对象:
1.Array:比如var arr=new Array(5); arr[0]=new Array("","");
var arr1=[[""],[""]];
2.Boolean
3.Date:new Date().getTime();
4.Math:abs(x);max(x,y);min(x,y);random();round(x);比如Math.abs(-0.1);
5.Number
6.String:"字符串".matche("正则表达式");
substr(startIndex,length)与substring(startIndex,endIndex)区别:
前者取length个字符,后者取endIndex-startIndex个字符
7.RegExp:"正则表达式".test("字符串");
全局函数:
1.decodeURI()
2.encodeURI()
3.eval()作用:把文本当做代码来执行
4.parseFloat()
5.parseInt()
BOM中:
window:
history.go(-1)
设置:location.href="";获取:locaction.href;
方法:1.alert();
2.setInterval();
3.setTimeout();
4.clearInterval();
5.clearTimeout();
6.confirm();
7.prompt();
8.open();
screen:
screen.availHeight:不包含任务栏的高度
screen.availWidth
screen.height:包含任务栏的高度
screen.width
DOM中:
获得元素:
document.getElementById();通过ID获得元素.
document.getElementsByName();通过name属性获得元素.
document.getElementsByTagName();通过标签名获得元素.
创建元素:
document.createElement();创建元素
document.createTextNode();创建文本
添加节点:
element.appendChild();在最后添加一个节点.
element.insertBefore();在某个元素之前插入.
删除节点:
element.removeChild();删除元素
事件:
onblur() onfocus()
onsubmit()
onclick() ondblclick()
onmouseover() onmousemove() onmouseout()
onkeydown() onkeyup() onkeypress()
onchange()
输出:
document.write();
document.innerHTML();
JQuery知识点
页面加载:
$(function(){ });
$(document).ready(function(){ });
相当于window.onload=function(){};.相比于js一次执行,JQ多次执行,且效率高.
JQ转JS:
1.JQ[0].innerHTML(); 2.JQ.get(0).innerHTML();
JS转JQ:
$(JS).html();
单击:
$("#id").click(function(){ });
$("#id").on("click",function(){ })
trigger与triggerHander区别:
trigger:获得焦点,执行代码
triggerHander:不获得焦点,只执行代码
on/bind:为一个元素绑定多个事件,多个事件执行同一个函数
$("").bind("click dblclick",function(){ });
delegate:事件委派,为后来新创建的元素绑定事件.
$("父元素").delegate("子元素","click",function(){ });