网路学院,365源码网为网站站长、编程者提供资源!首页 | RSS订阅 | 365源码网

资讯首页HTML

--HTML文档中小meta标签的大作用
meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta标签用于网页的<head>与</head>中,meta标签的用处很多。meta的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用
网上机器人自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几个:
name属性
 

1、<metaname="Generator"contect="">用以说明生成工具(如MicrosoftFrontPage4.0)等;

2、<metaname="KEYWords"contect="">向搜索引擎说明你的网页的关键词;

3、<metaname="DEscription"contect="">告诉搜索引擎你的站点的主要内容;

4、<metaname="Author"contect="你的姓名">告诉搜索引擎你的站点的制作的作者;

5、<metaname="Robots"contect=

"all|none|index|noindex|follow|nofollow">

其中的属性说明如下:

设定为all:文件将被检索,且页面上的链接可以被查询;

设定为none:文件将不被检索,且页面上的链接不可以被查询;

设定为index:文件将被检索;

设定为follow:页面上的链接可以被查询;

设定为noindex:文件将不被检索,但页面上的链接可以被查询;

设定为nofollow:文件将不被检索,页面上的链接可以被查询。

http-equiv属性

1、<metahttp-equiv="Content-Type"contect="text/html";charset=gb_2312-80">

和<metahttp-equiv="Content-Language"contect="zh-CN">用以说明主页制作所使用的文字以及语言;

又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;

2、<metahttp-equiv="Refresh"contect="n;url=http://yourlink">定时让网页在指定的时间n内,跳转到页面http;//yourlink;

3、<metahttp-equiv="Expires"contect="Mon,12May200100:20:00GMT">可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;

4、<metahttp-equiv="Pragma"contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;

5、<metahttp-equiv="set-cookie"contect="Mon,12May200100:20:00GMT">cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;

6、<metahttp-equiv="Pics-label"contect="">网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的;

7、<metahttp-equiv="windows-Target"contect="_top">强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;

8、<metahttp-equiv="Page-Enter"contect="revealTrans(duration=10,transtion=

50)">和<metahttp-equiv="Page-Exit"

contect="revealTrans(duration=20,transtion

=6)">设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面。

阅读全文

今天,使用各种所见即所得工具制作主页已经是一件非常容易的事情了。但是了解HTML源代码和语法,无疑对我们制作主页有更大的帮助,也可以使用户能更精确地控制页面的效果。介绍HTML语法的文章已经很多,但是除了TITLE标记外,HEAD里还有其他的几个标记。这些标记虽然不常用,但是需要我们对他们有一定的了解。

  一、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 的颜色表示可分两种:

以命名方式定义常用的颜色,如 RED。
以 RGB 值表示,如 #FF0000 表示 red。
  命名方式所包括的色种不多也不是很方便,所以较少采用,以下介绍 RGB 值的原理:

  众所周知颜色是由 "red" "green" "blue" 三原色组合而成的,在 HTML 中对于彩度的定义是采用十六进制的,对于三原色 HTML 分别给予两个十六进位去定义,也就是每个原色有 256 种彩度,故此三原色可混合成一千六百多万个颜色。

  例如

  白色的组成是 red=ff, green=ff, blue=ff, RGB 值即为 ffffff
  红色的组成是 red=ff, green=00, blue=00, RGB 值即为 ff0000
  绿色的组成是 red=00, green=ff, blue=00, RGB 值即为 00ff00
  蓝色的组成是 red=00, green=00, blue=ff, RGB 值即为 0000ff
  黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000

  应用的时候通常在 RGB 值前加上符号 # 以示分别,但不加也可。

 

■ HTML 基本架构:


按不同颜色按钮以测试前景颜色的效果 (只适合 Internet Explorer)
      
按不同颜色按钮以测试背景颜色的效果
      
或输入一个 RGB 颜色值或名称
  


■ 16 常用颜色表:


Color Value Name  Color Value Name
 #00FFFF aqua   #808080 gray
 #000080 navy   #C0C0C0 silver
 #000000 black   #008000 green
 #808000 olive   #008080 teal
 #0000FF blue   #00FF00 lime
 #800080 purple   #FFFF00 yellow
 #FF00FF fuchsia   #800000 maroon
 #FF0000 red   #FFFFFF white


■ 其它常用颜色:


Color Value Name  Color Value Name
 #F0F8FF aliceblue   #A00000 antiquewith
 #7FFFD4 aquamarine   #F0FFFF azure
 #F5F5DC beige   #FFE4C4 bisque
 #000000 black   #FFEBCD blanchedalmond
 #0000FF blue   #8A2BE2 blueviolet
 #A52A2A brown   #DEB887 burlywood
 #5F9EA0 cadetblue   #7FFF00 chartreuse
 #D2691E chocolate   #FF7F50 coral
 #C0F000 cornfloewrblue   #FFF8DC cornsilk
 #00FFFF cyan   #00008B darkblue
 #008B8B darkcyan   #B8860B darkgoldenrod
 #A9A9A9 darkgray   #006400 darkgreen
 #DA0000 darkhaki   #8B008B darkmagenta
 #556B2F darkolivegreen   #DA000E darkorenge
 #9932CC darkorchid   #8B0000 darkred
 #E9967A darksalmon   #8FBC8F darkseagreen
 #483D8B darkslateblue   #2F4F4F darkslategray
 #00CED1 darkturquoise   #9400D3 darkviolet
 #FF1493 deeppink   #00BFFF deepskyblue
 #696969 dimgray   #1E90FF dodgerblue
 #B22222 firebrick   #FFFAF0 floralwhite
 #228B22 forestgreen   #DCDCDC gainsboro
 #00000E gostwhite   #FFD700 gold
 #00E00D golenrod   #808080 gray
 #008000 green   #ADFF2F greenyellow
 #F0FFF0 honeydew   #FF69B4 hotpink
 #CD5C5C indianred   #FFFFF0 ivory
 #F0E68C khaki   #E6E6FA lavender
 #FFF0F5 lavenderblush   #7CFC00 lawngreen
 #FFFACD lemonchiffon   #ADD8E6 lightblue
 #F08080 lightcoral   #E0FFFF lightcyan
 #0000E0 lightgodenrod   #0000E0 lightgodenrodyellow
 #0000A0 lightgray   #90EE90 lightgreen
 #FFB6C1 lightpink   #FFA07A lightsalmon
 #20B2AA lightseagreen   #87CEFA lightskyblue
 #0000EB lightslateblue   #778899 lightslategray
 #B0C4DE lightsteelblue   #FFFFE0 lightyellow
 #32CD32 limegreen   #FAF0E6 linen
 #FF00FF magenta   #800000 maroon
 #66CDAA mediumaquamarine   #0000CD mediumblue
 #BA55D3 mediumorchid   #ED0000 mediumpurpul
 #3CB371 mediumseagreen   #7B68EE mediumslateblue
 #00FA9A mediumspringgreen   #48D1CC mediumturquoise
 #C71585 mediumvioletred   #191970 midnightblue
 #F5FFFA mintcream   #FFE4E1 mistyrose
 #FFE4B5 moccasin   #FFDEAD navajowhite
 #000080 navy   #A0B0E0 navyblue
 #FDF5E6 oldlace   #6B8E23 olivedrab
 #FFA500 orange   #0E0EED orengered
 #DA70D6 orchid   #A00D00 palegodenrod
 #98FB98 palegreen   #AFEEEE paleturquoise
 #DB7093 palevioletred   #FFEFD5 papayawhip
 #FFDAB9 peachpuff   #CD853F peru
 #FFC0CB pink   #DDA0DD plum
 #B0E0E6 powderblue   #800080 purple
 #FF0000 red   #BC8F8F rosybrown
 #4169E1 royalblue   #8B4513 saddlebrown
 #FA8072 salmon   #F4A460 sandybrown
 #2E8B57 seagreen   #FFF5EE seashell
 #A0522D sienna   #87CEEB skyblue
 #6A5ACD slateblue   #708090 slategray
 #FFFAFA snow   #00FF7F springgreen
 #4682B4 steelblue   #D2B48C tan
 #D8BFD8 thistle   #FF6347 tomato
 #40E0D0 turquoise   #EE82EE violet
 #00E0ED violetred   #F5DEB3 wheat
 #000E00 hite   #F5F5F5 whitesmoke
 #FFFF00 yellow   #9ACD32 yellowgreen

全文完

阅读全文

■ 多媒体

<BGSOUND>
<EMBED>

  欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。
  也请先明白围堵标记与空标记的分别,请看 【HTML概念】。

 

■ <BGSOUND>:

  <BGSOUND> 是用来插入背景音乐,但只适用于 IE,其参数设定不多。如下

  <BGSOUND src="your.mid" autostart=true loop=infinite>

src="your.mid"
设定 midi 档案及路径,可以是相对或绝对。
autostart=true
是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。
loop=infinite
是否自动反复播放。LOOP=2 表示重复两次,Infinite 表示重复多次。
■ <EMBED>:

  EMBED> 是用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU 等等,Netscape 及 新版的 IE 都支持。其参数设定较多。如下下

  <EMBED src="your.mid" autostart="true" loop="true" hidden="true">

src="your.mid"
设定 midi 档案及路径,可以是相对或绝对。
autostart=true
是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。
loop="true"
是否自动反复播放。LOOP=2 表示重复两次,true 是, false 否。
HIDDEN="true"
是否完全隐藏控制画面,true 为是,no 为否 (内定)。
STARTTIME="分:秒"
设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。
VOLUME="0-100"
设定音量的大小,数值是0到100之间。内定则为使用系统本身的设定。
WIDTH="整数" 和 HIGH="整数"
设定控制面板的高度和宽度。(若 HIDDEN="no")
ALIGN="center"
设定控制面板和旁边文字的对齐方式,其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom
CONTROLS="smallconsole"
设定控制面板的外观。预设值是 console。
console 一般正常面板   
smallconsole 较小的面板   
playbutton 只显示播放按钮   
pausecutton 只显示暂停按钮   
stopbutton 只显示停止按钮   
volumelever 只显示音量调节按钮

阅读全文

<FRAMESET> <FRAME>
<NOFRAMES>
<IFRAME>

  欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。
  也请先明白围堵标记与空标记的分别,请看 【HTML概念】。

 

■ 框架概念 :

  谓框架便是网页画面分成几个框窗,同时取得多个 URL。只需要 <FRAMESET> <FRAME> 即可,面所有框架标记需要放在一个总起的 html 档,这个档案只记录了该框架如何分割 ,不会显示任何资料,所以不必放入 <BODY> 标记,浏览这框架必须读取这档案 面不是其他框窗的档案。<FRAMESET> 是用来划分框窗,每一窗框由一个 <FRAME> 标 记所标示,<FRAME>必须在 <FRAMESET> 范围中使用。如下例:

  <frameset cols="50%,*"> <frame name="hello" src="up2u.html"> <frame name="hi" src="me2.html">
  </frameset>

  此例中 <FRAMESET> 把画面分成左右两相等部分,左便是显示 up2u.html,右边则会显示 me2.html 这档案,<FRAME> 标记所标示的框窗永远是按由上而下、由左至右的次序。

■ <FRAMESET> <FRAME> : ▲Top


  以上所述只是最简单的框架设定,若希望达到更合适的效果请加入或修改以下各参数。

  标记:<FRAMESET>
  例子:<frameset rows="90,*" frameborder="0" border=0 framespacing="2" border="2" bordercolor="#008000"></frameset>
  功用:宣告HTML文件为框架模式,并设定视窗如何分割。

  参数:

COLS="90,*"
垂直切割画面(如分左右两个画面),接受整数值、百分数, * 则代表占用剩余的空间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三个视窗,第一个视窗是 30 pixels 的宽度,为一绝对分割,第二个视窗是当分配完第一及第三个视窗后剩下的空间,第三个视窗则占整个视窗画面的 50% 宽度为一相对分割。你可自己调整数字。

ROWS="120,*"
这是横向切割,将画面上下分开,数值设定同上。 COLS 与 ROWS 两参数尽量不要放在同一个 <FRAMESET> 标记中,因 Netacape 偶然不能显示这类型的框架,尽量采用多重分割,如以上各例。

frameborder="0"
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。

border="0"
设定框架的边框厚度,以 pixels 为单位。

bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【调色原理】。

framespacing="5"
表示框架与框架间保留的空白的距离。
  标记:<FRAME>
  例子:<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">
  功能:设定每一个框窗内的参数属性。
  参数:


SRC="a.html"
设定此框窗中要显示的网页档案名称,每个框窗一定要对应一个网页档案。

NAME="top"
设定这个框窗的名称,这样才能指定框架来作链接,必须但任意命名。

frameborder=0
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要边框。

framespacing="6"
表示框架与框架间的保留的空白的距离。

bordercolor="#008000"
设定框架的边框颜色。

scrolling="Auto"
设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示卷轴,AUTO 视情况而定。

noresize
设定不让使用者可以改变这个框框的大小,如没有设定此参数,使用者可随意地拉动框架改变其大小。

marginhight=5
表示框架高度部分边缘所保留的空间。

marginwidth=5
表示框架宽度部分边缘所保留的空间。
  以下是一些例子:
例子 HTML Code
 
 
 <frameset rows="80,*">
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset> 
例子 HTML Code
 
 
 
 <frameset rows="80,*,80">
<frame name="top" src="a.html">
<frame name="middle" src="b.html">
<frame name="bottom" src="c.html">
</frameset> 
例子 HTML Code
 
 
 <frameset cols="150,*">
<frameset rows="80,*">
<frame name="upper_left" src="a.html">
<frame name="lower_left" src="b.html">
</frameset>
<frame name="right" src="c.html">
</frameset> 
例子 HTML Code
 
 
 <frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset> 
例子 HTML Code
 
 
 <frameset cols="150,*">
<frame name="left" src="a.html">
<frameset rows="80,*">
<frame name="upper_right" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset> 

■ <NOFRAMES> : ▲Top


  当别人使用的浏览器太旧,不支持框架功能时,他看到的将是一片空白。为了避免这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容,而不是一片空白。这些内容可以是提醒浏览者采用新的浏览器的字句,也可以是一个没有框架的网页或切换到没有框架的版本的链接都可。

  应用方法:
  在<frameset> 标记范围加入 </NOFRAMES> 标记,以下是例子:

<frameset rows="80,*">
<noframes>
<body>
很抱谦,您使用的浏览器不支持框架功能,请采用新版本的浏览器。
</body>
</noframes>
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
  若浏览器支持框架,那么它不会理会 <noframes> 中的内容,但若浏览器不支持框架,由于不认识所有框架标记,不明的标记被略过,标记包围的内容便被解读出来,所以在 <noframes>范围内的文字被显示。

■ <IFRAME> : ▲Top


  这标记只适用于 IE。 它的作用是在一页中间插入一个框窗以显示另一个文件。它是一个围堵标记,但围堵着的字句只有在浏览器不支持 iframe 标记时才显示,如<noframes> 一样,可以放一些提醒的字句之类。通常 iframe 配合一个辩认浏览器的的 Java Script 会更好,若于 JavaScript 认出该浏览器并非 Internet Explorer 便会切换到另一个版本。

  <iframe> 的参数如下:
  例子: <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">

src="iframe.html"
欲显示于此框窗的文件来源除档案名称,必要加上相对或绝对路径。
name="test"
此框窗名称,这是链接标记的 target 参数所需要的,
align="MIDDLE"
可选值为 left, right, top, middle, bottom,作用不大
width="300" height="100"
框窗的宽及长,以 pixels 为单位。
marginwidth="1" marginheight="1"
该插入的文件与框边所保留的空间。
frameborder="1"
使用 1 表示显示边框, 0 则不显示。(可以是 yes 或 no)
scrolling="Yes"
使用 Yes 表示允许卷动(内定), No 则不许。
例子: 原代码
<center> <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="5" marginheight="5" frameborder="1">
很抱谦,您的浏览器并不支持 IFrame,不能正常浏览我的网页。</iframe>
</center> 
显示结果
 

阅读全文

■ 链接标记

<A>
<BASE>

  欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。
  也请先明白围堵标记与空标记的分别,请看 【HTML概念】。

■ <A> : ▲Top


  <A> 称链接标记,由 <A> 与 </A> 所围的文字、图片等等可以成为一个链接。

  <A> 的一般参数设定:

  例如 <a href="index.html" name="hello" target="_top">

href="index.html"
这参数不能与另一参数 name 同时使用,使用这参数才能制作可按的链接。


当作为一外部链接时: href 所设定的是该链接所要链到的文件名称,若该文件与此 html 档不是同在一目录请加上适当的路径,相对绝对皆可。


当作为一内部链接时: href 所设定的是该链接所要连到的同文件内参考点或指定文件的参考点,且不需要包括任何内容只要加上结束标记 </a>便可以,例如 <a href="#there"></a> 、 <a href="index.html
#there"></a> 及 <a href="http://www.school.net.hk/~chris55
/index.html#there"></a> 其中 there 便是参考点,并需于其前加上符号 # 以作识别,参考点由下一个参数 name 事先于文件中埋下。

 

name="hello"
这参数是为文件埋下参考点,作为被链结,不会被显示。所以说制作一个风部链接需要使用两次 <A> 链接标记。一个使用参数 name 事先于文件中埋下一参考点,另一个使用参数 href 链接到这个参考点。

target="_top"
设定链接被按了之后所要显示的视窗。可选值为: _blank, _parent, _self, _top, 框架名称。

target="框架名称"
这只运用于框架网页中,若设定则链接结果将显示在"框架名称"的框窗中,框窗名称是事先由框架标记命名。
target="_blank" 或 target="new"
将链接的内容打开在新的浏览器窗口中。
target="_parent"
将链接的内容当成文件的上一个画面。
target="_self"
将链接的内容显示在当前窗口中。(默认值)
target="_top"
将框架中链接的画面内容,显示在没有框架的视窗中。(即除去了框架)
例子一:(外部链接) 原代码 <a href="http://www.fortuneage.com">时代财富公司</a>
<p><a href="http://www.goEway.com">
<img src="link_image.gif" width=99 height=44 border=1 alt="goEway"></a>
<p><a href="http://www.goEway.com">
<img src="link_image.gif" width=99 height=44 border=0 alt="goEway"></a> 
显示结果 时代财富公司
 

 
 


例子二(内部链接):请到 PenPal Garden 的 FAQ Page 去体验一下何为内部链接。 原代码 <a name="test"></a>
<a href="#test">本页的内部链接</a>
<br><a href="http://www.school.net.hk/~chi/faq.html#14">跳到 PenPal Garden 的 FAQ 部分</a> 
显示结果 本页的内部链接
跳到 PenPal Garden 的 FAQ 部分 

■ <BASE> : ▲Top


  <BASE> 是一个链接基准标记,用以改变文件中所有链接标记的参数默认值。它只能适应于文件的开头部分,即标记 <HEAD> 与 </HEAD> 之间。

  <BASE> 的一般参数设定:

  例如 <base href="http://www.microsoft.com/" target="_top">

href="http://www.microsoft.com/"
设定该网页中所有 HTTP 文件及图片(包括相对路径链接及 <IMG> 图形标记 等)的默认路径,其他如 ftp:// 及 gopher:// 等则不受影响。这参数只可填入一个相对或绝对路径,不必填入档案名称。一般相对路径链接 及 <IMG> 图形标记等是默认以该网页所在的目录作为起点,若依这个例子,该文件中所有链接将会以 http://www.microsoft.com/ 作为起点,若其中有链接如 <a href="index.html">Back to Main Page</a> ,那么它不会链接到自己目录的 index.html,它将会链接到 Microsoft 的首页,这是因为相对路径已给 <BASE> 转成绝对的了。


target="_top"
设定该网页中所有链接被按之后结果所要显示的视窗,免得分别为所有链接加上 target 参数,常应用于框架中。其设定与 <A> 链接中 target 参数相同。
  例子等以后再写,你可到一些以框架制作的网页上去体检一下。

阅读全文

 

■ 其他标记

<MARQUEE>
<BLINK>
<ISINDEX>
<META>
<LINK>

  欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。
  也请先明白围堵标记与空标记的分别,请看 【HTML概念】。


■ <MARQUEE>:
  <MARQUEE> 只适用于 IE ,叫做"跑马灯" 如 Status Bar 的那种,意指走动或卷动的文字,其参数设定比较多。我先举些例子,然后再列出各参数。

例子一: 原代码 <marquee width=150>I'm a small MARQUEE</marquee> 
显示结果 I'm a small MARQUEE


例子二: 原代码 <marquee behavior=slide>This is a slide effect</marquee> 
显示结果 This is a slide effect


例子三: 原代码 <marquee behavior=alternate>撞来撞去,啊!我晕啦</marquee> 
显示结果 撞来撞去,啊!我晕啦


例子四: 原代码 <marquee scrolldelay=5 scrollamount=50>哇!!太快了,我又晕了啦!</marquee> 
显示结果 哇!!太快了,我又晕了啦!


<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>

behavior="SCROLL"
决定文字的卷动方式,可选值为:
SCROLL 一般卷动,是内定值。
SLIDE 如幻灯片,一格格的,文字一接触左边便全消失。
ALTERNATE 文字向左右两边撞来撞去。

direction="LEFT"
设定文字設定文字的卷动方向,LEFT 表示向左,是内定值,RIGHT 表示向右。

bgcolor="#0000FF"
设定文字卷动范围的背景颜色,颜色值可参考【调色原理】。

height="30" width="150"
>设定文字卷动范围,可采用相对或绝对,如 30% 或 30 等,单位为像素。

hspace="0" vspace="0"
设定文字的水平及垂直空白位置。

loop="INFINITE"
设定文字卷动次数,其值可以是正整数或 INFINITE,INFINITE 是默认值,表示无限次。

scrollamount="30"
每「格」文字间的间隔,单位是像素。

scrolldelay="500"
文字卷动的停顿时间,单位是毫秒。
■ <BLINK> : ▲Top

  <BLINK> 是令文字闪烁,只适用于 NC,用法直接,没有参数。看看例子便知:
例子: 原代码 <blink>我是天上星,闪又闪</blink> 
显示结果 我是天上星,闪又闪 

■ <ISINDEX> : ▲Top


  <ISINDEX> 可让某些 Web Server 搜索网页内的关键字,假如你的 Web Server 提供这样的 搜索功能,使用者的浏览器也支持这些功能,那么,载入网页时就会看到一个简单的 搜索框。其用法直接,没有参数,本来是要放于 <HEAD> 标记内的,但把它放在 <BODY> 标记内也不会有问题,请记住,3W 以RED反对此标记。

例子: 原代码 <isindex> 
显示结果
--------------------------------------------------------------------------------
可以搜索该索引。请键入要搜索的关键字:
--------------------------------------------------------------------------------
 

■ <META> : ▲Top


  <META> 是放于 <HEAD> 与 </HEAD>之间的标记,功用与变化等对,所以我公式化地介绍。

<meta name="Description" content="This is Chris's Home Page">
该网页的描述,作用于搜索引擎的登录。

<meta name="Keywords" content="Chris, Web, Music, photo">
该网页的关键字,作用于搜索引擎的登录。

<meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
以上行功能相同,都是要浏览器重新载入该页,不要使用快取功能,当然可以修改 Expire (过期)时间。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
设定这是 HTML 文件及其编码语系,简体中文网页使用charset=gb2312,繁体中文使用charset=big5,或者不设编码也可,纯英文网页建议使用 iso-8859-1。

<meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
这只表示该网页由什么编辑器写的。

<meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">
这行较为实用,能于预定秒数内自动转到指定网址。原代码中 10 表示 10秒。
■ <LINK> : ▲Top

  <LINK> 用来将目前文件与其它 URL 作链结,但不会有链接按钮,用于 <HEAD> 标记间,格式如下:

  <link href="URL" rel="relationship">
  <link href="URL" rev="relationship">

  其用法我们会于 Style Sheet 样式表一节详细介绍。

阅读全文

 

■ 清单标记

<OL> <LI>
<UL>
<MENU> <DIR>
<DL> <DT> <DD>

  欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。
  也请先明白围堵标记与空标记的分别,请看 【HTML概念】。

■ <OL> <LI> : ▲Top


  <OL>称为顺序清单标记。<LI>则用以标示清单项目。
  所谓顺序清单就是在每一项前加上 1,2,3... 等数字,又称编号清单。

  <OL> 的参数设定(常用):
  例如: <ol type="i" start="4"></ol>

type="i"
设定数目款式,其值有五种,请参考右表,默认为 type="1"。
start="4"
设定开始数目,不论设定了哪一数目款式,其值只能是 1,2,3.. 等整数,默认为 start="1"。
 Type Numbering style
1 arabic numbers 1, 2, 3, ...
a lower alpha a, b, c, ...
A upper alpha A, B, C, ...
i lower roman i, ii, iii, ...
I upper roman I, II, III, ...
 


  <LI> 的参数设定(常用):
  例如: <li type="square" value="4">

type="square"
只适用于非顺序清单,设定符号款式,其值有三种,如下,默认为 type="disc":
符号  是当 type="disc" 时的列项符号。
符号  是当 type="circle" 时的列项符号。
符号  是当 type="square" 时的列项符号。
value="4"
只适用于顺序清单,设定该一项的数目,其后各项将以此作为起始数目面递增, 但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有默认值。
例子: HTML Source Code (原代码) 浏览器显示结果
My best friends:
<ol>
<li>Michelle Wei
<li>Michael Wan
<li>Gloria Lam
</ol>  My best friends:
Michelle Wei
Michael Wan
Gloria Lam
 

■ <UL> : ▲Top


  <UL>称为无序清单标记。
  所谓无序清单就是在每一项前面加上 、、 等符号,故称符号清单。

  <UL> 的参数设定(常用):
  例如: <UL type="square">

type="square"
设定符号款式,其值有三种,如下,内定值为 type="disc":
符号  是当 type="disc" 时的列项符号。
符号  是当 type="circle" 时的列项符号。
符号  是当 type="square" 时的列项符号。
注意:由于 <UL> 及 <LI> 都有 type 这个参数,两者尽可能选其一。

例子: HTML Source Code (原代码) 浏览器显示结果
My Homepages:
<ul>
<li>Penpals Garden
<li>ICQ Garden
<li>Software City
<li>Creation of Webpage
</ul>  My Homepages:
Penpals Garden
ICQ Garden
Software City
Creation of Webpage
 

■ <MENU> <DIR> : ▲Top


  这两个标记不为 W3C 所赞同,希望使用者能以 <ul> 及 <ol> 代替。
  <MENU> 及 <DIR>,基本上它和 <ul> 是一样的,在一些特别的浏览器可能表现出 <ol> 的效果,于旧版的 IE 或 NC 标记 <DIR> 不显示符号或数目。两标记的用法与 <ul> 完全一样。

例子: HTML Source Code (原代码) 浏览器显示结果
My Homepages:
<dir>
<li>Penpals Garden
<li>ICQ Garden
<li>Software City
<li>Creation of Webpage
</dir>  My Homepages:
Penpals Garden
ICQ Garden
Software City
Creation of Webpage
 

■ <DL> <DT> <DD> : ▲Top


  <DL>称为定义清单标记。 <DT> 用以标记定义条目,<DD> 则用以标记定义内容。
所谓定义清单就是一种分两层的项目清单,其不带有符号及数目。

  三个标记都没有常用参数。而 <DT> <DD> 可以独立使用,只是一些旧的浏览器不支持,如 IE 3.0。常用的如 <DD> 标记可用以制造段落第一个字前的空白。

例子: 原代码 <dl>
<dt>How to use Definition List
<dd>First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.
<dt>Other things to know
<dd>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.
</dl> 
显示结果 How to use Definition List
First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.
Other things to know
We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags. 

阅读全文

 

■ 常用特殊字符:

只要你认识了 HTML 标记,你便会知道特殊字符的用处。

HTML 原代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其它特殊字符
&quot; " 引号
&reg; ® 已注册
&copy; © 版权
&trade; ™ 商标
&ensp;  半个空白位
&emsp;  一个空白位
&nbsp;  不断行的空白


■ ISO Latin-1 特殊字符 :


HTML 原代码 显示结果 描述
&AElig; Æ Uppercase AE diphthing
&Aacute; Á Uppercase A, acute accent
&Acirc; Â Uppercase A, circumflex accent
&Agrave; À Uppercase A, grave accent
&Aring; Å Uppercase A, ring
&Atilde; Ã Uppercase A, tilde
&Auml; Ä Uppercase A, dieresis or umlaut mark
&Ccedil; Ç Uppercase C, cedilla
&ETH; Ð Uppercase Eth, Icelandic
&Eacute; É Uppercase E, acute accent
&Ecirc; Ê Uppercase E, circumflex accent
&Egrave; È Uppercase E, grave accent
&Euml; Ë Uppercase E, dieresis or umlaut mark
&Iacute; Í Uppercase I, acute accent
&Icirc; Î Uppercase I, circumflex accent
&Igrave; Ì Uppercase I, grave accent
&Iuml; Ï Uppercase I, dieresis or umlaut mark
&Ntilde; Ñ Uppercase N, tilde
&Oacute; Ó Uppercase O, acute accent
&Ocirc; Ô Uppercase O, circumflex accent
&Ograve; Ò Uppercase O, grave accent
&Oslash; Ø Uppercase O, slash
&Otilde; Õ Uppercase O, tilde
&Ouml; Ö Uppercase O, dieresis or umlaut mark
&THORN; Þ Uppercase THORN, Icelandic
&Uacute; Ú Uppercase U, acute accent
&Ucirc; Û Uppercase U, circumflex accent
&Ugrave; Ù Uppercase u, grave accent
&Uuml; Ü Uppercase U, dieresis or umlaut mark
&Yacute; Ý Uppercase Y, acute accent
&aelig; æ Lowercase ae diphthing
&aacute; á Lowercase a, acute accent
&acirc; â Lowercase a, circumflex accent
&agrave; à Lowercase a, grave accent
&aring; å Lowercase a, ring
&atilde; ã Lowercase a, tilde
&auml; ä Lowercase a, dieresis or umlaut mark
&ccedil; ç Lowercase c, cedilla
&eth; ð Lowercase eth, Icelandic
&eacute; é Lowercase e, acute accent
&ecirc; ê Lowercase e, circumflex accent
&egrave; è Lowercase e, grave accent
&euml; ë Lowercase e, dieresis or umlaut mark
&iacute; í Lowercase i, acute accent
&icirc; î Lowercase i, circumflex accent
&igrave; ì Lowercase i, grave accent
&iuml; ï Lowercase i, dieresis or umlaut mark
&ntilde; ñ Lowercase n, tilde
&oacute; ó Lowercase o, acute accent
&ocirc; ô Lowercase o, circumflex accent
&ograve; ò Lowercase o, grave accent
&oslash; ø Lowercase o, slash
&otilde; õ Lowercase o, tilde
&ouml; ö Lowercase o, dieresis or umlaut mark
&szlig; ß Lowercase sharp s, German (sz ligature)
&thorn; þ Lowercase thorn, Icelandic
&uacute; ú Lowercase u, acute accent
&ucirc; û Lowercase u, circumflex accent
&ugrave; ù Lowercase u, grave accent
&uuml; ü Lowercase u, dieresis or umlaut mark
&yacute; ý Lowercase y, acute accent
&yuml; ÿ Lowercase y, dieresis or umlaut mark

阅读全文

 

■ 图形标记

<IMG>

  欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。
  也请先明白围堵标记与空标记的分别,请看 【HTML概念】。


■ <IMG> :
  <IMG> 称图形标记,主要用来插入图形标记,主要用来插入图片于网页中,至于其它用处如配合影片档案等的播放 及影像地图(Image Map 或称一图多链接)则不会在此节讲述,请看【影像地图】及【其他标记】。

  <IMG> 的一般参数设定:

  例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src="logo.gif"
图片来源,接受 .gif, .jpg 及 .png 格式,前两者通行已久,后者则由 96 年开始发展, 于未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称,否则 必须加上正确的路径,相对或绝对均可。
width=100 height=100
设定图片大小,此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实 大小,以免失真,若需要改图片大小最好使用图像编辑工具。
hspace=5 vspace=5
设定图片边沿空白,以免文字或其它图片贴近。hspace 是设定图片左右的空间, 是设定图片上下的空间,高度采用 pixels 作单位。
border=2
图片边框厚度。
align="top"
调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底部、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom,
texttop 表示图片和文字依顶线对齐,
baseline 表示图片对齐到目前文字行底线值,
absmiddle 表示图片对齐到目前文字行绝对中央,
absbottom 表示图片对齐到目前文字行绝对底部,(绝对底部是指它考虑到比如 y 、g、q 等字的下边)。
alt="Logo of PenPal Garden"
这是用以描述该图形的文字,若使用文字浏览器,由于不支持图片,这些文字 将会代替图片被显示。若支持图片的浏览器,当鼠标移至图片上该文字也会显示。
lowsrc="pre_logo.gif"
设定先显示低解析度的图片,若加入的是一张很大的图片,下载要很长的时间,这张低 解析度的图片会先被显示以免浏览者失去兴趣,通常是原图的黑白版本。
例子一: 原代码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入 
显示结果  普通插入 


例子二: 原代码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置 
显示结果  设定上下左右空白位置 


例子三: 原代码 <img src="girl.gif" width=100 height=112 border=4 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置 
显示结果  设定图片中间对齐,边框厚度为 4。 


例子四: 原代码 <img src="girl.gif" width=100 height=112 alt="beautiful lady" align="right" border=0> 设定图片靠右。 
显示结果  设定图片靠右。 


例子五: 原代码 <img src="girl.gif" width=200 height=220 alt="I'm not beautiful right now" border=0> 放大了的图片 
显示结果 

 
 

阅读全文

 

■ 影像地图

<MAP> <AREA>

  欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。
  也请先明白围堵标记与空标记的分别,请看 【HTML概念】。

■ <MAP> <AREA>:

  相信不会太多人手动设定 Image Map,通常使用网页编辑部工具的向导,那是很方便的方法,至于 <MAP> <AREA> 的详细的介绍,我们以后有空会补上。
 

阅读全文

■ 字体标记

<STRONG> <B>
<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>
<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
<H1> <H2> <H3> <H4> <H5> <H6>
<FONT> <BASEFONT>

  欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。
  也请先明白围堵标记与空标记的分别,请看 【HTML概念】。

■实体标记与逻辑标记 : ▲Top


  这一节【字体标记】你必须先明白实体标记与逻辑标记的分别,否则你会迷惑于为何不同 的标记却有相同的效果。两者分别有以下两处:

  1、实体标记有固定的显示效果,逻辑标记标记则依不同浏览器而不同。

  例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果, 它可能是加底线、粗体或反白等,所以这一节是以它们在 IE 和 NC 中的效果作介绍。

  2、多个实体标记也可有效标示同一字句,逻辑标记则通常于浏览器不能有效显示多 重的标示。

  例如两个逻辑标记 <EM> 及 <STRONG> 同时标示一字句于旧浏览器常失去作用。


实体标记有:
<I> <B> <U>
逻辑标记有:
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>
  若要求真确的效果当然以实体标记为佳。

■<STRONG> <B> : ▲Top


  两者皆能产生字体加粗效果,但必须注意的是当文件编码被设为汉字时,两者所标示的中文字不会在 Netscape Netvigator 显示粗体效果。

例子: (第一行是没有任何字体标记的,作参照用) HTML Source Code (原代码) 浏览器显示结果
Creation of Webpage
<br><STRONG>Creation of Webpage</STRONG>
<br><B>Creation of Webpage</B>  Creation of Webpage
Creation of Webpage
Creation of Webpage 

■<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>: ▲Top


  这些标记在 Internet Explorer 里都会产生斜体效果,而只有 </DFN> 于 Netscape Netvigator 失去作用。这些标记中只有 <ADDRESS> 较为特别,因为它包括换行效果所以不必在它前面加上 <BR> 标记。

例子: HTML Source Code (原代码) 浏览器显示结果
<I>Creation of Webpage</I>
<br><EM>Creation of Webpage</EM>
<br><VAR>Creation of Webpage</VAR>
<br><CITE>Creation of Webpage</CITE>
<br><DFN>Creation of Webpage</DFN>
<ADDRESS>Creation of Webpage</ADDRESS>  Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage

■<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB> ▲Top


  为方便对照及记认,所以把十个标记放在一起介绍。

<TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每个字母之间的距离稍微加宽。但于 NC 不见得如此。
<U> 是加底线的标记,一些特别的浏览器并不支持,因顾虑到与链接混淆。
<STRIKE> 加上删除线的标记。
<BIG> 令字体加大。
<SMALL> 令字体变细。
<SUB> 为下标字, <SUP> 则为上标字,仅剩的数学标记。
例子: (第一行是没有任何字体标记的,作参照用) HTML Source Code (原代码) 浏览器显示结果
Creation of Webpage
<br><TT>Creation of Webpage</TT>
<br><SAMP>Creation of Webpage</SAMP>
<br><CODE>Creation of Webpage</CODE>
<br><KBD>Creation of Webpage</KBD>
<br><U>Creation of Webpage</U>
<br><STRIKE>Creation of Webpage</STRIKE>
<br><BIG>Creation of Webpage</BIG>
<br><SMALL>Creation of Webpage</SMALL>
<br>12345<SUB>7</SUB> 6789<SUP>9</SUP>  Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
123457 67899 

■<H1> <H2> <H3> <H4> <H5> <H6>: ▲Top


  这些标记是标题标记,由 <H1> 到 <H6> 逐渐变小。每个标题标记所标示的字句将独占一行且上下留一空白行。

例子: 原代码 <H1>Header Level 1</H1>
<H2>Header Level 2</H2>
<H3>Header Level 3</H3>
<H4>Header Level 4</H4>
<H5>Header Level 5</H5>
<H6>Header Level 6</H6> 
显示结果 Header Level 1
Header Level 2
Header Level 3Header Level 4
Header Level 5
Header Level 6

■<FONT> <BASEFONT>: ▲Top


  这一节只有这两个标记具参数设定,且两者的参数设定是一样的,都是负责设定文字的大小、 字型及颜色,但各有用处,且看以下比较:

<BASEFONT> 可以用于文件开头部分,即 <HEAD> 与 </HEAD> 之间的位置,将 影响全文字句,是一个空标记,用以改变字体显示的内定值。
<FONT> 是应用于文件的内文部分,即 <BODY> 与 </BODY> 之间的位置,只影响 所标示的字句,是一个围堵标记。
两标记可同时存在,唯没被 <FONT> 所标示的字句才直接受 <BASEFONT> 所影 响,而 <FONT> 本身也受 <BASEFONT> 的影响。
  <FONT>的参数设定:

  例子: <font face="Arial" size="+2" color="#008000">Creation of Webpage</font>


face="Arial"
设定文字的字形。Arial 是常用的一种,请不要使用 Window 附带字 体以外的字体。对于没有设定为中文代码的中文网页,Netscape Netvigator 不会显示此标记 所指明的任何中文字体。
size="+2"
设定文字的大小。其值可以是绝对或相对,
绝对的意思是标记自己决定文字的大小,不受 <BASEFONT> 的影响,如
size="5" 表示其大小便是 5, 而html内定值为 3,即 size="3"和没设定是一样的。
相对的意思是在默认值 3 基础上增大或缩小的级数,如 size="+2" 便等同绝 对表示法的 size="5",蓝天若已设定 <BASEFONT size="n"> 则其实际大小便是 n+2 不 再是 3+2 了。<BASEFONT>只有绝对表示法。
color="#008000"
设定文字的颜色。#008000 表示绿色,各类颜色值及调色法请参考【调色原理】
例子: 原代码 <font size="+1">I love Creation of Webpage</font>
<br><font size="+2" color="#800080">I love Creation of Webpage</font>
<br><font face="Times New Roman" size="5" color="#008000">I love Creation of Webpage</font> 
显示结果 I love Creation of Webpage
I love Creation of Webpage
I love Creation of Webpage 

阅读全文

所谓“存取键”就像 windows 应用程序中的 Alt 快捷键,同时按 Alt 键和某个字母键,可以快速切换到文本框、按钮等页面对象上。

(1)、文本框的 Access Key:
<FORM>
<LABEL FOR="Namebox" ACCESSKEY="N"><U>N</U>ame:</LABEL>
<INPUT TYPE="TEXT" ID="Namebox" SIZE=30>
<LABEL FOR="Emailbox" ACCESSKEY="E"><U>E</U>mail:</LABEL>
<INPUT TYPE="TEXT" ID="Emailbox" SIZE=30>
<LABEL FOR="areabox" ACCESSKEY="S"><U>S</U>uggest</LABEL>
<TEXTAREA ID="areabox" COLS="10" ROWS="2"></TEXTAREA>
</FORM>
其中的 <U>…</U> 标签产生下划线;For="Name" 和 ID="Name" 中的 Name 是一致的;ACCESSKEY=… 设置“热键”。

(2)、选择框的 Acsess Key:选择项目时不必非得在框内点击鼠标了,在文本上选择即可:
<form>
<label for="check1">我爱张庆</label>
<input type="CHECKBOX" id="check1" value="often" name="checkoften">
<label for="check2">我更爱《“十万个为什么”网站》</label>
<input type="CHECKBOX" id="check2" value="seldom" name="checkseldom">
</form>

(3)、链接的快捷键:
按 Alt+[字母] 就可以打开一个链接,方便不方便?
<A HREF="your_page.htm" ACCESSKEY="A">按 Alt+A 打开该链接</A>
 

阅读全文

--HTML中的表格元素[转帖]
一,<table>标签。<table>标签是表格的标识符,用来界定表格的范围。<table>标签是成对使用的标签,手标签和和尾标签之间的内容就是表格的内容。<table>标签的属性主要有border,width,height,align,cellapcing,cellpasdding.它们都是可选的。
 

1,border属性的参数值是数字,表示表格边框宽度所占的像素点数。它也可以不带有参数值使用,仅表示该表格是有边框的。例如,<tableborder=10>表示该表格的边框宽度为10个像素点。

2,width和height属性的作用是指定表格的大小。其中width属性用来规定表格的宽度,height属性用以指定表格的高度。这两个属性的参数值可以是数字或者百分数,其中数字表示表格的宽(高)所占的像素点,百分数表示表格的宽(高)占据浏览器窗口的宽(高)度的百分比。例如:<tablewidth=200height=50%>表示表格的宽度为200个像素点,高度为浏览器窗口高度的50%。

3,align属性的参数值为left,center和right之一,分别表示表格位于其相邻文字的左侧、表格水平居中和表格位于相邻文字的右侧。例如:

<html>
<head>
<title>测试页面</title>
</head>
<body>
<tableborder=3width=60%align=left>
<TR>
<TH>单元格</TH><TH>单元格</TH>
<TH>单元格</TH><TH>单元格</TH><TH>单元格</TH>
</TR>
<TR>
<TD>1</TD><TD>解释项</TD>
<TD>解释项</TD><TD>同上</TD><TD>同上</TD>
</TR>
<TR>
<TD>2</TD><TD>解释项</TD><TD>同上</TD>
<TD>又一单元</TD><TD>接着来</TD>
</TR>
</table>

文字说明,这个就是表格居于相邻文字左侧的范例,只要改变一下align的属性参数就可以改变表格的位置了。

<HR>

4,cellspacing属性。cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字,表示单元格间隙所占的像素点数。

5,cellpadding属性。用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字,表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。例如:

<html>
<head>
<title>测试页面</title>
</head>
<body>
<HR>
没加如单元格属性的规定之前的样子:<BR>
<tableborder=3>
<TR>
<TH>单元格</TH><TH>单元格</TH>
<TH>单元格</TH><TH>单元格</TH><TH>单元格</TH>
</TR>
<TR>
<TD>1</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TH>
<TR>
<TD>2</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TR>
</table>
<HR>
加入单元格属性规定之后的情形:<BR>
<tableborder=3cellspacing=10cellpadding=10>
<TR>
<TH>单元格</TH><TH>单元格</TH>
<TH>单元格</TH><TH>单元格</TH><TH>单元格</TH>
</TR>
<TR>
<TD>1</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TH>
<TR>
<TD>2</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TR>
</table>
</body>
</html>

接着我们来看看刚刚看到的几个不熟悉的标签是怎么个意思。

一,<CAPTION>标签。是表格的标题的标签。它是成对使用的标签。在首标签和尾标签之间的内容就是表个的标题。<caption>有两个属性:align和valign它们都是可选的。

其中,align属性的参数值为left,center,right之一,分别表示表格标题与表格的左边沿儿对齐,位于表格中间和表格的右边沿儿对齐。缺省时,表格标题位于表格的中间;valign属性的参数值是top和bottom之一,分别表示表格标题位于表格的上方和下方,缺省时,表格的标题位于表格的上方。例如:

<html>
<head>
<title>测试页面</title>
<body>
<HR>
<tableborder=3>
<captionalign=right><b>这就是该表格的标题</b></caption><BR>
<TR>
<TH>单元格</TH><TH>单元格</TH>
<TH>单元格</TH><TH>单元格</TH><TH>单元格</TH>
</TR>
<TR>
<TD>1</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TH>
<TR>
<TD>2</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TR>
</table>
<HR>
</body>
</html>

这个例子中的表格标题是与表格的右边沿儿对齐的。

二,<TR>标签。是行标签。HTML的表格是按行组织的。一个表格由几行组成,就要有几个标签与之对应。行标签<TR>是成对使用的标签。它必须和<TH><TD>标签配合使用,后者在使用时嵌套在<TR>和</TR>之间,用来规定该行中各单元格的内容。<TR>标签有两个属性。即align和valign属性,他们都是可选的。

其中align属性的参数值为left,center和right之一(以后如我特别说明,该属性的参数都是这三个)分别表示个行中各单元格内容是左对齐、水平居中和右对齐的。缺省时为left(居左);valign属性的参数值是top,middle和bottom之一,分别表示该行中各单元格内容是紧靠上沿儿,垂直居中和紧靠下沿儿的。缺省时为middle(居中)。

三,<TH>和<TD>标签

<TH>和<TD>标签都是用来规定单元格内容的,表头标签<TH>用来规定表头元素的内容,表头元素一般位于每列的首行,用来说明该列的具体数据是关于哪个对象的。<TH>标签是成对的。数据标签<TD>也是成对使用的,首标签和尾标签之间的内容就是该单元格的具体数据(也就是对表头的解释内容)由于两者都是用于规定单元内容的,<TH>和<TD>标签的所有属性及相应的属性功能是完全一样的。<TH><TD>标签的属性有rowspancolspanalignvalign。

(1)rowspan属性的参数值是数字,表示该单元格所跨的行数。缺省值为1。

(2)colspan属性的参数值也是数字,表示该单元格所跨的列数。缺省值为1。

(3)align属性用于规定单元格内容在水平方向上的位置。三个参数值分别表示该单元格是左对齐,居中还是右对齐。缺省时为left(左对齐)

(4)valign属性用于规定单元格内容在垂直方向上的位置。属性的参数值为top,,middle和bottom之一,分别表示该单元格内容是紧靠上沿儿,垂直居中还是紧靠下沿儿。缺省时为middle(垂直居中)。

好了,今天差不多就到这儿吧!太多了看不过来,不容易记忆。

阅读全文

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

 
<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>

 ===CALENDAR HTC===

 
<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>

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

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

// Copyright 1997 -- Tomer Shiran

setCal();

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
}

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];
}

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];
}

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);
}

function drawCal(firstDay, lastDate, date, monthName, year) {
// constant table settings
//var headerHeight = 50 // height of the table's header cell
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

// create basic table structure
var text = ""; // initialize accumulative variable to empty string
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'; // table settings
text += '<TH COLSPAN=7 HEIGHT=' + 10 + '>'; // create table header cell
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'; // set font for table header
text += monthName + ' ' + year;
text += '</FONT>'; // close table header's font settings
text += '</TH>'; // close header cell

// variables to hold constant settings
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
openCol += '<FONT COLOR="' + dayColor + '">';
var closeCol = '</FONT></TD>';

// 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 += '<TR ALIGN="center" VALIGN="center">';
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '</TR>';

// 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 += '<TR ALIGN="right" VALIGN="top">';
for (var col = 1; col <= 7; ++col) {
if ((curCell < firstDay) || (dayOfMonth > lastDate)) {
text += '<TD></TD>';
curCell++
} else {
if (dayOfMonth == date) { // current cell represents today's date
text += '<TD><TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY></TD>';
} else {
text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>';
}
dayOfMonth++;
}
}
text += '</TR>';
}

// close all basic table tags
text += '</TABLE>';
text += '</CENTER>';

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

// -->
</SCRIPT>
</BODY>
</HTML> 

阅读全文

===CALENDAR HTC===

 
<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>

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

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

// Copyright 1997 -- Tomer Shiran

setCal();

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
}

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];
}

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];
}

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);
}

function drawCal(firstDay, lastDate, date, monthName, year) {
// constant table settings
//var headerHeight = 50 // height of the table's header cell
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

// create basic table structure
var text = ""; // initialize accumulative variable to empty string
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'; // table settings
text += '<TH COLSPAN=7 HEIGHT=' + 10 + '>'; // create table header cell
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'; // set font for table header
text += monthName + ' ' + year;
text += '</FONT>'; // close table header's font settings
text += '</TH>'; // close header cell

// variables to hold constant settings
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
openCol += '<FONT COLOR="' + dayColor + '">';
var closeCol = '</FONT></TD>';

// 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 += '<TR ALIGN="center" VALIGN="center">';
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '</TR>';

// 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 += '<TR ALIGN="right" VALIGN="top">';
for (var col = 1; col <= 7; ++col) {
if ((curCell < firstDay) || (dayOfMonth > lastDate)) {
text += '<TD></TD>';
curCell++
} else {
if (dayOfMonth == date) { // current cell represents today's date
text += '<TD><TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY></TD>';
} else {
text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>';
}
dayOfMonth++;
}
}
text += '</TR>';
}

// close all basic table tags
text += '</TABLE>';
text += '</CENTER>';

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

// -->
</SCRIPT>
</BODY>
</HTML>

阅读全文


===TODAY HTC===

 
<HEAD>
<PUBLIC:COMPONENT tagName="DAY">
<PROPERTY NAME="value"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"></ATTACH>
</PUBLIC:COMPONENT>

<STYLE>
.clsDay {
width:50;
height:50;
background-color: pink;
align:center;
text-align:right;
}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function fnInit()
{
document.body.innerHTML = '<FONT COLOR="blue">' + element.value + '</FONT>';
document.body.className = "clsDay";
defaults.viewLink = document;
element.appointments = "";
element.date = element.value;
}

function fnShowAppts()
{
newAppointments = prompt("Add your appointment:", element.appointments);
if (newAppointments != null) element.appointments = newAppointments;
document.body.innerHTML = '<FONT COLOR="blue">' + element.date + '</FONT>' + "<BR>" + '<FONT SIZE="1">' + element.appointments + '</FONT>';
}
// -->
</SCRIPT>
</HEAD>

 
 
 

阅读全文

基本语法
<marquee>...</marquee>
移动属性的设置,这种移动不仅仅局限于文字,也可以应用于图片,表格等等

方向
<direction=#>#=left,right,up ,down <marqueedirection=left>从右向左移!</marquee>

方式
<bihavior=#>#=scroll,slide,alternate<marqueebehavior=scroll>一圈一圈绕着走!</marquee>
<marqueebehavior=slide>只走一次就歇了!</marquee>
<marqueebehavior=alternate>来回走</marquee>

循环
<loop=#>#=次数;若未指定则循环不止(infinite)<marqueeloop=3width=50%behavior=scroll>只走3趟</marquee><P>
<marqueeloop=3width=50%behavior=slide>只走3趟</marquee>
<marqueeloop=3width=50%behavior=alternate>只走3趟!</marquee>

速度
<scrollamount=#><marqueescrollamount=20>啦啦啦,我走得好快哟!</marquee>

延时
<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦啦啦,我走一步,停一停!</marquee>

外观(Layout)设置

对齐方式(Align)
<align=#>#=top,middle,bottom<fontsize=6>
<marqueealign=#width=400>啦啦啦,我会移动耶!</marquee>
</font>

底色
<bgcolor=#>#=rrggbb16进制数码,或者是下列预定义色彩:
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua<marqueebgcolor=aaaaee>颜色!</marquee>

面积
<height=#width=#><marqueeheight=40width=50%bgcolor=aaeeaa>面积!</marquee>

空白
(Margins)<hspace=#vspace=#>
<marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle>面积!</marquee>

阅读全文
1. 相关的html元素
(1) text , edit , password , textarea
(2) radio , checkbox
(3) select
2. IE中的写法
(1) document.form_name.text_name.disabled = true;
document.form_name.edit_name.disabled = true;
document.form_name.password_name.disabled = true;
document.form_name.textarea_name.disabled = true;
(2) document.form_name.radio_name[i].disabled = true;
document.form_name.checkbox_name[i].disabled = true;
(3) document.form_name.select_name.disabled = true;
3. Netscape4.76中的写法
(1) document.form_name.text_name.disabled = true;
document.form_name.edit_name.disabled = true;
document.form_name.password_name.disabled = true;
在相应的text , edit , password , textarea 元素上添加对focus事件处理的方法:onfocus=”disableElements(this)”
function disableElements(obj)
{
if(obj.disabled)
{
obj.blur();
}
}
(2) document.form_name.radio_name[i].disabled = true;
document.form_name.checkbox_name[i].disabled = true;
在相应的radio , checkbox元素上添加对mousedown事件处理的方法:onclick=”return disableElements(this)”
function disableElements(obj)
{
if(obj.disabled)
{
obj.checked=false;
return false;;
}
}
(3) document.form_name.select_name.disabled = true;
在相应的select元素上添加对change事件进行处理的方法:onchange=”disableElements(this)”
function disableElements(obj)
{
if (obj.disabled)
{
for (var i=0; i<obj.options.length; i++)
{
obj.options[i].selected = obj.options[i].frozenStatus;
(obj.options[i].selected = false;这样写也可以.)
}
}
}
最后我附上一个例子,这个例子在IE6.0和Netscape4.76下测试通过!
<html>
<body>
<form>
<br>Test:<input type="text" name="t1" onfocus="disableText(this)">
<br>Edit:<input type="edit" name="t2" onfocus="disableEdit(this)">
<br>Textarea:<textarea name="t3" onfocus="disableTextarea(this)"></textarea>
<br>Password: <input type="password" name="t4" onfocus="disablePassword(this)">
<br>Radiobutton: <input type="radio" name="t5" onmousedown="return disableRadio(this)">
<br>Checkbox: <input type="checkbox" name="t6" onclick="return disableCheck(this)">
<br>Defaul disabled Checkbox: <input type="checkbox" disabled name="t8" onmousedown="return disableCheck2(this)">
<br>Select:
<select name="t7" onchange=" ChangeSelect(this)">
<option> one
<option> two
<option> three
<option> four
</select>
<br><input type="button" value="Enable/Disable" onClick="change()">
</form>
</body>
</html>
<script language="javaScript">
function disableText(obj)
{
if(obj.disabled)
obj.blur();
}
function disableEdit(obj)
{
if(obj.disabled)
obj.blur();
}
function disablePassword(obj)
{
if(obj.disabled)
obj.blur();
}
function disableTextarea(obj)
{
if(obj.disabled)
obj.blur();
}
function disableRadio(obj)
{
if(obj.disabled)
{
obj.checked=false;
return false;
}
}
function disableCheck(obj)
{
if(obj.disabled)
{
obj.checked=false;
return false;
}
}
function disableCheck2(obj)
{
obj.disabled=true;
if(obj.disabled)
{
obj.checked=false;
return false;
}
}
function ChangeSelect(obj)
{
if (obj.disabled)
{
for (var i=0; i<obj.options.length; i++)
{
//obj.options[i].selected = obj.options[i].frozenStatus;
obj.options[i].selected = false;
(这两种写法都是可以的)
}
}
}
function change()
{
document.forms[0].t1.disabled=!document.forms[0].t1.disabled;
document.forms[0].t2.disabled=!document.forms[0].t2.disabled;
document.forms[0].t3.disabled=!document.forms[0].t3.disabled;
document.forms[0].t4.disabled=!document.forms[0].t4.disabled;
document.forms[0].t5.disabled=!document.forms[0].t5.disabled;
document.forms[0].t6.disabled=!document.forms[0].t6.disabled;
document.forms[0].t7.disabled=!document.forms[0].t7.disabled;
document.forms[0].t1.value="";
document.forms[0].t2.value="";
document.forms[0].t3.value="";
document.forms[0].t4.value="";
document.forms[0].t5.checked=false;
document.forms[0].t6.checked=false;
document.forms[0].t7.value="";
for (var i=0; i<document.forms[0].t7.options.length; i++)
{
//document.forms[0].t7.options[i].selected = document.forms[0].t7.options[i].frozenStatus;
document.forms[0].t7.options[i].selected = false;
}
}
</script>
阅读全文

1.avi格式

<objectid="video"width="400"height="200"border="0"classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<paramname="ShowDisplay"value="0">
<paramname="ShowControls"value="1">
<paramname="AutoStart"value="1">
<paramname="AutoRewind"value="0">
<paramname="PlayCount"value="0">
<paramname="Appearancevalue="0value=""">
<paramname="BorderStylevalue="0value=""">
<paramname="MovieWindowHeight"value="240">
<paramname="MovieWindowWidth"value="320">
<paramname="FileName"value="file:///D|/work/vod/Mbar.avi">
<embedwidth="400"height="200"border="0"showdisplay="0"showcontrols="1"autostart="1"autorewind="0"playcount="0"moviewindowheight="240"moviewindowwidth="320"filename="file:///D|/work/vod/Mbar.avi"src="Mbar.avi">
</embed>
</object>

2.mpg格式

<objectclassid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A"id="ActiveMovie1"width="239"height="250">
<paramname="Appearance"value="0">
<paramname="AutoStart"value="-1">
<paramname="AllowChangeDisplayMode"value="-1">
<paramname="AllowHideDisplay"value="0">
<paramname="AllowHideControls"value="-1">
<paramname="AutoRewind"value="-1">
<paramname="Balance"value="0">
<paramname="CurrentPosition"value="0">
<paramname="DisplayBackColor"value="0">
<paramname="DisplayForeColor"value="16777215">
<paramname="DisplayMode"value="0">
<paramname="Enabled"value="-1">
<paramname="EnableContextMenu"value="-1">
<paramname="EnablePositionControls"value="-1">
<paramname="EnableSelectionControls"value="0">
<paramname="EnableTracker"value="-1">
<paramname="Filename"value="../../../mpeg/halali.mpg"valuetype="ref">
<paramname="FullScreenMode"value="0">
<paramname="MovieWindowSize"value="0">
<paramname="PlayCount"value="1">
<paramname="Rate"value="1">
<paramname="SelectionStart"value="-1">
<paramname="SelectionEnd"value="-1">
<paramname="ShowControls"value="-1">
<paramname="ShowDisplay"value="-1">
<paramname="ShowPositionControls"value="0">
<paramname="ShowTracker"value="-1">
<paramname="Volume"value="-480">
</object>


3.rm格式

<OBJECTID=video1CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"HEIGHT=288WIDTH=352>

<paramname="_ExtentX"value="9313">
<paramname="_ExtentY"value="7620">
<paramname="AUTOSTART"value="0">
<paramname="SHUFFLE"value="0">
<paramname="PREFETCH"value="0">
<paramname="NOLABELS"value="0">
<paramname="SRC"value="rtsp://203.207.131.35/vod/dawan-a.rm";>
<paramname="CONTROLS"value="ImageWindow">
<paramname="CONSOLE"value="Clip1">
<paramname="LOOP"value="0">
<paramname="NUMLOOP"value="0">
<paramname="CENTER"value="0">
<paramname="MAINTAINASPECT"value="0">
<paramname="BACKGROUNDCOLOR"value="#000000"><embedSRCtype="audio/x-pn-realaudio-plugin"CONSOLE="Clip1"CONTROLS="ImageWindow"HEIGHT="288"WIDTH="352"AUTOSTART="false">

</OBJECT>

4.wmv格式

<objectid="NSPlay"width=200height=180classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"standby="LoadingMicrosoftWindowsMediaPlayercomponents..."type="application/x-oleobject"align="right"hspace="5">
<!--ASXFileName-->
<paramname="AutoRewind"value=1>
<paramname="FileName"value="xxxxxx.wmv">
<!--DisplayControls-->

<paramname="ShowControls"value="1">
<!--DisplayPositionControls-->

<paramname="ShowPositionControls"value="0">
<!--DisplayAudioControls-->

<paramname="ShowAudioControls"value="1">
<!--DisplayTrackerControls-->

<paramname="ShowTracker"value="0">
<!--ShowDisplay-->

<paramname="ShowDisplay"value="0">
<!--DisplayStatusBar-->

<paramname="ShowStatusBar"value="0">
<!--DiplayGoToBar-->

<paramname="ShowGotoBar"value="0">
<!--DisplayControls-->

<paramname="ShowCaptioning"value="0">
<!--PlayerAutostart-->

<paramname="AutoStart"value=1>
<!--AnimationatStart-->

<paramname="Volume"value="-2500">
<paramname="AnimationAtStart"value="0">
<!--TransparentatStart-->

<paramname="TransparentAtStart"value="0">
<!--Donotallowachangeindisplaysize-->

<paramname="AllowChangeDisplaySize"value="0">
<!--Donotallowscanning-->

<paramname="AllowScan"value="0">
<!--Donotshowcontectmenuonrightmouseclick-->

<paramname="EnableContextMenu"value="0">
<!--Donotallowplaybacktogglingonmouseclick-->
<paramname="ClickToPlay"value="0">
</object>

最简单的播放代码

<embedsrc="http://wmt2.aboutmedia.com.tw/Aboutmedia/warner/mtv/naying-021011_01v_120k.wmv";;
autostart="true"loop="true"width="200"height="150">
把这个网址http://wmt2.aboutmedia.com.tw/Aboutmedia/warner/mtv/naying-021011_01v_120k.wmv换成你要看的电影就行了


有图像的rm格式:

<OBJECTclassid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFAheight=288id=video1width=305VIEWASTEXT>
<paramname=_ExtentXvalue=5503>
<paramname=_ExtentYvalue=1588>
<paramname=AUTOSTARTvalue=-1>
<paramname=SHUFFLEvalue=0>
<paramname=PREFETCHvalue=0>
<paramname=NOLABELSvalue=0>
<paramname=SRCvalue=http://media.cdut.edu.cn/ram/new/xiaoxin1.ram>
<paramname=CONTROLSvalue=Imagewindow,StatusBar,ControlPanel>
<paramname=CONSOLEvalue=RAPLAYER>
<paramname=LOOPvalue=0>
<paramname=NUMLOOPvalue=0>
<paramname=CENTERvalue=0>
<paramname=MAINTAINASPECTvalue=0>
<paramname=BACKGROUNDCOLORvalue=#000000>
</OBJECT>

无图像的rm格式:如相声,歌曲。。。

<objectID=video2WIDTH=300HEIGHT=62CLASSID=CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA>
<paramname=_ExtentXvalue=9657>
<paramname=_ExtentYvalue=847>
<paramname=AUTOSTARTvalue=-1>
<paramname=SHUFFLEvalue=0>
<paramname=PREFETCHvalue=0>
<paramname=NOLABELSvalue=0>
<paramname=SRCvalue=http://210.242.69.206/ramgen/broadcast/BCC/encoder/hipop.rm>
<paramname=CONTROLSvalue=StatusBar,controlpanel>
<paramname=CONSOLEvalue=Clip1>
<paramname=LOOPvalue=0>
<paramname=NUMLOOPvalue=0>
<paramname=CENTERvalue=0>
<paramname=MAINTAINASPECTvalue=0>
<paramname=BACKGROUNDCOLORvalue=#000000>
</object>
最简单的media格式的播放器。。自动识别有无图像,但是版本是你机器的!
<embedsrc=mms://61.175.132.221/tv/mtv/f4/makeawish.wmvwidth=200height=200autostart=trueloop=true></embed>
有图像的media播放器,自动调用网上的插件。
<objectid=nstvclassid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6width=280height=265codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=LoadingMicrosoft?WindowsMedia?Playercomponents...type=application/x-oleobject>
<paramname=URLvalue=http://202.99.11.42/xiangsheng/ymjr.wma>
<PARAMNAME=UIModevalue=full><PARAMNAME=AutoStartvalue=true>
<PARAMNAME=Enabledvalue=true>
<PARAMNAME=enableContextMenuvalue=false>
<paramname=WindowlessVideovalue=true></object>
无图像的media播放器。。。同上。
<objectid=nstvclassid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6width=280height=60codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=LoadingMicrosoft?WindowsMedia?Playercomponents...type=application/x-oleobject>
<paramname=URLvalue=http://202.99.11.42/xiangsheng/ymjr.wma>
<PARAMNAME=UIModevalue=full><PARAMNAME=AutoStartvalue=true>
<PARAMNAME=Enabledvalue=true>
<PARAMNAME=enableContextMenuvalue=false>
</object>
只是界面不同的media的调插件播放器。。建议不用这个,,你可以看!
<embedsrc=http://av.wanwa.com/fileroot/AV/Ramfiles/23809.ramtype=audio/x-pn-realaudio-pluginconsole=Clip1controls=ControlPanel,StatusBarheight=60width=275autostart=true></embed>


在线播放rm格式视频代码:

<objectid="player"name="player"classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"width="400"height="272">
<paramname="_ExtentX"value="18415">
<paramname="_ExtentY"value="9102">
<paramname="AUTOSTART"value="-1">
<paramname="SHUFFLE"value="0">
<paramname="PREFETCH"value="0">
<paramname="NOLABELS"value="-1">
<paramname="SRC"value="http://www.xiaoqiong.com/ftp/up/bz.rm">
<paramname="CONTROLS"value="Imagewindow">
<paramname="CONSOLE"value="clip1">
<paramname="LOOP"value="0">
<paramname="NUMLOOP"value="0">
<paramname="CENTER"value="0">
<paramname="MAINTAINASPECT"value="0">
<paramname="BACKGROUNDCOLOR"value="#000000">
</object><br>
<objectID="RP2"CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"WIDTH="400"HEIGHT="57">
<paramname="_ExtentX"value="18415">
<paramname="_ExtentY"value="1005">
<paramname="AUTOSTART"value="-1">
<paramname="SHUFFLE"value="0">
<paramname="PREFETCH"value="0">
<paramname="NOLABELS"value="-1">
<paramname="SRC"value="http://www.xiaoqiong.com/ftp/up/bz.rm">
<PARAMNAME="CONTROLS"VALUE="ControlPanel,StatusBar">
<paramname="CONSOLE"value="clip1">
<paramname="LOOP"value="0">
<paramname="NUMLOOP"value="0">
<paramname="CENTER"value="0">
<paramname="MAINTAINASPECT"value="0">
<paramname="BACKGROUNDCOLOR"value="#000000">
</object>

阅读全文

共有130条信息 1 - 20 1/7页 20个/页  上一页 下一页

转到:

关于本站  |  版权声明 | 合作联系 | 网站地图 | 帮助中心 |  | XHTML/CSS
Copyright © 2006-2011 365codes.net 程序支持:木翼 苏ICP备11019266号