📄 step1.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<body>
<table align="center">
<tr>
<td align="center" class="title"><strong>VML的基本概念</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为，
VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。
于是微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。<br>
VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。为了显示它的强大，和增加你学习VML的信心，先给你看看一个VML例子:<br><br>
<center>
<v:roundrect strokecolor="black" fillcolor="white" style="position:relative;left:20;top:5;width:100px;height:40px;z-index:9">
<v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>
<v:textbox id="memo" style="font-size:10pt;color:blue;line-height:18px" inset="1,1,1,1">Hello world!<br>Hello VML!</v:textbox>
</v:roundrect>
<v:oval strokecolor="black" fillcolor="white" style="position:relative;left:9;top:20;width:14px;height:10px;z-index:8">
<v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>
</v:oval>
<v:oval strokecolor="black" fillcolor="white" style="position:relative;left:0;top:35;width:10px;height:8px;Z-index:7">
<v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>
</v:oval>
<!--/v:group-->
</center>
<br><br>
在VML里面，标记使用的是XML扩张，需要一个namespace(命名空间)，你可以使用惯用的“v”作为命名空间，使用IE5.0到IE6.0通用的定义如下:<br><BR>
<html <font color=red>xmlns:v="urn:schemas-microsoft-com:vml"</font>><br>
<STYLE><br>
<font color=red>v\:* { Behavior: url(#default#VML) }</font><br>
</STYLE><br>
<br>
xmlns 全称就是XML NameSpace 也就是命名空间。Behavior(行为)也是IE5.0新推出的东西，它的功能非常强大，结合样式表，可以给任何HTML对象增加行为（新的属性、方法、事件），而在这里，它的用处是
把命名空间“v”和系统预定义的行为VML连接。这样定义以后，你就可以使用下面的标记了，和普通的HTML标记有所区别，每个标记都增加了一个命名空间:<br><br>
<v:shape></v:shape><br><br>
和其他HTML元素一样，VML标记里面可以定义DHTML大部分属性和事件，比如说id,name,title,onmouseover等等。在写法上VML比较灵活，很多属性既可以写在标记里面，又可以独立出一个新的标记来表示:<br><br>
<v:shape id=shape1 name=shape1 onmouseover="alert(this.id)" <FONT color=red>StrokeColor=red Path="m 0,0 l 10,10 x e"</FONT>></v:shape><br>
等同于下面的写法:<br>
<v:shape id=shape1 name=shape1 onmouseover="alert(this.id)"><br>
<FONT color=red><v:Stroke StrokeColor=red/><br>
<v:Path v="m 0,0 l 10,10 x e"/><br></font>
</v:shape><br><br>
当然不是所有的属性都可以写成独立的标记，常用的比如说上面的 Stroke(按我的理解可以翻译成线性)，Path，Shadow，Fill(填充)等，VML这样的方式可以理解为 shape 的属性分类，使属性更直观。<br>
Shape 对象派生出来的一些对象，更加直接的图象，比如说 Rect(矩形)，RoundRect(圆边的矩形)，Oval(圆)，Line(线)，PolyLine(不规则折线)，Image(图形文件)等等，以后将对这些对象细细描述。<br>
</div>
</td>
</tr>
<tr>
<td class="title">
<p align="right"><a href="javascript:self.scrollTo(0,0)">Top</a></p>
<a href="index.html">返回目录</a><br>
上一节:<a href="index.html">目录</a><br>
下一节:<a href="step2.html">Shape对象与VML坐标系</a>
</td>
</tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -