CSS学习笔记

Day two

13.3 css边框属性

属性： 边框样式：border-style:solid/double/groove/ridge/insert/outset;

说明：第一个表示边框为线条；第二个表示为双线，他们之间的距离用（border-width：距离；）来设定；第三个表示根据border-color的属性值画出3d凹槽；第四个表示根据border-color的属性值画出菱形边框；第五个表示根据border-color的属性值画出3d凹边；第六个表示根据border-color的属性值画出3d凸边

边框颜色：border-color：颜色名；

边框宽度：border-width：边框宽度；

设置上边框：border-top:属性值1，属性值2,。。。。。（每一种属性值要和之前的一样）

设置下边框：border-bottom:属性值1，属性值2,。。。。。

设置左边框：border-left:属性值1，属性值2,。。。。。

设置右边框：border-right:属性值1，属性值2,。。。。。

综合设置边框：border：属性值1，属性值2,。。。。。

13.4CSS外边距

外边距的作用：用标签设置的内容的外部的边距，不被标签计算在内

居中：margin：0 auto；（注意这个0和auto都是固定值，并且要使用这个属性必须要设置，width和height的值）

设置上外边距：margin-top:距离值

设置下外边距：margin-bottom:距离值

设置左外边距：margin-left:距离值

设置右外边距：margin-right:距离值

综合设置外边距：margin：距离值

注意：当margin的值有四个的时候表示上-右-下-左的外边距的距离；

当margin的值有三个的时候表示 上-左右-下的外边距的距离；

当margin的值有两个的时候表示  上下-左右的外边距的距离；

13.5CSS内边距

内边距的作用：用标签设置的内容内部的边距，是被标签计算在内的距离

设置上内边距：padding-top:距离值

设置下内边距：padding-bottom:距离值

设置左内边距：padding-left:距离值

设置右内边距：padding-right:距离值

综合设置内边距：padding：距离值

注意：当padding的值有四个的时候表示上-右-下-左的外边距的距离；

当padding的值有三个的时候表示 上-左右-下的外边距的距离；

当padding的值有两个的时候表示  上下-左右的外边距的距离；

内边距和外边距是不矛盾的

13.6CSS列表属性

属性： 列表排序图案

语法结构： ul{list-style:none;} li{list-style-image:url(图片的位置）；}

作用：改变列表符号

列表排序的位置： ul{list-style-position:inside/outside；}

Inside:表示排序标记的位置在文本内容之内 outside:表示排序标记的位置不在文本内容之内

列表排序符号样式

ｕｌ｛ｌｉｓｔ－ｓｔｙｌｅ－ｔｙｐｅ：ｄｉｓｃ（实心圆）／ｃｉｒｃｌｅ（空心圆）／ｓｑｕａｒｅ（实心方块）／ｄｅｃｉｍａｌ阿拉伯数字）／ｌｏｗｅｒ－ｒｏｍａｎ（小写的罗马）／ｕｐｐｅｒ－ｒｏｍｅｎ（大写的罗马）／ｌｏｗｅｒ－ａｌｐｈａ（小写的英文）／ｕｐｐｅｒ－ａｌｐｈａ（大写的英文）／ｎｏｎｅ（什么都不要）；｝ 综合申明列表属性

Ｕｌ｛ｌｉｓｔ－ｓｔｙｌｅ：各种属性；｝

Ｃｈａｐｔｅｒ　ｆｏｕｒｔｅｅｎＣＳＳ伪类和伪元素

ＣＳＳ伪类的用途：主要用于向某些选择器添加特殊效果，最主要的是用来设置链接样式的显示效果

ＣＳＳ伪元素的用途：主要用于向某些选择器设置特殊效果

这两者的最大的不同在于伪类只有某些指定的选择器才能够使用，而伪元素却不一定

１４.１超链接的伪类

未访问的链接伪类：ａ．类名：ｌｉｎｋ｛内容｝

已被访问的链接伪类：ａ．类名：ｖｉｓｉｔｅｄ｛内容｝

鼠标经过时的链接伪类：ａ．类名：ｈｏｖｅｒ｛内容｝

鼠标按下时的链接伪类：ａ．类名：ａｃｔｉｖｅ｛内容｝

注意：如果要同时使用这四个方法时一定要按照以上的顺序，此外里面填的内容可以参看ＣＳＳ文本属性，ｖｉｓｉｔｅｄ的功能在谷歌浏览器里面可以使用显示出来，但是ＩＥ不行。

１４.２伪元素

伪元素添加到选择器中不一定是指定的专用标签也可以是不指定的专用标签，不过不可以是单个ＩＤ选择器或类选择器，最常用的是文本首行的设置和文本首字母的设置

首字母样式设置：

语法结构： 专用标签选择器：ｆｉｒｓｔ－ｌｅｔｔｅｒ：｛内容｝

首行样式设置

语法结构： 专用标签选择器：ｆｉｒｓｔ－ｌｉｎｅ：｛内容｝

运用的级别：前者的级别高于后者，意味着前者把首字母的值改变了后者就不能改变首字母

Ｃｈａｐｔｅｒ　ｆｉｆｔｅｅｎ　脚本

作用：主要是用来实现一些动态的页面效果，脚本语言也成为动态语言

１５.１定义脚本

语法结构 ＜ｓｃｒｉｐｔ　ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ＞

＜！－－

　　　定义脚本

　／／－－＞

　＜／ｓｃｒｉｐｔ＞

他写在ｂｏｄｙ里面可以直接执行

１５.２替换文本

语法结构

＜ｎｏｓｃｒｉｐｔ＞替换文本＜／ｎｏｓｃｒｉｐｔ＞

注意：替换文本是在定义的脚本没有执行的情况下代替的文本

１５.３嵌入对象＜ｏｂｊｅｃｔ＞

Ｏｂｊｅｃｔ标签不仅可以用来插入Ｆｌａｓｈ动画还可以用来在ＨＴＭＬ中嵌入所需要的对象，也就是可以用来插入Ｊａｖａ中后缀名是．ｃｌａｓｓ的文件

语法结构： ＜ｏｂｊｅｃｔ　ｃｏｄｅｔｙｐｅ＝＂ａｐｐｌｉｃａｔｉｏｎ／ｊａｖａ－ａｒｃｈｉｖｅ＂　ｃｌａｓｓｉｄ＝＂ｊａｖａ：＃．Ｃｌａｓｓ＂　ｃｏｄｅｂａｓｅ＝＂文件路径”＞＜／ｏｂｊｅｃｔ＞

其中ｃｏｄｅｔｙｐｅ是固定的，ｃｌａｓｓＩＤ只能用来写文件名不能写上文件的路径，ｃｏｄｅｂａｓｅ只能用来写文件路径不能写上文件名，尝试了一下然而并没有显示出我想要的东西

Ｃｈａｐｔｅｒ　ｓｉｘｔｅｅｎ　事件

事件是可以被网页或者网页上的元素识别的操作，就是指当浏览者在浏览网页的时候触发了某些动作所作出的相应的反应

１６.１常见事件

单击事件：

语法结构： ＜ｂｏｄｙ　ｉｄ＝＂参数＂＞

＜　　开始标签　　ｏｎｃｌｉｃｋ＝＂参数和参数值＂＞＜／结束标签＞

文本内容

＜／ｂｏｄｙ＞

双击事件： 语法结构： ＜ｂｏｄｙ　ｉｄ＝＂参数＂＞

＜　　开始标签　　ｏｎＤｂｌＣｌｉｃｋ＝＂参数和参数值＂＞＜／结束标签＞

文本内容

＜／ｂｏｄｙ＞

单击和双击的出发事件可以是纯文本的输出显示，也可以是一个复杂的ｊａｖａｓｃｒｉｐｔ程序

要注意： ＜ｓｐａｎ　ｏｎｃｌｉｃｋ＝＂ｃｏｎｔｅｎｔ．ｃｌａｓｓＮａｍｅ＝’ｂｉｇ＇；＂＞＜／ｓｐａｎ＞

这段代码要注意两个地方一个是ｃｌａｓｓＮａｍｅ的后面一个ｎ是大写，改成小写是不执行的，其次最后的ｂｉｇ那里有一个分号一定要注意

１６.２鼠标触发事件ｏｎｍｏｕｓｅ

语法结构： ＜　　开始标签　　ｏｎｍｏｕｓｅｄｏｗｍ＝＂参数和参数值＂＞＜／结束标签＞

ｏｎｍｏｕｓｅｄｏｗｎ还可以改成ｏｎｍｏｕｓｅｕｐ，ｏｎｍｏｕｓｅｍｏｖｅ，ｏｎｍｏｕｓｅｏｖｅｒ和ｏｎｍｏｕｓｅｏｕｔ

分别表示的意思是： 按下鼠标，释放鼠标，鼠标停留，鼠标经过，鼠标离开

１６.３键盘触发事件

语法结构： ＜　　开始标签　　ｏｎｋｅｙｄｏｗｎ＝＂参数和参数值＂＞＜／结束标签＞

ｏｎｋｅｙｄｏｗｎ还可以改成ｏｎｋｅｙｐｒｅｓｓ和ｏｎｋｅｙｕｐ

分别的意思是： 按下任意的一个键，按下并任意的释放一个键，释放键盘按键

１６.４页面事件

页面事件是指在页面上作某一动作时所触发的事件

图片下载中断事件：

＜开始标签　　ｏｎＡｂｏｒｔ＝＂参数和参数值＂＞＜／结束标签＞

当前页面的内容将要被改变时触发的事件： ＜开始标签　　ｏｎＢｅｆｏｒｅＵｎｌｏａｄ＝＂参数和参数值＂＞＜／结束标签＞

多用于提交表单和退出；

作用：当页面出现跳转，刷新，返回和关闭等将要离开本页面时而触发的事件

页面出错事件：

＜开始标签　　ｏｎＥｒｒｏｒ＝＂参数和参数值＂＞＜／结束标签＞

作用：当页面在加载文本或图片时，发生错误所触发的事件

页面加载完事件： ＜开始标签　　ｏｎｌｏａｄ＝＂参数和参数值＂＞＜／结束标签＞

作用：是指页面加载完图片或文档之后触发的事件

改变浏览器窗口大小时触发的事件： ＜开始标签　　ｏｎｒｅｓｉｚｅ＝＂参数和参数值＂＞＜／结束标签＞

拖动滚条时触发的事件： ＜开始标签　　ｏｎｓｃｒｏｌｌ＝＂参数和参数值＂＞＜／结束标签＞

离开页面事件： ＜开始标签　　ｏｎｕｎｌｏａｄ＝＂参数和参数值＂＞＜／结束标签＞

离开页面事件和当前页面的内容将要被改变时触发的事件相比他们最大的不同在于：他们弹出的框是不一样的前者是弹出一个没有选择的确定窗口，后者是弹出一个可以选择的确定或取消退出的框

１６.５表单事件

表单事件指在表单上做某一动作时所触发的事件

选定元素失去焦点事件

语法结构： ＜开始标签　ｏｎｂｌｕｒ＝＂参数和参数值＂＞＜／闭合标签＞

作用：更多的用于判断输入框里的文本内容是否符合表单的要求

具体表现的形式：就是如果你没有填写内容的话在你想要填写下一个内容的时候它会弹出一个框或者就是说当你的鼠标移开当前的框就会弹出

注意：我发现一个value的值的用法就是你在初始的时候填了value的值那么他就会默认的刚开始的时候回显示那个值

选定元素发生改变事件

语法结构： ＜开始标签　ｏｎchange＝＂参数和参数值＂＞＜／闭合标签＞

作用：就是显示不能修改表单的内容

选定元素获得焦点事件

语法结构： ＜开始标签　ｏｎfocus＝＂参数和参数值＂＞＜／闭合标签＞

作用：当表单获得焦点的时候会发生相应的改变，既可以是CSS的也可以是脚本的

表单重置事件

语法结构： ＜开始标签　ｏｎreset＝＂参数和参数值＂＞＜／闭合标签＞

作用：当表单的元素被重置时触发的事件，因此此时表单一定要用到reset标签，并且一般这个标签是写在form里面的

表单提交事件

语法结构： ＜开始标签　ｏｎsubmit＝＂参数和参数值＂＞＜／闭合标签＞

作用：当表单的元素被重置时触发的事件，因此此时表单一定要用到submit标签，并且一般这个标签是写在form里面的

16.6滚动字幕事件

字幕滚动内容滚动之至显示范围之外事件Onbounce

<marquee onbounce=”参数 和参数值“></marquee>

作用：当内容移动到滚动字幕的边缘就会弹出窗口

完成需要显示的内容后的事件Onfinish

<marquee onfinish=”参数 和参数值“></marquee>

作用：当滚动内容显示完就会弹出窗口

开始显示内容事件Onstart

<marquee onstart=”参数 和参数值“></marquee>

作用：当滚动字幕需要显示的内容开始显示的时候就会弹出窗口

注意：IE还保留着onfinish和onstart 的功能但是谷歌已经不能使用这两项功能了，并且他们两种都不能使用onbounce的功能

16.7编辑事件

编辑事件值页面被编辑时触发的事件，例如复制和黏贴

出现菜单事件Oncontextmenu

<body οncοntextmenu=”参数 和参数值“></body>

作用：可以通过复杂的编程来禁止右键和重新设置右键的菜单

内容被复制后触发的事件Oncopy

<body ocopy=”参数 和参数值“></body>

作用：当页面的内容被复制后触发的事件

内容被剪切后触发的事件Oncut

<body oncut=”参数 和参数值“></body>

作用：当页面的内容被剪切后触发的事件

内容被黏贴后触发的事件Onpaste

<body οnpaste=”参数 和参数值“></body>

作用：当页面的内容被黏贴后触发的事件

内容被选择后触发的事件Onselect

<body οnselect=”参数 和参数值“></body>

作用：当页面的内容被选择后触发的事件

内容开始被选中后触发的事件Onselectstart

<body οnpaste=”参数 和参数值“></body>

作用：当页面的内容开始被选中触发的事件

鼠标拖动时触发的事件OnDrag

<body οndrag=”参数 和参数值“></body>

作用：当页面的内容选择的内容被鼠标拖动时触发的事件

失去鼠标移动所形成焦点时事件Onlosecapture

<body Onlosecapture=”参数 和参数值“></body>

作用：当鼠标在页面选择内容后离开所选的内容，鼠标所会触发的事件

注意：在ＩＥ里面ｏｎｃｏｐｙ标签用不了，ｏｎｓｅｌｅｃｔ也用不了，这里面很多标签都用不了只在谷歌成功使用了ｏｎｃｏｐｙ的属性

１６.８数据绑定

Ｏｎａｆｔｅｒｕｐｄａｔｅ：数据完成从数据源传送到响应的界面元素时所触发的事件

Ｏｎｃｅｌｌｃｈａｎｇｅ：当数据的来源时触发的事件

Ｏｎｄａｔａａｖａｌｉａｂｌｅ：当数据从数据源接受完成所触发的事件

Ｏｎｄａｔａｓｅｔｃｈａｎｇｅｄ：当提供数据的数据源发生变化时触发的事件

Ｏｎｄａｔａｓｅｔｃｏｍｐｌｅｔｅ：当页面的有效数据全部被读取完毕时所触发的事件

Ｏｎｂｅｆｏｒｅｕｐｄａｔｅ：取消数据传送时所触发的事件

Ｏｎｅｒｒｏｒｕｐｄａｔｅ：看不懂是什么意思，大致的意思是在ｏｎｂｅｆｏｒｅｕｐｄａｔｅ事件触发后替代他的事件

１６.９外部事件

是在页面内容范围之外做某一动作时触发的事件

文档被打印后事件ｏｎａｆｔｅｒｐｒｉｎｔ

<body ｏｎａｆｔｅｒｐｒｉｎｔ=”参数 和参数值“></body>

作用：页面内容被打印完成后会被触发的事件

文档即将被打印后事件ｏｎｂｅｆｏｒｅｐｒｉｎｔ

<body ｏｎｂｅｆｏｒｅｐｒｉｎｔ=”参数 和参数值“></body>

作用：页面内容即将被打印完成后会被触发的事件，即页面按到打印时会触发的事件

注意：这个功能在ＩＥ可以，在谷歌是不可以的

滤镜效果发生变化时事件ｏｎｆｉｌｔｅｒｃｈａｎｇｅ

<开始标签 ｏｎａｆｉｌｔｅｒｃｈａｎｇｅ=参数 和参数值“></开始标签>

作用：当前页面内容的滤镜效果发生改变时触发的事件

按下Ｆ１或者帮助选择键时触发的事件Ｏｎｈｅｌｐ

<body ｏｎｈｅｌｐ=”参数 和参数值“></body>

注意：这项功能在ＩＥ是可以执行但是在谷歌无法执行，并且在ＩＥ执行之后弹出框点击确定之后会自动连接到ｗｉｎｄｏｗ帮助界面

对象的属性之一发生变化时所触发的事件ｏｎｐｒｏｐｅｒｔｙｃｈａｎｇｅ<开始便签 ｏｎｐｒｏｐｅｒｔｙｃｈａｎｇｅ=”参数 和参数值“></结束标签>

作用：当页面的元素发生变化时所触发的事件

注意：这个属性不论在ＩＥ还是在谷歌里面显示不出来他只能让按钮变暗但是并提交不了，没有查出原因

CSS学习笔记

Day two

13.3 css边框属性

属性： 边框样式：border-style:solid/double/groove/ridge/insert/outset;

说明：第一个表示边框为线条；第二个表示为双线，他们之间的距离用（border-width：距离；）来设定；第三个表示根据border-color的属性值画出3d凹槽；第四个表示根据border-color的属性值画出菱形边框；第五个表示根据border-color的属性值画出3d凹边；第六个表示根据border-color的属性值画出3d凸边

边框颜色：border-color：颜色名；

边框宽度：border-width：边框宽度；

设置上边框：border-top:属性值1，属性值2,。。。。。（每一种属性值要和之前的一样）

设置下边框：border-bottom:属性值1，属性值2,。。。。。

设置左边框：border-left:属性值1，属性值2,。。。。。

设置右边框：border-right:属性值1，属性值2,。。。。。

综合设置边框：border：属性值1，属性值2,。。。。。

13.4CSS外边距

外边距的作用：用标签设置的内容的外部的边距，不被标签计算在内

居中：margin：0 auto；（注意这个0和auto都是固定值，并且要使用这个属性必须要设置，width和height的值）

设置上外边距：margin-top:距离值

设置下外边距：margin-bottom:距离值

设置左外边距：margin-left:距离值

设置右外边距：margin-right:距离值

综合设置外边距：margin：距离值

注意：当margin的值有四个的时候表示上-右-下-左的外边距的距离；

当margin的值有三个的时候表示 上-左右-下的外边距的距离；

当margin的值有两个的时候表示  上下-左右的外边距的距离；

13.5CSS内边距

内边距的作用：用标签设置的内容内部的边距，是被标签计算在内的距离

设置上内边距：padding-top:距离值

设置下内边距：padding-bottom:距离值

设置左内边距：padding-left:距离值

设置右内边距：padding-right:距离值

综合设置内边距：padding：距离值

注意：当padding的值有四个的时候表示上-右-下-左的外边距的距离；

当padding的值有三个的时候表示 上-左右-下的外边距的距离；

当padding的值有两个的时候表示  上下-左右的外边距的距离；

内边距和外边距是不矛盾的

13.6CSS列表属性

属性： 列表排序图案

语法结构： ul{list-style:none;} li{list-style-image:url(图片的位置）；}

作用：改变列表符号

列表排序的位置： ul{list-style-position:inside/outside；}

Inside:表示排序标记的位置在文本内容之内 outside:表示排序标记的位置不在文本内容之内

列表排序符号样式

ｕｌ｛ｌｉｓｔ－ｓｔｙｌｅ－ｔｙｐｅ：ｄｉｓｃ（实心圆）／ｃｉｒｃｌｅ（空心圆）／ｓｑｕａｒｅ（实心方块）／ｄｅｃｉｍａｌ阿拉伯数字）／ｌｏｗｅｒ－ｒｏｍａｎ（小写的罗马）／ｕｐｐｅｒ－ｒｏｍｅｎ（大写的罗马）／ｌｏｗｅｒ－ａｌｐｈａ（小写的英文）／ｕｐｐｅｒ－ａｌｐｈａ（大写的英文）／ｎｏｎｅ（什么都不要）；｝ 综合申明列表属性

Ｕｌ｛ｌｉｓｔ－ｓｔｙｌｅ：各种属性；｝

Ｃｈａｐｔｅｒ　ｆｏｕｒｔｅｅｎＣＳＳ伪类和伪元素

ＣＳＳ伪类的用途：主要用于向某些选择器添加特殊效果，最主要的是用来设置链接样式的显示效果

ＣＳＳ伪元素的用途：主要用于向某些选择器设置特殊效果

这两者的最大的不同在于伪类只有某些指定的选择器才能够使用，而伪元素却不一定

１４.１超链接的伪类

未访问的链接伪类：ａ．类名：ｌｉｎｋ｛内容｝

已被访问的链接伪类：ａ．类名：ｖｉｓｉｔｅｄ｛内容｝

鼠标经过时的链接伪类：ａ．类名：ｈｏｖｅｒ｛内容｝

鼠标按下时的链接伪类：ａ．类名：ａｃｔｉｖｅ｛内容｝

注意：如果要同时使用这四个方法时一定要按照以上的顺序，此外里面填的内容可以参看ＣＳＳ文本属性，ｖｉｓｉｔｅｄ的功能在谷歌浏览器里面可以使用显示出来，但是ＩＥ不行。

１４.２伪元素

伪元素添加到选择器中不一定是指定的专用标签也可以是不指定的专用标签，不过不可以是单个ＩＤ选择器或类选择器，最常用的是文本首行的设置和文本首字母的设置

首字母样式设置：

语法结构： 专用标签选择器：ｆｉｒｓｔ－ｌｅｔｔｅｒ：｛内容｝

首行样式设置

语法结构： 专用标签选择器：ｆｉｒｓｔ－ｌｉｎｅ：｛内容｝

运用的级别：前者的级别高于后者，意味着前者把首字母的值改变了后者就不能改变首字母

Ｃｈａｐｔｅｒ　ｆｉｆｔｅｅｎ　脚本

作用：主要是用来实现一些动态的页面效果，脚本语言也成为动态语言

１５.１定义脚本

语法结构 ＜ｓｃｒｉｐｔ　ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ＞

＜！－－

　　　定义脚本

　／／－－＞

　＜／ｓｃｒｉｐｔ＞

他写在ｂｏｄｙ里面可以直接执行

１５.２替换文本

语法结构

＜ｎｏｓｃｒｉｐｔ＞替换文本＜／ｎｏｓｃｒｉｐｔ＞

注意：替换文本是在定义的脚本没有执行的情况下代替的文本

１５.３嵌入对象＜ｏｂｊｅｃｔ＞

Ｏｂｊｅｃｔ标签不仅可以用来插入Ｆｌａｓｈ动画还可以用来在ＨＴＭＬ中嵌入所需要的对象，也就是可以用来插入Ｊａｖａ中后缀名是．ｃｌａｓｓ的文件

语法结构： ＜ｏｂｊｅｃｔ　ｃｏｄｅｔｙｐｅ＝＂ａｐｐｌｉｃａｔｉｏｎ／ｊａｖａ－ａｒｃｈｉｖｅ＂　ｃｌａｓｓｉｄ＝＂ｊａｖａ：＃．Ｃｌａｓｓ＂　ｃｏｄｅｂａｓｅ＝＂文件路径”＞＜／ｏｂｊｅｃｔ＞

其中ｃｏｄｅｔｙｐｅ是固定的，ｃｌａｓｓＩＤ只能用来写文件名不能写上文件的路径，ｃｏｄｅｂａｓｅ只能用来写文件路径不能写上文件名，尝试了一下然而并没有显示出我想要的东西

Ｃｈａｐｔｅｒ　ｓｉｘｔｅｅｎ　事件

事件是可以被网页或者网页上的元素识别的操作，就是指当浏览者在浏览网页的时候触发了某些动作所作出的相应的反应

１６.１常见事件

单击事件：

语法结构： ＜ｂｏｄｙ　ｉｄ＝＂参数＂＞

＜　　开始标签　　ｏｎｃｌｉｃｋ＝＂参数和参数值＂＞＜／结束标签＞

文本内容

＜／ｂｏｄｙ＞

双击事件： 语法结构： ＜ｂｏｄｙ　ｉｄ＝＂参数＂＞

＜　　开始标签　　ｏｎＤｂｌＣｌｉｃｋ＝＂参数和参数值＂＞＜／结束标签＞

文本内容

＜／ｂｏｄｙ＞

单击和双击的出发事件可以是纯文本的输出显示，也可以是一个复杂的ｊａｖａｓｃｒｉｐｔ程序

要注意： ＜ｓｐａｎ　ｏｎｃｌｉｃｋ＝＂ｃｏｎｔｅｎｔ．ｃｌａｓｓＮａｍｅ＝’ｂｉｇ＇；＂＞＜／ｓｐａｎ＞

这段代码要注意两个地方一个是ｃｌａｓｓＮａｍｅ的后面一个ｎ是大写，改成小写是不执行的，其次最后的ｂｉｇ那里有一个分号一定要注意

１６.２鼠标触发事件ｏｎｍｏｕｓｅ

语法结构： ＜　　开始标签　　ｏｎｍｏｕｓｅｄｏｗｍ＝＂参数和参数值＂＞＜／结束标签＞

ｏｎｍｏｕｓｅｄｏｗｎ还可以改成ｏｎｍｏｕｓｅｕｐ，ｏｎｍｏｕｓｅｍｏｖｅ，ｏｎｍｏｕｓｅｏｖｅｒ和ｏｎｍｏｕｓｅｏｕｔ

分别表示的意思是： 按下鼠标，释放鼠标，鼠标停留，鼠标经过，鼠标离开

１６.３键盘触发事件

语法结构： ＜　　开始标签　　ｏｎｋｅｙｄｏｗｎ＝＂参数和参数值＂＞＜／结束标签＞

ｏｎｋｅｙｄｏｗｎ还可以改成ｏｎｋｅｙｐｒｅｓｓ和ｏｎｋｅｙｕｐ

分别的意思是： 按下任意的一个键，按下并任意的释放一个键，释放键盘按键

１６.４页面事件

页面事件是指在页面上作某一动作时所触发的事件

图片下载中断事件：

＜开始标签　　ｏｎＡｂｏｒｔ＝＂参数和参数值＂＞＜／结束标签＞

当前页面的内容将要被改变时触发的事件： ＜开始标签　　ｏｎＢｅｆｏｒｅＵｎｌｏａｄ＝＂参数和参数值＂＞＜／结束标签＞

多用于提交表单和退出；

作用：当页面出现跳转，刷新，返回和关闭等将要离开本页面时而触发的事件

页面出错事件：

＜开始标签　　ｏｎＥｒｒｏｒ＝＂参数和参数值＂＞＜／结束标签＞

作用：当页面在加载文本或图片时，发生错误所触发的事件

页面加载完事件： ＜开始标签　　ｏｎｌｏａｄ＝＂参数和参数值＂＞＜／结束标签＞

作用：是指页面加载完图片或文档之后触发的事件

改变浏览器窗口大小时触发的事件： ＜开始标签　　ｏｎｒｅｓｉｚｅ＝＂参数和参数值＂＞＜／结束标签＞

拖动滚条时触发的事件： ＜开始标签　　ｏｎｓｃｒｏｌｌ＝＂参数和参数值＂＞＜／结束标签＞

离开页面事件： ＜开始标签　　ｏｎｕｎｌｏａｄ＝＂参数和参数值＂＞＜／结束标签＞

离开页面事件和当前页面的内容将要被改变时触发的事件相比他们最大的不同在于：他们弹出的框是不一样的前者是弹出一个没有选择的确定窗口，后者是弹出一个可以选择的确定或取消退出的框

１６.５表单事件

表单事件指在表单上做某一动作时所触发的事件

选定元素失去焦点事件

语法结构： ＜开始标签　ｏｎｂｌｕｒ＝＂参数和参数值＂＞＜／闭合标签＞

作用：更多的用于判断输入框里的文本内容是否符合表单的要求

具体表现的形式：就是如果你没有填写内容的话在你想要填写下一个内容的时候它会弹出一个框或者就是说当你的鼠标移开当前的框就会弹出

注意：我发现一个value的值的用法就是你在初始的时候填了value的值那么他就会默认的刚开始的时候回显示那个值

选定元素发生改变事件

语法结构： ＜开始标签　ｏｎchange＝＂参数和参数值＂＞＜／闭合标签＞

作用：就是显示不能修改表单的内容

选定元素获得焦点事件

语法结构： ＜开始标签　ｏｎfocus＝＂参数和参数值＂＞＜／闭合标签＞

作用：当表单获得焦点的时候会发生相应的改变，既可以是CSS的也可以是脚本的

表单重置事件

语法结构： ＜开始标签　ｏｎreset＝＂参数和参数值＂＞＜／闭合标签＞

作用：当表单的元素被重置时触发的事件，因此此时表单一定要用到reset标签，并且一般这个标签是写在form里面的

表单提交事件

语法结构： ＜开始标签　ｏｎsubmit＝＂参数和参数值＂＞＜／闭合标签＞

作用：当表单的元素被重置时触发的事件，因此此时表单一定要用到submit标签，并且一般这个标签是写在form里面的

16.6滚动字幕事件

字幕滚动内容滚动之至显示范围之外事件Onbounce

<marquee onbounce=”参数 和参数值“></marquee>

作用：当内容移动到滚动字幕的边缘就会弹出窗口

完成需要显示的内容后的事件Onfinish

<marquee onfinish=”参数 和参数值“></marquee>

作用：当滚动内容显示完就会弹出窗口

开始显示内容事件Onstart

<marquee onstart=”参数 和参数值“></marquee>

作用：当滚动字幕需要显示的内容开始显示的时候就会弹出窗口

注意：IE还保留着onfinish和onstart 的功能但是谷歌已经不能使用这两项功能了，并且他们两种都不能使用onbounce的功能

16.7编辑事件

编辑事件值页面被编辑时触发的事件，例如复制和黏贴

出现菜单事件Oncontextmenu

<body οncοntextmenu=”参数 和参数值“></body>

作用：可以通过复杂的编程来禁止右键和重新设置右键的菜单

内容被复制后触发的事件Oncopy

<body ocopy=”参数 和参数值“></body>

作用：当页面的内容被复制后触发的事件

内容被剪切后触发的事件Oncut

<body oncut=”参数 和参数值“></body>

作用：当页面的内容被剪切后触发的事件

内容被黏贴后触发的事件Onpaste

<body οnpaste=”参数 和参数值“></body>

作用：当页面的内容被黏贴后触发的事件

内容被选择后触发的事件Onselect

<body οnselect=”参数 和参数值“></body>

作用：当页面的内容被选择后触发的事件

内容开始被选中后触发的事件Onselectstart

<body οnpaste=”参数 和参数值“></body>

作用：当页面的内容开始被选中触发的事件

鼠标拖动时触发的事件OnDrag

<body οndrag=”参数 和参数值“></body>

作用：当页面的内容选择的内容被鼠标拖动时触发的事件

失去鼠标移动所形成焦点时事件Onlosecapture

<body Onlosecapture=”参数 和参数值“></body>

作用：当鼠标在页面选择内容后离开所选的内容，鼠标所会触发的事件

注意：在ＩＥ里面ｏｎｃｏｐｙ标签用不了，ｏｎｓｅｌｅｃｔ也用不了，这里面很多标签都用不了只在谷歌成功使用了ｏｎｃｏｐｙ的属性

１６.８数据绑定

Ｏｎａｆｔｅｒｕｐｄａｔｅ：数据完成从数据源传送到响应的界面元素时所触发的事件

Ｏｎｃｅｌｌｃｈａｎｇｅ：当数据的来源时触发的事件

Ｏｎｄａｔａａｖａｌｉａｂｌｅ：当数据从数据源接受完成所触发的事件

Ｏｎｄａｔａｓｅｔｃｈａｎｇｅｄ：当提供数据的数据源发生变化时触发的事件

Ｏｎｄａｔａｓｅｔｃｏｍｐｌｅｔｅ：当页面的有效数据全部被读取完毕时所触发的事件

Ｏｎｂｅｆｏｒｅｕｐｄａｔｅ：取消数据传送时所触发的事件

Ｏｎｅｒｒｏｒｕｐｄａｔｅ：看不懂是什么意思，大致的意思是在ｏｎｂｅｆｏｒｅｕｐｄａｔｅ事件触发后替代他的事件

１６.９外部事件

是在页面内容范围之外做某一动作时触发的事件

文档被打印后事件ｏｎａｆｔｅｒｐｒｉｎｔ

<body ｏｎａｆｔｅｒｐｒｉｎｔ=”参数 和参数值“></body>

作用：页面内容被打印完成后会被触发的事件

文档即将被打印后事件ｏｎｂｅｆｏｒｅｐｒｉｎｔ

<body ｏｎｂｅｆｏｒｅｐｒｉｎｔ=”参数 和参数值“></body>

作用：页面内容即将被打印完成后会被触发的事件，即页面按到打印时会触发的事件

注意：这个功能在ＩＥ可以，在谷歌是不可以的

滤镜效果发生变化时事件ｏｎｆｉｌｔｅｒｃｈａｎｇｅ

<开始标签 ｏｎａｆｉｌｔｅｒｃｈａｎｇｅ=参数 和参数值“></开始标签>

作用：当前页面内容的滤镜效果发生改变时触发的事件

按下Ｆ１或者帮助选择键时触发的事件Ｏｎｈｅｌｐ

<body ｏｎｈｅｌｐ=”参数 和参数值“></body>

注意：这项功能在ＩＥ是可以执行但是在谷歌无法执行，并且在ＩＥ执行之后弹出框点击确定之后会自动连接到ｗｉｎｄｏｗ帮助界面

对象的属性之一发生变化时所触发的事件ｏｎｐｒｏｐｅｒｔｙｃｈａｎｇｅ<开始便签 ｏｎｐｒｏｐｅｒｔｙｃｈａｎｇｅ=”参数 和参数值“></结束标签>

作用：当页面的元素发生变化时所触发的事件

注意：这个属性不论在ＩＥ还是在谷歌里面显示不出来他只能让按钮变暗但是并提交不了，没有查出原因