发布文章
HTML篇
很多不会HTML的朋友可能对其中的内容不太明白，下面我就对表中元素的用法作简单的介绍。
请大家先看下面的代码，这是一个简单明了的示例网页,其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。 <html> //开始一个网页的标记 <head> //开始页面外的内容 <title>示例网页</title> //定义该网页标题为“示例网页” </head> //结束页面外的内容 <body bgcolor=yellow> //开始页面内的内容并定义背景色为黄色 内容 //内容 <h1>内容1</h1> //大小为一级的内容 <h2>内容2</h2> //大小为二级的内容 <h3>内容3</h3> //大小为三级的内容（默认） <h4>内容4</h4> //大小为四级的内容 <h5>内容5</h5> //大小为五级的内容 <font color="red">红色的字</font><br> //红色字的内容,“<br>”为切换到下一行，不用配对，下同 <font face="黑体">黑体的字</font><br> //字体为黑体的内容 <font color="red" face="黑体">红色黑体的字</font> //颜色为红色,字体为黑体的内容（即说明一个元素可以有多个属性，中间以空格相隔） </body> //结束页面内的内容 </html> //结束一个网页的标记
大家只要先新建一个文本文件（.txt文件），然后把上述红色的内容复制到这个文本文件里面，编写好以后，按“文件”→“另存为...”，把文件的扩展名改为.htm或.html，如“网页.htm”，文件类型改为“所有类型”，保存就可以看到效果了。其它的代码用法也是一样，如果你是入门者就只要多试几次就会了。
CSS篇:
所谓CSS（Cascading Style Sheet，层叠样式表）,简单来说，就是在网页中对某些特定的元素的属性（如颜色、字体、大小、位置等）作强制统一定义，并具有一定的继承性和通用性，同时补充了HTML的一些不足。
例如，我们要把“<h2>”大小的文字都变成红色，在HTML中就要在每个“<h2>”中加入“<font color="red">”，如果有几十组"<h2>"大小的文字，麻烦就大了。
CSS就解决了这个问题，我们只要在CSS中定义好“<h2>”大小的文字都是红色的，这就方便多了。同时，文件的大小也大大地减少。
CSS的代码为<style>,用法主要有两种，一种是全局定义，一种的局部定义。
全局定义就是一开始把所有属性定义好，到使用时再根据一定条件调用出来。
如例子1，这是CSS的最基本用法，其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。
<html> //开始一个网页的标记 <head> //开始页面外的内容 <title>CSS示例</title> //定义该网页标题为“示例网页”
<style> //开始定义CSS样式 h1{color:red;font-family:黑体;} //定义H1大小的文字为红色的黑体字 h2{color:blue;font-family:黑体;} //定义H2大小的文字为蓝色的黑体字 h3{font-size:50} //定义H3大小的文字的字号大小强制为50号 h4{background-color:yellow;} //定义H4大小的文字的背景颜色为黄色 </style> //结束CSS样式的定义
</head> //结束页面外的内容 <body leftmargin="0" rightmargin="0" bottommargin="20" topmargin="0" bgcolor="#FFFFFF" text="#000000" id="all" leftmargin="0" rightMargin=0 topmargin="0" link="#000020" vlink="#000020" alink="#000020" background=images/very_christmas/bg.gif> //开始页面内的内容
<h1>H1的文本1</h1> //大小为H1的文本1 <h2>H2的文本</h2> //大小为H2的文本 <h3>H3的文本</h3> //大小为H3的文本 <h4>H4的文本</h4> //大小为H4的文本 <h1>H1的文本2</h1> //大小为H1的文本2
</body> //结束页面内的内容 </html> //结束一个网页的标记
本例说明了CSS是包含在<style>和</style>之间，规则是定义属性的名字写在前面，属性参数写在名字后并用大括号包含着，属性参数用冒号“:”（半角的标点）定义，分号“;”（半角的标点）分隔，可多介属性同时使用。大家可以看出H1，H2，H3，H4的文本属性已被改变，改为了在CSS属性中定义好的属性，这就是CSS的特性。CSS除了可以定义指定元素的属性外，还可以预设一些样式，如例子2：
其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。
<html> //开始一个网页的标记 <head> //开始页面外的内容 <title>CSS示例</title> //定义该网页标题为“示例网页”
<style> //开始定义CSS样式 .color{color:red} //定义一个名叫color，字体颜色为红色的样式 .font{font-family:黑体;color:blue;} //定义一个名叫font，字体颜色为蓝色，字体为黑体的样式 .size{font-size:50} //定义一个名叫size，字号大小为50号的样式 </style> //结束CSS样式的定义
</head> //结束页面外的内容 <body leftmargin="0" rightmargin="0" bottommargin="20" topmargin="0" bgcolor="#FFFFFF" text="#000000" id="all" leftmargin="0" rightMargin=0 topmargin="0" link="#000020" vlink="#000020" alink="#000020" background=images/very_christmas/bg.gif> //开始页面内的内容
<h1 class=color>H1的样式1</h1> //在H1中应用color样式 <h1 class=font>H1的样式2</h1> //在H1中应用font样式 <h1 class=size>H1的样式3</h1> //在H1中应用size样式 <h2 class=font>H2的样式</h2> //在H2中应用font样式
</body> //结束页面内的内容 </html> //结束一个网页的标记
本贴附件就是上述示例2，本例说明了CSS可以预设一些样式，并在需要时调用，规则是在定义样式时在样式的名字前加上点号“.”（半角的标点），在元素中用“class=样式的名字”调用样式。
CSS除了上述用法外，还有一种用法，就是局部用法。
例如，我们要用CSS定义一个“<h1>”大小的文字为红色，字号为30，我们可以直接在“<H1>”中加入“style="color:red;size:30"”,，
即“<h1 style="color:red;size:30">文字</h1>”，此方法几乎所有HTML元素通用，如果和JavaScript共用就可以达到更好的效果。
CSS除了有很多的改变元素属性的功能处还带有很多特效滤镜，就做出如改变透明度、模糊等等的特效，在以后的应用中有很大的作用。
这个方面我也不是很了解，下面的作为今后参考学习的资料先发上来～
CSS过滤器（filter）是CSS的一种扩充，可以为特定的HTML元素（具体为body,button,div,img,input,marquee,span,table,td,textarea,th）产生如阴影、模糊、透明等效果，可以在IE4.0以上正确显示，无需另加脚本支持。
例如，要为图片<img>设置透明度为60%，可以用代码： <img src="pic.jpg" style="filter:alpha(Opacity=80)">
或设置img的属性： <style>
img{filter:alpha(Opacity=80)}
</style>
从上面可以看出，其语法规则为：filter:滤镜名称(滤镜的参数)，下面我对常用的过滤器作一些简介：
滤镜名称：Alpha 说明：设置透明效果
参数： Opacity：透明度大小的百分比，范围是0－100，分别代表0%-100%
FinishOpacity：设置渐变透明效果，范围也是0－100，分别代表0%-100%
style：指定渐变透明区域的形状，值为0为统一形状，值为1为线形，值为2为放射形，值为3为长方形
StartX：指定渐变透明开始时的X座标
StartY：指定渐变透明开始时的Y座标
FinishX：指定渐变透明结束时的X座标
FinishY：指定渐变透明结束时的Y座标
滤镜名称：Blur 说明：设置模糊效果
参数： add：是否改变为印象派的模糊效果，取值为“true”或“false”
Direction：设置模糊方向的角度，有效值为0，45，90，135，180，225，270，315八个方向
Strength：设置模糊的像素数，数值越大，模糊就越明显，默认为5
滤镜名称：Chroma 说明：将指定颜色设置为透明
参数： Color:指定一种要变为透明的颜色，如“Chroma(color=red)”就是设置网页中的红色变为透明色
滤镜名称：DropShadow 说明：设置阴影效果
参数： Color：指定投射阴影的颜色，如“DropShadow(color=red)”就是产生一个红色的阴影
OffX：指定阴影在X轴上的偏移量，默认为5，正数为X轴上的右方偏移量，负数为X轴上的左方偏移量
OffY：指定阴影在Y轴上的偏移量，默认为5，正数为Y轴上的上方偏移量，负数为Y轴上的下方偏移量
Positive：指定是否可以为网页中的透明对象指定阴影，“true”为只可以为网页中的正常对象指定阴影，“false”为可以为网页中的透明对象指定阴影
滤镜名称：FlipH 说明：设置水平翻转效果
参数：无
滤镜名称：Flipv 说明：设置垂直翻转效果
参数：无
滤镜名称：Glow 说明：设置发光效果
参数： Color：指定发光的颜色，如“Glow(color=red)”就是设置用红色光照射
Strength：指定发光的强度，值为0-255
注：适当地调整发光的颜色和发光的强度可以得到一些意想不到的效果，如文本的火焰效果或霓虹灯效果
滤镜名称：Gray 说明：去掉对象的颜色，改变为灰度显示（即彩色变为黑白）
参数：无
滤镜名称：Invert 说明：反相显示对象，产生出相片的底片效果
参数：无
滤镜名称：Mask 说明：设置透明膜效果，为物体创造出包在有色玻璃下的效果
参数： Color：设置透明膜效果的颜色，如“Mask(color=red)”就是设置一个红色的透明膜
滤镜名称：Shadow 说明：设置阴影效果（和DropShadow不同，DropShadow为比例一样的阴影，Shadow为带有扩散效果的阴影）
参数： Color：指定投射阴影的颜色，如“Shadow(color=red)”就是产生一个红色的阴影
Direction：设置阴影方向的角度，有效值为0，45，90，135，180，225，270，315八个方向
滤镜名称：Wave 说明：设置波纹效果（钮曲的一种）
参数： add：是否将对象按照正弦波形样式显示，取值为“true”或“false”，默认为“true”，表示以波形显示对象
Freq：设置波形频率
LightStrength：设置波形的光影效果，取值为0-100，数值越大，光影效果越明显
Phase：设置波形开始时的偏移量，取值为0-100，表示偏移量取自波长的百分比
Strength：设置波形的振幅
滤镜名称：Xray 说明：设置X光效果
参数：无
Script的基本用法：
Script(脚本)实际上就是一段程序，主要分为服务器端运行的服务器端脚本和在浏览器直接运行的客户端脚本，本文为客户端脚本的基本教程，主要介绍客户端脚本的基本用法。
客户端脚本的主要功能用于检测浏览器功能、响应用户动作、验证表单数据和制作网页特效等。
以下实例就是一个最基本的应用Script的实例(本教程以JavaScript为主)：
其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。
<html> //开始一个网页的标记 <head> //开始页面外的内容 <title>JavaScript基本示例</title> //定义该网页标题为“示例网页”
<script language="javascript" type="text/javascript"> //开始一个Script脚本的标记，并定义编辑语言为javascript
function see() //定义一个名叫“see()”的脚本 { //脚本的内容是以“{”开始的 alert("我是一只菜鸟") //在“{”和“}”之间的为脚本内容，本内容是“当运行此脚本时，显示一个写着‘我是一只菜鸟’的消息框” } //脚本的内容是以“}”结束的
function baby() //定义一个名叫“baby()”的脚本 { //脚本的内容是以“{”开始的 alert("真笨,都说不要指过来了") //在“{”和“}”之间的为脚本内容，本内容是“当运行此脚本时，显示一个写着‘真笨,都说不要指过来了’的消息框” } //脚本的内容是以“}”结束的
</script> //脚本编辑完毕，结束一个Script脚本的标记
</head> //结束页面外的内容 <body leftmargin="0" rightmargin="0" bottommargin="20" topmargin="0" bgcolor="#FFFFFF" text="#000000" id="all" leftmargin="0" rightMargin=0 topmargin="0" link="#000020" vlink="#000020" alink="#000020" background=images/very_christmas/bg.gif> //开始页面内的内容
<input type=button value="菜鸟的按钮" onClick="see()"> //定义一个叫“菜鸟的按钮”的按钮，并定义当用鼠标单击这个按钮时，执行上面定义的“see()”脚本
<hr> //画一条水平线 <hr> <input type=text value="请不要用鼠标提向这里" onMouseover="baby()">//定义一个叫“请不要用鼠标提向这里”的文本框，并定义当用鼠标指向这个文本框时，执行上面定义的“baby()”脚本
</body> //结束页面内的内容 </html> //结束一个网页的标记
在<script>的代码要区分大小写，每次当我们要编写脚本时，都要先用function命令定义一个新的程序，程序名字的格式为“任意小写英文字符”+“()”,“()”中可以加入运行的参数，程序的内容包含在“{”和“}”之间，以分号“;”分隔，一个脚本内可包含多个程序，并要在<body leftmargin="0" rightmargin="0" bottommargin="20" topmargin="0" bgcolor="#FFFFFF" text="#000000" id="all" leftmargin="0" rightMargin=0 topmargin="0" link="#000020" vlink="#000020" alink="#000020" background=images/very_christmas/bg.gif>内的元素中以一定的事件激发运行这个程序，如单击事件(onClick)等。
响应事件就是当你定义了一个脚本后,发生这个脚本所用的条件,如:你要在一个“<div>”中,定义如果这个“<div>”被鼠标单击,就执行一个名叫“save()”的脚本，可以用单击事件“onClick”，代码就写成“<div onClick="save()">”，方法和其它编程软件是一样的，有过编程经验的朋友就应该清楚了。
这个方面我也不是很了解，下面的作为今后参考学习的资料先发上来～
常用的事件一一列出：
事件：onLoad 功能：当Web浏览器加载窗口或框架集时发生 适用于：<body>、<frameset>
事件：onUnLoad 功能：当Web浏览器从窗口或框架卸载一个文档时发生 适用于：<body>、<frameset>
事件：onClick 功能：当一个元素被鼠标单击时发生（鼠标左键按下再松开） 适用于：绝大多数元素适用
事件：onDblClick 功能：当一个元素被鼠标双击时发生 适用于：绝大多数元素适用
事件：onMouseDown 功能：当鼠标在一个元素上方被按住时发生（鼠标左键按下） 适用于：绝大多数元素适用
事件：onMouseUp 功能：当鼠标在一个元素上方被释放时发生（鼠标左键松开） 适用于：绝大多数元素适用
事件：onMouseOver 功能：当鼠标从网页上的某处在一个元素上方经过时发生 适用于：绝大多数元素适用
事件：onMouseMove 功能：当鼠标在一个元素的上方移动时发生 适用于：绝大多数元素适用
事件：onMouseOut 功能：当鼠标离开一个元素时发生 适用于：绝大多数元素适用
事件：onFocus 功能：当一个元素接收到来自鼠标或键盘的焦点时发生 适用于：<label>、<input>、<select>、<textarea>、<button>
事件：onBlur 功能：当一个元素失去来自鼠标或键盘的焦点时发生 适用于：<label>、<input>、<select>、<textarea>、<button>
事件：onKeyPress 功能：当在一个元素上方一个键被按下后和松手时发生（键值需要自定义） 适用于：绝大多数元素适用
事件：onKeyDown 功能：当在一个元素上方一个键被按住不放时发生 适用于：绝大多数元素适用
事件：onKeyUp 功能：当在一个元素上方一个键被松手时发生 适用于：绝大多数元素适用
事件：onSubmit 功能：当一个表单被提交时发生 适用于：<form>
事件：onReset 功能：当一个表单被重置时发生 适用于：<form>
事件：onSelect 功能：当文本被选择时发生 适用于：<input>、<textarea>
事件：onChange 功能：当一个元素丢失焦点，其值被改变时发生 适用于：<input>、<select>、<textarea>
简介一下JS和VB的区别，我们就用一个显示时间的网页分别做出JS版的VB版,其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。
<html><head> <title>VBScript&JavaScript的区别</title> <SCRIPT LANGUAGE="JavaScript"TYPE="text/javascript"> //定义一个JavaScript的脚本
function showdate() //定义一个名叫“showdate()”的小程序 { //程序以“{”开始 alert(Date()) //当程序被执行时，显示一个内容为当前时间的对话框，其中“alert”为显示一个对话框，括号中的为对话框的内容，“Date()”代码为当前时间。 } //程序以“}”结束
</SCRIPT> //结束这个脚本
<SCRIPT LANGUAGE="VBScript"TYPE="text/vbscript"> //定义一个VBScript的脚本
Sub Button1_OnClick //为一个名叫Button1的控件定义一个鼠标单击时发生的事件 msgbox now //当程序被执行时，显示一个内容为当前时间的对话框，其中“msgbox”为显示一个对话框（VB语言中的messagebox），now就是现在的时间 End Sub //VB有一个特点就是要配对使用，这一行就是结束这个VB事件
</SCRIPT> //结束这个脚本 </head> <body leftmargin="0" rightmargin="0" bottommargin="20" topmargin="0" bgcolor="#FFFFFF" text="#000000" id="all" leftmargin="0" rightMargin=0 topmargin="0" link="#000020" vlink="#000020" alink="#000020" background=images/very_christmas/bg.gif><form> //<form>就是一个控件的容器 <input type="button" onClick="showdate();" value="JavaScript的现在时间"> //定义一个控件，其中“type="button"”说明这个控件是一个按钮，“onClick="showdate();"”的意思是当这个控件被单击时（onClick就是单击事件），执行一个名为“showdate()”的脚本程序，value就是定义这个控件的值。 <font color=ffff00>JavaScript效果</font> //文本 </form> <form><input name="Button1" type="button" value="VBScript的现在时间"> //定义一个名叫Button1的按钮，其它属性同上 <font color=ffff00>VBScript效果</font> //文本 </form> </body></html>
*博客内容为网友个人发布，仅代表博主个人观点，如有侵权请联系工作人员删除。
