META

<META>

META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能,又使这些

功能在常用的浏览器中都有效。下面介绍几个很有用的用法:

  *<META NAME="keywords" CONTENT="yourkeyword">
  <META NAME="description" CONTENT="your homepage's description">
  本页的关键字和描述。在页面里加上这些定义后,一些搜索引擎就能够让读者根据这些关键字查找到你的主页,了解你的主页内容。

  * <META HTTP-EQUIV="refresh" CONTENT="60; URL="new.htm">
  浏览器将在60秒后,自动转向到new.htm。你可以利用这个功能,制作一个封面,在若干时间后,自动带读者来到你的目录页。
  如果URL项没有,浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。

  * <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=GB2312">
  描述本页使用的语言。浏览器根据此项,就可以选择正确的语言编码,而不需要读者自己在浏览器里选择。GB2312是指简体中文,而

台湾BIG5内码的主页则是用BIG5。

   * <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  强制性调用网上的最新版本。浏览器为了节约时间,在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时,直接显示硬盘上

的文件,而不是网上的。如果你想让读者每次都看到最新的版本,就加上这句话。

  二、LINK

  显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下:

  <LINK REL="stylesheet" HREF="style.css">

  REL参数说明两个文档之间的关系,HREF说明目标文档名。

  关于层叠样式表,请参考其他文章。

  三、BASE

  BASE主要有两种用处:

  1、<BASE HREF="原始地址">
  本文档的原始地址。这样,读者下载你的文档之后,也可以知道是从哪里下载的。

  2、<BASE TARGET="目的框架名">
  在一个框架(frame)页中,如果要把某个框架的连接在另外一个框架显示,例如,把menu框架中的连接显示到content框架,就可

以在menu框架中的页面加上<BASE TARGET="content">,这样,就没有必要在menu页面的所有连接的<a>标记中添加target属性了

,除非这个连接不是在content框架中显示。
 四、BODY

  BODY标记有一些属性,用于定义页面内的显示效果。
  ALINK、LINK、TEXT、VLINK

  文字的颜色。

  ALINK:当前激活的连接的文字颜色。
  LINK:连接的文字颜色。
  TEXT:文字的颜色。
  VLINK:参观过的文字颜色。

  注意:文字的颜色要和背景色有明显的差别,以便读者浏览。

  BACKGROUND、BGPROPERTIES、BGCOLOR:页面的背景部分。

  BACKGROUND:背景图案,该图案在页面内平铺。背景图案应保持单一色调,以保证页面文字易于阅读。
  BGPROPERTIES:设置成FIXED,则背景图案不滚动。(只对INTERNET EXPLORER有效)
  BGCOLOR:背景色。

  注意:如果你的背景图案是深色调,因之文字颜色为淡颜色,那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”,那么在背景

图案没有显示的情况下,你的文字在白颜色下很难阅读,所以应该选用一个跟你的背景图案颜色一致的背景色。

  LEFTMARGIN、TOPMARGIN:页边空白。(只对INTERNET EXPLORER有效)

  LEFTMARGIN:左边页边空白。
  TOPMARGIN:顶端页边空白。
  MARGINWIDTH、MARGINHEIGHT:页边空白。(只对NETSCAPE NAVIGATOR有效)
  MARGINWIDTH:左右页边空白宽度
  MARGINHEIGHT:上下页边空白高度

  在这里,我们第一次碰到了INTERNET EXPLORER和NETSCAPE NAVIGATOR支持不同的标记的情况。由于商业竞争的残酷,作为两

家最大的浏览器软件开发商,MICROSOFT和NETSCAPE都在扩展HTML的功能,增加一些标准HTML没有的标记。由于互相保守商业机密

,两家发展的标记不尽相同。值得庆幸的是,这两种浏览器对于自己无法辨认的标记,不会报错,只是简单的忽略过去。这样,我们把它们

各自支持的标记都加上,就可以达到一致的效果。就这个例子来说,如果我们想制作一个页面,使用两种浏览器来看,页边空白都是0,就可

以这样写:

   <BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">

  其他类似的情况也一样,只要我们把它们都写在一起一般就没有问题了。
----------------------------------------------------------
HTML 组件(HTML COMPONENTS)

2001-02-01· ·feiy··<a href=” http://www.oso.com.cn/” target=”_blank”>奥索网</a>


1 2 3 4 5 下一页

  HTML组件是IE5.0的主要扩展之一,其也最具革命性,微软的意图是用HTML组件来取代ACTIVEX控件,和ACTIVE控件一样,HTML

组件是自持续封闭对象,可以一次开发任意使用,使用HTML组件有很多好处,本文将给您揭示其中的一些!

  HTML组件带入了很多新的术语、思想、对象、方法和属性,我将通过一个日历应用给您接受这些,这个日历应用显示当前月的日期、星

期并且高亮度显示当前日期。

  ====HTML行为和HTC行为===

  HTML组件封装了HTML内容,并可以插入到别的HTML文档中。在HTML组件出现以前,在HMTL 文档中使用自定义控制唯一的办法就

是使用微软ACTIVEX控件, ACTIVEX控件的一个缺点之一就是使用前必须客户机安装HTML控件,另一方面将主页面下载 到客户机,对于

DHTML的作者来说HTML控件更具吸引力,因为他们可以使用他们熟悉的语言开发自己的 控件和组件, HTC提供了一个简单机制以在脚本

中实现DHTML行为。一个HTC文件和HTML文件没有任何差 别,并且以“.htc”为后缀,它包括脚本和一系列HTC自定义说明元素,这些元素

定义了HTML组件的属 性、方法、事件等,所有HTC元素通过对象的ID属性作为对象在脚本中使用,所有方法和属性均可在脚本 中动态操作



  您可以使用HTC实现以下行为:
  *设定属性和方法。通过“PROPERTY”和“METHOD”元素定义
  *设置自定义事件。通过“EVENT”元素实现,用该元素的“fire()”方法释放事件, 通过“createEventObject()”方法设置事件环境。
  *访问所包含该HTC的的HTML页的DHTML对象模型,使用HTC的“element"对象,返回 一个附加行为的元素,使用该对象,HTC可以

访问包含文挡及它的对象模型(属性、方 法、事件)。
  *收取通知,使用”ATTACH“元素实现,浏览器不但通知HTC标准的DHTML事件,而且通知HTC两种特殊事件:oncontentready事件

和ondocumentready事件 。

  HTC封装了行为的定义 ,行为的概念第一次出现是在IE5.0中,HTC中的高级行为封装就是行为不能和元素标记分离,在IE5.0中,在

脚本中行为可以从元素中分离出来,而在IE5.5中,元素不能和其原始行为分离。


  ===定义标记和命名空间===

  HTC的基础是自定义标记,自定义标记的第一次出现是在IE5.0中,它可以让WEB作者通过与结构关联 的一系列样式来定义文挡结构,

例如:您可以定义一个新标记<right>(段落右对其)

<HTML XMLNS:DOCJS>
<HEAD>
<STYLE>
@media all {
DOCJS/:RIGHT {text-align:right; width:100}
}
</STYLE>
</HEAD>
<BODY>
<DOCJS:RIGHT>
Read Doc JavaScript's columns, tips, tools, and tutorials
</DOCJS:RIGHT>
</BODY>
</HTML>

  在Internet Explorer中您要为页面定义自定义标记,必须为该标记提供命名空间,自定义标记是基于XML 符号的XML命名空间,正如

以下所示。我们使用DOCJS命名空间:
<HTML XMLNS:DOCJS>
  XMLNS是XML NameSpace的缩写,我定义了一个叫做RIGHT的自定义标记,要使用该标记必须在该标记前加 上正确的XML命名空间

前缀:DOCJS:RIGHT,如果命名空间未定义,则在文档解析时,自定义标记将作为未知标记处理 尽管页面有未知标记,但不会导致错误,不

影响别的标记,并且没有任何行为可以应用在其上,你可以在单个HTML标记 中定义多个命名空间:
<HTML XMLNS:DOCJS XMLNS:DOCJAVASCRIPT>
 ===最顶级页面===

  现在我们将我们注视的焦点转向我们的日历应用例子,该应用包括4个不同页面,canlendar.html为最顶级HTML文档,该页包含

了calendar.htc HTC,而canlendar.htc有反过来包含两个别的HTC:day.htc和today.htc,calendar.html

内容如下:
<HTML XMLNS:MYCAL>
<HEAD>
<TITLE>Calendar Example</TITLE>
<?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>
</HEAD>
<BODY>
<P>Click a day in the calendar to add or modify your schedule.</P>

<MYCAL:CALENDAR></MYCAL:CALENDAR>

</BODY>
</HTML>

  有几个要点您必须重点注意:第一、命名空间定义在〈HTML〉标记中,我们需要使用在我们要调用的HTC中定义的命名空

间,在canlendar.htc中的命名空间是:MYCAL,所以在<HTML>标记中必须出现XMLNS标识。
<?IMPORT>标记以问号开始以和别的正常标记区别开,该标记要求浏览器导入指定的HTC:calendar.htc,HTC可以有多个命名空间,故

在导入时需要指明要使用的命名空间(MYCAL):
<?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>

  HTC的主要优点之一就是:浏览器将一直挂起页面解析直到输入文件全部被导入为止。页面处理的异步机制将导致许多问题,浏览器并

不等元素已经完全显示才开始解析页面,作为例子,你可以建立一个对象,并且在文挡的顶部访问一个在页面底部的方法,如果对象因为某

些原因为准备好,你将会得到一个错误指示没有该对象不存在或该对象不支持你要访问的方法,相信您已经碰到过此类事情了吧!不管这样

,?IMPORT 是同步的,并且浏览器会一直等待页面导入完毕并且内容准备好。

  页面唯一而且重要的一行是调用自定义标记MYCAL:CALENDAR:
<MYCAL:CALENDAR></MYCAL:CALENDAR>

  因为页面已经导入,故该调用将会象在calendar.htc所指定的那样建立一个日历。
  您可能已经注意到HTC可以包含别的HTC,calendar.htc包括两个别的HTML组件,每个月的所有日期:day.htc和与当前日期一致

的today.htc,以下是canlendar.htc的顶部15行:

<HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY>
<HEAD>
<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
<?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>

<PUBLIC:COMPONENT tagName="CALENDAR">
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fnInit()
{
defaults.viewLink = document;
}
// -->
</SCRIPT>

  第一行在这些HTC会用到的XML命名空间。这些命名空间即包括本页自己要用到的,也包括页面需调用的命名空间(ANYDAY 和

TODAY ),注意命名空间并不一定要和HTC文件文件名一致。接着,我们导入这些HTC:
<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
<?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>

  当我们解析到这些行,浏览器将一直等到要导入的文件被导入才继续页面解析(同步导入)。然后我们定义CALENDAR自定义标记:

<PUBLIC:COMPONENT tagName="CALENDAR">
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>
PUBLIC:COMPONENT用来描述CALENDAR标记,在开始和结束标记之间,您可以将事件附加到CALENDAR标记上,事

件oncontentready
将在calendar.htc文件全部被导入,并被解析时,指定处理时间的是定义在JAVASCRIPT的函数:fnInit():
<SCRIPT LANGUAGE="JavaScript">
<!--
function fnInit()
{
defaults.viewLink = document;
}
// -->
</SCRIPT>

  viewLink指定的值非常重要,它是HTML组件的基础,它连接了HTML组件和调用该HTML组件的页面,defaults对象有别的属性并且

会在别的地方被覆盖,我们给viewLink属性赋的是HTML文档对象,正因为该连接,我们才可以建立HTC组件和包含页面互访。

  我们将在后面解释日历的层。注意,尽管在日历中当月的当天框和其他天框、空框的样式不一样,但是我们通过优先级法则来实现在包

含页中,HTML组件忽略任何相互冲突的样式定义。calendar.htc的样式定义如下:

<STYLE>
 TD {
 background-color:tan;
 width:50;
 height:50;
}
</STYLE>

  现在将该定义和日历比较,只有空框是的颜色是黄褐色的,我们调用的HTC忽略了这些定义,被调用的页面都嵌入了页面定制。以下调

用TODAY:DAY HTML组件:
<TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY>

  我们只是简单的传入了当月中的第几天,同样的调用ANYDAY:DAY 也是简单的传入当月中的第几天:
<ANYDAY:DAY value=" + dayOfMonth + "></ANYDAY:DAY>

  ===编写日历一===

  当calendar.html调用 MYCAL:CALENDAR,当月的日历将会显示在页面中,函数setCal()是主要程序段,它初始化一些变量并调

用drawCal()函数。我们也使用了三个别的函数:getMonthName()、 getDays() 和 leapYear()。让我们从最后一个函数开始:

  getDays()函数接收哪月值和哪年值,并且建立一个有12个元素的数组,用来存放每月的天数,哪一年用来决定是不是闰年,在闰年中

二月是29天,而不是闰年是28天。该函数返回指定月份的天数。以下是getDays():

function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12);
ar[0] = 31; // January
ar[1] = (leapYear(year)) ? 29 : 28; // February
ar[2] = 31; // March
ar[3] = 30; // April
ar[4] = 31; // May
ar[5] = 30; // June
ar[6] = 31; // July
ar[7] = 31; // August
ar[8] = 30; // September
ar[9] = 31; // October
ar[10] = 30; // November
ar[11] = 31; // December

// return number of days in the specified month (parameter)
return ar[month];
}

  如果指定的年数可以被4整除,那么leapYear()函数将返回“true”,否则返回”false“:

function leapYear(year) {
if (year % 4 == 0) // basic rule
return true; // is leap year
/* else */ // else not needed when statement is "return"
return false; // is not leap year
}

  getMonthName()函数返回指定月份的名字:

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array(12);
ar[0] = "January";
ar[1] = "February";
ar[2] = "March";
ar[3] = "April";
ar[4] = "May";
ar[5] = "June";
ar[6] = "July";
ar[7] = "August";
ar[8] = "September";
ar[9] = "October";
ar[10] = "November";
ar[11] = "December";

// return name of specified month (parameter)
return ar[month];
}

  setCal()函数是主模块,我们在脚本的第一行调用它。该函数为当天(now)、和每月的第一天(firstDayInstance)建立一个Date

对象。用这些对象,setCal()函数解析出关于一个月的第一天、当日,和最后一天的所有信息。

function setCal() {
// standard time attributes
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var date = now.getDate();
now = null;

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1);
var firstDay = firstDayInstance.getDay();
firstDayInstance = null;

// number of days in current month
var days = getDays(month, year);

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year);
}

  ===编写日历二===

  drawCal()函数做实际的画图工作,它接受以下参数:
  *firstDay.当月的第一天在一星期中的第几天,该值从Date对象计数而来。例如:星期天是一星期的第一天,星期六是第二天等等。例

如:如果当月的第一天是星期四,那么该参数是:5
  *lastDate.每月的天数,在五月等于31,在六月等于30
  *date.当天的日期,必须在1到lastDate之间
  *monthName.当月的名字
  *year.年

  函数的第一部分为以后的格式控制初始化一些变量:
// constant table settings
var border = 2; // 3D height of table's border
var cellspacing = 4; // width of table's border
var headerColor = "midnightblue"; // color of table's header
var headerSize = "+3"; // size of tables header font
var colWidth = 60; // width of columns in table
var dayCellHeight = 25; // height of cells containing days of the week
var dayColor = "darkblue"; // color of font representing week days
var cellHeight = 40; // height of cells representing dates in the calendar
var todayColor = "red"; // color specifying today's date in the calendar
var timeColor = "purple"; // color of font representing current time

  现在我们初始化text变量并且在表格中建立一个头元素,包括当前月和当前年:
// create basic table structure
var text = ""; // initialize accumulative variable to empty string
text += ' '; // table settings
text += ' '; // create table header cell
text += ''; // set font for table header
text += monthName + ' ' + year;
text += ''; // close table header's font settings
text += ' '; // close header cell

  我们保存表格单元的开始标示在openCol中,把结束标记放在closeCol中:
// variables to hold constant settings
var openCol = ' ';
openCol += '';
var closeCol = ' ';

  星期缩写存放在weekDay[] 数组中:
// create array of abbreviated day names
var weekDay = new Array(7);
weekDay[0] = "Sun";
weekDay[1] = "Mon";
weekDay[2] = "Tues";
weekDay[3] = "Wed";
weekDay[4] = "Thu";
weekDay[5] = "Fri";
weekDay[6] = "Sat";

  我们将重复一星期中的七天并且将他们打印在日历的下一行:
// create first row of table to set column width and specify week day
text += '
';
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol ;
}
text += '
';

 我们通过一个双重循环打印当月的日期。外部循环重复产生日历的行,我们从第一行到第Math.ceil((lastDate + firstDay - 1) / 7)行。

花点时间确信您的数学还好,比如:如果今天是星期四,firstday是5,要求的月份是六月,所以lastDate是30。行数是(5 + 30 -1)/7 即

34/7即4到5之间,这种情况下Math.ceil()将得到5。内部循环重复遍历一星期的七天,以下是双重循环程序段:
// declaration and initialization of two variables to help with tables
var dayOfMonth = 1;
var curCell = 1;

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '
';
for (var col = 1; col <= 7; ++col) {

  现在我们做个决定,首先:一些单元根本不属于该月,即当月第一天前的和当月最后一天后的,我们只是跳过这些单元:
if ((curCell < firstDay) || (dayOfMonth > lastDate)) {
text += '';
curCell++;
} else {

  这些单元将被格式为和我们指定给TAG标记的确省样式一致的格式。我们设置TD标志的样式如下:
〈STYLE〉
TD {
background-color:tan;
width:50;
height:50;
}
〈/STYLE〉

  注意不属于该月的单元都是黄褐色的
  第二个决定是:我们怎么打印当天的日期,这里我们调用TODAY HTML组件的DAY自定义标记,将该月的日期传给它的value属性。

  if (dayOfMonth == date) { // current cell represents today's date
text += ' ';
} else {

  最后一个选择是打印该月中其他的所有天的日期。我们调用ANYDAY HTML组件的DAY自定义标记,象上面一样将该月的日期传它

的value属性。
text += ' ';
  最后我们要结束循环。在每个星期遍历结尾我们递增dayOfTheMonth,在每行的结束我们需要增加一个TR标记,在双重循环的结束我

们需要结束表格,并且输出并打印text变量。
}
dayOfMonth++;
}
}
text += '
';
}

// close all basic table tags
text += ' ';
text += '
';

// print accumulative HTML string
document.write(text);
}

===ANYDAY 和 TODAY HTCs===

  ANYDAY组件定义在day,htc中,该组件是日历单元的一个封装。组件的名字是由定义在第一行的XML命名空间决定的。

  〈HTML XMLNS:ANYDAY〉
  正如canlenar.htc一样,你只有一个命名空间定义,原因是在该页不用调用其他的HTC,也就是说该HCT是叶子HTC,在这里我们定义

的自定义标签是DAY,同样我们也定义它的行为,实际上,HTML组件的定义就是自定义标签行为的定义,该行为包括一个属性和一个事件:

〈PUBLIC:COMPONENT tagName="DAY"〉
〈PROPERTY NAME="value"〉〈/PROPERTY〉
〈ATTACH EVENT="oncontentready" ONEVENT="fnInit()"〈〉/ATTACH〉
〈/PUBLIC:COMPONENT〉

  注意事件 oncontentready ,当它的调用者calendar.htc要求导入day.htc并且被完全导入,该事件就会产生,事件的处理者

是fnInit().我们来看看它:

function fnInit() {
document.body.innerHTML = element.value;
document.body.className = "clsDay";
defaults.viewLink = document;
element.appointments = "";
element.date = element.value;
}

  fnInit()演示了很多重要的HTC章节。第一行把 element.value 指定给调用页的 innerHTML 属性。HTML组件总是封装在element

对象里。value属性一般定义在PROPERTY标签中,作为提醒,实际的值从调用页面传入,canlendar.htc:
text += '〈TD〉〈ANYDAY:DAY value=' + dayOfMonth + '〉〈/ANYDAY:DAY〉〈/TD〉'
  单元样式在第二行指定:
document.body.className = "clsDay";
  样式类 clsDay 定义在该页的别处:

〈STYLE〉
.clsDay {
width:50;
height:50;
background-color:lightyellow;
align:center;
text-align:right;
}
〈/STYLE〉

  注意在日历中日期的被填色为亮黄色,这证明HTC的格式的指定模式被它的调用者所支配,即:calendar.htc.

fninit()的第三行设置default对象的viewlink属性,viewLink属性是HTML组件的基础,它可以使得一个HTC文档(day.htc)对另一

个HTML组件(calendar.htc)来说可见.这儿就是viewLink的设置:
defaults.viewLink = document;
  注意您需要联接的是整个document对象。fnInit()的最后两行初始化我们将在以后解释的两个内部属性:
element.appointments = "";
element.date = element.value;
  用于它本身的显示,DAY HTML组件和鼠标点击相关:
〈BODY οnclick="fnShowAppts()"〉
  当该天被点击,用户被提醒在该天加上他或她的约会,或者修改已经存在的约会:

function fnShowAppts() {
newAppointments = prompt("Add your appointment:", element.appointments);
if (newAppointments != null) element.appointments = newAppointments;
document.body.innerHTML = '〈FONT COLOR="red"〉' + element.date + '〈/FONT〉' + "〈BR〉" + '〈FONT SIZE="1"〉'

+ element.appointments + '〈/FONT〉';
}

  这里的输入机制非常原始,用户在约会指定中加入新行标签(〈BR〉),否则他们将都显示在一行。最后innerHTML是日期数

据(element.date)和约会指定(element.appointments)的连接纽带。

  TODAY HTML组件(today.htc)和ANYDAY组件(day.htc)非常类似。唯一的不同是样式快中的background-color是pink而不

是lightyellow,并且字体颜色是blue 而不是red.
  注意在日历中当前日期是粉红色(pink)背景蓝色的字。
  下节将列出我们所讲的日历的完整代码和一个不用HTC组件方法实现的日历代码:

  ====日历主页面===

〈HTML XMLNS:MYCAL〉
〈HEAD〉
〈TITLE〉Calendar Example〈/TITLE〉
〈?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/〉
〈/HEAD〉

〈BODY〉
〈P〉Click a day in the calendar to add or modify your schedule.〈/P〉
〈MYCAL:CALENDAR〉〈/MYCAL:CALENDAR〉

〈/BODY〉
〈/HTML〉

--------------------------------------------------------------------------------------------------------
将HTML表单数据存储为XML格式
2000-12-19 00:00:00· crystal译·yesky

--------------------------------------------------------------------------------

1 2 3 下一页

缒闶熘狝SP,XML和HTML4。0,请读下列示例

将表单数据存为XML格式

  通常的,ASP中表单提交的数据一般被写入数据库。然而,如果你想让发送数据更为简便易行,那么,可以将它书写为XML文件格式。

这种方式对于在web上收集的数据更为有用。因为XML对于所用平台来说非常的简便,所以用不着转换数据格式。

  将提交的数据写为XML文档,则需要通过Microsoft XMLDOM Object创建一个新的XML文档。Microsoft XMLDOM Object拥有一个

可扩展对象库,通过它可以创建elements,attributes以及values,通过创建的这些项目则可以组成XML文档。我无法将整个目标模型做

个完整的介绍,因为它所包含的内容太广泛,对于将建成的网站来说,目标模型甚至通过自身也能组建一个相对完整的部份。

  在XMLDOM Object被创建出来之后,通过创建目标(此目标是关于组成XML文档中每一层的ELEMENTS而言)XML的结构会被演示

出来。接下来,会举例说明XMLDOM是怎样被创建出来的。创建root element之后,将它附加在XMLDOM文件上。然后创建child

elements并附加在root element上,最后存储文档。

演示Microsoft XMLDOM 对象

<%

Dim objDom
Dim objRoot
Dim objChild1
Dim objChild2
Dim objPI

" XMLDOM 对象使用Server对象的CreateObject方法创建
Set objDom = Server.CreateObject("Microsoft.XMLDOM")
"使用XMLDOM的createElemnet方法创建一个IXMLDOMElement对象。
"createElemnet方法又一个string参数,这个string 表示该element的名称。
返回值被传递到objRoot变量。objRoot表示XML文档的根元素.。

Set objRoot = objDom.createElement("rootElement")

"Use the appendChild Method of the XMLDOM Object to add the objRoot
"Element Reference to the XML Document.

objDom.appendChild objRoot

"Now, following the same steps, you will create references to the
"child elements for the XML Document. The only difference is, when the
"child elements are appended to the document, you will call the
"appendChild Method of the IXMLDOMElement Object rather than the
"appendChild Method of the XMLDOM Object. By using the IXMLDOMElement
"to append the chi en, you are differentiating (and applying tiered
"structure to) the child elements from the root element.

Set objChild1 = objDom.createElement("childElement1")
objRoot.appendChild objChild1
Set objChild1 = objDom.createElement("childElement2")
objRoot.appendChild objChild2

"The final step to take care of before saving this document is to add
"an XML processing instruction. This is necessary so that XML parsers
"will recognize this document as an XML document.

Set objPI = objDom.createProcessingInstruction("xml","vertsion="1.0"")

"Call the insertBefore Method of the XMLDOM Object in order to insert
"the processing instruction before the root element (the zero element
"in the XMLDOM childNodes Collection).

objDom.insertBefore objPI, objDom.childNodes(0)

"Calling the Save Method of the XMLDOM Object will save this XML
"document to your disk drive. In this case, the document will be saved
"to the "c:" drive and will be named "MyXMLDoc.xml". When saving an
"XML document, if the file does not exist, it will be created. If it
"does exist, it will be overwritten.

objDom.Save "c:/MyXMLDoc.xml"

%>

文档被存档之后,如果你再打开这个文档,那么则会以如下代码列表形式出现:

MyXMLDoc.xml:

<?xml version="1.0"?>
<rootElement>
<childElement1 />
<childElement2 />
</rootElement>

  在"MyXMLDoc.xml"文档中,childElement1 和 childElement2 会以空的elements形式出现。如果它们被赋值,那么每个值都将

由标记符括起来。

  现在,让我们来思考一下如何将HTML数据写到XML文档中去。我们已经知道该如何创建和存储XML文档。将一个表单数据写到XML文

档中去的过程,现在已演变成为Request Object"s Form Collection以及将每一个表单域的value书定到XML element value 中去的步

骤重复。以上可以通过ASP来完成。

例:将数据输送到XML

  现在,我们举一个普通的HTML表单的例子来说明。此Form有用户名,地址,电话,以及E-MAIL等几个域。并将这些信息写入XML文

件中并保存。

EnterContact.html:
<html>
<head>
<title>
Contact Information
</title>
</head>
<body>
<form action="processForm.asp" method="post">

<h3>请输入你的联系方式</h3>
First Name: <input type="text" id="firstName" name="firstName"><br>
Last Name: <input type="text" id="lastName" name="lastName"><br>
Address #1: <input type="text" id="address1" name="address1"><br>
Address #2: <input type="text" id="address2" name="address2"><br>
Phone Number: <input type="text" id="phone" name="phone"><br>
E-Mail: <input type="text" id="email" name="email"><br>
<input type="submit" id="btnSub" name="btnSub" value="Submit"><br>
</form>
</body>
</html>

  将Form 中数据发送到processForm.asp.。这是一个ASP页面,在这个ASP中将反复调用同一个函数将form数据写入XML文件。

processForm.asp:

<%
"--------------------------------------------------------------------
"The "ConvertFormtoXML" Function accepts to parameters.
"strXMLFilePath - The physical path where the XML file will be saved.
"strFileName - The name of the XML file that will be saved.
"--------------------------------------------------------------------

Function ConvertFormtoXML(strXMLFilePath, strFileName)

"Declare local variables.

Dim objDom
Dim objRoot
Dim objField
Dim objFieldValue
Dim objattID
Dim objattTabOrder
Dim objPI
Dim x

"Instantiate the Microsoft XMLDOM.

Set objDom = server.CreateObject("Microsoft.XMLDOM")

objDom.preserveWhiteSpace = True

"Create your root element and append it to the XML document.

Set objRoot = objDom.createElement("contact")
objDom.appendChild objRoot

"Iterate through the Form Collection of the Request Object.

For x = 1 To Request.Form.Count

"Check to see if "btn" is in the name of the form element.
"If it is, then it is a button and we do not want to add it
"to the XML document.

If instr(1,Request.Form.Key(x),"btn") = 0 Then

"Create an element, "field".

Set objField = objDom.createElement("field")

"Create an attribute, "id".

Set objattID = objDom.createAttribute("id")

"Set the value of the id attribute equal the the name of

"the current form field.

objattID.Text = Request.Form.Key(x)

"The setAttributeNode method will append the id attribute
"to the field element.

objField.setAttributeNode objattID

"Create another attribute, "taborder". This just orders the
"elements.

Set objattTabOrder = objDom.createAttribute("taborder")

"Set the value of the taborder attribute.

objattTabOrder.Text = x

"Append the taborder attribute to the field element.

objField.setAttributeNode objattTabOrder

"Create a new element, "field_value".

Set objFieldValue = objDom.createElement("field_value")

"Set the value of the field_value element equal to
"the value of the current field in the Form Collection.

objFieldValue.Text = Request.Form(x)

"Append the field element as a child of the root element.

objRoot.appendChild objField

"Append the field_value element as a child of the field elemnt.

objField.appendChild objFieldValue
End If
Next

"Create the xml processing instruction.

Set objPI = objDom.createProcessingInstruction("xml", "version="1.0"")

"Append the processing instruction to the XML document.

objDom.insertBefore objPI, objDom.childNodes(0)

"Save the XML document.

objDom.save strXMLFilePath & "/" & strFileName

"Release all of your object references.

Set objDom = Nothing
Set objRoot = Nothing
Set objField = Nothing
Set objFieldValue = Nothing
Set objattID = Nothing
Set objattTabOrder = Nothing
Set objPI = Nothing
End Function

"Do not break on an error.

On Error Resume Next

"Call the ConvertFormtoXML function, passing in the physical path to
"save the file to and the name that you wish to use for the file.

ConvertFormtoXML "c:","Contact.xml"

"Test to see if an error occurred, if so, let the user know.
"Otherwise, tell the user that the operation was successful.

If err.number <> 0 then
Response.write("Errors occurred while saving your form submission.")
Else
Response.write("Your form submission has been saved.")
End If
%>

 如果你是在你自己的应用程序中使用以上代码,请谨记一件事情,在"ConvertFormtoXML"函数已经运行的情况下,如果XML文件名已

经存在,那么,文件将会被覆盖。在此,我建议在使用"ConvertFormtoXML"功能前,最好用随机建立的文件名。这样,就将有价值数据

被改写的风险降为零。

  关于XML文件的产生,举例如下:

Contact.xml

<?xml version="1.0" ?>
<contact>
<field id="firstName" taborder="1">
<field_value>Michael</field_value>
</field>
<field id="lastName" taborder="2">
<field_value>Qualls</field_value>
</field>
<field id="address1" taborder="3">
<field_value>2129 NW 27th St.</field_value>
</field>
<field id="address2" taborder="4">
<field_value />
</field>
<field id="phone" taborder="5">
<field_value>4055253988</field_value>
</field>
<field id="email" taborder="6">
<field_value>michaelq@vertiscope.com</field_value>
</field>
</contact>

  我在此建议:将以上代码复制到你个人网站服务器上的同名页面上,并运行以上示例时。请一定要明确你使用的是对你个人服务器有效

的路径和文件名。

  当你一切准备好时,请再次检验你的XML文件。

-=-------------------------------------------------------------------------------------------

用HTML编写应用程序(一)

2000-09-12· ·杨维钦··yesky


  看了标题有人可能会想,HTML怎么能编写应用程序呢?其实你只要简单的用.hta为扩展名保存HTML页面就行了,那就是一个HTML应

用程序(HTML Application),只要你双击就能运行。但是,HTA还不止这些,请看下面的一个标准的HTML应用程序:
  <HTML>
  <HEAD>
  <TITLE>HTA Demo</TITLE>
<HTA:APPLICATION ID="oHTA"
APPLICATIONNAME="myApp"
  BORDER="thin"
  BORDERSTYLE="normal"
  CAPTION="yes"
  ICON="filename.ico"
  MAXIMIZEBUTTON="yes"
  MINIMIZEBUTTON="yes"
  SHOWINTASKBAR="no"
  INGLEINSTANCE="no"
  SYSMENU="yes"
  VERSION="1.0"
  WINDOWSTATE="normal">;
  </HEAD>
  <BODY SCROLL="no">
  <H1>HELLO, WORLD!</H1>
  </BODY>
  </HTML>

】戳艘陨螲TML有人就会发现与我们平时看见的HTML不同,它多了HTA:APPLICATION标签。其实就是这个标签为我们提供了一系列面向

应用程序的功能。下面我就为大家详细介绍一下它的各种属性。

APPLICATIONNAME属性(applicationName)
  此属性为设置HTA的名称。
  BORDER属性(border)
  此属性为设置为HTA的窗口边框类型,默认值为 thick。
  它可以设为 thick    指定窗口为粗边框
        dialog window  指定窗口为对话框
        none  指定窗口无边框
        thin      指定窗口为窄边框

BORDERSTYLE属性(borderStyle)
  此属性为设置HTA窗口的边框格式,默认值为 normal。
  它可以设为
   normal 普通边框格式
   complex 凹凸格式组合边框
   raised 凸出的3D边框
   static 3D边框格式
   sunken 凹进的3D边框

CAPTION属性(caption)
  此属性为设置HTA窗口是否显示标题栏或标题,默认值为 yes。

ICON属性(icon)
  此属性为设置应用程序的图标。

MAXIMIZEBUTTON属性(maximizeButton)
  此属性为设置是否在HTA窗口中显示最大化按钮,默认值为 yes。

MINIMIZEBUTTON属性(minimizeButton)
  此属性为设置是否在HTA窗口中显示最小化按钮,默认值为 yes。

SHOWINTASKBAR属性(showInTaskBar)
  此属性为设置是否在任务栏中显示此应用程序,默认值为 yes。

SINGLEINSTANCE属性(singleInstance)
  此属性为设置是否此应用程序同时只能运行一次。次属性以APPLICATIONNAME属性作为标识,默认值为 no。

SYSMENU属性(sysMenu)
  此属性为设置是否在HTA窗口中显示系统菜单,默认值为 yes。

VERSION属性(version)
  此属性为设置应用程序的版本,默认值为空。

WINDOWSTATE属性(windowState)
  此属性为设置HTA窗口的初始大小,默认值为 normal。
  它可以设为 normal 默认大小
        minmize 最小化
        maximize 最大化

  以上括号中的是在脚本引用的属性。在脚本中以上属性皆为只读属 4送猓诮疟局谢箍梢允褂胏ommandLine属性来检索应用程序启

动时的参数。
  在HTA中还可以使用html中的绝大多数标签、脚本等。

---------------------------------------------------------------------------------------------------------

 ?如何才能使自己的网页个性化、多样化、与众不同是每一个网页制作者最想得到的答案。我们可以通过各种网页制作软

件,如FrontPage、Dreamweaver、Flash……以及JavaScript语言等来制作一些动态页面,从而使自己的网页更加美观和有趣。然而,

在我们使用它们的同时,我们也许忘记了其实通过一些简单的HTML语言源代码就可以简便快捷地实现一些很有趣的效果。同时只需要有

点HTML语言基础的人都能看懂,很适合进阶者参考。下面我们就来看看这些小技巧。   

  一、切换不同页面的渐进画面   

  <meta http-equiv=″page-enter″ content=″revealtrans (duration=6.0,transition=0)″>   这是一段

加在<Meta>标记中的代码(<Meta>标记位于HTML文档头部

的<Head>和<Title>标记之间),它可以使你在浏览不同页面时产生一种画面渐变的效果。   
   http-equiv=″page-enter″:表示此过程为不同页面的转换过渡   
   content=″revealtrans″:表示此过程内容为页面渐进展示   
   duration=6.0:表示渐进效果的持续时间为6秒(可自己设定,注意不要太长)   
   transition=0:这是最关键的地方,数字表示以什么渐进效果进行页面的过渡。有0~22共23种效果,包括收缩、扩散、百叶窗、雾

化、丝化等,具体效果有那些就要你们自己去发现了。23和23以后的数字表示随机效果。   

  二、页面提示   

   <body οnlοad=″alert(‘你想说的话’)″>   
   这是一段加在标记中的代码,当打开这个页面时,首先就会出现一个小提示框,上面就是你想对访问者的提示。   
   οnlοad=″alert:表示进入页面就装载提示框。我们也可以通过Javascript来实现这种效果,但显然HTML源代码简单多了。   

   三、鼠标提示
   <img scr=‘你想放的图像’ οnmοusemοve=confirm(‘你想说的话’)>   
   这段源代码可放在HTML文档的区,当访问者的鼠标碰到这个图像时,就会出现一个小提示框,上面就是你想对访问者进行的提醒。  

 
   <a href=‘联接’ οnmοusemοve=confirm(‘你想说的话’)>页面上的文字</a>   
   这段源代码也放在HTML文档的<Body>区,效果与前? 类似。   
   这些HTML语言源代码很简单,但实现的效果却很眩目。这里只有简单的几个,还有很多很多,就需要你们自己去发掘了。 
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值