JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。
JavaScript具有很多优点：
1.简单性 JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。
2.动态性 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
3.跨平台性 JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。
4.节省CGI的交互时间 随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。
JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。
<html>
<head>
<style type="text/css">
html,body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#Main{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-index:1;
}
#ToolBar{
position:absolute;
top:3px;
left:50px;
width:300px;
height:20px;
background:#ccc;
z-index:2;
overflow:hidden;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>
<div id="Main">
<p>&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;</p>
<p>&nbsxxxxxxxxcccccccccccccccccccxp;</p>
<p> </p>
<p>&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;</p>
<p>&ncxvcxzvczxvcxzvczbsp;</p>
<p> </p>
<p> dfdf</p>
<p>&nbscxzvcxzvcxzvczxvcxzp;</p>
<p> </p>
<p> </p>
<p>&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;</p>
<p> </p>
<p> </p>
<p>&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> ddddddddddddddddd</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>&nbsxp;</p>
<p> </p>
<p> </p>
<p>&nbxsp;</p>
<p> </p>
<p> </p>v
</div>
</body>
</html>
代码二.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#Main{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-index:1;
}
#ToolBar{
position:absolute;
top:3px;
left:50px;
width:300px;
height:20px;
background:#ccc;
z-index:7;
overflow:hidden;
}
#ToolBa_2{
position:absolute;
top:300px;
left:50px;
width:300px;
height:20px;
background:#ff0000;
z-index3;
overflow:hidden;
color:#fff;
}
#ToolBa_3{
position:absolute;
top:600px;
left:50px;
width:300px;
height:20px;
background:#ff0000;
z-index32;
overflow:hidden;
color:#fff;
}
#ToolBa_4{
width:300px;
height:200px;
background:#ff0000;
z-index35;
overflow:hidden;
color:#fff;
}
#ToolBa_5{
width:300px;
height:200px;
background:#ff0000;
z-index39;
overflow:hidden;
color:#fff;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>
<div id="ToolBa_2">可是这样页面上所有div的位置都固定不动了!</div>
<div id="ToolBa_3">可是这样页面上所有div的位置都固定不动了!</div>
<div id="ToolBa_4">可是这样页面上所有div的位置都固定不动了!</div>
<div id="ToolBa_5">可是这样页面上所有div的位置都固定不动了!</div>
<div id="Main">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
关于SPAN和DIV的总结性报告！！！
1。div是块级 span是内嵌式
2。DIV有结构的意义 SPAN没有
3。DIV包含的对象前后都有换行，SPAN没有
共性
他们都是容器元素，都是用来包含其他同类型的元素的，
最重要的是：
***************************
他们都是为CSS而专门而成立的
***************************
补充：
块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单封装 分页效果</title>
<style type="text/css" media="all">
/* <![CDATA[ */
body{margin:50px}
ul{border-top:solid 1px #ddd; margin:0; padding:0 0 0 20px; list-style:none; background:#f4f4f4}
ul li{float:left}
ul li a{display:block; width:30px; height:30px; border:solid 1px #f4f4f4; text-align:center; line-height:30px}
ul li a.on{position:relative; margin:-1px 0 0; border:solid 1px #ddd; border-top-color:#fff; color:#f00; background:#fff}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block}
/* ]]> */
</style>
</head>
<body>
<ul id="test" class="clear">
<li><a href="javascript:;" class="on">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
<li><a href="javascript:;">6</a></li>
<li><a href="javascript:;">7</a></li>
<li><a href="javascript:;">8</a></li>
<li><a href="javascript:;">9</a></li>
</ul>
<script type="text/javascript">
// <![CDTAT[
// by MacJi
function f(c){
this.container = document.getElementById(c);
this.li = this.container.getElementsByTagName('a');
var _this = this;
this.init = function (){
for(var i = 0; i < _this.li.length; i++)_this.li[i].onclick = function(){_this.setOn(this);return this.blur()};
}
this.setOn = function(o){
for(var i = 0; i < _this.li.length; i++) _this.li[i].className = '';
o.className = 'on';
}
}
var page = new f('test');
page.init();
// ]]>
</script>
</body>
</html>
1.加入收藏,设为首页:
<a href="javascript:window.external.AddFavorite('http://www.bydragon.com','百龙设计工作室')">加入收藏</a>
<a
href="#"
onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http:
//www.bydragon.com');">设为首页</a>
2.2秒后关闭当前页:
<script language="JavaScript">
<!--
setTimeout('window.close();',2000);
-->
</script>
3.IE地址栏前换成自己的图标:
在首页<head></head>之间加上如下代码
<link rel="Shortcut Icon" href="favicon.ico">
4.在收藏夹中显示出你的图标:
在首页<head></head>之间加上如下代码
<link rel="Bookmark" href="favicon.ico">
5.改变滚动条颜色:
在首页<head></head>之间加上如下代码
<style>
body{
scrollbar-face-color:147faf; scrollbar-shadow-color:147faf;
scrollbar-highlight-color:147faf; scrollbar-3dlight-color:ffffff;
scrollbar-darkshadow-color:ffffff; scrollbar-track-color:ffffff;
scrollbar-arrow-color:ffffff;}
</style>
scrollbar-face-color表示滚动条面的颜色
scrollbar-shadow-color表示滚动条右斜面的颜色
scrollbar-highlight-color表示滚动条左斜面的颜色
scrollbar-3dlight-color表示滚动条上边和左边边沿的颜色
scrollbar-darkshadow-color表示滚动下边和右边边沿的颜色
scrollbar-track-color表示滚动条底板的颜色
scrollbar-arrow-color表示滚动条两端箭头的颜色
6.鼠标移到单元格颜色改变:
<table width=200><tr>
<td
bgcolor="#738278" style="cursor:hand"
onMouseOver="this.style.backgroundColor='red'"
onMouseOut="this.style.background='#738278'">移