<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <HEAD> <STYLE> v/:* { behavior: url(#default#VML);} o/:* { behavior: url(#default#VML);} </STYLE> <TITLE>网页的标题</TITLE> </HEAD> <BODY> </BODY> </HTML>
我们可以简写成
<HTML xmlns:v> <HEAD> <META http-equiv='Content-Type' content='text/html;charset=gb2312'> <Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005'> <TITLE>网页的标题</TITLE> <STYLE> v/:*{behavior:url(#default#VML);} </STYLE> </HEAD> <BODY> </BODY> </HTML>
很显然,跟HTML网页的结构很类似,以上标记的意思你可以理解为如下(//符号后是解释)
<HTML xmlns:v> //关键语句,指明该网页创建一个名为 v 的XML名域命名空间 <HEAD> //网页声明部分,被<head></head>包围的语句可以是一些网页信息、资源定义语句 <META http-equiv='Content-Type' content='text/html;charset=gb2312'> //说明网页使用的编码,text/html表示该页是HTML网页,gb2312表示网页编码为“简体中文(GB2312)” <Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005'> //说明网页使用的开发工具 <TITLE>网页的标题</TITLE> <STYLE> //所包含的内容是CSS样式表的定义语句 v/:*{behavior:url(#default#VML);} //关键语句,指明XML名域“v”引用的数据是VML标记语言 </STYLE> </HEAD> <BODY> //网页正文部分 //这里即是网页的正文部分(被<body></body>标记包围),以后我们就是在这里编写各种VML标记(线、圆形、矩形)等。当然也支持在这里编写HTML标记、JS或VBS脚本 </BODY> </HTML> //网页结束语句
而至于 xmlns:o="urn:schemas-microsoft-com:office:office" 名域命名,则是引用office相关的标记处理扩展(例如歪斜效果等)。但我觉得学习它没有太高的意义(它主要为了修饰vml图形,但那些修饰标记的大多数我看起来根本是为office艺术设计的,在WEB页中没有意义、甚至不起作用,就个歪斜效果我还比较喜欢,但跟vml的填充、立体等效果处理则相形见拙),因为就vml本身而言以相当健全了。所以我不会讲述有关它的标记,而是让你充分精通vml!
4:VML语言入门 - VML网页文件格式的自由性
我说过,VML语言跟HTML很类似,不仅指的他们都是标记语言。更重要的是VML语句同样不区分大小写、属性可以是 value=参数值 或 value='参数值' 或 value="参数值" 。编写起来感觉相当自由,精通了VML以后,你会不分VML、HTML般的编辑网页!
5:VML语言入门 - 第一个VML网页实例
<HTML xmlns:v> <HEAD> <META http-equiv='Content-Type' content='text/html;charset=gb2312'> <Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005'> <TITLE>hello vml!!!</TITLE> <STYLE> v/:*{behavior:url(#default#VML);} </STYLE> </HEAD> <BODY> <b>第一个VML实例(2个OVAL圆形,1个roundrect圆矩形):</b><p> <v:Oval fillcolor='red' style='width:100;height:150'/> <v:oval strokecolor=blue style="position:absolute;z-index:2;left:300;top:100;width:100;height:150"></v:oval> <v:ROUndREct FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;> 包含<b>内容</b> </v:roundrect> </BODY> </HTML>
请你务必仔细分析上边的代码,不难看出编写VML标记的高度自由性(大小写、与HTML结合、与CSS结合……)。不但支持传统HTML的2D顺序输出结构(一个对象紧跟一个对象),以及3D输出(通过CSS的样式修改position:absolute;[使对象以3D形式绝对定位]left:350;[定义对象距离页面左边多少像素]top:200;[定义对象距离页面上边多少像素]z-index:3;[定义对象的3D高度])
6:VML语言入门 - 最简形式
其实上面的简单实例,不必非要输入那么多的代码,如果只为了测试、运行、学习VML代码,我们最简可以写成以下形式
<HTML xmlns:v> <STYLE>v/:*{behavior:url(#default#VML);}</STYLE> <BODY> <b>第一个VML实例(2个OVAL圆形,1个roundrect圆矩形):</b><p> <v:Oval fillcolor='red' style='width:100;height:150'/> <v:oval strokecolor=blue style="position:absolute;z-index:2;left:300;top:100;width:100;height:150"></v:oval> <v:ROUndREct FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;> 包含<b>内容</b> </v:roundrect>
无必要的标签,可以不要,只有需要在一一追加
7:VML语言入门 - 名域自由命名
你也许会问,只有用“v”做为VML标记的名域么?当然不是,你完全可以使用其他名称,只要名称格式英文、或英文+数字的格式,例如
<HTML xmlns:fyw> <STYLE>FYw/:*{behavior:url(#default#VML);}</STYLE> <BODY> <b>第一个VML实例(2个OVAL圆形,1个roundrect圆矩形):</b><p> <fyw:Oval fillcolor='red' style='width:100;height:150'/> <FYW:oval strokecolor=blue style="position:absolute;z-index:2;left:300;top:100;width:100;height:150"></fyw:oval> <Fyw:ROUndREct FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;> 包含<b>内容</b> </fYW:roundrect>
而且同样不区分大小写,不过我仍然建议尽量使用“小写”(打字节省时间),以及名域命名为“v”(好写好记)
1章5节:VML标记与通用属性
1:VML标记
VML是通过XML标记来描述矢量图形的,所以必须遵循一定规则,请看下面的几种标记写法
1:图形不包含内容,可以直接使用/>号结束
<HTML xmlns:v> <STYLE>v/:*{behavior:url(#default#VML);}</STYLE> <BODY> <v:oval fillcolor='red' style='width:100;height:150'/>
2:或者使用</名域名:标记名>的形式表示VML图形描述标记的结束
<HTML xmlns:v> <STYLE>v/:*{behavior:url(#default#VML);}</STYLE> <BODY> <v:oval fillcolor='red' style='width:100;height:150'></v:oval>
2:VML标记通用属性说明
和HTML标记的通用属性(如:id、name、class、title、style)等一样,VML标记也有自己的通用属性、支持HTML的通用属性、支持CSS的样式定义。通过这些属性,我们可以修饰VML图形(如线、圆形)的形状、大小、颜色、内容、边框,以及定义鼠标样式、编程用的ID索引、提示标题等等
3:VML标记特有的通用属性(非HTML、CSS所有) - 参考表
VML特有通用属性使用范例:
<HTML xmlns:v> <STYLE>v/:*{behavior:url(#default#VML);}</STYLE> <BODY> <v:oval strokeweight='5' strokecolor='red' fillcolor=yellow style='width:100;height:150'></v:oval> <v:oval stroked=false fillcolor=yellow style='width:100;height:150'/>属性名 默认值 值类型/范围 用途 strokeweight 0.75pt=1px number 描述图形的边框粗度 strokecolor black color 描述图形的边框颜色 stroked true boolean 描述图形是否使用边框 fillcolor white color 描述图形的背景颜色 filled true boolean 描述图形是否使用背景 print true boolean 描述图形是否允许被打印机打印 coordsize 1000,1000 Vector2D 暗示图形与容器空间的大小比例 coordorigin 0 0 Vector2D coordinate at top-left corner of element wrapcoords null string outline to use for tight text wrapping
4:VML标记支持的HTML通用属性 - 参考表
HTML通用属性使用范例:
<HTML xmlns:v> <STYLE>v/:*{behavior:url(#default#VML);}</STYLE> <BODY> <v:oval href='http://www.microsoft.com' title='提示标题' target='_blank' fillcolor=red style='width:100;height:150'/>属性名 默认值 值类型/范围 用途 id null string 定义元素的标识索引(多用于DHTML编程) class null classname 定义元素使用的CSS样式类 style null CSS string 描述图形的CSS样式表 title null string 定义图形的提示标题(鼠标靠近后的帮助提示) href null string 定义图形链接的URL地址 target _self _self/_blank/_top 定义图形以何种形式打开链接 contentEditable false boolean 描述图形内容是否允许用户编辑 dir ltr ltr/rtl 描述图形内容以哪种方向输出 disabled false boolean 描述图形能够响应用户事件触发
5:VML标记支持的CSS通用属性 - 参考表
其实,VML元素几乎支持所有CSS样式定义,有些HTML元素不支持的像(rotation,旋转样式),VML却支持。由于CSS2样式属性太多,这里不一一写出了,只提及一些常用、好用的样式标记。如需要了解更多有关CSS的资料,请打开LD5、或下载一本由苏小雨编著的CSS手册,内容较专业、全面。
CSS通用属性使用范例:
<HTML xmlns:v> <STYLE>v/:*{behavior:url(#default#VML);}</STYLE> <BODY> <v:oval fillcolor="rgb(255,0,0)" style='position:absolute;left:50;top:150;width:200;height:100;cursor:crosshair;z-index:5000'/> <v:oval fillcolor="#0000ff" style='position:absolute;left:150;top:250;width:200;height:100;cursor:move;rotation:60;z-index:2000'/> <v:rect fillcolor="green" style='position:absolute;left:400;top:150;width:200;height:100;cursor:help;rotation:120;zoom:2.5;color:red'>已经被缩放2.5倍</v:rect>
博文来源:http://www.cnblogs.com/GeneralXU/archive/2007/05/27/761416.html
查看更多关于VML极道教程(二) VML入门的详细内容...