html大全
1.HTML简介
{
HTML(HyperText?Markup?Language)就是描述网页长什么样子、有什么内容的一个文本。
}
2.HTML的基本格式
{
<html>
<head>
<title>我的第一个网页</title>
</head>
<body bgcolor="red" background="bg.jpg">
Hello world
</body>
</html>
}
3.HTML里的标签
{
<html>
(1)H标签，HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。其中<H1>最大字体。
(2)BR标签，只是回车正常用在需要回车的地方的后面打上<br> 不需要</br>
(3)P标签，<p>是分段。<p>前后会有比较大的空白，而<br>则没有。
(4)位置标签 <center>传智播客</center>居中显示 <left></left>靠左 <right></right>靠右
(5)B标签，<b>和</b>表示标签之间的字加粗显示。
(6)I标签，<i>和</i>表示标签之间的字为斜体显示。
(7)Font标签 ,<font></font>是字体标签，在里面可以设置color,size,face等属性
<font color="red" size="30">我是Font标签</font>
(8)特殊字符HTML中<、>是有特殊含义的、空格是不会被显示的，所以需要特殊符号，相当于C#中的'\n'转义符。
<（小于号，less than）；
>（大于号，greater than）；
（空格，no-break space）
(9)HR标签 ，在HTML中 <hr> 为分隔符（水平线），可以设置width,color,size,align 等属性
<hr width="300px" color="red" size="10px" align="left">
(10)Pre标签，预格式化，在<pre>和</pre> 之间的内容，全部按照你在设计时的格式显示出去
</html>
(11)关于HTML注释<!-- 这期间可以添加注释 -->
}
4.URL、超链接
{
(1)URL：URL表示资源在网络中的地址，比如 http://127.0.0.1/a.htm、ftp://192.168.88.128/b.zip。
(2)超级链接：<a href="http://www.rupeng.com">如鹏网</a>。
中还可以嵌套图片，这样就是点击图UR片打开连接
<a href="http://www.rupeng.com"><img src="http://www.rupeng.com/forum/templates/uchome/images/logo.gif"/></a>
}
5.路径
{
(1)绝对路径
绝对路径就是物理路径，
在herf里面写上全路径
<a herf="C:\Users\Avraber\Desktop\20120718\123.htm"></a>
(2)相对路径 相对URL表示相对于当前文档的资源，“/”表示网站根目录，“../”表示父目录，“http://www.cnblogs.com/”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录。在文件夹里就写 ./123/test.xml
站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。
<a href="a.htm"><img src="a.jpg"/></a>
<img src="../images/csharp1.jpg" />
<img src="http://images.cnblogs.com/csharp1.jpg" />
将<a>的target属性设定为"_blank"就可以在新窗口中打开超链接。国情：国内的网站很多都是默认在新窗口中打开。
<a target="_blank"></a>
(3)锚记
用name属性为<a> 起名字：<a name="Last">这里是最后</a>。这样可以通过<a href="#Last">转到平台</a>来跳转到超链接的部分。
案例：去往评论、回到正文
}
6.图片
{
(1)<img src="a.jpg"/>注意图片是链接的，不是插入的，所以如果Src指向的文件不存在了，就看不了了
关于图片的几个属性
(2)Alt属性：alt属性为图片无法显示时的显示文本，鼠标方式去也会有悬浮提示“点击查看大图”；
(3)border属性：border属性指定边框，border="0"不显示边框；
(4)width、height属性：最好指定width、height，哪怕是原始尺寸大小，因为如果不指定大小，图片会不占位置，图片下载后才调整大小，会造成页面很乱。如果指定了width、height哪怕图片没有加载完成，也会先把位置占上。
}
7.列表
{
(1)无序列表
列表的格式为<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
可以再列表里面设置属性来控制前面显示的内容 Type = disc, circle, square
(2) 有序列表<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ol>
可以再列表里面设置属性来控制前面显示的内容 Type= 1,a,A,I,i
}
8.表格
{
表格：<table></table>为表格，在内部通过<tr>创建行，<tr>内部通过<td> 创建单元格。
可以将table的border属性设为0来隐藏表格线。
<table>
<td>
<tr>
</tr>
<tr>
</tr>
</td>
</table>
(1)填充间距
cellpadding内容和表格边线之间的距离 cellspacing单元格之间的间距
(2)<tr>的属性：
align，水平对齐，可选值left、right、center；
valign，垂直对齐，可选值top、middle、bottom。
(3)<td>也有align和valign。
<tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>子标签默认继承父标签的属性，如果自己单独指定了属性，则会覆盖父标签的属性。
(4)
可以使用rowspan(合并行）、colspan(合并列）进行单元格的合并
<BODY>
<table border="1px" bordercolor="red" cellspacing="0px" cellpadding="5px" width="500px" height="200px">
<!--table row-->
<tr>
<!--单元格-->
<th colspan="2">姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<!--单元格-->
<td valign="bottom" rowspan="3">刘备</td>
<td>男</td>
<td>20</td>
<td>100</td>
</tr>
<tr>
<!--单元格-->
<td>男</td>
<td>20</td>
<td>100</td>
</tr>
<tr>
<!--单元格-->
<td>男</td>
<td>20</td>
<td>100</td>
</tr>
</table>
</BODY>
}
9.表单
{
(1)<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、<textarea>、<select>等表单元素放到form中。
<form action="url" method=GET, POST >
...
...
<input type=submit> <input type=reset>
</form>
(2)Input
是主要的表单元素，type的可选值：
(2.1)text（文本框）
size属性为宽度，value为值，maxlength为可以输入的最大长度，readonly只读。disabled为不可填写
<input type="text" readonly/>
(2.2)password（密码框）
size属性为宽度，value为值，maxlength为可以输入的最大长度，readonly只读。disabled为不可填写
<input type="password" />
(2.3)radio（单选按钮）
相同name属性的为一只有组，不同radio设定不同的value值，这样通过取指定name的值就可以知道谁被选中了，不用单独的判断。
checked为默认选中，value为真实值，用来查询
<input type="radio" name="sex" value="male" checked="checked">男
<input type="radio" name="sex" value="female" >女
<input type="radio" name="sex" value="unknow">未知
(2.4)checkbox（复选框）
checked属性表示是否被选中，可以设定不同的name和value ,可以设定
<td>爱好：</td>
<td>
<input type="checkbox" value="cf" checked="checked">吃饭
<input type="checkbox" value="sj" checked="checked">睡觉
<input type="checkbox" value="ddd" checked="checked">打豆豆
</td>
(2.5) file（文件选择框）
使用file，则form的enctype必须设置为multipart/form-data、method属性为POST（*）
<input type="file">
(2.6)submit（提交按钮）,button（普通按钮）,reset（重置按钮）,image（图片按钮）
<input type="button" value="注册" > 普通按钮
<input type="submit" value="注册"> 可以转到设定的action="url"页面
<input type="reset" value="重置"> 重置页面为默认页面
<input type="image" src="btn.JPG"> 图像按钮，也是普通按钮，不过样子是一个图像
(2.7）hidden（隐藏字段）
隐藏字段，内容不可见
<input type=hidden name=add value=hoge@hoge.jp>
（3）关于Label的用法，设定id属性的值 ，然后通过<label for="值"> 文字</label> 来使用
但是单击修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修饰的控件的id，<label for="txt1" >asdfad</label>
(3.1)
设定快捷键，例子中设定快捷键f来快速切换到密码框，CTRL+F
<tr>
<td><label for="txtPwd" accesskey="f">密码：</label></td>
<td>
<input id="txtPwd" type="password" >
</td>
</tr>
(3.2)点击文字则选中复选（单选）框
<input id="chk1" type="checkbox" value="sj" checked="checked"><label for="chk1" accesskey="s">睡觉</label>
(4).<select>标签
用来创建类似于WinForm中的ComboBox或者ListBox
(4.1)如果size属性大于1就是ListBox（size的值为显示出来的列表数量）， <select name=*>
否则就是ComboBox。 <select size=**>
<select multiple>或者<select multiple="multiple">（推荐），那么就是可以多选的ListBox。
<select size=** multiple>
注意，是用 Ctrl 键配合鼠标实现多选。
(4.2)select中的项是<option>，
<option>北京</option>还可以设定项的值<option value="1">北京</option>。
(4.3)将一个option设置为选中：<option selected>333</option>或者<option selected="selected">333</option>
(推荐)就可以将这个项设定为默认选择项
(4.4)如何实现“不选择”，添加一个<option value="-1">--不选择--<option>，然后编程判断select选中的值如果是-1就认为是不选择。
select分组选项，可以使用optgroup对数据进行分组，分组本身不会被选择，无论对于下拉列表还是列表框都适用。备注
(5)<textarea>多行文本（也是表单元素）
<textarea>文本</textarea>，cols、rows属性表示行数和列数。
<textarea rows="15" cols="30">asdfasfd</textarea>
注意<textarea>1231</textarea>之间的是多行文本里面显示的内容，加了空格或者转行也会显示空格
}
10.meta标签
{
<meta>有指定name和指定http-equiv两种用法，<meta name="名字" content="值" />、<meta http-equiv="名字" content="值" />两种用法。前者是给搜索引擎看的，后面的实现功能
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码
<meta http-equiv="Refresh" content="3" /> 三秒钟后刷新此网页。
<meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" /> 三秒钟后重定向到新网页。发帖成功后提示“发帖成功，即将转向帖子查看页面”。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。
}
11.DIV和Span
{
(1)
层：<div></div>将内容放到层中，就以将这些内容当成一个整体进行处理，比如整体隐藏、整体移动等。div非常强大和常用。类似于WinForm的Panel。
(2)span：div是将内容放到一个矩形的区块中，会影响布局，而span只是把一段内容定义成一个整体进行操作，但不影响布局、显示。
}
12.CSS样式
{
CSS（层叠样式表）是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面嵌入和外部引用三种使用方式。CSS是描述元素的皮肤！
(1)元素内联（行内样式），直接将样式写入元素的style属性中，<input type="text" readonly="readonly" style="background-color: #FF00FF" />，适用于样式没有可复用性的场合。
(2)
页面嵌入：在head中加入
<style type="text/css">
input{border-color:Yellow;color:Red;}
</style>
表示页面中所有input都是采用指定的样式。适合于样式复用，减小页面体积
(3)
外部引用，将css内容写入css后缀的文件
textarea{background:yellow}
然后在页面中引用，在head中加入
<link type="text/css" rel="Stylesheet" href="s1.css" />
适合于多个页面共享css。
可以以拖页面的方式来快速引用
}
13.样式属性
{
(1)css计量单位：css中表示宽度、距离时有多种计量单位：px（像素）、30%（百分比）、em（相对单位）等。width:20px。
(2)
background-color:Red;背景颜色；color：文本颜色
background-image:url(images/bg.jpg)背景图片
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数：
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
background-position：设置或检索对象的背景图像位置
(3)
text-decoration :
检索或设置对象中的文本的装饰。 none || underline || blink || overline || line-through
参数：
none : 无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
复合样式 background border
(4)
border:solid 1px red
border-style:solid;边框风格，实线solid（默认是没有），还有dotted(点)等值；border-color：边框颜色；border-width：边框宽度(默认是0)。例子：style="border-color:Red;border-width:1px;border-style:dotted;"
(5)
display：元素是否显示，可选值none（不显示,不占地儿）、block （显示为块级元素，此元素前后会带有换行符。）、inline（显示为内联元素，元素前后没有换行符 ）等。
(6)
cursor，鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、help（帮助）等。还可以通过cursor:url(dinosau2.ani)使用ani、cur格式的自定义光标图片。
(7)
LI不显示圆点：LIST-STYLE-TYPE: none;一般设在li或者ul上
}
14.盒子模型
{
在CSS中，如DIV DIV边框与页面之间有边距，为
margin
而DIV里面的元素与DIV边框的间距为padding
border则为边框
div
{
width:200px;
height:200px;
background-color:Red;
margin-bottom:10px;
padding:10px 50px;
filter:alpha(opacity=50);设置或检索对象所应用的滤镜效果。这里设置不透明度为50%，只支持IE
要使用该属性，对象必须具有height，width，position三个属性中的一个。
opacity:0.5;
在其他游览器设置该属性，能达到不透明度为50%的效果
}
}
15.样式选择器
{
(1)标签选择器，对于指定的标签采用统一的样式
如争对input标签
input
{border-color:Yellow;color:Red;}
(2)class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格
.warning{background:Yellow;}
.highlight{font-size:xx-large;cursor:help;}
<table><tr><td class="highlight">aaa</td><td class="warning">bb</td><td class="highlight warning">ccc</td></tr></table>
当多个类样式中 有冲突依然是就近原则
(3)标签+class选择器
class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。
input.accountno{text-align:right;color:Red;}
label.accountno{font-style:italic;}
<input class="accountno" type="text" value="111111111111111" />
<lab
el class="accountno">333333333333333333</label>
(4)
id选择器
为指定id的元素设定样式，id前加#
#username
{
font-size:xx-large;
}
<input id="username" type="text" value="aaaaaaaaaaaa" />
id选择器要指定一个内容时需要嵌套，如
#1 #2 #3 则针对#1里面的#2里面的#3进行设定
(5)
style、class可以同时组合使用
<input id="username" class="accountno" style="font-size:xx-large" type="text" value="aaaaaaaaaaaa" />
(6)
更多选择器(*)
*
{
这里设定的内容可以应用于全局
}
*
{
margin:0px;
padding:0px;
}
去除全局的边框之间距离，元素和边框的距离
(7)
包含选择器：
P strong{ background-color:Yellow}
表示P标签内的strong标签内的内容使用的样式
<strong>fadsfasdfads</strong>
<p><strong>adfasfd</strong></p>
(8)
组合选择器，同时为多个标签设定一个样式
H1,H2,input{background-color:Green}
<h1>nihao</h1>
<input type="text" value="test" />
(9)
伪选择器
伪选择器：为标签的不同状态设定不同的样式：
A:visited：超链接点击过的样式；A:active：选中超链接时的样式；A:link：超链接未被访问时的状态；A:hover：鼠标移到超链接时的状态。
A:visited {TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:link {TEXT-DECORATION: none}
A:hover {TEXT-DECORATION: underline}
使用时有顺序之分，遵守 LoVe HAte
说明：TEXT-DECORATION: none表示超链接不显示下划线。
}
16细边框表格
{
设置了表格的border=“1px” 因为表格边线有重叠，所以表格的边线显示比较粗。
可以使用css去重重叠
(1)
使用css 先给Table加上1px的border- bottom,border- right
再给td加上1px的border- left,border- top
(2)
border-collapse:collapse;
设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
这里的属性为相邻边被合并
使用ul和li制作横向和纵向菜单
见代码
布局最重要的一个属性就是float
}
17.网页布局
{
(1)框架布局
Frameset 框架页里不能有body
<frameset rows="30%,70%" >
<frame src="top.htm" noresize/>
<frameset cols="20%,80%">
<frame src="left.htm" noresize/>
<frame src="main.htm" noresize/>
</frameset>
</frameset>
iframe
<iframe src="iframe.htm" name="0" width="0" height="0"></iframe>
(2)表格布局
(3)DIV+CSS布局
网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”。
不要使用table进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真实表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。
Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。
详见代码
}
18文档流
{
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。
(1)position:absolute;绝对定位,
即完全脱离文档流相对于position属性非static值的最近父级元素进行偏移,窗口移动相对屏幕的话会移动
absolute不占原来的位置，后面的DIV会把这个位置顶替掉
position:absolute;
z 轴 ，值越大，在屏幕最前，必须脱离文档流
z-index:100; 这时，脱离文档流的这个DIV显示在最前面
(2)position:relative;相对定位,
这个属性值保持对象所在文档流中的位置，相对于元素在文档流中位置进行偏移. 但保留原占位.可以设置top, left, right, bottom定位
relative占原来的位置，
(3)position:fixed;固定定位,即完全脱离文档流, 相对于视区进行偏移.
，比如常见的右下角广告小窗口
position:fixed;
bottom:0px;
right:0px;
position:static; 默认值 文档流
}
19.JavaScript概念
{
(1)JavaScript是一种脚本语言。
脚本，一条条的文字命令。执行时由系统的一个解释器，将其一条条的翻译成机器可识别的指令，然后执行。常见的脚本：批处理脚本、T-SQL脚本、VBScript等。
(.net生成的exe文件用记事本打开看不懂。它是整体预编译然后再执行的)
(2)JavaScript代码放到<script>标签中，script可以放到<head>、<body>等任意位置，而且可以有不止一个<script>标签。默认值就是当前时间。JS是大小写敏感的。
放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>是随着页面的加载而一个个执行的。
(3)JavaScript是弱类型语言（声明变量都用var），不存在int n=10;string s=“a”;的情况，所有变量都用var。因为是“动态类型”，所以下面这段代码是合法的：var n=10;n=“a”;
(4)
Js的注释，与C#、Java的相同（//单行注释、/* 多行注释 */）。
(5)JavaScript中也有事件的概念，当按钮被点击的时候也可以执行JavaScript：
<input type="button" onclick="alert(99)" value="久久"/>
只有超链接的href中的JavaScript中才需要加“”javascript:”，因为它不是事件，而是把“”javascript:”看成像“http:”、“ftp:”、“thunder:/
}
20.JavaScript语法
{
(1)变量声明：JS中所有的变量声明都用var
而在C#中var是类型推断，必须定义变量时赋值。
变量使用前可以不用var声明，这样的变量会变认为是“全局变量”（不推荐）
JavaScript中即可以使用双引号声明字符串，也可以使用单引号声明字符串。主要是为了方便和html集成，避免转义符的麻烦。
alert(typeof(str))
(2)JavaScript中的null与undefined
(2.1)undefined,表示一个未知状态
声明了但是没有初始化的该变量，变量的值是一个未知状态(undefined)。?（访问不存在的属性或对象window.xxx）
方法没有明确返回值时，返回值是一个undefined.
当对未声明的变量应用typeof运算符时，显示为undefined（*）
(2.2)
ull表示尚未存在的对象,null是一个有特殊意义的值。可以为变量赋值为null，此时变量的值为“已知状态”(不是undefined)，即null。（用来初始化变量，清除变量内容，释放内存）
(2.3)
始化变量，清除变量内容，释放内存）
undefined==null //结果为true,但含义不同。
undefined===null //false(*),先判断类型是否一致，然后判断值。
(2.4)
== 判断变量的值是否相等
=== 全等 ！== 值相等并且类型相同
(3)JS中的判断变量是否可用
JavaScript中判断已声明变量、参数是否初始化(可用)的方法：
假设已有变量x：
if (typeof(x) !=‘undefined’ && x!=null)
{ alert("可用"); }
可以简化写成
if(x)
{ alert(‘变量可用！’); } else { alert(‘变量不可用！’); } //null、undefined、’’、0都认为是false
当x声明但没有赋值，或x为null， undefined ，空字符串，或x为0时，都表示不可用！// if(x),返回false
推荐用最后一种方法。但如果x有可能没有声明，则只能用typeof判断（否则会报错）。
经常会遇到的一个场景：if语句的小括号中直接写一个变量。各种值与Boolean之间的关系。
(4)函数的声明
(4.1)JavaScript中声明函数的方式：
function add(i1, i2) {
return i1 + i2;
}
不需要声明返回值类型、参数类型。函数定义以function开头。
var r = add(1, 2);
alert(r);
调用方法时，不带（）时是直接输出整个方法的。
(4.2)JavaScript中不像C#中那样要求所有路径都有返回值，没有返回值就是undefined。
(5)arguments对象
(5.1)JavaScript中没有方法重载。
假如几个方法的方法名相同，则执行的事最后一个方法，不管在哪里调用的这个方法名字的方法，因为JS会先检查所有的方法。
(5.2)动态为方法传递参数，类似于.net中的params关键字作用
<script type="text/javascript">
function myFunc() {
for (var i = 0; i < arguments.length; i++) {
document.write(arguments[i]);
document.write('<br/>');
}
}
myFunc('张三', 18, '李四', 19);
</script>
(5)匿名函数
相当于 c#中的委托
var f1 = function(i1, i2) {
return i1 + i2;
}
alert(f1(1,2));
}
21.JS面向对象
{
(1)在JS中，函数就是对象，对象就是函数。
方法直接调用为函数，用new调用为对象。
JavaScript中没有类的语法，是用函数闭包（closure）模拟出来的。
(2)定义一个对象
function Person() { }
(3)使用一个对象
var p=new Person();
p.Name=‘张三’;//动态语言，所以可以直接写。
p.Age=30;
p.SayHello=function() { alert(‘Hi~’); }
alert(p.Name);
alert(p[‘Age’]);//另外一种动态访问属性的方式。
(4)使用对象的另一种方法，类似C#的构造方法
JavaScript同样支持this关键字
构建一个带参数的Person对象。通过this关键字为对象的属性赋值。
function Person(name, age) {
this.name = name;
this.age = age;
this.showInfo = function() {
alert('大家好，我叫' + this.Name + '，今年' + this.Age + '岁了。'); }}
var zjl = new Person('周杰伦', 20);
zjl.showInfo();
function Person(name,age)可以看做是声明构造函数，Name、Age这些属性也是使用者动态添加了。
new 相当于创建了函数的一个实例。
}
22.String对象
{
(1)
length属性：获取字符串的字符个数。（无论中文字符还是英文字符都算1个字符。）
var s = "11 22 33 99 3";
alert(str.length);
(2)
charAt(index)方法：获取指定索引位置的字符。（索引从0开始）
(3)
indexOf(‘字符串’,startIndex 或者lastIndexOf)方法：获取指定字符串第一次出现的位置。startIndex表示从第几个开始搜索。
(4)
split(‘分隔符’,limit);根据分隔符将一个字符串返回为一个数组。
(5)
substr(startIndex,len)从startIndex开始，截取len个字符。
(6)
substring(startIndex,stopIndex)从startIndex开始，截取到stopIndex位置（不包括stopIndex所在的字符）。
(7)
toUpperCase()转换大写
toLowerCase();转换小写
}
23.JS中的正则表达式
{
(1)
JavaScript中创建正则表达式类的方法：
var regex = new RegExp("\\d{5}")
或者 var regex = /\d{5}/
(2)
RegExp对象的方法：
（1）test(str)判断字符串str是否匹配正则表达式，相当于IsMatch
var regex = /.+@.+/;
alert(regex.test("a@b.com"));
alert(regex.test("ab.com"));
（2）exec(str)进行搜索匹配，返回值为匹配结果，没找到返回null(*)
var reg = /.+@.+/;
var a = reg.exec("123abc.com");
alert(a);
(3)
.string的正则表达式方法
String对象中提供了一些与正则表达式相关的方法，相当于对于RegExp类的包装，简化调用：
match(regexp)，相当于调用exec
var s = "aaa@163.com";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + "，服务器：" + RegExp.$2);
(4)
g 全局匹配
var str = "北京 北京 北京";
alert(str.replace(/北京/g, "邯郸"));
i 忽略大小写
gi 全局 忽略大小写
var s = "AAAAbbaa";
alert(s.match(/a+/gi));
}
24.Array对象
{
(1)
JavaScript中的Array对象就是数组，首先是一个动态数组，而且是一个像C#中数组、ArrayList、Hashtable等的超强综合体。
var names = new Array();
names[0] = "tom";
names[1] = "jerry";
names[2] = "lily";
for (var i = 0; i < names.length; i++) {
alert(names[i]);
}
(2)
简化赋值var arr = [‘China’, 2008, true, ‘Hello’];
无需预先制定大小，动态。
(3)
JS中的Array是一个宝贝，不仅是一个数组，还是一个Dictionary，还是一个Stack。
var pinyins = new Array();
pinyins["人"] = "ren";
pinyins["口"] = "kou";
pinyins["手"] = "shou";
alert(pinyins["人"]);
alert(pinyins.人);
像Hashtable、Dictionary那样用，而且像它们一样效率高。
(4)对于数组风格的Array来说，可以使用join方法拼接为字符串
var arr = ["tom","jim","lily"];
alert(arr.join(","));
JS中join是array的方法，不像.Net中是string的方法
}
25.Json对象
{
(1)
对象是一个无序的“‘名称/值’对”集合。
一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
(2)
定义个简单的Json
var json = { "name": "张三", "age": 18, "sex": "男" };
for (var key in json) {
alert(key + "==" + json[key]);
}
(3)
数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、?null、对象（object）或者数组（array）。这些结构可以嵌套。
}
26.遍历
{
for循环可以像C#中的foreach一样用
for循环还可以获得一个对象所有的成员，类似于.Net中的反射
for (var e in document) {
alert(e);
}
有了它没有文档也可以进行开发。
}
27.扩展方法
{
通过类对象的prototype设置扩展方法，下面为String对象增加quote（两边加字符）方法
String.prototype.quote = function(quotestr) {
if (!quotestr) {
quotestr = "\"";
}
return quotestr + this + quotestr;
};
alert("abc".quote()); alert("abc".quote("|"));
扩展方法的声明要在使用扩展方法之前执行。JS的函数没有专门的函数默认值的语法，但是可以不给参数传值，不传值的参数值
}
28.DOM
{
DOM就是Html页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。
DOM也像WinForm一样，通过事件、属性、方法进行编程。
//节点 node ：元素(标签) 文字 属性 注释
//元素 element : 标签
}
29.DOM事件
{
(1)DOM简介
{
<body onmousedown=“alert(‘别点我！’);”>//注意body的范围。
有时事件的响应代码比较多，就要放到一个函数中：
<script type="text/javascript">
function userMouseDown() {
alert('网页被你点坏了>_<~~,赔吧！');
alert('逗你玩呢~~');
}
</script>
<input type="button" value="按钮" onmousedown=“userMouseDown();" />
onmousedown=“userMouseDown();”中，
注意： userMouseDown后的括号不能丢（不能写成onmousedown=“userMouseDown” ），带()表示调用函数，直接写函数名表示设置事件的处理函数为userMouseDown。
}
(2)window对象(Dom中的一个顶级对象。)
{
window对象代表当前浏览器窗口。
使用window对象的属性、方法的时候可以省略window。
能不写window就不要写，这样可以减少js文件的字节数。
(2.1)
window.alert(‘大家好！’);//弹出警告对话框
(2.2)
window.confirm(‘确定要删除吗？’);//确定、取消对话框，返回true或false;
(2.3)
window.navigate(url);//将网页重新导航到url,只支持IE、Opera11.6,建议使用window.location.href=‘url’;//支持大多数浏览器
<input type="button" value="导航" onclick=" window.navigate('http://www.baidu.com');" />
(2.4)
window.setInterval(code,delay)//每隔一段时间执行指定的代码（类似于winForm中的Timer控件。）
第一个参数：指定的代码字符串
第二个参数：时间间隔（毫秒数）
var intervalId=setInterval(“alert(‘hello’);”,1000);
(2.5)
window.clearInterval(intervalId);//停止计时器
clearInterval()取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
(2.6)
setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。
var timeoutId = setTimeout("alert('hello')", 2000);
(2.7)
window.location对象：
window.location.href=‘’;//重新导航到新页面,可以取值，也可以赋值。
window.location.reload();//刷新当前页
}
}
30.body对象的事件
{
(3.1)onload（页面加载后触发）
网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成。
使用：
<body onload="test()">
window.控件Id（不建议使用）
document.getElementById(“控件Id”);(推荐)
}
31.其他事件
{
除了属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）、oncontextmenu（在浏览器中单击鼠标右键显示”右键菜单”时触发）等。
}
32Window.enen
{
(1) window.event是IE下非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArgs)。
window.event.
altKey属性，bool类型，表示事件发生时是否按下了alt键。类似的还有ctrlKey,shiftKey。演示：
if (event.altKey && event.ctrlKey) {
location.href = "04-跑马灯.htm";
}
(2)window.event的属性：
//鼠标在文档中的位置
//document.title = event.clientX + "==" + event.clientY;
clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY
//鼠标在屏幕中的位置
//document.title = event.screenX + "==" + event.screenY;
发生事件时鼠标在屏幕上的坐标；offsetX、offsetY
//相对于当前元素的偏移位置
//document.title = event.offsetX + "==" + event.offsetY;
发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
(3)
(window.event.returnValue)returnValue属性，如果将returnValue设置为false，就会取消默认行为的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。(onsubmit="window.event.returnValue=false;")
例子：
function turn(right) {
alert("111");
if (!right) {
//取消a标签的默认行为
window.event.returnValue = false;
}
<a href="http://www.cnbeta.com" onclick="turn(0)">cnbeta</a>
function check() {
if (document.getElementById("txt").value == "") {
alert("请输入用户名");
//取消submit的默认行为
window.event.returnValue = false;
}
}
<input type="submit" onclick="check()" />
(4)window.event的属性：
srcElement：获得事件源对象。几个按钮共享一个事件响应函数用。****_click(object sender,EventArgs e)
button，发生事件时鼠标按键，IE:1为左键，2为右键，s4中滑轮
除IE浏览器外，其他浏览器在绑定事件处理函数时，有一个默认的参数即event对象。
（*）screen对象，获取屏幕的信息：
alert("分辨率：" + screen.width + "*" + screen.height);
if (screen.width < 1024 || screen.height < 768) {
alert("分辨率太低！");
}
}
}
33.clipboardData对象
{
(1)setData("Text",val)，设置粘贴板中的值。
function share() {
var txt = t.value;
//设置粘贴板
window.clipboardData.setData("text", txt);
}
(2)getData(“Text”)读取粘贴板的值，返回值为粘贴板中的内容；
function copy() {
//获取粘贴板中的内容
var txt = clipboardData.getData("text");
t1.value = txt;
}
(3)clearData(“Text”)清空粘贴板；
(4)禁止复制和剪切！
<input type="text" value="" oncopy="alert('禁止复制');event.returnValue=false" oncut="event.returnValue=false"/>
(5)history操作历史记录。
window.history.back()后退；window.history.forward()前进。
window.history.go(-1)后退、window.history.go(1)前进
}
34.document对象
{
document的方法：
(1)write();向文档中写入内容。
writeln()，和write差不多，只不过最后添加一个回车。在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起。writeln()是在源代码里面换行。与<br/>不一样。
(2)getElementById(), （非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题（当元素放在form中的时候（在html页面中需要通过form.元素id）），因此不建议直接通过id操作元素，而是通过getElementById。
(3)getElementsByName()，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。
(4)getElementsByTagName()，获得指定标签名称的元素数组，比如getElementsByTagName(“p”)可以获得所有的<p>标签。*表示所有标签。
function bodyload() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
//判断是不是文本框
if (inputs[i].type == "text") {
inputs[i].value = i + 1;
}
}
}
}
35.事件冒泡
{
事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 验证：在页面上添加一个table、table里有tr、tr里有td，td里放一个p，在p、td、tr、table中添加onclick事件响应，
<table onclick="alert('table onclick');">
<tr onclick="alert('tr onclick');">
<td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td>
<td>bbb</td>
</tr>
</table>
取消事件冒泡： window.event.cancelBubble = true;//IE下的写法。
}
36.onload
{
1.二者效果完全一样,都是在页面内容都加载完毕后才触发。
2.由于网页中没有window所以在body中写onload
3.建议使用window.onload//使用js脚本的方式高效
4.其实应该是document.onload，但是所有浏览器都实现到了window对象上。
window.onload=function(){
}
}
37.this
{
事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用（这里的this表示window对象），如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象：事件冒泡。
<body onclick=“//这个叫做事件响应函数，在这里写this表示发生事件的控件。在这里调用另外一个函数F1,则F1中不能使用this表示发生事件的控件”>
}
38.动态创建DOM
{
document.write只能在页面加载过程中才能动态创建。
可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。
function showIt() {
var divMain = document.getElementById("divMain");
var btn = document.createElement("input");
btn.type = "button";
btn.value = "我是动态的！";
divMain.appendChild(btn);
}
<div id="divMain"></div>
<input type="button" value="ok" onclick="showit()" />
}
39.innerText和innerHTML
{
用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建。
function createlink() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "<a href='http://www.rupeng.com'>如鹏网</a>";}
innerText只能设置纯文本，即便写了html代码，也会对html代码进行编码，
innerHTML可以设置html代码和纯文本。
}
40.控制层的显示
{
(1) 默认的时候，假如不设定div1.style.display，alterc出来是为空
(2) div1.style.display = 'none'
设置层的隐藏
(3) div.style.display = "block";
设置层的显示
没有设置.style.display= "" ，会以id选择器设置的display为准
}
41.几个特殊事件
{
(1)onchange事件
文本改变时，并没有触发事件
只有当失去焦点的时候，才会触发事件。
(2)click()。
就是用代码来触发点击按钮的动作
var btn = document.getElementById("btn");
//相当于点击了一下按钮
btn.click();
(3)focus()
获得焦点的事件，如打开页面焦点自动在登陆框
var txt = document.getElementById("txtPwd");
txt.focus();
(4)blur();
失去焦点的事件
(5)submit()
提交表单事件，和blur()配合使用可以验证用户名是否已经存在
if (this.value != "") {
//表单自动提交
var form = document.getElementById("f1");
//表单自动提交
form.submit();
}
(6)onsubmit()
用于判断表单信息是否正确，否则在该事件里return false
onsubmit 只有点击提交按钮的时候才触发
表单的submit()方法，不会触发该事件
(7)onkeydown
onkeydown 键盘落下，字符还没有录入到文本框
(8)onkeyup
onkeyup 键盘弹起 字符已经到文本框
(9)event.keyCode
对应的按键码
}
42.设置元素位置，大小
{
通过dom读取元素的top、left、width、height等取到的值不是数字，而是“10px”这样的字符串；为这些属性设值的时候IE可以是80、90这样的数字，FF、Chrome必须是“80px”、“90%”等这样的字符串形式，为了兼容统一用字符串形式。left/top需要设置position
易错：不要写成div1.style.width=80px，而是div1.style.width=‘80px’;
如果要修改元素的大小（宽度加1），则首先要取出元素的宽度，然后用parseInt将宽度转换为数字（parseInt可以将“20px”这样数字开头的包含其他内容的字符串解析为20，parseInt(‘22px’,10)，也就是解析尽可能多的部分）；然后加上一个值，再加上px赋值回去。
//!!!!!别忘了 px
div.style.width = width + 20 + "px";
div.style.height = height + 20 + "px";
}
43.setAttribute
{
创建元素属性及赋值，可以创建自定义的属性
label.setAttribute(“for”, “username”);
var index = parseInt(this.getAttribute("index"));
}
44透明度的设置
{
(1)获得IE里面的透明度的数值
var num = div.style.filter.replace("alpha(opacity=","").replace(")","");
(2)设置IE里面的透明度的数值
num = parseInt( num) - 10;
div.style.filter = "alpha(opacity=" + num + ")";
(3)chrome设置透明度
d1.style.opacity = "0.5";
}
45.鼠标的坐标位置
{
例子：跟着鼠标走的图片
var img = document.getElementById("i1");
img.style.position = "absolute";
//图片脱离文档流
// !!!!!!!!!!别忘了px
img.style.left = event.clientX - 10 + "px";
img.style.top = event.clientY - 10 + "px";
}
46.文档居中
{
//document.documentElement 根节点 整个文档的高度和宽度
var x = (document.documentElement.clientWidth - div.clientWidth) / 2;
var y = (document.documentElement.clientHeight - div.clientHeight) / 2;
div.style.left = x + "px";
div.style.top = y + "px";
}
47.返回一个空值，childNodes，children
{
href="javascript:void(0)"
childNodes //元素 文本 注释 ie中会忽略空白行，chome不会
children //元素
}
48.
