HTML：超文本标记语言
由标签和数据组成，标签封装数据
主体结构：
<html>
<head>
<title>标题</title>
</head>
<body>
内容
</body>
</html>
双标签：如：<font></font>,<a></a>
单标签：如：<br/>, <hr/>, <img/>,<imput/>
格式：<标签名 属性="属性值">数据</标签名>
XHTML：更加严格的HTML，标签必须关闭，标签名必须小写，属性必须用“”括起来，内容标签中不能嵌套格式标签，等等。
如果要在页面显示特殊符号，需要字符实体
< < > >
& & 空格
-------------------------------------------------------------------------
常见标签：
1.字体：<font></font> <font size=""color="">数据</font>
<br/>换行，<b>加粗，<i>斜体，<u>下划线
2.标题：<h1></h1>...<h6></h6>
3.列表：
列表范围<dl></dl>
上层项目：<dt>
下层项目：<dd>
或
项目范围：<ul> (unordered无序) <ol> (ordered有序)
列表项：<li>
示例：
<ol>
<li>游戏名称</li>
<oltype="a">
<li>魔兽</li>
<li>仙剑</li>
</ol>
<li>游戏类型</li>
<ul>
<li>攻略</li>
<li>角色扮演</li>
</ul>
</ol>
4.图像：<img/>
<img src="url/uri" width=”宽度” height=”高度” alt="说明文字" />
最好加上宽度和高度属性，这样即使页面没有加载完成，图片也会占着位置
另外，缩略图最好不要使用width和height来缩小，应使用本就比较小的图片
5.表格：
一个2行3列带标题的表格
<table>
<caption>表格标题</caption>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
tr的属性：align：整行的内容的水平对齐方式，valign：垂直对齐方式
td的属性：align：此单元格的内容的对齐方式，valign：垂直对齐方式
rowsapn：水平单元格合并，colspan：垂直单元格合并
注意:<table>中默认有一个<tbody>！！！！！！！很重要！！！！虽然我们看不到它，但是在DOM解析中，DOM会读取这个元素，
<thead></thead>：表头所在行，和<tr></tr>类似
<th></th> 是表头内容，和<td></td>类似，但其内容默认居中加粗
表格可以用来对网页内容进行排版，如：表单
6.超链接：<a></a>
<ahref="http://www.baidu.com" target="_blank" title="提示文字">百度</a>
href属性可以是URL/URI，也可是一张图片的URI
target的5个属性：_self 自身 _blank 新窗口 _parent父级窗口 _top 顶级窗口，以及 framename 帧的名称
发邮件：<ahref="mailto:abc@qq.com&subject=haha">联系我们</a>
迅雷下载：<ahref="thunder://alsdjfasldfja">龙门飞甲下载</a>
定位
<aname="top"><a>
................
<a href="#top">回到top处</a>
7.表单：
<form></form>：用于收集客户端数据，发送给客户端
输入项：<input/>根据type值不同，对应的组件也不同
type属性：
1.text 文本框，输入内容可见。size：文本框长度
readonly=”readonly”：只读 maxlength：最大输入字符个数
2.password 密码框，输入内容不可见，属性同上
3.radio 单选按钮，要想多个单选按钮只有一个被选中，必须有相同的 name 属性值。
4.checkbox 复选框，可同时选中多个数据。checked=”checked”，已选中
5.hidden 隐藏域，该组件不会显示在页面上，但是其数据可以提交到服务端，这个很有用
6.button 自定义按钮，默认没有任何效果，可以通过注册事件加入自定义效果，可使用javascript来控制点击后的动作
7.reset 重置按钮，将组件填入的内容和操作的效果还原到初始值
8.submit 提交按钮，将组件中填入的内容提交到服务端
9.image 图像，提交按钮比较难看，可以用图像代替它，功能和提交按
钮一样，另外它还会把鼠标点击的坐标提交给服务器
10.file 浏览文件，可选择文件，用于文件上传。如果使用了这种type，那么，它所在的form的enctype 属性值必须为 ”multipart/form-data”
还有几个不属于type的属性，但是也可用在<form>中
11.下拉列表：
<select size=”3” multiple=”multiple”> 表示显示三个选项，可多选
<option selected=”selected”>列表项</option> 表示默认选中
</select>
12.文本区域：<textarea></textarea> cols=”列数” rows=”行数”
13.标签：<labelfor="male">Male</label>
<input type="radio"name="sex" id="male"/>
点击这个label就相当于点击了male点选框，提高用户体验
14.包含框：可以将一部分内容框起来，显得比较规整
<fieldset>
<legend>健康信息：</legend> 包含框的标题
<label>身高：<inputtype="text" /></label>
<label>体重：<inputtype="text" /></label>
</fieldset>
每一个表单组件（输入项），都应该有name 属性和 value 属性
<form>标签常用属性：
action：数据提交的目的地
method：数据提交方式 get 和 post，默认是get
onsubmit：点提交按钮后执行的动作，可使用javascript函数
get 和 post的区别：get 会将提交的数据显示在地址栏上，跟在url后面，在http协议请求行中，数据长度有限制；post 不会显示在地址栏，在http请求实体内容中，数据大小无限制。另外，对于中文，get需要先用ISO8859-1重新编码，再用gbk编码
注意：表单组件并不是必须要在<form></form>中
8.框架
<framesetrows="28%,*" frameborder=0 >
<framesrc="练习7top.html" noresizescrolling="no"/>
<framesetcols="20%,*">
<framesrc="练习7left.html" noresize />
<!--frame中有一个属性 name，可以为frame换个名字-->
<framesrc="练习7right1.html" name="right"/>
</frameset>
</framefet>
注意：frameset不能放在 body 中
frameset 的几个属性：
rows：分为几行（数字 或百分比或 *）
cols：分为几列（同上）
frame 的几个属性：
src：目标文件URL
noresize=”noresize”：是否可以改变大小
scrolling：是否有滚动条 yes,no,auto
frameborder：是否有边框
name 名字：（可作为超链接 target 的目标值）
marginheight：定义框架的上方和下方的边距。
marginwidth：定义框架的左侧和右侧的边距。
9.内联框架：<iframe>，就是页面中间的一个框
src：框架内容的URL
width：宽度
height：高度
scrolling： 是否有滚动条 yes,no,auto
CSS：
优点： 将网页中的样式提取出来，完全由css控制
增强了样式的复用性，减少流量，提高网页加载速度
CSS与HTML结合的四种方式
1.行内式：每一个html标签都有一个 style 属性，可在其中直接写css代码。如：<h1 style=”color:red; background:blue”>This ishead</h1>
2.内嵌式：页面中有多个标签使用同样的样式可使用
<styletype=text/css>
css代码
</style>
3.导入式：多个页面使用同一样式，可将css代码单独封装成一个css文件，然后在每一个页面中写上：
<style>
@importurl("1.css");
</style>
4.链接式：同导入式，但是在html的<head></head>标签中引入
<link rel="stylesheet" type=”text/css”href="1.css" />
区别：1.导入式是由CSS规范实现的，而链接式是由HTML规范实现的2.链接式在html页面加载前就会读取css文件，而导入式在html页面加载完成后才读取css文件
技巧：为了提高样式的复用性和可扩展性，可以将多个标签样式进行单独定义并封装成多个css文件，在一个css文件中用import导入其他css，在hmtl页面中用link导入
如：已有 p.css，div.css，
则 在1.css中
@import url("p.css");
@import url("div.css");
然后再html中：
<link rel="stylesheet"href="1.css" />
----------------------------------------------------------------------------
选择器：样式作用的范围
基本选择器：
1.标记选择器：以html中的每一个标签名来命名
2.类选择器：.选择器名 对应html标签中的class属性，可以对不同标签设定，只能被css使用，
一个元素可同时使用多个类选择器，中间以空格隔开，class=”a b c”，没有冲突的话，则都会生效，有冲突的话，以第一个出现的为准
3.ID选择器：#选择器名 对应html标签中的id属性，必须唯一，不可同时使用多个，ID选择器不仅可以给css使用，还可被js使用
优先级：行内样式 > ID选择器 > 类选择器 > 标记选择器
复合选择器：
1.交集选择器：对标记选择器再进行样式设定，如：
div.special{……}
div#special{……}
只有对既满足div，又满足class=”special”或id=”special”的元素才会生效
2.并集选择器：（组合选择器）对多个选择器同时进行样式设定，每个选择器既可为基本选择器，也可为复合选择器，中间以逗号隔开
div，h1.first，p.special，...{……}
3.后代选择器：（父子选择器/关联选择器）中间以空格隔开
div h1.first span.special{……}
意思为：在div的h1中，class属性为first的元素，还要满足在h1的sapn中，并且class属性为special的元素才会生效（好麻烦……）
4.伪元素选择器：元素的某种状态
a:link{} 被点击前
a:visited{} 被点击后
a:hover{} 鼠标悬停时
a:active{} 鼠标按下时
p:first-letter{} 首字母
p:first-line{} 首行
css滤镜：通过代码丰富样式，不说了
CSS的继承特性：
一个HTML文档可抽象为一个DOM树
当使用CSS对某个元素进行设置以后，这个设置不仅会对该元素产生作用，还会对他的所有子元素（孙子元素）起作用，除非某个子元素重新做了设置
盒子模型：
每一个html元素都可看成一个盒子，这个盒子由内容（content），边框（border），内边距（padding），和外边距（margin）组成
content拥有width和height属性，
其他三个都可分别设置其top，right，bottom，left的属性
整个盒子的大小就是content的width，height加上border，padding和margin宽度和高度
属性的简写形式：
如果给出2个属性值，前者表示上下，后者表示左右
如：padding：20px 10px；表示上下内边距20px，左右内边距10px
如果给出3个属性值，前者表示上，中间表示左右，后者表示下
如：border-color：red blue green；
如果给出4个属性值，则依次是上，右，下，左，即顺时针
如：border-style：dotted dashed solid double；
另外还需注意：
若对一个属性值做了多次设置，则按最后一次的设置为准
可对border（当然还有其他属性）同时设置多个属性值，如
border：1px gray solid；表示边框为1px，灰色，实线；
属性值出现的顺序需查阅相关的文档
body默认有一定的外边距（没有内边距），所以做网页时要先设置成0；
盒子之间的关系
标准流：所谓标准流是指，在不引入CSS的情况下，HTML文档中各个元素的默认排列方式
块级元素（block）：以一个“块”的形式表现出来，左右延伸，独自占满一行，或者说一块区域，元素之间上下排列。如：div，p，ul，li 等等
行内元素（inline）：本身不占有区域，依附于块级元素，元素之间左右排列，不会自动换行，如：sapn，a，img 等等
标准流就是默认的块级元素和行内元素的排列方式
盒子在标准流中的定位原则：
1. 行内元素之间的水平margin是二者相加的结果
2. 块级元素之间的数值margin，有“塌陷“现象”，即二者之间的margin以较大者为准，较小的“塌陷”在较大的margin中
3. 嵌套的盒子之间的关系：如果外层盒子没有明确设定高度，则其高度为正好容纳下内层盒子以及自己的padding和内层盒子的margin；如果外层盒子明确设定了高度，则当内层盒子过大时，外层盒子不会自动伸展，依然按照设定的高度显示，内层盒子会从外层盒子里“撑”出来。ie6不注意：IE6不支持这一特性
4. margin可以为负值，此时，设为负数的盒子会向相反的方向移动，设置出现“覆盖”和“分离”的现象
浮动与定位：
非标准流：即浮动和定位，盒子不在按照标准流中的排列方式
浮动：float
float属性的取值可以是left或right，表示向左或向右“浮动”
注意，一旦某个元素设置了浮动效果，它就脱离了标准流，意思就是说：它不再属于标准流的定位其他的盒子就会当做它不存在，后面紧接着它的盒子会占据它的位置
设置了浮动的盒子（box1）不会再向两端自动扩展，大小为正好容纳里面的内容，而紧随其后的盒子（box2）会占据它原先的位置，但是：box2中的content（只是content）会受box1影响，会围绕着box1来排列
如果box1和box2都设置了浮动，二者之间的左右margin会叠加，他们之后的box3会占据他们的原先的位置，box3的content也会受他们的影响
当浏览器窗口很小，小到不足以容纳几个浮动的盒子时，最后面的盒子就会被挤到下一行
清除浮动：clear
clear属性的取值可为left，light或both，表示清楚此元素左，右或两边的浮动盒子对他content的影响
容器盒子的高度：若一个盒子里套了许多其他盒子，我们可称之为容器盒子，比如网页中用一个div套住所有的网页元素。如果容器盒子里的所有盒子都设置了float，那么这个容器盒子的高度就会变成0，这是因为，它里面的所有盒子都脱离了标准流，就相当于它里面什么都没有，所以他的高度就是0。
解决的方法是，在容器盒子里再增加一个div，样式设置为 .father .clear{
margin：0； padding：0；border：0； clear：both；}
其中 .father是为其指定父div
定位：position
position属性的取值可为static，relative，absolute或fixed
static：默认定位，即标准流定位方式
relative：相对定位，相对于盒子的标准流位置，进行偏移，使用相对定位的盒子，并没有脱离标准流，后面的盒子仍以标准流对待他。
相对定位的盒子对其他盒子（包括父级，子级，兄弟级盒子）没有任何影响，以为他依然是标准流，他的定位是在标准流的基准上进行的
例如以下代码：
#block1{
position：relative； bottom：30px； right：20px；
}
表示block1的新位置的下边框，距离标准流所在的位置的下边框为30px
新位置的右边框，距离标准流所在位置的右边框为20px
也就是说在标准流的基础上向上偏移30px，向左偏移20px（这点要注意）
absolute：绝对定位，以此盒子的“包含框”为基准进行偏移，使用绝对定位的盒子从标准流中脱离，后面的盒子会当他不存在
包含框：指的是绝对定位偏移的基准盒子，确定包含框的方法是：
以离此元素“最近”的一个“已经定位”的“祖先元素” 为基准，如果没有，则以浏览器窗口为基准
已经定位：指position属性被设置，且值是除static外的任意一个
祖先元素：指在DOM中的父节点以及祖先节点
最近：父节点比祖父节点近，祖父节点比曾祖父节点近，以此类推
例如以下代码：
#block2{position：absolute；top：30px；right：20px}
#father{padding：5px；position：relative；}
如果在DOM中，#father元素是#block2元素的最近祖先节点，那么#father就可称为#block2的包含框，
以上代码表示：#block2的所在位置的上边框距离#father上边框的距离为30px，右边框距离#father右边框的距离为20px，即在#father的基础上向下偏移30px，向左偏移20px
另外要注意：绝对定位的元素脱离了标准流，对于他的兄弟盒子来说，他就好像不存在一样，如果设置了绝对定位，但是没有设置其偏移值，那么它仍在原来的位置，但是已经脱离了标准流
fixed：固定定位，与绝对定位类似，但是以浏览器窗口为基准进行定位
z-index:用于调整重叠块的上下位置，取值为正，负，0
display属性：
display属性的取值可为inline，block或none，它可以强制改变盒子是行内元素还是块级元素，还可以设置为none，将盒子隐藏
javascript中的基础知识：
是 Netscape 公司的发明编程语言，是基于对象和事件的。
和 java 不同之处：
1.java 是 Sun 公司的（现在是Oracle）
2.java 是面向对象，js 是基于对象
3.java 由 JVM 执行，js 由浏览器解释执行
4.java 是强类型，js 是弱类型
5.java 严谨，js 不严谨
6.js 运行在客户端
js 代码调用方法：
1.在 html 文件中任何位置， <script type="text/javascript">js代码</script>
这种方式，网页会按照顺序从上往下执行js代码
2.在html <head></head> 标签中引入，<script type="text/javascript"src="/js/xxx.js"></script>，这种方式，网页会先执行js代码
js基本语法
1.变量
通过 var 来定义变量，该变量可以赋予不同类型的值
var x = 3;
x = "abc";
特殊的常量：undefined 未定义
2.语句
if...else, switch...case, while,do...while, for
js 中，非0为true，0为false，非 null 为true，null 为false
使用逻辑运算符进行布尔表达式连接的时候，要用短路与和短路或 && ||
js 中特有的语句：
with(对象) {} : 可以确定对象的使用范围，在此范围内，可以直接使用该对象的属性和方法，而不需要使用 对象. 的形式调用，简化了对象的操作
for(变量 in 对象）: 可以遍历对象的属性和行为
3.数组
js 中的数组长度是可变的，相当于java 中的集合
数组中存放的元素类型可以不同。定义方式如下:
var arr1 = [3,"abc",true]; 注意是中括号，不是大括号
var arr2 = new Array(); 创建一个Array对象
var arr3 = [[1,2,3],[4,5]]; 创建二维数组
操作方式和 java 一样，都是通过 for循环遍历，也是用了指针思想
4.函数
1.一般函数
function 函数名(参数列表...) {
执行语句;
return 返回值;
}
两个明确：
1.明确该功能运行后的返回结果
2.该功能在运行过程中是否有位置内容参与运算
2.动态函数（不常用）
使用 Function 对象定义
varshow = new Function("x", "y", "return x+y;");
特点：可以将 参数列表，方法体 作为参数传递
3.匿名函数：一般函数的简化形式 function(){}
匿名函数通常可以用于事件的响应和处理，如：
window.οnlοad= function() {alert("onload over");};
使用函数时需要注意的问题：
functionshow() {
return"show run";
}
varmethod1 = show();
varmehtod2 = show;
两个语句都是对的，
第一个表示 将 show() 函数运行的结果返回给method1；
第二个表示 将 show 指向的对象的地址赋给method2，method2 也指向了此函数之后就可以使用method2() 来调用此函数
----------------------------------------------------------------------------
js 可以通过对象的形式来封装数据
//首先对对象进行描述，需要使用函数来完成
functionPerson(name, age) {
this.name= name; //相当于构造方法
this.age= age;
}
var p = newPerson("lisi", 20);
alert(p[“name”] +"..." + p.age); //注意第一种调用形式
//还可以给对象添加方法
p.show() {
alert("pshow run");
}
----------------------------------------------------------------------
js中已定义好的一些对象
String,
var s1 = "HelloWorld" //习惯性使用方法
var s2 = new String("HelloWorld");
alert(s1); alert(s2);
//取得第四个位置的字符
alert(s1.charAt(4));
//取得r的位置
alert(s1.indexOf("r"));
//取得最后一个l的位置
alert(s1.lastIndexOf("l"));
//分隔如下字符串
var s3 = "a,b,c,d,e";
var s4 = s3.split(",");
for (var i=0; i<s4.length; i++) {
alert(s4[i]);
}
//截取rld字符串
alert(s1.substring(7, s1.length));
Math,
//0-1之间的随机小数
alert(Math.random());
//四舍五入
alert(Math.round(Math.random()*10));
Date,
var date = new Date();
alert(date.toLocaleString());
Array,
var arr = ['a','b','c'];
for(var i=0; i<arr.length; i++) {
alert(arr[i]);
}
var arr2 = [[1,2],[3,4,5]];
for(var i=0; i<arr2.length; i++) {
for(var j=0; j<arr2[i].length;j++) {
document.write(arr2[i][j] +", ");
}
document.write("<br/>");
}
//动态添加内容
var arr3 = new Array(10);
for(var i=0; i<arr3.length; i++) {
arr3[i] = i;
}
for(var i=0; i<arr3.length; i++) {
document.write(arr3[i] + ",");
}
//倒序
document.write("<br/>");
arr3.reverse();
for(var i=0; i<arr3.length; i++) {
document.write(arr3[i] + ",");
}
//排序
document.write("<br/>");
arr3.sort();
for(var i=0; i<arr3.length; i++) {
document.write(arr3[i] + ",");
}
//元素以 # 号隔开输出
document.write("<br/>");
document.write(arr3.join("#"));
这些对象都有一个属性 prototype （对象原型）
prototype 可以获取指定对象的引用
可以通过该引用给已有对象赋予新的功能
如：
functiongetMax() {
var max= 0;
for(vari=0; i<this.length; i++) {
if(this[i]> this[max]) {
max= i;
}
returnthis[max];
}
}
vararr1 = [3,2,6,1];
arr1.sort(); //直接调用 Array 对象的 sort 方法
//如果想像调用普通Array对象的方法一样调用getMax方法
//就需要利用 prototype，将getMax方法添加到Array对象中
Array.prototype.getMax= getMax;
vararr2= [5,8,6,2];
arr2.getMax();
再如：
varstr1 = "abcdef";
str1.bold(); //直接调用 String的 bole 方法（加粗）
//给String对象添加一个新方法，加颜色
functionaddColor(color) {
return"<font color=\""+ color + "\">" + this +"</font>";
}
String.prototype.addColor =addColor;
var str2 = "asdflk";
str2.addColor("red");
//在给String对象定义一个新方法，去掉前后的空格
function trim() {
varstart, end;
start = 0;
end = this.length-1;
while(start <= end&& this.charAt(start) == " ")
start++;
while(starr <= end&& this.charAt(end) == " ")
end--;
returnthis.subString(start, end-1);
}
String.prototype.trim= trim;
vars = " ada f ";
alert(s.trim()); //ada f
-------------------------------------------------------------------------
常见的全局函数（Global对象中的函数，不需对象）
parseInt("number",[radix]); //将数字格式的字符串转为数字，[radix]为可选参数，表示进制，默认是十进制
parseInt("110",2); // 6，把110以二进制转成数字，就是6
var x = 6;
alert(x.toString(2)); // 110 将数字转成字符串，参数是进制，默认是十进制
DOM：Document Object Model 文档对象模型
将一些标记型文档及文档内容封装成对象
这样可以定义对象的属性和行为，方便操作文档，包括文档本身，文档中的元素和元素的属性
DOM三层模型
DOM1：html
DOM2/ DOM3：xml
html，xhtml，xml 都是标记型文档
DHTML，DynamicHTML 动态HTML，多项技术的综合
html：负责将数据用标签封装
css：负责标签的样式
dom：负责将标签和标签中的数据封装成对象
javascript ：负责通过程序来操作这些对象
-----------------------------------------------------------------
HTML文档中的树形结构：
window：
|--navigator
|--location
|--...
document：
html
|--head
|--title
|--meta
|--link
|--style
|---...
|--body
|--div
|--span
|--table
|--tbody
|--tr
|--th
|--td
|--form
|--input
|--a
|--...
由于标记型文档具有这种树形结构，我么可以称加载到内存中的标记型文档是一棵dom树！
这些标签以及标签中的数据都是这棵树上的节点
当标记型文档加载到内存中时，内存中就有了一棵dom树
当标记型文档很大时，dom解析很消耗内存，这时应使用sax解析
节点类型：
标签节点：类型 1
属性节点：类型 2
文本节点：类型 3
注释节点：类型 8
document：类型 9
每个节点都有以下属性：nodeName, nodeType, nodeValue，可通过节点对象的getNodeName(), getNodeType(), getNodeValue() 这些方法获得
节点关系：
父节点：只有一个
子节点：一个或多个
兄弟节点：
上一个兄弟节点：
下一个兄弟节点：
1.获取节点可以通过ID来获取；
var obj =document.getElementById("id") 返回指定id节点
2.也可以通过节点的层次关系来完成：这些是节点的方法
obj.parentNode; 得到父节点
obj.childNodes; 得到子节点数组
obj.previousSibling; 得到上一个兄弟节点
obj.nextSibling; 得到下一个兄弟节点
注意：1》在获取节点时，标签之间的空行，空格可能会被当做一个空白的文本节点。2》table 节点中默认有一个tbody 子节点，tr，td 又是 tbody 的子节点。3》文本标签（如<a>,<p>）中的文本是其子节点，不是其value
3.还可以通过 document 对象来完成，这些都是document对象的方法
getElementByID("id") 通过标签的 id 属性，返回一个对象数组
getElementsByName("name") 通过标签的 name 属性（name属性不唯
一），返回一个对象数组
getElementsByTagName("tagName") 通过标签名，返回一个对象数组
document.all 返回文档中的所有标签节点组成的数组
以上方法通过节点对象也可以调用
DOM事件：
1. 标准静态事件 onclick, onkeypress, onblur等等。可用于javascript函数
如：<inputtype=”button” οnclick=”test()” value=”button1”/>
表示当点击此按钮时，就会调用test() 函数
2. 动态设置事件
如：<inputtype=”button” οnclick=”document.ondblick=test” value=”button2” />
注意没有括号。表示当点击按钮时，document对象的ondbclick事件就会由test()函数去响应，就是说如果document对象再发生ondbclick事件是，就会调用test()函数，
几个常用对象：
window对象：一个打开的浏览器窗口
常用的alert() 方法就是window对象的方法，下面演示其常用方法
<head>
<title>无标题文档</title>
<script type="text/javascript">
function windemo() {
//页面前进和后退
//window.history.back(); window.history.go(-1); //后退
//window.history.forward(); window.history.go(2); //前进
//window.open("http://www.baidu.com")
//通过window中的 navigator对象 获取浏览器名称和版本
var name =window.navigator.appName;
var version =window.navigator.appVersion;
//alert(name +"---" + version);
//通过window中的 location对象 获取当前页面的url
var url = window.location.href;
//alert(url);
//设置当前页面的url，浏览器会自动跳转
//window.location.href = "www.baidu.com";
//弹出对话框，有确定和取消按钮,返回布尔值
//var back = confirm("点点点");
//alert(back);
//窗口偏移，相对偏移,谷歌浏览器和ie9不支持
//window.moveBy(100,100);
//偏移到
//window.moveTo(200,200);
//关闭窗口
//window.close();
}
function windemo2() {
//打开一个新窗口，各种特征
//window.open("ad.html","_blank","width=400,height=400, location=no, menubar=no, menubar=no, resizable=no, scrollbars=no");
//每个一段时间，就会执行代码，注意引号！！！
//var intervalid = window.setInterval("alert('haha')",3000); //有返回值
//clearInterval(intervalid); //清除定时器
}
//onload事件，每一个元素都有onload事件，普通元素在此元素自己加载完成后触发，body元素在整个页面加载完后触发
window.onload = function() {
//alert("页面加载完成时");
}
//谷歌浏览器不支持
window.onunload = function() {
//window.open("","_blank","");
}
//谷歌浏览器不支持
window.onbeforeunload =function() {
alert("页面关闭前");
}
Event对象：也是非常的重要啊！！！
//event对象的属性，获取键盘事件 谷歌，ie都支持
function keydemo() {
var keycode = event.keyCode;
//alert(keycode);
if(!(event.keyCode >=47 && event.keyCode <= 57)) {
alert("不允许输入非法值");
event.returnValue = false; //取消事件，可以用在任何事件上
}
}
//event的另一个非常重要的属性，获取事件源
function keydemo2() {
var node = event.srcElement;
alert(node.name);
}
</script>
</head>
<body>
<input type="button"οnclick="windemo()" value="演示window对象"/>
<inputtype="button" οnclick="windemo2()" value="演示window方法"/><br/>
<input type="text"οnkeypress="keydemo()"/>
<input type="text"name="keydemo2" οnkeypress="keydemo2()"/>
</body>
</html>
动态创建元素：
document.write() 只能在页面加载时向文档中写入HTML代码，页面加载完成后就不能再使用了。如果希望在页面中动态创建具有指定标签的DOM元素，就需要使用document.createElement()方法，然后调用某个元素的appendChild()方法。如：每次点击“创建按钮”，就会动态创建一个按钮
<head>
<title>动态创建按钮</title>
<scripttype="text/javascript">
functioncreateButton() {
var myinput =document.createElement("input");
myinput.type = "button";
myinput.value = "动态创建的按钮";
var mydiv =document.getElementById("mydiv");
mydiv.appendChild(myinput);
}
</script>
</head>
<body>
<divid="mydiv"></div>
<inputtype="button" οnclick="createButton()" value="创建按钮"/>
</body>
innerText和innerHTML：非常重要的两个属性，几乎每个内容元素（a，div，span等等）都有
innerText：元素中的文本内容（FireFox不支持）
innerHTML：元素中的HTML内容
<head>
<title>innerHtml-innerText</title>
</head>
<body>
<ahref="javascript:void(0)" id="link"><fontcolor="#FF0000">gao</font>yuan</a>
<inputtype="button" value="innerHTML"οnclick="innerhtml()" />
<inputtype="button" value="innerText"οnclick="innertext()" />
<inputtype="button" value="修改innerHTML"οnclick="changehtml()" />
<inputtype="button" value="修改innerText"οnclick="changetext()" />
</body>
<scripttype="text/javascript">
/*注意页面的加载顺序！！！！！*/
var a =document.getElementById("link");
//alert("a.nodeName");
functioninnerhtml() {
//var a =document.getElementsByTagName("a")[0];
//var a = document.getElementById("link");
alert(a.innerHTML);
}
functioninnertext() {
//var a =document.getElementById("link");
alert(a.innerText);
}
functionchangehtml() {
//var a =document.getElementById("link");
/*注意！！！！一定要注意单双引号！！！！！*/
a.innerHTML = "gao<font color='#FF0000'>yuan</font>";
}
functionchangetext() {
//var a =document.getElementById("link");
a.innerText = "gaoyuan";
}
</script>
</html>
创建表格专用方法：
var tabnode = doc.createElement("table");
for(var i=0; i<5; i++) {
//创建tr并加入到table中，好用的方法
var trnode =tabnode.insertRow(-1);
for(var j=0; j<4; j++) {
var tdnode =trnode.insertCell();
tdnode.innerHTML = "单元格";
}
}
ByTag("div")[0].appendChild(tabnode);
<body>
<inputtype="button" value="添加一行"οnclick="createTable()" />
<inputtype="button" value="添加一行"οnclick="createTable()" />
<div></div>
注意：
1.动态产生的元素，查看源文件是看不到的，需要用专门的工具
2.动态产生元素时，一定要注意层次结构，比如表格：table-tr-td
3.innerHTML一定要注意单双引号的问题
4.使用javascript全局变量时，一定要注意页面的加载顺序，而且全局变量能不用就不用。
事件冒泡：如果元素A嵌套在元素B中，如果A的onclick事件触发，则B的onclick也会触发，触发的顺序是由内而外。
事件中的this：表示当前触发事件的元素，可直接在事件触发的代码中使用，如：（οnclick=”alert(this.value)”），也可作为javascript函数的参数传入。this和event.srcElement不太一样，注意体会
修改元素的样式：通过javascript和DOM可以改变网页中元素的CSS样式，先得到某元素，再通过此元素的className属性来改变样式，也可直接改变其CSS属性（如：body.bgcolor = “black”,或body.style.backgroundColor = “#FFFFFF”）。
注意：DOM中的属性名和CSS中的属性名是不同的，具体参看文档
body元素事件响应的范围：在body中添加onclick，onmousemove等事件，如果body中没有放满元素，则在body中最后一个元素一下是监听不到这些事件的，如果需要再页面中任何位置都能监听到事件，则需要再javascript中通过document指定
655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
