上学时的HTML+JS+CSS(小总结)

html:超文本标记语言
基本标签：
{
文本标签：<pre></pre>:原封不动的保留空白区域。
     <br />:换行。
     <hr width="宽度(单位:%)" size="高度" noshade(该行不带阴影) color="线条颜色" />:在文档中画一条水平线，可用来          分割文档。
     <strong></strong>:加粗。
     <em></em>:斜体。
     <marquee direction="滚动方向(left/right/up/down)"
loop="循环次数(-1代表无限循环)" behavior="滚动形式         
(scroll:普通/alternate:来回滚动/slide:文字滚动出来不再动)"
scrolldelay="每次循环的间隔时                    间"></marquee>:设置文字滚动。
图像标签：<img src="图像的url(地址)" alt="简短的描述，当图像不能显示时在图像位置出现给图像的提示内容或文本信息"           width="宽度" hright="高度" />
超链接：<a href="http://www.baidu.com"></a>{定义锚点:<a href="锚点名"></a>，链接到锚点:<a href="#锚点名"></a>}
框架标签：frameset与body相冲突，不能同时存在。
     <frameset rows="222,*"
frameborder="yes"></frameset>[rows:将框架集分为几个水平的框架，*代表余下的部
分。         
cols:将框架集分为几个垂直的框架。frameborder：是否显示边框，取值为yes或no。border:边框的宽度。]
     <frame name="框架名称" src="框架内容的链接" frameborder="框架边框的宽度"
noresize(不可改变边框的大小)                     scrolling="滚动条设置，取值为auto/yes/no"
/>
     浮动框架:iframe与frameset不能混用。
     <iframe name="浮动框架" src="框架内容的链接" frameborder="框架边框的宽度" width="300" height="200"           align="right">
     </iframe>
表单标签：
     多行文本框：<textarea name="名称" cols="高度" rows="宽度">请输入</textarea>
     下拉列表：<select name="名称" selected="默认值">
               <option >内容</option>
            </select>
     文本框:<input type="text" name="名称" />
     密码框:<input type="password" name="名称" />
     单选框:<input type="radio" name="名称" />(设置name需相同  在同一个form下)
     多选框:<input type="checkbox" name="名称" />(设置name不能相同)
     提交按钮:<input type="submit" name="名称" />
     重置按钮:<input type="reset" name="名称" />
     图像按钮:<input type="image" name="名称" />
     普通按钮:<input type="button" name="名称" />
     maxlength:可以限制输入的字符数。readonly:设置只读文本。
表格标签：<table border="边框宽度" width="宽度" cellpadding="填充" cellspacing="间距" bordercolor="边框颜色" bgcolor="背景颜色">
   <caption align="top"><h1><font
color="red">商品简介</font></h1></caption>确定题注位置，必须包含在
table内且必须紧跟在table开始标记之后。
   <colgroup><col span="列数" /><col span="1" /></colgroup>跨列修饰
    <tr>行元素
       <td>商品</td>列元素
    </tr>
   </table>
     创建不规则表格：colspan:水平跨列，rowspan:垂直跨行。只能出现在td或th中。
热点区域：<map></map>.
     <img src="图像地址" usemap="(映像名，需与name名相同。)#ditu" />
       <map name="ditu">
          <area shape="图形名称(rect:矩形/circ:圆形/poly:多边形)" coords="热点的坐标范围：343,155,371,175" href="http://www.kuaibo.com" />
       </map>
div层和列表：<div></div>（块级元素，容器，占用资源）:属性:position:absolute绝对定位/position:relative相对定位。{图层 （浮动、广告）}
     <span ></span>:设置同一行文字的不同格式。
     定义列表：<dl>
                <dt>名称<dd>说明文字
            </dl>
     无序列表：<ul>
                <li>名称</li>
            </ul>

有序列表：<ol>
                <li>名称</li>
            </ol>

目录列表：<dir>
                <li>名称</li>
            </dir>

菜单列表：<menu>
                <li>名称
            </menu>
}
-------------------------------------------------------------------------------------------------------------------
css：层叠样式表，级联样式表，简称样式表。
链入外部样式：<link rel="stylesheet" type="text/css" href="样式表文件的地址" />
css伪类：（必须写在style标记之内）
     <style type="text/css">
          a:link{未访问过的链接};
          a:hover{鼠标经过时};
          a:active{鼠标点击不松开时};
          a:visited{已访问过的链接};
     </style>
设计列表样式：list-style-type:disc(列表符号位黑圆点)/circle(空心圆点)
添加列表图像：list-style-image:none(不适用图像符号)/url（指定图像路径）
调整列表位置：list-style-position:outside(不向内缩进，默认值)/inside(向内缩进)
清除：clear:left(不允许某元素的左边有浮动元素）/right(不允许某元素的右边有浮动元素)/both(某元素的左右两边都不允许有     浮动元素)/none(某元素的左右两边都允许有浮动元素)
设置层空间：z-index:数字（z-index要与position:absolute配合使用）
设置层裁切：clip:rect(裁切的矩形四个顶点，上右下左)
-------------------------------------------------------------------------------------------------------------------
js(javascript):一种基于对象和事件驱动的解释性脚本语言(逐行翻译)。
脚本数据类型：数字类型：number
           字符串类型:string
           布尔类型:boolean
           未定义:undefined
           空:null
           数组:array
           对象:object
内置对象：<script type="text/javascript">
     var str = "welcomeo JoCXY";
     //alert(str.substring(str.indexOf("c"),str.lastIndexOf("e")+1));

//alert(str.substring(0,str.lastIndexOf("o")) + "a" + str.substring(str.lastIndexOf("o")+1,str.length));
//String对象
          //小写转换
                    //alert(str.toLowerCase());
          //大写转换
                    //alert(str.toUpperCase());
          //获取指定位置字符[从0开始.]
                    //alert(str.charAt(5));
          //获取指定位置字符编码
                    //alert(str.charCodeAt(5));       
          //正向索引位置
                    //alert(str.indexOf("m"));
          //反向索引位置
                    //alert(str.lastIndexOf("o"));
          //获取匹配字符串[若没有匹配的字符串则返回null.]
                    //alert(str.match("come"));
          //获取匹配字符串的首字母索引
                    //alert(str.search("JoCXY"));
          //截取[从第3个字符开始截取,截取了4个字符.]
                    //alert(str.substr(3,4));
          //截取[从第3个字符开始截取,截取到第4个字符结束.]
                    //alert(str.substring(3,4));
          //截取[同substring相同.可使用负数]
                    //alert(str.slice(-4))；//从-4位开始截取,截取到最后一位
                    //alert(str.slice(-4,-1));
          //替换
                    //alert(str.replace(str.substring(str.lastIndexOf("o")),"a"));
                   
                   
          //分割
                    //alert(str.split("o"));
          //连接
                    //alert(str.concat(3,4,5));
//Array对象
          //定义数组方式
               /*var arr = new Array();

var arr = new Array(3);
               arr[0] = "lan";
               arr[1] = "tian";
               arr[2] = 222;
               alert(arr[2]);*/

/*var arr = new Array(22,234,"lan",true);
               for(a = 0;a < 4;a++){
                    alert(arr[a]);
               }*/
//定义二维数组
               /*var arr = new Array(3);
               for(var a = 0;a < 3;a++){
                    arr[a] = new Array(2);
                         for(var b = 0;b < 2;b++){
                         arr[a][b] = a * b;    
                         }
               }*/
               //alert(arr);//0[第0行第1列],0[第0行第2列],0[第1行第1列],1[第1行第2列],0[第2行第1列],2[第2行第2列]
               //alert(arr[2][1]);//输出第三行第一列的内容
              
  //定义数组
       var arr = new Array(21,12,"lan","tian");
       //连接[自定义]
               //alert(arr.join("-"));
       //连接[逗号]
               //alert(arr.toString());
       //连接[添加新数组]
               //alert(arr.concat(2,21,2));
       //反向数组
               //alert(arr.reverse());
       //将数组排序,并将结果保留到原数组中
               //alert(arr.sort());
       //截取
               //alert(arr.slice(0,1));
       //对指定位置进行删除和插入
               /*arr.splice(2,1,3);
               alert(arr);*/
       //进出栈操作[插入.删除操作]
               //数组末端插入
                    /*arr.push("火",7,"凤凰");
                    alert(arr);*/
               //数组末端删除
                    /*arr.pop();
                    arr.pop();
                    alert(arr);*/
               //数组首端插入
                    /*arr.unshift("战");
                    alert(arr);*/
               //数组首端删除
                    /*arr.shift();
                    alert(arr);*/
//Math对象
          //1~10随机数
                 //alert(Math.random()*10);
          //四舍五入成整数
                 //alert(Math.round(Math.random()*10));
//Date对象
          var date = new Date();
   //获取日期和时间
          //获取当前时间
               alert(date.toLocaleString());
          //获取年份数
               //alert(date.getFullYear());
          //获取月份数[月份数从0开始.]
               //alert(date.getMonth());
          //获取月天数
               //alert(date.getDate());
          //获取星期天数
               //alert(date.getDay());
          //获取小时数
               //alert(date.getHours());
          //获取分钟数
               //alert(date.getMinutes());
          //获取秒数
               //alert(date.getSeconds());
          //获取毫秒数
               //alert(date.getMilliseconds());
          //获取
               //alert(date.getTime());
     //设置日期和时间
          //设置年份
               /*date.setFullYear(2014);
               alert(date);*/
          //设置月份
               /*date.setMonth(6);
               alert(date);*/
          //设置月天数
               /*date.setDate(6);
               alert(date);*/
          //设置小时数
               /*date.setHours(06);
               alert(date);*/
          //设置分钟数
               /*date.setMinutes(06);
               alert(date);*/
          //设置秒数
               /*date.setSeconds(06);
               alert(date);*/
          //设置毫秒数
               /*date.setMilliseconds(2014);
               alert(date);*/
          //使用毫秒数设置date对象,并返回date
               /*date.setTime(2014);
               alert(date);*/
         
          //返回本地时间与用UTC表示当前日期的时间差,以分钟为单位.
                    /*date.getTimezoneOffset();
                    alert(date);*/
          //返回date对象的世界标准时间(UTC)的字符串表示.
                    /*date.toUTCString();
                    alert(date);*/
          //根据本地时间格式,把date对象转换为字符串.
                    /*date.toLocalString();
                    alert(date);*/
          //解析一个日期的字符串.
                    /*Date.parse();
                    alert(date);*/
          //返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数
                    /*Date.UTC();
                    alert(date);*/
              
/*验证E-Mail地址
     [A."@"不能是第一个字符;
     B."."必须在"@"之后;
     C."."不能是最后一个字符;
     D."@"不能与"."相邻;
     E."@"之前的字符不能超过20个.]*/
          /*var str = "students@jcxy.org";
          var a = str.indexOf("@");
          var b = str.indexOf(".");
         
          if(a != 0 && a < b && b != length-1 && b - a > 1 && a>0&&a<21){
               alert("邮箱地址格式正确");
               }else{alert("邮箱地址格式错误");}*/

//冒泡排序
          /*var arr = [100,36,23,188,7,56,18,99]
          for(var i = 0;i < arr.length;i++){
               for(var a = 0;a < arr.length - 1;a++){
                    if(arr[a] > arr[a + 1]){
                    var b = arr[a];
                    arr[a] = arr[a + 1];
                    arr[a + 1] = b;
                    }
                   
                    }
               }
          for(var i in arr){
                    document.write(arr[i] + "&nbsp;");
          }*/

//比较日期大小
               var date1 = "2013-12-27";
               var date2 = "2013-6-1";
               //创建日期格式
               var a = new Date(date1.split("-")[0]+"/"+date1.split("-")[1]+"/"+date1.split("-")[2]);
               alert(a.getTime());
               var b = new Date(date2.split("-")[0]+"/"+date2.split("-")[1]+"/"+date2.split("-")[2]);
               alert(b.getTime());
               if(a > b){
                    alert(a);
               }else{
                    alert(b);
               }
  </script>
-------------------------------------------------------------------------------------------------------------------
DHTML：定时器：周期性执行定时器：timerID = setInterval停止启动的定时器clearInterval(timmerID)
            一次性执行定时器：timerID = setTimeout停止启动的定时器clearTimeout(timmerID)
窗口大小和位置：window.moveTo(x,y)移动窗口到指定位置，单位为像素。
          window.moveBy(x,y)向右移动x像素，向下移动y像素。参数为负数时表示反方向移动。
          window.resizeTo(width,height)调整窗口大小为指定大小。
          window.resizeBy(x,y)放大或缩小，参数为负数时表示缩小。

=============
Cookie

var time = new Date();
var t = time.getTime()

 

==================

内置对象：
History对象------------------------------------------------------------------------------
history.length:属性。用来记录istory中缓存了多少个URL。
history.back():方法。返回上一页。
history.forward():方法。前进一页。
history.go(num):方法。前进或后退指定的页数。当参数num大于0时，表示前进多少页。反之则为后退。参数等于0时表示刷新当前页面。
window对象---------------------------------------------------------------------------------
window.open(url,name,config){打开新窗口。URL为打开的超链接地址。name为窗口名称。config为配置参
数：menubar--菜单条，toolbar--工具条，location--地址栏，directories--链接，status--状态
栏，scrollbars--滚动条，resizeable--可调整大小。参数值均为“yes”或“no”}
window.close():关闭窗口。
对话框================alert--提示框，confirm(str)--确认框，prompt(str,value)--确认框。
状态栏================window.status=str。
滚动条================window.scrollTo(x,y)--一次性滚动窗口到指定位置，单位为像素。window.scrollBy(ax,ay)--从当前位置开始，向右滚动ax像素，向下滚动ay像素。
document对象-------------------------------------------------------------------------------
document.forms[]集合属性：form对象数组，存放文档中所有表单。
document.images[]集合属性：image对象属性，存放文档所有照片。
document.getElementById()方法：对拥有指定id的对象的引用。
document.getElementsByName()方法：对拥有指定name的对象的引用。
document.getElementsByTagName()方法：对拥有指定标签的对象的引用。
对象事件-----------------------------------------------------------------------------------
鼠标事件：onclick--单击，ondblclick--双击，onmousedown--鼠标按下，onmouseup--鼠标弹起，onmouseover--鼠标移入，onmouseout--鼠标移出。
键盘事件：onkeypress--按过键盘，onkeydown--键盘按下，onkeyup--键盘弹起。
状态事件：onload--文档家在完毕，onunload--退出文档，onchange--值发生变化，onfocus--获得焦点，onblur--失去焦点，onresize--调整窗口大小，onsubmit--表单提交。
JS高级技巧总结
===================================================================================================
错误处理：Error对象-- 基本语法：例：
var lan = 7;
try{
     document.write(lan);//执行代码
}
catch(e){//参数e为Error错误对象。
     document.write("错误代码："+(e.number&0xffff)+"<br
/>");//&0xffff代表将e.number与之位与操作，因为e.number是一个32位的二进制的数字，而只有低16位是真
正的错误代码，而我们需要将低16位二进制码转换成10进制的错误码。
     document.write("错误message："+e.message+"<br />");
     document.write("错误description："+e.description+"<br />");//错误处理
}
finally{
     alert(lantian);//最终执行代码，可省略。
}
=====================================
ActiveX对象：浏览器插件。-- FileSystemObject:文件系统对象。---------------------------------------------------------------------
创建文件系统对象的语法为：var fso = new ActiveXObject("Scripting.FileSystemObject");
创建文件（文件夹）语法：
function fun(){
          var fso =new ActiveXObject("Scripting.FileSystemObject");
          var fldr = fso.CreateFolde(document.form1.txt.value);
          /*CreateFolde：创建文件夹。CreateTextFile：创建文件。*/
     }
Driver对象--------------------------------------------------------------------------------
VolumeName--磁盘的卷标。DriverLetter--磁盘代号。SerialNumber--磁盘序列号。DriverType--磁盘种
类【1--移动磁盘。2--本地磁盘。3--网络磁盘。4--光驱。5--其他。】FileSystem--磁盘使用的文件系统。TotalSize--
磁盘的使用空间，返回字节数。FreeSpace--磁盘的可用空间，返回字节数。
Folder对象---------------------------------------------------------------------------------
fso.CreateFolder--创建文件夹。fso.DeleteFolder--删除文件夹。fso.MoveFolder（指定文件夹，指定路
径）--移动文件夹。fso.CopyFolder（源文件夹的路径，指定复制路径）--复制文件夹。fldr.Name--获取文件夹的名字（属性）。
fso.FolderExists--检查文件夹是否存在。fso.GetFolder--获得Folder对象。
fso.GetParentFolderName--查找父文件夹名字。
File对象-----------------------------------------------------------------------------------
Name--文件名。Type--文件类型。Path--完整文件路径。Attributes--文件属性。DateCreated--创建日期。
DateLastAccessed--最后访问日期。DateLastModified--最后修改日期。Size--文件大小。
创建文件语法----fso.CreateTextFile()。
打开文件语法----fso.OpenTextFile()。
读取文件方法===================
fo.Read(charNum)--从文件当前位置读取charNum个字符。
fo.ReadAll()--从文件对象fo读取全部内容。
fo.ReadLine--从文件读取一行。
fo.Skip(charNum)--读取文件时跳过charNum个字符。
fo.SkipLine()--文件当前位置跳到下一行。
写入文件方法====================
fo.Write(string)--向打开的文件写入字符串string。
fo.WriteBlankLines(lineNum)--写入lineNum个换行符。
fo.WriteLine(string)--写入字符串string再加上换行符。

==============================================

块元素(block element)

◎ address - 地址

◎ blockquote - 块引用

◎ center - 居中对齐块

◎ div - 常用块级容易，也是css layout的主要标签

◎ fieldset - form控制组

◎ form - 交互表单

◎ h1 - 大标题

◎ h2 - 副标题

◎ h3 - 3级标题

◎ h4 - 4级标题

◎ h5 - 5级标题

◎ h6 - 6级标题

◎ hr - 水平分隔线

◎ isindex - input prompt

◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）

◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

◎ p - 段落

◎ pre - 格式化文本

◎ table - 表格

◎ dl - 定义列表

◎ dir - 目录列表

◎ ol - 排序表单

◎ ul - 非排序列表（无序列表）

◎ menu - 菜单列表

内联元素(inline element)

◎ a - 锚点

◎ abbr - 缩写

◎ acronym - 首字

◎ b - 粗体(不推荐)

◎ bdo - bidi override

◎ big - 大字体

◎ br - 换行

◎ cite - 引用

◎ code - 计算机代码(在引用源码的时候需要)

◎ dfn - 定义字段

◎ em - 斜体强调

◎ font - 字体设定(不推荐)

◎ i - 斜体

◎ img - 图片

◎ input - 输入框

◎ kbd - 定义键盘文本

◎ label - 表格标签

◎ q - 短引用

◎ s - 中划线(不推荐)

◎ samp - 定义范例计算机代码

◎ select - 项目选择

◎ small - 小字体文本

◎ span - 常用内联容器，定义文本内区块

◎ strike - 中划线

◎ strong - 粗体强调

◎ sub - 下标

◎ sup - 上标

◎ textarea - 多行文本输入框

◎ tt - 电传文本

◎ u - 下划线

◎ var - 定义变量