刘
刘星
HTML语言的入门
第一课 基础 当我们畅游Internet时,我们透过浏览器所看到的网站,是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言,透过标记式的指令 (Tag),将影像、声音、图片、文字等连结显示出来。 HTML标记是由 < 和 > 所括住的指令,主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >,< / 结束标记 >所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑,完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示,若测试没有问题则可以放到服务器 (Server) 上,对外发布信息。 HTML文件基本架构 文件开始 标头区开始 ... 标题区 标头区结束 本文区开始 本文区内容 本文区结束 文件结束 网页文件格式。 标头区 : 记录文件基本资料,如作者、编写时间。 标题区 : 文件标题须使用在标头区内,可以在浏览器最上面看到标题。 <BODY> 本文区 : 文件资料,即在浏览器上看到的网站内容。 注意事项 通常一份HTML网页文件包含二个部份 : <HEAD>...</HEAD> 标头区、 <BODY>...</BODY> 本文区。而 <HTML> 和 </HTML> 代表网页文件格式。 习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站,浏览器便会自动的找出 index.htm 文件。 第二课 字体 我们在这里将要谈的是有关文字的标记,包括字体大小、颜色、字型...等变化,适当的应用可以增加页面的美观! 常用字体标记 <Hn>...</Hn> 标题,设定标题字体大小, n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。 如 : <H2> 标题 </H2> 标题 如 : <H3 ALIGN = CENTER> 标题 </H3> ( 标题置中 ) 标题 <B>...</B> 粗体字。 如 : <B> 粗体字 </B> 粗体字 <I>...</I> 斜体字。 如 : <I> 斜体字 </I> 斜体字 <U>...</U> 加底线。 如 : <U> 加底线 </U> 加底线 <DEL>...</DEL> 横线 ( 表示删除 )。 如 : <DEL> 横线 </DEL> 横线 <TT>...</TT> 打字体 ( 固定宽度文字 )。 如 : <TT> 打字体 </TT> 打字体 <SUP>...</SUP> 上标字。 如 : 字体 <SUP> 上标字 </SUP> 字体上标字 <SUB>...</SUB> 下标字。 如 : 字体 <SUB> 下标字 </SUB> 字体下标字 <!...> 注解 ( 不会显示在浏览器上 ),可以多行。 如 : <! 更新日期 : 2000/1/1> 设定字体大小、颜色、字型 有关设定文字的方法共有以下几种 : 1.设定HTML文件主体文字颜色。<BODY>...</BODY>标记。 如 : <BODY TEXT=RED>...</BODY> 或 <BODY TEXT=#FF0000>...</BODY> 2.设定基本字体大小、颜色、字型。<BASEFONT>...</BASEFONT>标记。 3.设定字体大小、颜色、字型。<FONT>...</FONT>标记。 <BASEFONT>...</BASEFONT> 设定基本字体,SIZE = 1 ~ 7,1 ( 最小 ) 7 ( 最大 )。 如 : <BASEFONT SIZE=4> 基本字体大小为 4 </BASEFONT> 基本字体大小为 4 如 : <BASEFONT COLOR =#FF0000> 设定颜色 </BASEFONT> 设定颜色 如 : <BASEFONT FACE = 标楷体 , 细明体 > 设定字型 </BASEFONT> 设定字型 <BIG>...</BIG> 基本字体加大。 如 : <BASEFONT SIZE=4> 基本字体大小为 4,</BASEFONT> <BIG> 加大为 5 </BIG> 基本字体大小为 4,加大为 5 <SMALL>...</SMALL> 基本字体减小。 如 : <BASEFONT SIZE=4> 基本字体大小为 4,</BASEFONT> <SMALL> 减小为 3 </SMALL> 基本字体大小为 4,减小为 3 <FONT>...</FONT> 设定字体大小、颜色、字型,SIZE = 1 ~ 7,1 ( 最小 ) 7 ( 最大 )。 如 : <FONT SIZE=4> 字体大小为 4 </FONT> 字体大小为 4 如 : <BASEFONT SIZE=4> 基本字体大小为 4 <FONT SIZE=+1> +1字体大小为 5 </FONT> <FONT SIZE=-2> -2字体大小为 2 </FONT>...</BASEFONT> 基本字体大小为 4 +1字体大小为 5 -2字体大小为 2 如 : <FONT COLOR =#FF0000> 设定颜色 </FONT> 设定颜色 如 : <FONT FACE = 标楷体 , 细明体 > 设定字型 </FONT> 设定字型 注意事项 1. 设定字体的大小分 : 绝对SIZE 如 : <FONT SIZE=4> 和 相对SIZE 如 : <FONT SIZE=+1> ( 以 BASEFONT 设定的字体大小做加减 )。 2. 设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度 ( 00 暗 ~ FF 亮 )。 #RRGGBB 所代表的是红、绿、蓝三原色,每一色由两位十六进制的数值表示 ( 即十进制 0 ~ 255 )。 十六进制 : 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。 3. 设定字体的字型会按照顺序找出显示的字型,若找不到则以系统预设字型显示。 第三课 表格 表格是HTML的一项非常重要功能,利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观。 常用表格标记 <TABLE>...</TABLE> 表格指令。 相关属性 : ·ALIGN 调整 ·BGCOLOR 背景颜色 ·BORDER 边框 ·HEIGHT 高度 ·WIDTH 宽度 <CAPTION>...</CAPTION> 表格标题。 相关属性 : ·ALIGN 调整 <TR>...</TR> 表格列 ( </TR>可省略 ) 。 相关属性 : ·ALIGN 调整 <TH>...</TH> 表格栏标题 ( 表头 ) 粗体字 ( </TH>可省略 ) 。 相关属性 : ·ALIGN 调整 ·COLSPAN 栏宽 ·ROWSPAN 栏高 <TD>...</TD> 表格栏资料 ( 储存格 ) ( </TD>可省略 ) 。 相关属性 : ·ALIGN 调整 ·BGCOLOR 背景颜色 ·HEIGHT 高度 ·WIDTH 宽度 ·COLSPAN 栏宽 ·ROWSPAN 栏高 举例 如 : ( 基础型 ) <TABLE BORDER=1 ALIGN=CENTER> <TR><TD>太平洋网络学院<TD>太平洋网络学院 <TR><TD>太平洋网络学院<TD>太平洋网络学院 </TABLE> 太平洋网络学院 太平洋网络学院 太平洋网络学院 太平洋网络学院 如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。 <TABLE BORDER=1 ALIGN=CENTER BGCOLOR=#CCCCFF> <CAPTION>表格标题</CAPTION> <TR><TD><TH COLSPAN=2>行标题 1 <TH COLSPAN=2>行标题 2 <TR><TH ROWSPAN=2>列标题 1 <TD>A <TD>A <TD>A <TD>A <TR><TD>B <TD>B <TD>B <TD>B <TR><TH ROWSPAN=2>列标题 2 <TD>C <TD>C <TD>C <TD>C <TR><TD>D <TD>D <TD>D <TD>D </TABLE> 表格标题 行标题 1 行标题 2 列标题 1 A A A A B B B B 列标题 2 C C C C D D D D 看了以上的例子,应该了解表格的基本写法吧! 第四课 标示 HTML提供许多种类的标示标记,作项目标示,而且可以作巢状式标示! 常用标示标记 <LI> 标示项目。 如 : <OL> <LI>第一项 <LI>第二项 </OL> 第一项 第二项 <OL>...</OL> 编号标示,可标示数字或英文、罗马字母。 如 : <OL TYPE=I> <LI>第一项 <LI>第二项 </OL> 第一项 第二项 <UL>...</UL> 符号标示,可标示数字或英文、罗马字母。 如 : <UL> <LI>第一项 <LI>第二项 </UL> 第一项 第二项 <DT> 定义项目。 <DD> 定义资料。 <DL>...</DL> 定义标示。 如 : <DL> <DT>十进制 :<DD>0、1、2、3、4、5、6、7、8、9 <DT>十六进制 :<DD>0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F </DL> 十进制 : 0、1、2、3、4、5、6、7、8、9 十六进制 : 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F 巢状式标示 如 : <OL> <LI>第一章 <OL TYPE=i> <LI>第一节 <UL> <LI>第一段 <LI>第二段 </UL> <LI>第二节 </OL> <LI>第二章 <LI>第三章 </OL> 第一章 第一节 第一段 第二段 第二节 第二章 第三章 其他标示标记 <DIR>...</DIR> 目录式标示 ( 自动加圆点 )。 如 : 网络学院 : <DIR> <LI>新手上路 <LI>软件教室 <LI>设计教室 <LI>开发教室 </DIR> 网络学院 : 新手上路 软件教室 设计教室 开发教室 注意事项 标示项目符号也可以用<FONT>...</FONT> 标记,以符号字元 ( ○、◆、◎、★、■...等 ) 标示。 如 :<FONT COLOR =#FF0000> ● </FONT> 特殊符号 : 在HTML文件中,有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时,便要用替代指令。 符号 替代指令 " " 或 " & & 或 & < < 或 < > > 或 > 不可分空格 第五课 区段标记 一个网站不仅要内容丰富外,也要有美观简洁的版面。HTML所提供的区段标记功能,如果可以好好的利用也会有相当不错的效果。 常用区段标记 <HR> 产生水平线。 如 : <HR ALING=CERTEN WIDTH=90%> -------------------------------------------------------------------------------- <BR> 跳下一行。 如 : 太平洋网络学院,<BR>网上学电脑的好去处。 太平洋网络学院, 网上学电脑的好去处。 <P>...</P> 段落,跳下一行并加一行空白。 ( </P> 可省略 ) 如 : 太平洋网络学院,<P>网上学电脑的好去处。 太平洋网络学院, 网上学电脑的好去处。 <CENTER>...</CENTER> 置中。 如 : <CENTER>置中</CENTER> 置中 <NOBR>...</NOBR> 不跳下一行。 如 : <NOBR>太平洋网络学院,</NOBR>网上学电脑的好去处。 太平洋网络学院,网上学电脑的好去处。 <PRE>...</PRE> 以文件原始格式显示。 如 : <PRE>原始格式: 文件</PRE> 原始格式: 文件 第六课 链接 链接可说是HTML中最重要的功能!因为HTML拥有链接的功能,使你能接上INTERNET、WWW ……享受多姿多彩的网络世界。 基本上链接分成 : 外部链接——链接至网络的某个URL网址或文件,可参考考网络链接方式。 内部链接——链接HTML文件的某个区段。 网络链接方式 网络链接方式 : //主机名称 / 路径 / 文件名称 网址 如 : http : //www.pconline.com.cn/ 文件传输 如 : ftp : //ftp.pconline.com.cn/ GROPHER 传输 如 : gropher : //gropher.net.cn/ 远端登入 如 : telnet : //bbs.net.cn/ 文件下载 如 : file : //data/html/file.zip NET NEWS 传输 如 : news : talk.hinet.net.cn E-Mail 如 : mailto : pcedu@pconline.com.cn 常用链接标记 <BASE> 设定基本URL位置或路径,以後只要设定文件名称即会自动加上位置或路径。 相关属性 : ·HREF 链接的URL位址或文件 ·TARGET 指定链接到的URL位址或文件显示于那一个视窗 ( 可和 <FRAME> 视窗标记配合使用或开新的视窗 ) 如 : <BASE HREF="http : //www.pconline.com.cn/"> <A HREF="kk.htm">■</A> <BASE HREF="http : //www.pconline.com.cn/" TARGET=frame1> <A>...</A> 链接指令。 相关属性 : ·HREF 链接的URL位址或文件 ·NAME 名称 ·TARGET 指定链接到的URL位址或文件显示于那一个视窗 ( 可和 <FRAME> 视窗标记配合使用或开新的视窗 ) 如 : 外部链接 <A HREF="http : //www.pconline.com.cn/">■</A> <A HREF="http : //www.pconline.com.cn/" TARGET=frame1>■</A> 内部链接 ·CH1.HTM 文件 <A HREF=#A>■</A> ( 欲链接至HTML文件 A 点 ) <A NAME=A>■</A> ( HTML文件 A 点 ) ·CH2.HTM文件 <A HREF=CH1.HTM#A>■</A> (欲链接至CH1.HTM 文件 A 点 ) " ■ " 表示链接点,可以是文字或图案。( 即游标移到时,会变成手指形状的地方 ) <LINK> 链接指令 ( 用于HEAD区,设定CSS文件 )。 <META> 储存应用资讯,可设定时间载入网页 ( 用于HEAD区 )。 相关属性 : ·CHARSET 设定 ·CONTENT 回应表头资料内容 , 若是数字表示秒数 ·HTTP-EQUIV 回应表头 , 若设定为REFRESH载入URL设定 ·URL HTML位置 如 : ·设定中文自动跳行。 <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=gb2312"> ·设定十秒回到首页。 ( 若不设定HTML文件位置则再载入原HTML文件 ) <META HTTP-EQUIV="REFRESH" CONTENT=10 URL=index.htm> 设定链接、未链接部份颜色 设定链接、未链接部份颜色,用<BODY>...</BODY>标记。 相关属性 : ·ALINK按下链接部份未放开时颜色 ·LINK未看过的链接部份颜色 ·VLINK已看过的链接部份颜色 如 : <BODY LINK=#0000FF ALINK=#FF0000 VLINK=#00FF00> 第七课 框架 框架架构的标记,主要是分割窗口和插入浮动窗口的功能。如果能有效的运用将有助于浏览网页的效率! 常用窗口标记 <FRAMESET>...</FRAMESET> 定义分割窗口。 相关属性 : ·BORDER 边框 ·COLS 行 , 设定分割左右窗口宽度 ( 用『,』分隔,可设百分比 % ;『*』表示剩余部份 ) ·FRAMEBORDER 显示边框 ·ROWS 列 , 设定分割上下窗口高度 ( 用『,』分隔,可设百分比 % ;『*』表示剩余部份 ) <FRAME> 定义窗口。 相关属性 : ·FRAMEBORDER 显示边框 ·NAME 名称 ·NORESIZE 设定是否可以调整窗口大小 ·SRC 文件或URL位址 ·SCROLLING 设定是否可以卷动 <NOFRAMES>...</NOFRAMES> 无支援分割窗口浏览器显示文字。 <IFRAME>...</IFRAME> 插入浮动窗口。 相关属性 : ·BORDER 边框 ·FRAMEBORDER 显示边框 ·NORESIZE 设定是否可以调整窗口大小 ·SRC 文件或URL位址 ·SCROLLING 设定是否可以卷动 举例 如 : 本站窗口架构。 ( 先分割成上下窗口,再于窗口各分割成左右窗口。 ) <FRAMESET ROWS=74,* COLS=140,* FRAMEBORDER=NO BORDER=0> <FRAME SRC=rad.htm NAME=RAD NORESIZE SCROLLING=NO> <FRAME SRC=a-1.htm NAME=FRAME1 NORESIZE SCROLLING=NO> <FRAME SRC=b-1.htm NAME=FRAME2 NORESIZE SCROLLING=AUTO> <FRAME SRC=c-1.htm NAME=FRAME3 NORESIZE SCROLLING=AUTO> </FRAMESET> 如 : 浮动窗口 <CENTER> <IFRAME FRAMEBORDER=YES SCROLLING=YES SRC=c1-01.htm> </IFRAME> </CENTER> 注意 窗口基本架构的文件,通常放在HTML文件的第一页,如 : index.htm 。此HTML文件的基本架构并不需要本文区 ( BODY ),只需定义窗口架构,而其他HTML文件可用连结方式 ( A HREF=...连结标记 TARGET属性 ) 显示于指定的窗口中。 第八课 设置图片 现在的网站没有用图片的,几乎很少了吧!图片增加了网站版面的美观,不过也不要放了大量的图片,而拖慢网站传输的效率喔! 有关设定图片的方法共有以下几种 : 设定HTML文件背景图片、背景颜色。<BODY>...</BODY>标记。 如 : <BODY BACKGROUND=A.GIF>...</BODY> 或 <BODY BGCOLOR=#000000>...</BODY> 设定图片。<IMG>标记。 设定地图。<MAP>...</MAP>标记。 常用图片标记 <IMG> 指令 相关属性 : ·ALIGN 调整 ·ALT 提示字 ·BORDER 边框 ·HEIGHT 高度 ·SRC 文件或URL位址 ·USEMAP 地图名称 ·WIDTH 宽度 如 : 可插入图片 ( GIF、JPG格式 )、AVI电影 <CENTER> <IMG SRC="../../../images/pcedu_lo.gif" ALT="太平洋网络学院" ALIGN=TOP BORDER=1> </CENTER> <MAP>...</MAP> 地图 相关属性 : ·NAME 名称 <AREA> 设定地图动作区域 相关属性 : ·COORDS 设定动作区域座标 ( 左上角座标 : X1,Y1 ; 右下角座标 : X2,Y2 ) ·HREF 动作区域连结点 ( 可载入位址或文件 ) ·NOHREF 动作区域连结点不动作 ·SHAPE 外型 举例 设定地图 <IMG BORDER=0 SRC=A.GIF USEMAP=#A> <MAP NAME=A> <AREA SHAPE=RECT COORDS=0,0,200,100 HREF=1.HTM> <AREA SHAPE=RECT COORDS=0,100,200,200 NOHREF> <AREA SHAPE=RECT COORDS=0,200,200,300 HREF=3.HTM> </MAP> 第九课 加入声音 HTML不仅能插入图片,也可以载入MIDI音乐、WAV 音效喔! 常用音乐标记 <BGSOUND> 背景音乐、音效。 相关属性 : ·LOOP 循环 , 背景音乐播放次数 ·SRC 文件或URL位址 (可为WAV、MIDI格式 ) 如 : <BGSOUND SRC=m-1.mid LOOP=True> 内嵌音乐插件 <EMBED>...</EMBED> 内嵌插件。 相关属性 : ·HEIGHT 高度 ·WIDTH 宽度 ( 可设百分比% ) ·SRC 设定内嵌物件的 URL 位址 ·LOOP 循环 , 背景音乐播放次数 ·AUTOSTART 自动播放 如 : <EMBED SRC=m-1.mid WIDTH=145 HEIGHT=60 AUTOSTART=True LOOP=True></EMBED> 第十课 滚动条 这是由IE提供的滚动条,可不要被众多的属性吓到了,越多的属性功能越强喔! 【文字卷动标记】 <MARQUEE>...</MARQUEE> 文字卷动 ( 滚动条 )。 【相关属性】 ·BEHAVIOR = 设定卷动方式 -- ALTERNATE 交替来回卷动 -- SCROLL 卷动 ( 预设 ) -- SLIDE 滑动 ·BGCOLOR = color 背景颜色 ·DIRECTION = 设定卷动方向 ·HEIGHT = n 高度 ·LOOP = n 循环 , 卷动次数 ( 预设循环 ) ·SCROLLAMOUNT = n 设定卷动距离 ·SCROLLDELAY = milliseconds 设定卷动时间 ·TRUESPEED = milliseconds 设定卷动速度 ·WIDTH = n 宽度 ( 可设百分比% ) 【举例】 如 : <MARQUEE BGCOLOR=RED BEHAVIOR=ALTERNATE DIRECTION=LEFT SCROLLAMOUT=10 SCROLLDELAY=100> <FONT COLOR=WHITE>太平洋网络学院</FONT></MARQUEE> 太平洋网络学院 如 : <MARQUEE BGCOLOR=GREEN HEIGHT=50 BEHAVIOR=SCROLL DIRECTION=UP SCROLLAMOUT=10 SCROLLDELAY=300> <FONT COLOR=WHITE><CENTER>太平洋网络学院</CENTER></FONT></MARQUEE> 太平洋网络学院 <hr> <h3>HTML的彻底分析研究</h3> Html简介 全写: HyperText Mark-up Language 译名: 超文件注标式语言(译名之一) 简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标记(tag)使文件达到预期的显示效果。 HTML 是在 SGML 定义下的一个描述性语言,或可说 HTML 是 SGML 的一个应用程式,HTML 不是程式语言,如 C++ 和 Java 之类,它只是标示语言,基本上你只要明白了各种 标记的用法便算学懂了 HTML,HTML 的格式非常简单,只是由文字及标记组合而成,于 编辑方面,任何文字编辑器都可以,只要能将文件另存成 ASCII 纯文字格式即可,当然 以专业的网页编辑软件为佳。 ■ 阅读须知: 这一篇【HTML剖析】偏重于标记的介绍,考虑到易懂及每节的篇幅问题,我并不按 W3C 的 HTML 分类,这可令你更易选择有兴趣的标记,其中只有【文件标记】是必读的,其 余可任意选择。这一篇不会提及任何网页编辑软件,只要掌握了 HTML ,任何网页 编辑工具都可以变成一把利器。 ■ 标记写法: 任何标记皆由"<"及">"所围住,如 <P> 标记名与小于号之间不能留有空白字符。 某些标记 要加上参数,某些则不必。如 <font size="+2">Hello</font> 参数只可加于起始标记中。 在起始标记之标记名前加上符号"/"便是其终结标记,如 </font> 标记字母大小写皆可。 ■ 围堵标记与空标记: 标记按型态分为围堵标记与空标记 围堵标记 顾名思义,它以起始标记及终结标记将文字围住,令其达到预期显示效果。 例如 HTML Source : <b>Creation of Webpage</b> is my favourite. 显示成: Creation of Webpage is my favourite. 其中 <b></b> 便称为围堵标记。 它以起始标记<b>及终结标记</b>标示文字 Creation of webpage ,令它显示成粗体,两者失其一都会发生错误显示。 空标记 是指标记单独出现,只有起始标记没有终结标记。 例如 HTML Source: I love Creation of Webpage.<br>It's a wonderful place. 显示成: I love Creation of Webpage. It's a wonderful place. 其中换行标记<br>便属空标记。 它的作用便是将标记后所有东西显示于下一行,可见终结标记于它是没意义的, 但有些人会为空标记加上终结标记,这是为方便记认而己,对 HTML 没有影响。 HTML 标记一览 标记 类型 译名或意义 作 用 备注 文件标记 <HTML> ● 文件声明 让浏览器知道这是 HTML 文件 <HEAD> ● 开头 提供文件整体资讯 <TITLE> ● 标题 定义文件标题,将显示于浏览顶端 <BODY> ● 本文 设计文件格式及内文所在 排版标记 <!--注解--> ○ 说明标记 为文件加上说明,但不被显示 <P> ○ 段落标记 为字、画、表格等之间留一空白行 <BR> ○ 换行标记 令字、画、表格等显示于下一行 <HR> ○ 水平线 插入一条水平线 <CENTER> ● 居中 令字、画、表格等显示于中间 反对 <PRE> ● 预设格式 令文件按照原始码的排列方式显示 <DIV> ● 区隔标记 设定字、画、表格等的摆放位置 <NOBR> ● 不折行 令文字不因太长而绕行 <WBR> ● 建议折行 预设折行部位 字体标记 <STRONG> ● 加重语气 产生字体加粗 Bold 的效果 <B> ● 粗体标记 产生字体加粗的效果 <EM> ● 强调标记 字体出现斜体效果 <I> ● 斜体标记 字体出现斜体效果 <TT> ● 打字字体 Courier字体,字母宽度相同 <U> ● 加上底线 加上底线 反对 <H1> ● 一级标题标记 变粗变大加宽,程度与级数反比 <H2> ● 二级标题标记 将字体变粗变大加宽 <H3> ● 三级标题标记 将字体变粗变大加宽 <H4> ● 四级标题标记 将字体变粗变大加宽 <H5> ● 五级标题标记 将字体变粗变大加宽 <H6> ● 六级标题标记 将字体变粗变大加宽 <FONT> ● 字形标记 设定字形、大小、颜色 反对 <BASEFONT> ○ 基准字形标记 设定所有字形、大小、颜色 反对 <BIG> ● 字体加大 令字体稍为加大 <SMALL> ● 字体缩细 令字体稍为缩细 <STRIKE> ● 画线删除 为字体加一删除线 反对 <CODE> ● 程式码 字体稍为加宽如<TT> <KBD> ● 键盘字 字体稍为加宽,单一空白 <SAMP> ● 范例 字体稍为加宽如<TT> <VAR> ● 变数 斜体效果 <CITE> ● 传记引述 斜体效果 <BLOCKQUOTE> ● 引述文字区块 缩排字体 <DFN> ● 述语定义 斜体效果 <ADDRESS> ● 地址标记 斜体效果 <SUB> ● 下标字 指数 <SUP> ● 下标字 下标字 清单标记 <OL> ● 顺序清单 清单项目将以数字、字母顺序排列 <UL> ● 无序清单 清单项目将以圆点排列 <LI> ○ 清单项目 每一标记标示一项清单项目 <MENU> ● 选单清单 清单项目将以圆点排列,如<UL> 反对 <DIR> ● 目录清单 清单项目将以圆点排列,如<UL> 反对 <DL> ● 定义清单 清单分两层出现 <DT> ○ 定义条目 标示该项定义的标题 <DD> ○ 定义内容 标示定义内容 表格标记 <TABLE> ● 表格标记 设定该表格的各项参数 <CAPTION> ● 表格标题 做成一打通列以填入表格标题 <TR> ● 表格列 设定该表格的列 <TD> ● 表格栏 设定该表格的栏 <TH> ● 表格标头 相等于<TD>,但其内之字体会变粗 表单标记 <FORM> ● 表单标记 决定单一表单的运作模式 <TEXTAREA> ● 文字区块 提供文字方盒以输入较大量文字 <INPUT> ○ 输入标记 决定输入形式 <SELECT> ● 选择标记 建立 pop-up 卷动清单 <OPTION> ○ 选项 每一标记标示一个选项 图形标记 <IMG> ○ 图形标记 用以插入图形及设定图形属性 连结标记 <A> ● 连结标记 加入连结 <BASE> ○ 基准标记 可将相对 URL 转绝对及指定连结目标 框架标记 <FRAMESET> ● 框架设定 设定框架 <FRAME> ○ 框窗设定 设定框窗 <IFRAME> ○ 页内框架 于网页中间插入框架 IE <NOFRAMES> ● 不支援框架 设定当浏览器不支援框架时的提示 影像地图 <MAP> ● 影像地图名称 设定影像地图名称 <AREA> ○ 连结区域 设定各连结区域 多媒体 <BGSOUND> ○ 背景声音 于背景播放声音或音乐 IE <EMBED> ○ 多媒体 加入声音、音乐或影像 其他标记 <MARQUEE> ● 走动文字 令文字左右走动 IE <BLINK> ● 闪烁文字 闪烁文字 NC <ISINDEX> ○ 页内寻找器 可输入关键字寻找于该一页 反对 <META> ○ 开头定义 让浏览器知道这是 HTML 文件 <LINK> ○ 关系定义 定义该文件与其他 URL 的关系 StyleSheet <STYLE> ● 样式表 控制网页版面 <span> ● 自订标记 独立使用或与样式表同用 注: ● 表示该标记属围堵标记,即需要关闭标记如 </标记>。 ○ 表示该标记属空标记,即不需要关闭标记。 IE 表示该标记只适用于 Internet Explorer。 NC 表示该标记只适用于 Netscape Communicator。 反对 表示该标记不为 W3C 所赞同,通常这标记是 IE 或 NC 自订,且己为众所支 持,只是 HTML 标准中有其它同功能或更好的选择。 弃用 表示该标记己为 W3C 所弃用,是过时的标记,但 HTML 具向下兼容的特 性,不用担心新浏览器不支援旧标记。 新 表示该标记是 HTML 4.0 中新增的。 文件标记 <HTML> ; <HEAD> ; <TITLE> ; <BODY> ■ HTML 基本架构: 以下 HTML Source Code 便是一份 HTML 文件的基本架构 : <HTML> <HEAD> <TITLE> 网页的标题 网页的内容,很多标记都作用于此 特点解说: 整份文件处于标记与之间。 用以声明这是 HTML 文件,让浏览器认出并正确处理此 HTML 文件。 文件分两部分,由至称为开头,至称本文。 基本上两者各有适用的标记,如只可出现于开头部分。 开头部分用以存载重要资讯,而只有本文部分会被显示。 所以大部分标记会运用于本文部分。 <TITLE>所标示的是文件的标题。 会出现于浏览器顶部及为别人 Bookmark 时的名称,所以每页有不同而明确的标题 是需要的。 上述标记中只有<BODY>具参数设定。 ■ <BODY> 之参数设定: 例子: <BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed"> text="#000000" 用以设定文字颜色。 #000000 代表黑色,亦可以采用颜色的名称,即 text="black" 。各种颜色的值及名称可参考【调色原理】一节。 link="#0000FF" 设定一般文字连结颜色。 alink="#FF0000" 设定刚按下时文字连结颜色。 vlink="#0000FF" 设定连结后的颜色。(被按过)。 background="bg1.gif" 设定背景墙纸。GIF 或 JPEG 皆可,可以是绝对途径或相对途径。 bgcolor="#FFFFFF" 设定背景颜色。当己设定背景墙纸时会失去作用,除非墙纸有透明部分。 leftmargin=2 设定整份文件显示画面的左方边沿空间,单位为像素。 『只适用于IE』 topmargin=2 设定整份文件显示画面的上方边沿空间。 『只适用于IE』 bgproperties="fixed" 固定背景墙纸,当卷动文字时墙纸不会跟著卷动。 『只适用于IE』 标记及参数之字母大小都可以。 其他如 onload 等事件将于【Java Script 剖析】介绍。 排版标记 <!--注解--> ; <P> ; <BR> ; <HR> ; <CENTER> ; <PRE> ; <DIV> ; <NOBR> ; <WBR> ; ■<!--注解-->: ▲Top 像很多电脑语言一样,HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字(可以 是很多行)而不作显示,一般使用目的: 为文中不同部份加上说明,方便日后修改。 这对较复杂或非私人网页尤其重要,它不单是提醒自已,亦提醒你的同事这部分 做什么、那部分做什么。 例子: <!--由这处开始是产品订购表格--> 用作版权声明。 假如你不希望别人使用或复制你的网页,可加上警告字眼。 例子: <!--本文版权为 1998, Creation of Webpage 所拥有,未经许,请勿抄摘--> ■ <P> : ▲Top <P>称为段落标记。作用:为字、画、表格等之间留一空白行。 本来<P>是一围堵标记,标于一段落的头尾,但从 HTML 2.0 开始己不需要</P>作结尾。 <P> 的常用参数: 如:<p align="center"> align="center" 可选值:right, left, center。 内定值: align="left" 例子: 原始码 Here is the text for my paragraph. It does't matter how long it is, how many space are between the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another one. <P>Here's the next paragraph. 显示结果 Here is the text for my paragraph. It does't matter how long it is, how many space are between the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another one. Here's the next paragraph. ■ <BR> : ▲Top <BR>称为换行标记。作用:令字、画、表格等显示于下一行。 由于浏览器会自动忽略原始码中空白和换行的部分,这令到<BR>成为最常用的标记之 一。因为无论你在原始码中编好了多漂亮的文章,若不适当地加上换行标记或段落标记, 浏览器只会将它显示成一大段。 错误示范:(邮局可不会接受一行过的地址) 原始码 566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America 结果 566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America 正确例子: 原始码 566 E Boston Post RD <BR>Mamaroneck NY 10543-9982 <BR>United States of America 结果 566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America ■ <HR> : ▲Top <HR>称为水平线。作用:插入一条水平线。 <HR> 之参数修改: 以: <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade> 为例。 align="LEFT" 设定线条置放位置,可选择:left;right;center 三种设定值。 size="2" 设定线条厚度,以像素作单位,内定为 2。 width="70%" 设定线条长度,可以是绝对值(以像素作单位)或相对值,内定为 100%。 color="#0000FF" 『只适用于IE』 设定线条颜色,内定为黑色。 #0000FF 代表蓝色,亦可以采用颜色的名称,即 text="blue" 。 noshade 设定线条为平面显示,若删去则具阴影或立体,这是内定值。 例子: 原始码 <HR> <HR align="LEFT" size="4"> <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade> <HR align="LEFT" size="4" width="70" color="#008000"> 显示结果 -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ■ <CENTER> : ▲Top <CENTER>称为居中标记。作用:令字、画、表格等显示于中间。 这标记原先是 Netscape 所定义,后来其它浏览器都支持它,但你会发现很多标记已有 align="CENTER" 的参数,<CENTER>似乎多馀了,事实上它还是常用的标记之一,其简单 易用,常用于文字上,对于己加有 align="CENTER" 参数的 <TABLE> 标记亦要不厌其烦 地加上居中标记,因有狻多浏览器不支持<TABLE> 标记中的 align="CENTER" 参数。 例子: 原始码 <CENTER>Chris's First Homepage</CENTER> <CENTER>What's new</CENTER> <CENTER>My profile</CENTER> 结果 Chris's First Homepage What's new My profile ■ <PRE> : ▲Top <PRE>称为预设格式标记。作用:令文件按照原始码的排列方式显示。 这标记允许保留你于原始码中输入的空白及 Return。细看以下例子你便可体会到此标记的 威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。 能以<PRE>标记产生对 效果,或产生多于一行的空白才算上乘! 例子: 原始码 <pre> Creation of Webpage Log Analysis I Composer Learning 459 407 480 522 547 586 673 HTML Advanced 200 268 296 358 385 453 506</pre> 显示结果 Creation of Webpage Log Analysis I Composer Learning 459 407 480 522 547 586 673 HTML Advanced 200 268 296 358 385 453 506 ■ <DIV> : ▲Top <DIV>称为区隔标记。作用:设定字、画、表格等的摆放位置。 <DIV>应用于 Style Sheet(式样表)方面会更显威力,它最终目的是给设计者另一种组织 能力,有 Class ; Style ; title ; ID 等属性,将会于【Style Sheet】一节才作详述,这处只介绍 一个属性设定。 以 <DIV align="center"> 为例: align="center" 可选值:center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 <DIV align="center"> 的作用和居中标记 <CENTER>一样,前者是由 HTML3.0 开始 的标准,后者是通用己久的标示法。 例子: 原始码 <DIV align="center">Chris's First Homepage <br>What's new <br>My profile</DIV> 结果 Chris's First Homepage What's new My profile ■ <NOBR> : ▲Top <NOBR>称为不折行标记。作用:令某些文字不因太长而绕行,一 显示于同一行或下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。 例子:(其中 Chris's Creation of Webpage 将不被分开而显示于同一行。) 码 If you want to know how to create you own homepage quickly, don't miss <NOBR>Chris's Creation of Webpage</NOBR> which will help you a lot. 结果 If you want to know how to create you own homepage quickly, don't miss Chris's Creation of Webpage which will help you a lot. ■ <WBR> : ▲Top <WBR>称为建议折行标记。作用:预设折行部位。 它没有侵犯到 <BR> 的责任,只是作建议而已,若观者的系统解像度够高的话,那么它是 不会折行的。 例子:(若不加<WBR>标记,整个网址会显示于下一行。) 原始码 Please visit my other homepage which locate at http://www.geocities.com/SiliconValley/<WBR>Sector/8234/index.html There are many softwares for download. I think you will really love that place. 结果 Please visit my other homepage which locate at http://www.geocities.com/SiliconValley/Sector/8234/index.html There are many softwares for download. I think you will really love that place. 字体标记 <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> ■实体标记与逻辑标记 : ▲Top 这一节【字体标记】你必须先明白实体标记与逻辑标记的分别,否则你会迷惑于为何不同 的标记却有相同的效果。两者分别有以下两处: 实体标记有固定的显示效果,逻辑标记则依不同浏览器而不同。 例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果, 它可能是加底线、粗体或反白等,所以这一节是以它们在 IE 和 NC 中的效果作介 绍。 多个实体标记亦可有效标示同一字句,逻辑标记则通常于旧浏览器不能有效显示多 重的标示。 例如两个逻辑标记 <EM> 及 <STRONG> 同时标示一字句于旧浏览器常失去作用。 实体标记有: <I> <B> <U> 逻辑标记有: <STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT> 若要求真确的效果当然以实体标记为佳。 ■<STRONG> <B> : ▲Top 两者皆能产生字体加粗的效果,但必须注意的是当文件被设为 gb2312 Encoding 时,两者所 标示的中文字不会于 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 3 Header 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 内建字 形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页,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 清单标记 <OL> <LI> <UL> <MENU> <DIR> <DL> <DT> <DD> ■ <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" 时的列项符号。 符号 if" width=10 height=10 border=0> 是当 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. 表格标记 <TABLE> <TR> <TD> <TH> <CAPTION> ■ <TABLE> <TR> <TD> : ▲Top 这三个标记是定义表格的最重要的标记,可以说只学这三个己足够。 <TABLE>是一个容器标记,意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用,属容器标记的还有其他。 <TR>用以标示表格列(row) <TD>用以标示储存格(cell) <TABLE> 的参数设定(常用): 例如: <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2"> width="400" 表格宽度,接受绝对值(如 80)及相对值(如 80%)。 border="1" 表格边框厚度,不同浏览器有不同的内定值,故请指明。 cellspacing="2" 表格格线厚度,请看例子三,那是加厚到 5 的格线。 cellpadding="2" 文字与格线的距离,请看例子四,那是加至 10 的 padding。 align="CENTER" 表格的摆放位置(水平),可选值为: left, right, center,请看例子五或六,那表格 是放于中间的,为怕一些浏览器不支援,故特加上居中标记<CENTER>,只是多 层保证而己,当然只用<CENTER>亦可。 valign="TOP". 表格内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。 background="myweb.gif" 表格 纸,与 bgcolor 不要同用。 bgcolor="#0000FF" 表格底色,与 background 不要同用,请看例子六。 bordercolor="#FF00FF" 表格边框颜色,NC 与 IE 有不同的效果,请看例子六。 bordercolorlight="#00FF00" 表格边框向光部分的颜色,请看例子二。『只适用于 IE』 bordercolordark="#00FFFF" 表格边框背光部分的颜色,请看例子二,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 cols="2" 表格栏位数目,只是让浏览器在下载表格是先画出整个表格而己。 <TR> 的参数设定(常用): 例如:<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000"> align="RIGHT" 该一列内字画等的摆放贴 位置(水平),可选值为: left, center, right。 valign="MIDDLE" 该一列内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。 bgcolor="#0000FF" 该一列底色,请看例子五。 bordercolor="#FF00FF" 该一列边框颜色,请看例子三。『只适用于 IE』 bordercolorlight="#808080" 该一列边框向光部分的颜色,请看例子三。『只适用于 IE』 bordercolordark="#FF0000" 该一列边框背光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 <TD> 的参数设定(常用): 例如:<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> width="48%" 该一储存格宽度,接受绝对值(如 80)及相对值(如 80%)。 height="400" 该一储存格高度。 colspan="5" 该一储存格向右打通的栏数。请看例子六 rowspan="4" 该一储存格向下打通的列数。请看例子六 align="RIGHT" 该一储存格内字画等的摆放贴 位置(水平),可选值为: left, center, right。 valign="BOTTOM" 该一储存格内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。 bgcolor="#FF00FF" 该一储存格底色,请看例子四。 bordercolor="#808080" 该一储存格边框颜色,请看例子三。『只适用于 IE』 bordercolorlight="#FF0000" 该一储存格边框向光部分的颜色,请看例子三。『只适用于 IE』 bordercolordark="#00FF00" 该一储存格边框背光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 background="myweb.gif" 该一储存格 纸,与 bgcolor 任用其一。 例子一: 原始码 <table width="60%" border="1"> <tr><td>只有一个储存格(cell)的表格</td></tr> </table> 显示结果 只有一个储存格(cell)的表格 例子二: 原始码 <table width="60%" border="5" bordercolorlight="#FF00FF" bordercolordark="#FF0000"> <tr><td>第一列第一栏</td><td>第一列第二栏</td></tr> </table> 显示结果 第一列第一栏 第一列第二栏 例子三: 原始码 <table width="60%" border="1" cellspacing="5"> <tr bordercolor="#0000FF"> <td>第一列第一栏</td> <td>第一列第二栏</td> </tr> <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00"> <td>第二列第一栏</td> <td>第二列第二栏</td> </tr> </table> 显示结果 第一列第一栏 第一列第二栏 第二列第一栏 第二列第二栏 例子四: 原始码 <table width="60%" border="1" cellpadding="10"> <tr> <td bgcolor="#FFCCE6">第一列第一栏</td> <td bgcolor="#FFFFC6">第一列第二栏</td> </tr> <tr> <td bgcolor="#FFD9FF">第二列第一栏</td> <td bgcolor="#DAB4B4">第二列第二栏</td> </tr> </table> 显示结果 第一列第一栏 第一列第二栏 第二列第一栏 第二列第二栏 例子五: 原始码 <center> <table width="60%" cellspacing="0" cellpadding="2" align="CENTER"> <tr> <td bgcolor="#FFD2E9">第一列第一栏</td> <td bgcolor="#FFDAB5">第一列第二栏</td> <td bgcolor="#FFFFB5">第一列第三栏</td> </tr> <tr bgcolor="#C0C0C0"> <td>第二列第一栏</td> <td>第二列第二栏</td> <td>第二列第三栏</td> </tr> </table> </center> 显示结果 第一列第一栏 第一列第二栏 第一列第三栏 第二列第一栏 第二列第二栏 第二列第三栏 例子六 原始码 <center> <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF"> <tr> <td>第一列第一栏</td> <td colspan="2">第一列 之 第二栏及第三栏</td> </tr> <tr> <td rowspan="2">第二列及第三列 之 第一栏</td> <td>第二列第二栏</td> <td>第二列第三栏</td> </tr> <tr> <td>第三列第二栏</td> <td>第三列第三栏</td> </tr> </table> </center> 显示结果 第一列第一栏 第一列 之 第二栏及第三栏 第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏 第三列第二栏 第三列第三栏 ■ <TH> : ▲Top <TH>与<TD>同样是标示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗 体出现,通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以,其参数 设定请参考<TD>。 当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。 例子: 原始码 <center> <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER"> <tr align="CENTER"> <th>Month</th><th>% of IE visitor</th><th>% of NC visitor</th> </tr> <tr align="CENTER"> <td>August</td><td>61%</td><td>39%</td> </tr> <tr align="CENTER"> <td>July</td><td>54%</td><td>46%</td> </tr> <tr align="CENTER"> <td>June</td><td>52%</td><td>48%</td> </tr> </table> </center> 显示结果 Month % of IE visitor % of NC visitor August 61% 39% July 54% 46% June 52% 48% ■ <CAPTION> : ▲Top <CAPTION> 的作用是为表格标示一个标题列,有如在表格上方加上一没格线的打通列。 当然亦可置于下方,通常用以存放该表格的标题。 <CAPTION> 的参数设定(常用): 例如:<caption align="TOP" valign="TOP"></caption> align="TOP" 该表格标题列相对于表格的摆放贴 位置(水平),可选值为: left, center, right, top, middle, bottom,若 align="bottom" 的话标题列便会出现对表格的下方,不管你 的原始码中把 <caption> 放在 <table> 中的头部或尾部。 valign="TOP" 该表格标题列相对于表格的摆放位置(上下),可选值为: top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的,虽然功能重复了,但如果你要标题列 置于下方及向右或向左贴 ,那末两个参数便可一 用了。当只 一个参数时, 请首选 align,因为 valign 是由 HTML 3.0 才开始的参数。 例子: 原始码 <center> <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER"> <caption>网页速成 八月份访客浏览器使用分析</caption> <tr align="CENTER"> <th>Month</th> <th>% of IE visitor</th> <th>% of NC visitor</th> </tr> <tr align="CENTER"> <td>August</td> <td>61%</td> <td>39%</td> </tr> </table> </center> 显示结果 网页速成 八月份访客浏览器使用分析 Month % of IE visitor % of NC visitor August 61% 39% 表单标记 <FORM> <INPUT> INPUT 的种类: Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。 <SELECT> <OPTION> <TEXTAREA> (注意:本文例子中的链接仅仅是示例,点击后并不会出现任何结果) ■ 引子 表单的用处很多,于网上无处不见,当然是配合 CGI 使用为佳,所以馈下有意使用或学 习 CGI 的话,表单设计见必需的,这一节介绍的标记不多,但其参数变化很多。一份表单的基本架构是:在 <FORM> 标记 的包围下加上一种或以上的表单输入方式及一个或以上的按键。 ■<FORM> <INPUT> : ▲Top <FORM>称为表单标记,用以宣告此为表单模式,属于一个容器标记,表示其它表单标记需要在它的包围中才有效,<INPUT>便是其中的一个,用以设定各种输入资料的方法。它 是一个空标记。 <FORM> 的参数设定(常用): 例如: <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> action="http://your.isp.com/cgi-local/example.cgi" 表单通常是与 CGI 配合使用的,参数 action 便是用以指明该 CGI 程式的位置,这 样此表单所填的资料才能正确传给 CGI 作处理。若馈下没有 CGI 以进行测试,可 设定此参数为 ACTION="mailto:your@email.com" 那样该表单所填的资料将会寄至 此电邮地址(红色部分)。 method="POST" 传送资料给 CGI 的的方式,可选值为 POST, GET。你只需记住POST容许传送大量资料,但 GET则只接受低于 1K 的资 料,所以你若看过别人的表单原始码的话,你会发现申请表单用的是POST 而搜 找器用的是 GET。 <INPUT> 的参数设定(常用): 由于其第一个参数 type 己有很多的选择,而不同的选择表示出不同的输入方式,且其它 参数亦因此而异,故以下将独立介绍不同输入方式及其它参数设定。 type="Text" 可选值为 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。 -------------------------------------------------------------------------------- 输入方式一: Text (单行文字盒) 例如<input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255"> type="Text" 输入方式为 Text,能产生一单行文字盒,上限为 255 字元。 name="age" 此一单行文字盒名称,这是最重要的一个,方便 CGI 辨认由表单传来的资料,虽 说可随便命名,但通常 CGI 程式中都有指定名称,若转用其它名称便需要修改该 CGI 程式了,名称可为没空白没特别符号的英文或数字,有大小写的分别,可以 写成 Your_Age,若有访客于此表单此一文字盒填入 40 的话,那末传给 CGI 的字 串便是 Your_Age=40。 value="20" 此一单行文字盒内定值。若不填写则文字盒是空白的,等待访客亲自键入,若 value="20" 的话, 20 便会出现在文字盒中,当然访客可以修改之。 align="MIDDLE" 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。 size="2" 此一单行文字盒显示的长度,若馈下是采用 Big5 编码的中文网页便要小心,同 size 的文字盒 NC 会显示得比 IE 狻长。 maxlength="255" 此一单行文字盒可输入字元的上限,为方便编排资料或避免错输入等,宜设定上 限,例如输入电话或 ICQ UIN 的可设为 8,年龄为 2 等。 例子: 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> 请填入电话号码:<input type="Text" name="phone" value="" size="10" maxlength="8"> </form> 显示结果 请填入电话号码: -------------------------------------------------------------------------------- 输入方式二: Radio (单一选择) 例如:<input type="Radio" name="gender" value="female" align="MIDDLE" checked> type="Radio" 输入方式为 Radio,能产生一单一选择,以供点选。 name="gender" 此一 Radio 名称,参考 Text 部分的说明。 value="female" 内定值。每一个 radio 必须及仅有一个 value,通常有同时采用两个或以上同 name 不同 value 的 Radio 输入方式,可让使用使任选其一。 align="MIDDLE" 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。 checked 设该 Radio 为内定被选。同 name 的各个 Radio 中只能有一个使用,或全不使用这 参数。 例子: 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> 请选性别: <input type="Radio" name="gender" value="Female">女性 <input type="Radio" name="gender" value="Male" checked>男性 <br>你喜欢吗: <input type="Radio" name="like" value="Yes">喜欢 <input type="Radio" name="like" value="No">不喜欢 <input type="Radio" name="like" value="NotSure">不肯定 </form> 显示结果 请选性别: 女性 男性 你喜欢吗: 喜欢 不喜欢 不肯定 -------------------------------------------------------------------------------- 输入方式三: Checkbox (确认盒) 例如:<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked> type="Checkbox" 输入方式为 Checkbox,能产生一确认盒,以供剔选。 name="idol" 此一 Checkbox 名称,参考 Text 部分的说明。 value="Leon" 内定值。每一个 Checkbox 必须及仅有一个 value,当被剔选时这值便会传及 CGI,例如所传字串 idol=Leon 。 align="RIGHT" 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。 checked 设该 Checkbox 为内定被选。每个 Checkbox 都是独立的,所以每一个都可使用这 参数,不像 Radio。 例子: 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> 你喜欢以下那些明星: <br><input type="Checkbox" name="idol01" value="Leon">黎明 <input type="Checkbox" name="idol02" value="Noriko_Sagai">酒井法子 <input type="Checkbox" name="idol03" value="Leon">郑秀文 <input type="Checkbox" name="idol04" value="BonJovi" checked>BonJovi </form> 显示结果 你喜欢以下那些明星: 黎明 酒井法子 郑秀文 BonJovi -------------------------------------------------------------------------------- 输入方式四: Password (密码输方盒) 例如:<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9"> Password 的其他参数和 Text 是完全相同的,请参考 Text 的介绍。 两者作用不同,Password 所输入的字元全以 * 号表示。 例子: 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> 请输入姓名:<input type="Text" name="name"> <br>请输入密码:<input type="Password" name="pw" maxlength="9"> </form> 显示结果 请输入姓名: 请输入密码: -------------------------------------------------------------------------------- 输入方式五: Submit (传送键)及 Reset (清除键) 这是表单上重要的两个按键,两者所附带的参数相同,但用处不大。 例如:<input type="Submit" name="other_funtion" value="确定" align="MIDDLE"> <input type="Reset" value="清除" align="MIDDLE"> type="Submit" 设定输入方式为 Submit 或 Reset。 name="other_funtion" Submit 的功能随 name 的不同而不同,须和 CGI 配合。若你只需要普通的传送 键,则是其内定,不必用此参数。 value="确定" 这个值不是输给 CGI 的,而是显示在按键上,可以不用,传送键的内定值为 Submit Query,清除键的内定值为 Reset。 align="MIDDLE" 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。 例子: 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <input type="Submit"><input type="Reset"> <br><input type="Submit" value=" 确定 "><input type="Reset" value="清除"> </form> 显示结果 -------------------------------------------------------------------------------- 输入方式六: Image (图片按键) 这通常用以取代 Submit 及 Reset 两个按键,因为由程式产生的按键并不漂亮,这 Image 参 数便容许你采用自已制造的按键。 例如:<input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif"> type="Image" 输入方式为 Image。 name="submit" 所要代表的按键,可以是 submit, reset, 或其它。 align="BOTTOM" 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。 src="ex_icon.gif" 按键图片来源,若此图片文件不与该 html 文件在同一目录下,请加上相对或绝对途 径。 例子: 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif"> </form> 显示结果 -------------------------------------------------------------------------------- 输入方式七: File 例如:<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html"> input type="File" 输入方式为 Image。通常用以传输文件。 name="upload" 这文件传输的名称,用以识别之用。 align="BOTTOM" 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。 size="20" 所显示文字盒的长度。 maxlength="100" 可输入字元的上限。 accept="text/html" 所接受的文件类别,有二十六种选择,但可不设定。 例子: 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <type="File" name="upload" size="30" maxlength="100" accept="text/html"> </form> 显示结果 -------------------------------------------------------------------------------- 输入方式八: Hidden 例如:<input type="Hidden" name="ID" value="6618"> type="Hidden" 输入方式为隐藏或内定。它不会显示任何输入介面,而是一个内定值随表单一起 传给 CGI,列如由 CGI 产生的会员号码,或传入可更改的参数以调整 CGI 而避免 修改 CGI 程式码。 name="ID" 这文件传输的名称,用以识别之用。 value="6618" 内定值,会以如 ID=6618 形式传给 CGI。 例子: ("Hidden" 是不被显示的,所以这处多放了一个 "Submit" 键,表示 Hidden 之内定 值会随 submit 键被按而传给 CGI) 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <input type="Hidden" name="ID" value="6618"> <input type="Submit" value="Submit"> </form> 显示结果 -------------------------------------------------------------------------------- 输入方式九: Button 例如:<input type="Button" name="useless" value="Back"> type="Button" 输入方式为一般按键。常配合 Java Script 作为其启动按键。 name="useless" 这文件传输的名称,用处不大。 value="Back" 按键显示名称。 例子: 其中 onclick="history.go( -1 );return true; 属 JAVA 事件。 原始码 <form> <input type="Button" value="回前一页" onclick="history.go( -1 );return true;"> </form> 显示结果 ■ <SELECT> <OPTION> : ▲Top <SELECT>是卷动选单标记,每一选项皆由 <OPTION> 所标示,把它当作围堵标记或空标 记使用都可以。 <SELECT> 的参数设定(常用): 例如: <select name="where" size="6" multiple> name="where" 这卷动选单的名称,作识别之用,将会传及 CGI。 size="6" 这卷动选单的列数,即其高度,请自行修改。若使用此参数则不会有 Pop Up 效 果。 multiple 令这卷动选单容许多重选择。 <OPTION> 的参数设定(常用): 例如: <option value="tw" selected> value="tw" 这选项的值,将会传及 CGI。请自行修改,但不同选项必须有不同的值。 selected 设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。 例子一: (普通 POP UP 卷动选单) 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from? <select name="where"> <option value="hk">Hong Kong</option> <option value="tw" selected>Taiwan</option> <option value="cn">China</option> <option value="us">United States</option> <option value="ca">Canada</option> </select> </form> 显示结果 Where you com from? Hong Kong Taiwan China United States Canada 例子二: (容许多重选择 的卷动选单) 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from? <select name="where" multiple> <option value="hk">Hong Kong</option> <option value="tw" selected>Taiwan</option> <option value="cn">China</option> <option value="us">United States</option> <option value="ca">Canada</option> </select> </form> 显示结果 Where you com from? Hong Kong Taiwan China United States Canada 例子三:(设定了 Size 的卷动选单) 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from? <select name="where" size="5"> <option value="hk">Hong Kong</option> <option value="tw" selected>Taiwan</option> <option value="cn">China</option> <option value="us">United States</option> <option value="ca">Canada</option> </select> </form> 显示结果 Where you com from? Hong Kong Taiwan China United States Canada ■ <TEXTAREA> : ▲Top <TEXTAREA>是表单文字区块标记,常用于 bug report, feedback 等需要填写大量资料的用 途。 <TEXTAREA> 的参数设定(常用): 例如: <textarea name="comments" cols="40" rows="4" wrap="VIRTUAL"> name="comments" 这文字区块的名称,作识别之用,将会传及 CGI。 cols="40" 这文字区块的宽度,请自行修改。 rows="4" 这文字区块的列数,即其高度,请自行修改。 wrap="VIRTUAL" 设定其折行问题,可选值为: off, physical, virtual。off 表示不使用此属性,physical 时则会强迫刘览器在送资料到 CGI(Web 伺服器端)必须将实№文字中的换行一 并送出,设为 virtual 时则送出连续成串的字(除非使用者按了键盘的 RETURN / ENTER)。 例子: 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Give comments: <textarea name="comments" cols="40" rows="4" wrap="VIRTUAL"> 这是预设的字句,通常留空的,随你喜欢。</textarea> </form> 显示结果 Give comments: 这是预设的字句,通常留空的,随你喜欢。 图形标记 <IMG> ■ <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 是设定图片左右的空 间,vspace 则是设定图片上下的空间,高度采用 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> 放大了的图片 显示结果 放大了的图片 链接标记 <A> <BASE> ■ <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="../../../../index.html">网络教室首页</a> <p><a href="http://tech.china.com/zh_cn/"><img alt="科技频道" border=5 height=31 width=88 src="http://tech.china.com/zh_cn/image/techlogo.gif"></a> <p><a href="http://tech.china.com/zh_cn/"><img alt="科技频道" border=0 height=31 src="http://tech.china.com/zh_cn/image/techlogo.gif" width=88></a> </p> 显示结果 网络教室首页 例子二(内部连结):请到 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 参数相同。 例子容後再写,你可亲自尝试或到一些以框架制作的网页去体验一下。 排版标记 <FRAMESET> <FRAME> <NOFRAMES> <IFRAME> ■ 框架概念 : 所谓框架便是网页画面分成几个框窗,同时取得多个 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> 标记所标示的框窗永远是按由上而下、由左至右的次序。 本节与 Composer 教室的【运用框架】大部分相同,只是本节增加了内容及较为详细,正 如其它篇章一样并不会提及网页制作工具,若馈下学会了 HTML 相信你亦不会选用 Composer , FrontPage 一类的工具了。 ■ <FRAMESET> <FRAME> : ▲Top <FRAMESET> 称框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割。 <FRAME> 则只是设定某一个框窗内的参数属性。 <FRAMESET> 参数设定: 例子:<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000"> COLS="90,*" 垂直切割画面(如分左右两个画面),接受整数值、百分数, * 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以 切成三个视窗,第一个视窗是 30 pixels 的宽度,为一绝对分割,第二个视窗是当 分配完第一及第三个视窗後剩下的空间,第三个视窗则占整个画面的 50% 宽度 为 一相对分割。您可自己调整数字。 ROWS="120,*" 就是横向切割,将画面上下分开,数值设定同上。唯 COLS 与 ROWS 两参数尽量 不要同在一个 <FRAMESET> 标记中,因 Netacape 偶然不能显示这类形的框架,尽 采用多重分割。 frameborder="0" 设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避 免使用 yes 或 no ) 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 表示要显示边框。(避 免使用 yes 或 no ) framespacing="6" 表示框架与框架间的保留空白的距离。 bordercolor="#008000" 设定框架的边框颜色。颜色值请参考【HTML 剖析】。 scrolling="Auto" 设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示, AUTO是视情况显示。 noresize 设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随 意地拉动框架,改变其大小。 marginhight=5 表示框架高度部份边缘所保留的空间。 marginwidth=5 表示框架宽度部份边缘所保留的空间。 以下是一些例子:(与 Composer 教室的【运用框架】相同) 例子 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="http://tech.china.com/zh_cn/index.html" name="test" align="MIDDLE" width="500" height="200" marginwidth="5" marginheight="5" frameborder="1"> 很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页。</iframe> </center> 显示结果 多媒体标记 <BGSOUND> <EMBED> ■ <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 只显示音量调整钮 其他标记 <MARQUEE> <BLINK> <ISINDEX> <META> <LINK> ■ <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 以反对此标记。 例子: 原始码 <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=big5"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 设定这是 HTML 文件及其编码语系,中文网页请使用 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 一节详细介绍。 特殊字符 只要你认识了 HTML 标记,你便会知道特殊字符的用处。 HTML 原始码 显示结果 描述 < < 小於号或显示标记 > > 大於号或显示标记 & & 可用於显示其它特殊字符 " " 引号 ® ® 己注册 © © 版权 ™ ™ 商标 半方大的空白 全方大的空白 不断行的空白 ■ ISO Latin-1 特殊字符 : HTML 原始码 显示结果 描述 Æ Æ Uppercase AE diphthing Á Á Uppercase A, acute accent   Uppercase A, circumflex accent À À Uppercase A, grave accent Å Å Uppercase A, ring à à Uppercase A, tilde Ä Ä Uppercase A, dieresis or umlaut mark Ç Ç Uppercase C, cedilla Ð Ð Uppercase Eth, Icelandic É É Uppercase E, acute accent Ê Ê Uppercase E, circumflex accent È È Uppercase E, grave accent Ë Ë Uppercase E, dieresis or umlaut mark Í Í Uppercase I, acute accent Î Î Uppercase I, circumflex accent Ì Ì Uppercase I, grave accent Ï Ï Uppercase I, dieresis or umlaut mark Ñ Ñ Uppercase N, tilde Ó Ó Uppercase O, acute accent Ô Ô Uppercase O, circumflex accent Ò Ò Uppercase O, grave accent Ø Ø Uppercase O, slash Õ Õ Uppercase O, tilde Ö Ö Uppercase O, dieresis or umlaut mark Þ Þ Uppercase THORN, Icelandic Ú Ú Uppercase U, acute accent Û Û Uppercase U, circumflex accent Ù Ù Uppercase u, grave accent Ü Ü Uppercase U, dieresis or umlaut mark Ý Ý Uppercase Y, acute accent æ æ Lowercase ae diphthing á á Lowercase a, acute accent â â Lowercase a, circumflex accent à à Lowercase a, grave accent å å Lowercase a, ring ã ã Lowercase a, tilde ä ä Lowercase a, dieresis or umlaut mark ç ç Lowercase c, cedilla ð ð Lowercase eth, Icelandic é é Lowercase e, acute accent ê ê Lowercase e, circumflex accent è è Lowercase e, grave accent ë ë Lowercase e, dieresis or umlaut mark í í Lowercase i, acute accent î î Lowercase i, circumflex accent ì ì Lowercase i, grave accent ï ï Lowercase i, dieresis or umlaut mark ñ ñ Lowercase n, tilde ó ó Lowercase o, acute accent ô ô Lowercase o, circumflex accent ò ò Lowercase o, grave accent ø ø Lowercase o, slash õ õ Lowercase o, tilde ö ö Lowercase o, dieresis or umlaut mark ß ß Lowercase sharp s, German (sz ligature) þ þ Lowercase thorn, Icelandic ú ú Lowercase u, acute accent û û Lowercase u, circumflex accent ù ù Lowercase u, grave accent ü ü Lowercase u, dieresis or umlaut mark ý ý Lowercase y, acute accent ÿ ÿ Lowercase y, dieresis or umlaut mark 调色原理 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 基本架构: 选按不同 <hr> <h3>关于语言的应用</h3> HTML语言基础 冯永曜 黄山村夫 一、为什么要学习HTML? 近两年来,许多公司开发出了图形化的HTML开发工具,使得网页的制作变得非常简单。如微软公司推出的 Microsoft FrontPage, Adobe公司推出的 Adobe Pagemill, Micromedia公司推出的Dreamweaver等编辑工具,都被称为“所见即所得”的网页制作工具。这些图形化的开发工具可以直接处理网页,而不用书写费劲的标记。这使得用户在没有HTML语言基础的情况下,照样可以编写网页。这时,编写HTML文档的任务由开发工具替你完成了。这是网页图形编辑工具的最大成功之处,但也是它们的最大不足之处。受到图形编辑工具自身的约束,将产生大量的垃圾代码。原因很简单,我举一个简单的例子你就明白了。比如:在网页设计一个表格,若是每个单元格的宽度和高度让它根据其中的内容自动确定,HTML只要你告诉它是表格和单元格的排列顺序(也就是行列数)就行了,但因为图形化开发工具无法得知你的这种特殊要求,所以只能取一般要求,把每个单元格的宽度和高度都定义起来,从而增加了许多代码。所以一个明智的网页编写者应该在掌握图形编辑工具的基础上进一步学会HTML语言,从而知道那些是垃圾代码,这样,我们就可以利用图形化HTML开发工具快速成地做出网页,又会消除无用的代码,从而达到快速制作高质量网页的目的。 二、如何用HTML? HTML语言,又称超文本标记语言,是英文Hyper Text Markup Language的缩写。HTML语言作为一种标识性的语言,是由一些特定符号和语法组成的,所以理解和掌握都是十分容易的。可以说,HTML语言在所有的计算机编程语言中是最简单易学的。 组成HTML的文档都是ASCIlI档,所以创建HTML文件十分简单,只需一个普通的字符编辑器即可。如 Wndows中的记事本、写字板都可以使用。也可以采用专用的 HTML 编辑工具:如 CoffeeHTML、 Homesite、 HTMLedit Pro等工具,它们的特点是能够自动检查HTML文档中的语法错误并协助改正。由于有了图形化的HTML开发工具,使得我们学习HTML更加容易,我们可以先用它制作好网页,再在它附带的HTML代码编辑器在删去那些无用的代码,利用它的所见即所得特性,从而使我们很快就能熟炼地掌握HTML。特别是Micromedia 公司最近发布的Dreamweaver4,可以把源代码编辑器和网页编辑器放在同一个窗口中,真是方便极了。 三、HTML基本概念 1、标记 HTML用于描述功能的符号称为“标记”。如“HTML”、“BODY”、“TABLE”等。标记在使用是必须用方括号“<>”括起来,而且是成对出现,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。如<TABLE>表示一个表格的开始,</TABLE>表标一个表格的结束。在HTML中,标记的大小写作用相同,如<TABLE>和<table>都是表示一个表格的开始。 标记可以包含标记,如:表格中包含表格或其它标记,如下面这样的HTML代码结构是正确的: <table width="50%" border="10" cellspacing="10" cellpadding="10"> <tr> <td> <table width="100%" border="1" cellspacing="1" cellpadding="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </td> <td> <p> </p> <p>hjk</p> <p> </p> </td> <td> </td> </tr> </table> 但是标记不能交叉嵌套,如下面这样的代码是错误的: <div><span>这是不正确的代码</div></span> 2、特殊字符 由于方括号和英文双引号被用来提示HTML的标记及参数值,那么在网页中要显示方括号和英文引号只能用其它的符号来代替,下面是常见特殊字符所代表的正常字符: <或<对应字符 < >或>对应字符 > "或"——对应字符 " à——对应字符 A 3、语法 一个标记,为了明确它的功能,往往用一些属性参数来描述,对这些属性参数的规定上就是所谓的语法,例如:段落标记<p>,它的语法格式是: <p align=left|center|right class=type> 这就说明<p>标记有两个属性参数,即“align”和“class”,其中“align”用于定义段的位置是靠左、靠右还是居中。默认值是靠左。而“class ”则是定义所属的类型。在实际应用时当然可以没有“align”和“class”参数,按照默认情况显示,这一点非常重要,这是我们判断无用代码的主要标准之一,假如在网页代码中有对默认值进行描述设置的语句代码,显然是无用的代码。另外,在设置标记的属性值时,若是取默认值不影响效果或影响很少,我们就尽量取默认值,这样可以不用设置,从而达到减少代码的目的。 标记参数的具体的值都有要加西文引号,如:要使段落内容居中,正确的写法是这样的:<p align="center">段落内容居中示例</p> 学好用好HTML语言的关键是灵活应用标记的参数。特别是默认值的应用。 用好活动字幕标记—marquee 冯永曜 黄山村夫 活动字幕,也称为滚动看板、滚动字幕。活动字幕的使用使得整个网页更有动感,显得很有生气。现在的网站中也越来越多地使用活动字幕来加强网页的互动性。用Javascript编程可以实现活动字幕效果;用Dreamweaver的图层再用其时间线功能可以做出非常漂亮的滚动看板。而用HTML的<marquee>活动字幕标记所需的代码最少,确实能够以较少的下载时间换来较好的效果。该标记语法格式如下: <marquee aligh=left|center|right|top|bottom bgcolor=#n direction=left|right|up|down behavior=type height=n hspace=n scrollamount=n Scrolldelay=n width=n VSpace=n loop=n> 可以看出由于活动字幕的显示方式多种多样,可选的参数也很多。下面解释一下各参数的含义: align:是设定活动字幕的位置,不过除了居左、居中、居右三种位置外,又增加靠上(align=top)和靠下(align=bottom)两种位置。 Bgcolor:用于设定活动字幕的背景颜色,一般是十六进制数。 Direction:用于设定活动字幕的滚动方向是向左、向右、向上、向下。 Behavior:用于设定滚动的方式,主要由三种方式:behavior="scroll"表示由一端滚动到另一端;behavior="slide":表示由一端快速滑动到另一端,且不再重复; behavior="alternate"表示在两端之间来回滚动。 Height:用于设定滚动字幕的高度。 Width:则设定滚动字幕的宽度。 Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度。 Scrollamount:用于设定活动字幕的滚动距离。 scrolldelay:用于设定滚动两次之间的延迟时间。 Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。 <marquee>标记的默认情况是向左滚动无限次,字幕高度是文本高度,滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。 应用技巧 1、全取默认值,所用代码最少,请看下面的例子 这个滚动字幕全取默认值,源代码:<marquee>这里写字幕内容</marquee>,代码是不是很少? 2、垂直滚动 只要加上diriction="up"就行了,如<marquee direction="up" >这里写字幕内容</marquee>。 3、多行文本的活动字幕 由于<mqrquee>标记只能作用于一段文本,因此多行活动字幕,分行时只能用<br>标记,不能用<p>标记。 示例源代码: <marquee> 活动字幕内容第一行<br> 活动字幕内容第二行<br> 活动字幕内容第三行<br> </marquee> 4、在字幕内容中加入图象 <marquee>虽是一个活动字幕标记,但它允许在其中加入图象。下面是一个加入了图片的代码: <marquee><img src="image/a2ball.gif" width="17" height="16">这是加入图象的活动字幕</marquee> 5、在Dreamweaver中使用<marquee>标记 Dreamweaver不能在编辑窗中直接加入marquee标记,但可在源代码检视器中加入<marquee>标记,然后在编辑窗中编辑活动字幕的内容即可。 <marquee>标记的参数较多,在应用中要把握一个原则,能用默认值就不要再设置参数值,用什么参数就设置该参数的值,其它参数就不要再设置,以把代码控制在最少的范围内。 用好超级链接标记—A 冯永曜 黄山村夫 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像,这已是众所周知了,但关于它的语法结构可能有点鲜为人知,而要用活它则必须了解其语法结构。<a>标记的基本语法结构是: <a class=type id=value href=reference name=value rel=same|next|parent|previous rev=value target=window style=value title=title onclick=function onmouseout=function onMouseOver=function> </a> 从标记的语法结构可以看出,在设定一个超级链接时有很多参数可供选择,以实现不同的链接效果,这有点出乎意料吧?! 其中class和id选项:用于设定链接点所属的类型和分配的ID号,通常不加以设定。最常用的两个参数是href和name。其中href是hypertext reference的缩略词,用于设定链接地址。链接地址必须为url地址,如果没有给出具体路径,则默认路径和当前页的路径相同。 链接到的文件也分为几种情况:如果为HTML文件,则在当前浏览器中直接打开;如果为可执行文件(.exe文件),则直接执行或下载,我们提供下载的文件就是用它的这种特性做的;如果为文本文件如word格式的文件,则在浏览器中打开此文件,并可以进行编辑加工。 rel:表示设定链接的关系:rel=same表示待链接的文件与此文件相同,rel=next表示待链接的文件为下一页,rel=parent表示本文件为待链接文件的父文件,rel=previous则表示待链接的文件为上一页。 rev:则用于设定反向链接。 target:是在采用帧窗口的情况下设定链接到哪一个窗口,还有target="_bank"是表示新开一窗口打开网页。 title:用于设定链接点被选到时显示的标题。 onclick:对应于一个事件,当链接点被点击后将触发这个事件,执行对应的子程序。 onmouseover:与onclick类似,对应的事件在鼠标移到链接点上时被触发。 onmouseout:对应的事件在鼠标移出镇接点后被触发。 举几个例子: <a href="index.htm">回到主页</a> <a href="sound.wav">播放语音文件</a> <a href="javascipt.open()">执行对应的程序</a> <a herf="document.doc">打开对应的文档进行加工</a> 应用技巧 1、提供下载文件 有不少网友来信问,提供下载的效果怎么做。实际上仍然是做一个超级链接,不过供下载的文件必须上传到网站上。例:有一个“网页技巧”的文件包供下载,文件名是“homepagejq.zip”且已上传到网站了,则这个链接的代码可以这样写:<a href="homepagejq.zip">点击这里下载“网页技巧”文件包</a>。 2、在新窗口中打开链接的网页 设定“target”的值为“_blank”。例:新开窗口打开网页“aboutme.htm”。产生该效果的代码是:<a href="aboutme.htm" target="_blank">关于我......</a>。 3、鼠标移到链接,显示一行说明文字 设定“title”参数值,即可获得这种效果。例:当鼠标移到“黄山村夫”这个链接上时,显示说明“这是一个介绍网页制作技巧的专业网站”。这个链接的代码是这样的:<a href="hscf.htm" title="这是一个介绍网页制作技巧的专业网站">黄山村夫</a>。 4、鼠标移到一个链接上弹出一个窗口 这是设定onmouseover参数获得的效果。例:当鼠标移到一个链接上,弹出一个窗口并在窗口中显示“鼠标悬停效果演示!”。这个链接的代码是这样的:<a href="其它网页.htm" onmouseover="alert('鼠标悬停效果演示!')">链接</a>。用类似的方法可以制作当鼠标按下后弹出提出示窗口、当鼠标离开时弹出提示窗口的效果。 5、链接到本页的指定内容 要实现链接到本页的某一部分内容上(也就是“文件内跳转”),必须用参数name指定链接点的名称。选定一块文本,可以用name参数为其命名,以备链接所用。所谓同一个文件内的跳转是指当读者在阅读一个很长的文件的时候,若只对某部分的内容感兴趣,可以采用跳跃式的阅读方式。其基本格式是: <a href="#链接点名称">第二部分</a>第一部分内容...... ........................................... <a name="链接点名称"></a>第二部分实际内容...... ........................................... 这样当你点击“第二部分”这个超级链接后,就会自动转移到“第二部分实际内容”这个地方来。“name”参数所定义的链接点名称可以随意取,但链接的“href”参数中的链接点名称必须与其一致,不要忘记在前面加上“#”。 6、链接到其它页面的指定内容位置 方法与上例类似,但在“href”参数中的链接点名称前要加上网页的文件名。例:有两个网页page1.htm和page2.htm ,每页均有两部分内容,现要在page1.htm中制作一个超级链接,按下该链接后将转到page2.htm的第二部分内容上。那么我们可以这样做,首先在page2.htm第二部分内容开始的地方写上这样一句代码:<a name="链接点名称"></a>;在page1.htm中写上这样一个链接代码:<a href="pagw2.htm#链接点名称">page2 的第二部分内容</a>。 7、链接到E_mail 点击一个超级链接后,将启动客户机上的电子邮件管理软件给你写信。例这行代码:<a href="mailto:fyy0528@sina.com">请给我写信</a>。一旦你点击了“请给我写信”这个链接,将自动启动电子邮件管理软件(如OE)的写信功能,并已把邮件地址加在了收信人的地址栏里了。 链接不仅可以以文本作载体,也可以以图象作载体,而且可以以图片的某一部分作载体,且都能实现上述这些效果,方法也相同,所不同只是载体,也就是链接的两对方括号中间的那部分,所以不再另举例了。 用好基本图像标记—img 冯永曜 黄山村夫 网页中最引人入胜的莫过于那丰富多彩的图像了。成功的站点中不能没有绚丽的图像,否则便使测览者觉得索然无味。下面介绍HTML语言中的基本图像标记:<img>。其基本语法结构如下: <img align=top|middle|center|bottom|left|right class=type id=Value name=value src=url title=text alt=value border=n height=n width=n hspace=n vspace=n ismap=image usemap=url onload=function onabort=function onerror=function dynsrc=url controls=controls loop=n start=type> 可以看出,关于基本图像标记<img>的应用参数多达21项。当然,我们实际应用的只是其中几项,只有在需要实现特殊效果的情况下,才需要使用较多的参数。下面先介绍一下各参数的具体含义: align:是指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默认情况下是靠上,即align=top。在图文混排时,这个参数很有用。 class和id:分别指定图像所属的类型和图像的id号。 name:用于设定图像的名称。 src:规定插入的图像的url地址,也就是含路径的图像文件名。 title:设定图像的标题。 alt:表示图像的替代字,主要用于在浏览器还没有装入图像(或关闭图像显示)的时候,先显示有关此图像的信息。这是初学者最易忽略的参数,因不设定它在正常显示时没问题。 border:设定图片的边框。 height和width:分别用于指定图像的高度和宽度,可以与图片原来的宽度和高度不同。 hspace和vspace:分别用于设定图像的左右边框大小和上下边框大小,在图文混排时会用到。 ismp和usemap:在应用图像地图时使用。ismap表示图像地图的数据存放在服务器中,当鼠标在图像上的某个区域上时,可以将此区域的坐标传送给服务器处理。usemap则用于设定图像地图的名称。 onload、onabort、onerror对应于设定的子程序,分别在图像被载入、取消载入、载入出错的情况下各自对应的子程序,不常用。 dynsrc:指定要下载的影像片断的url地址。 controls:设定影像播放的控制接钮。 loop:指定影像片断的播放次数,当loop=-1时,影像片断将循环播放直至页面更新。 start:设定何时开始播放影像片断,有三种选择:start=fileopen表示页面载入后即开始播放,默认的就是这种状态;start=mouseover表示当鼠标移到影像上即开始播放;start=fileopen,mouseover表示当有上面两种情况之一发生时就开始播放。 应用技巧 1、给图片加边框 上边这张图片的边框是border="4"所产生的效果,注意:边框的颜色默认的是黑色,不美观,而<img>标记也没有设置边框颜色的参数,我们可以通过设置Class参数调用CSS达到改变边框颜色的目的,如本例的完整代码是: <img src="image/yks2.jpg" width="59" height="48" border="4" alt="黄山迎客人松" align="left" class="style1">,这里的CSS的“style1”放在网页源代码的<head>与</head>之间,其代码为: <style type="text/css"> <!-- .style1 { border-color: #009900 } --> </style> 2、给图片加动态说明和替代文字 若想制作当鼠标移到图片上出现一行简短说明文字的效果,不必去使用图层技术(特殊效果的说明除外),设定title参数就行了。例:在上例的图片的代码改成这样:<img src="image/yks2.jpg" width="59" height="48" border="4" title="这就是著明的黄山迎客松,她已有近千年的树龄了。" alt="黄山迎客松" align="left" class="style1">。这样,当鼠标移到图片上,就会显示出说明文字“这就是著明的黄山迎客松,她已有近千年的树龄了。”。 给图片加上替代文字是一种好习惯,象上例那样设置alt参数,当用户关闭图像显示或页面刚刚下载时,图片还没来不得及显示时,图像的替代文字就会显示出来,这样用户就能知道对应的图像内容。 3、图像与文字混排 图文混排主要是设置align参数。在这里要注意: 1) top、middle、center、bottom所产生的效果只是一行文字,在多行文本与图象对齐时要用left和right参数值。 2)<img>中的对齐参数align所产生的效果是指图片与周围文字的位置关系,而图片在页面中的位置对齐是在图片所在的页面元素中设置的。如下面这段代码: <p align="left"><img src="image/yks2.jpg" width="59" height="48" border="4" alt="黄山迎客人松" align="top" class="style1">图文混排示例</p> 在上面这段代码中,标记<p>中的align="left"表示图片的位置在窗口的左端;而<img>中的align="top"则表示图片旁边的文字与图片的顶端对齐。 3)为了避免图片与旁边文字挨得太近不便阅读,可以通过设置hspace参数来控制图片与文字间的距离,一般设置hspace="10"(表示图片的左右有10个像素的空白)就能达到较好的效果。 4、动态替换图像 鼠标不在图片上 鼠标移到图片上 当用户的鼠标放在图片上时,图片会自动更换,鼠标离开之后,图片又会恢复原来的样了。象上边所示的这种效果,当把鼠标移到上面时,看到的效果似乎是那个白色窗口向上下展开了,实际上是换了一张图片。鼠标移开,又恢复了原样。制作这样的效果,先要给欲替换的图片设定名字,本例中是name="hscfjj";然后设定onmuseover和onmouseout 参数。本例<img>标记的完整代码如下: <img src="image/htmlp1.gif" width="182" height="129" align="left" name="hscfjj" onmouseover="hscfjj.src='image/htmlp2.gif'" onmouseout="hscfjj.src='image/htmlp1.gif'" alt="黄山村夫站(http://fym888.go.163.com)简介图片" vspace="10" hspace="10"> 采用本例来制作动态按钮将会达到很吸引人的效果。 5、在网页加入影像片断 例:在move 目录下有一介绍“黄山风光”的影像片断文件“hsfg.avi”,现要在网页中播放。那么源代码是这样的:<img dynsrc="move/hsfg.avi" start="mouseover" width="380" height="288" controls loop="1" alt="黄山风光介绍"影像片断"> 上面这段代码的效果是,当鼠标移开影像片断上时即开始训动媒体播放器播放影像一次,并且还设定了显示播放器控制面板,以便对播放过程进行控制。 从上面的代码可以看出,在网页中加入影像片断与加普通图像基本相同,如它们都要指定来源、设定大小和替代文字等。但在这里请注意:加入影像片断时要使用“dynsrc”参数,且不能再在同个<img>标记中使用“src”参数,否则将不能播放影像片断,只能显示替代文字了。 用好图像的作用区域标记—area 冯永曜 黄山村夫 你见过“联想”机器上联想公司赠送的“我的办公室”软件的界面吗?在那幅办公室的图片上用鼠标点一下办公桌上的键盘,就启动一个“五笔字型”打字练习软件,点一下办公桌上的记事本就打开一个记事本软件,如此等等,即形象又方便。这种效果的实质是把一幅图片划分为不同的作用区域,再让不同的区域链接到做不同事情的软件上去,在HTML中也有一个具有把图片划分成多个作用区域,并链接到不同网页的标记,那就是 <area>地图作用区域标记。 <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下: <area class=type id=Value href=url alt=text shape=area-shape coods=value> 其中。class和id:是分别指定热点的类型和id号。 alt:用于设定热点的替代性文字。 href:用于设定该热点所链接的url地址。 shape和coords:是两个主要的参数,用于设定热点的形状和大小。其基本用法如下: <area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。 <area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。 <area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。 <area>标记是在图像地图中划分作用区域的,因此其划分的作用区域必须在图像地图的区域内,所以在用 <area> 标记划分区域前必须用HTML的另一个标记<map>来设定图像地图的作用区域,并为指定的图像地图设定名称,该标记的用法很简单,即<map name="图像地图名称"> ...... </map>。 下面通过一个例子来说明这两个标记的用法: 这里是一幅新书架的图片,要做的效果是:当鼠标点“网址大全”这本书时,新开一窗口,显示关于这本书的简介及订单的网页(urlall.htm);当鼠标点“网站设计攻略”这本书时,新开一窗口,显示关于这本书的简介及订单的网页(siteall.htm);当鼠标点“网页技巧大全”这本书时,新开一窗口,显示关于这本书的简介及订单的网页(pagejqlall.htm)。制作方法: 1、插入图片,并设置好图像的有关参数,且在<img>标记中设置参数usemap="newbook" ismap,以表示对图像地图(newbook)的引用; 2、用<map>标记设定图像地图的作用区域,并取名为:newbook; 3、分别用<area>标记针对三本书的位置划分出三个矩形作用区域,并设定好其链接参数href。 制作完成,本例的源代码如下: <img src="image/htmlp3.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0"> <map name="newbook"> <area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。"> <area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。"> <area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。"> </map> 在制作本文介绍的效果时应注意的几点: 1、在<img>标记不要忘记设置usemap、ismap参数,且usemap的参数值必须与<map>标记中的name参数值相同,也就是说,“图像地图名称”要一致; 2、同一“图像地图”中的所有热点区域都要在图像地图的范围内,即所有<area>标记均要在<map>与</map>之间; 3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套,避免出现在shape参数设置的矩形作用区域,而在cords 中设置的却是多边形区域顶点坐标的现象出现。 用好HTML的表格标记 冯永曜 黄山村夫 对于表格,是网页制作中的重头戏,一些图形化网页制作工具(如:Dreamweaver、Fontpage等)对它也支持的非常好,但HTML为表格设置了几十个参数,图形化网页制作工具要对它全面支持就有点免为其难了。由于参数太多,且大部分参数大家也比较熟悉,就不在这里一一介绍了,下面的例子中仅对一些关键性参数作详细介绍。 一、作系列横单线 这是系列横单线试验,效果还好吧? 在这个例子中,用到了表格主标题标记<caption>,它的语法如下: <caption align=left|center|right valign=top|bottom> align和valign分别用于设定标题的水平位置和垂直位置。align的默认值是center;valign的默认值是top。利用<caption>标记可以方便地在紧靠边表格的顶部或底部写上文字,且居中,若用其它办法要麻烦得多。另外在本例中能使表格产生单线效果是设置了<table>标记的rules和frame参数,rules参数是对表格的内部边框作显示控制。 rules="none":表示不加内部边框; rules="rows":表示只显示水平方向的边框; rules="cols:表示只显示垂直方向上的边框; rules="all":则是显示所有方向上的边框,这也是默认值; frame="void":表示不加外边框; frame="above":表示显示上边的外边框; frame="below":表示显示下边的外边框; frame="lhs" :表示显示左边的外边框; frame="rls" :表示显示右边的外边框; frame="hsides":表示显示上下外边框; frame="vsides":表示显示左右外边框; frame="box" 则表示显示所有外边框。 明白了参数值的含义,制作本例的效果就简单了,本例完成后的源代码如下: <table width="60%" border="1" cellspacing="0" cellpadding="0" rules="rows" frame="hsides"> <caption>这是系列横单线试验</caption> <tr> <td> 这是系列横单线试验,效果还好吧?</td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> 用这种方法画系列单线,即快又整齐,且所用代码也很少。 二、作系列竖单线 本例这种效果看起来是不是有点特色,其实在制作方法上与上例没有多少区别,只是改变了rules和frame的参数值,使表格只显示垂直方向的内外边框,其它与上例相同,本例完成后的源代码是: <table border="1" cellspacing="1" cellpadding="8" rules="clos" frame="vsides" height="115" align="left" hspace="10" width="180"> <tr> <td>更上一 层 楼 </td> <td>欲穷千 里 目 </td> <td>黄河 入 海 流 </td> <td>白日依 山 尽 </td> <td><p><br>登 黄 鹤 楼 </p></td> </tr> </table> 三、系列双横线 这是在例一的基础上再增加设定了cellspacing参数所产生的效果。 本例采用与例一相同的方法,通过设定rules和frame参数,使表格只显示水平方向的内外边框线,并增加了设定cellspacing参数使其产生双线效果,但是<table>标记默认的双线颜色不一样(因它的本意是用两种颜色来产生立体效果的),所以又通过设定bordercolorlight和bordercolordark 参数来改变双线的颜色,以达到双线颜色一致的目的。另外为了使表格内的文字内容上下留空,又设定了cellpadding参数,当然也可以通过设定单元格高度来达到这个目的,但那样要增加许多代码。下面介绍这几个参数的含义: cellspacing="n":单元格间距,也就是内外边框线的间距; cellpadding="n":单元格边距,即单元格内内容与内边框的距离; bordercolorlight="#n":设定立体边框线中较浅部分的颜色,用颜色名称或十六进制数表示。 bordercolordark="#n":设定立体边框线中较深部分的颜色,用颜色名称或十六进制数表示。 用本例的方法制作双横线,比用其它方法方便、快捷,所用代码也较少,当横线的数量越多,效果越明显。本例完成后的代码为: <table width="60%" border="1" cellspacing="6" cellpadding="3" bordercolorlight="#006633" bordercolordark="#006633" rules="rows" frame="hsides"> <tr><td> 这是在例一的基础上再增加设定了cellspacing参数所产</td></tr> <tr><td>生的效果。</td></tr> <tr><td> </td></tr> </table> 同样,在例二的基础上再加上例三的方法就可以方便地制作出双竖线效果,你可以试试。当然表格在网页制作中的作用远远不止这些,通过这三个例子可以看出,灵活应用表格的参数设定,可以产生一些特殊效果。 HTML表单设计基础 冯永曜 黄山村夫 表单在HTML页面中起着重要作用,它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后,按下“提交资料”按钮,这样所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料,从而完成了从用户到作者之间的反馈和交流。对于免费个人网站,往往服务器不提供CGI功能,也可以电子邮件来接收用户的反馈信息。 表单中主要包括下列元素: button——普通按钮 radio ——单选按钮 checkbox——复选框 select ——下拉式菜单 text ——单行文本框 textarea——多行文本框 submit——提交按钮 reset—— 重填按钮 用HTML设计表单常用的标记是:<form>、< input>、<Option>、<Select>、<textarea>和<isindex>等标记。 1、<form>表单标记 该标记的主要作用是设定表单的起止位置,并指定处理表单数据程序的url地址。其基本语法结构如下: <form action=url method=get|post name=value onreset=function onsubmit=function target=window> </form> 其中action:用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序,采用电子邮件方式时,用action="mailto:你的邮件地址"。 method:指定数据传送到服务器的方式。有两种主要的方式,当method=get时,将输入数据加在action指定的地址后面传送到服务器;当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器,用电子邮件接收用户信息采用这种方式。 name:用于设定表单的名称。onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的,分别设定了在按下相应的按钮之后要执行的子程序。 target:指定输入数据结果显示在那个窗口,这需要与<frame>标记配合使用。 2、<input>表单输入标记 此标记在表单中使用频繁,大部分表单内容需要用到此标记。其语法如下: <inPut aligh=left|righ|top|middle|bottom name=value type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button value=value src=url checked maxlength=n size=n onclick=function onselect=function> align:是用于设定表单的位置是靠左(left)、靠右(right)、居中(middle)、靠上 top)还是靠底(bottom)。 name:设定当前变量名称。 type:决定了输入数据的类型。其选项较多,各项的意义是: type=text:表示输入单行文本; typet=textarea:表示输入多行文本; type=password:表示输入数据为密码,用星号表示; type-checkbox:表示复选框; type-radio:表示单选框; type一submit:表示提交按钮,数据将被送到服务器; tyPe-reset:表示清除表单数据,以便重新输入; type-file:表示插入一个文件; type-hidden:表示隐藏按钮; type=image:表示插入一个图像; type一button:表示普通按钮; value:用于设定输入默认值,即如果用户不输入的话,就采用此默认值; src:是针对type=image的情况来说的,设定图像文件的地址; checked:表示选择框中,此项被默认选中; maxlength:表示在输入单行文本的时候,最大输入字符个数; size:用于设定在输入多行文本时的最大输入字符数,采用width,height方式; onclick:表示在按下输入时调用指定的子程序; onselect:表示当前项被选择时调用指定的子程序。 3、<select>下拉菜单标记 用<select>标记可以在表间中插入一个下拉菜单,它需与<option>标记联用,因为下拉菜单中的每个选项要用<option>标记来定义。<select>标记的语法如下: <select name=nametext size=n multiple> 其中name:设定下拉式菜单的名称; size:设定菜单框的高度,也就是一次显示几个菜单项,一般取默认值(size="1"); multiple:设定为可以进行多选。 4、<option>选项标记 该标记为下拉菜单中一个选项,语法很简单: <option selected value=value> 其中selected:表示当前项被默认选中; value:表示该项对应的值,在该项被中之后,该项的值就会被送到服务器进行处理。 5、<textarea>多行文本输入标记 这是一个建立多行文本输入框的专用标记,其语法如下: <textarea name=name cols=n rows=n wrap=off|hard|soft> 各参数含义:name:文本框名称;clos:宽度;rows:高度(行数);wrap:换行控制,off:不自动换行;hard:自动硬回车换行,换行标记一同被传送到服务器中去;soft:自动软回车换行,换行标记不会传送到服务器中去。 表单所涉及的标记较多,参数也较复杂,而实际制作表单时就是这些标记的组合应用,但一般的表单不可能涉及所有参数,我们还是那个原则,能用默认值的尽量用默认值,绝不设定一个不用的参数。我在后面的文章中将通过实例介绍一些常用参数的应用技巧。 用好HTML表单的文本框 冯永曜 黄山村夫 表单的文本框分为单行文本框和多行文本框,故名思义,单行文本框用于输入一些简短的信息,如:姓名、E_mail地址、口令等等;多行文本框用于输入内容较长的信息,如:用户意见、评论、留言等。只要你理解了表单的文本框参数的含义,制作接收信息的文本框是不难的,请看下面的例子。 一、一个单行文本框的例子 本例的源代码如下: <form name="form1" action="mailto:fyy0528@sina.com" method="post" enctype="text/plain"> <p>您的姓名: <input type="text" name="text1" size="12" maxlength="20"> 您的E_mail: <input type="text" name="text2" size="20" maxlength="24" value="*****@*.*"> 输入口令: <input type="password" name="text3" size="8" maxlength="8"> </p> <p align="center"> <input type="submit" name="提交" value="提 交"> <input type="reset" name="重写" value="重 写"> </p> </form> 本例中用了三个单行文本框来分别接收用户的“姓名”、“E_mail地址”和“口令”信息,在三个文本框中都设定文本框的宽度(size)和最大输入文本长度(maxlength),在第二个文本框中还设定了初始值(value),你可能注意到了,我把每个文本框的名称(name)都取成了英文名,这样对用于程序外理比较方便,因下例中要用这个例子。若是用电子邮件接收表单信息并不用程序处理,那么用中文名比较直观。为了使其成为一个具有实际交互功能的表单,加上了一个提交按钮,并在<form>标记中设定了action参数为:action="mailto:fyy0528@sina.com" ,同时把method参数设置为:method="post",这样,一旦按下“提交”按钮将会把信息通过电子邮件发到“fyy0528@sina.com”信箱。看来制作并不难!是吗?不过要注意:size的值小于maxlength的值时,当内容超过输入窗口的长度时会自动滚动;反之,size的值大于maxlength的值,超过maxlength长度的内容无法输入。 二、检验用户输入的信息 在上例中,若是用户什么信息也不写就按提交按钮,那不是白收一份邮件吗?要避免这种情况出现,就要对用户的输入信息进行检验,这就要用到<input>标记的onclick参数,我们在“提交”按钮的<input>标记中把onclick 设置为:onclick="test(form1)",而“test(form)”则是一个Javascript子程序,用来检验文本框的输入内容的,它的源代码如下: <script language="javascript"> <!-- function test(form){ test1(form); test2(form); test3(form)} function test1(form){ if (form.text1.value=="") alert("你没有写上你的姓名,请输入姓名!") } function test2(form){ if (form.text2.value==""||form.text2.value.indexOf('@',0)==-1) alert("E_mail地址不正确,请重新输入!") } function test3(form){ if (form.text3.value!="12345678") alert("密码错误,请重新输入!") } --> </script> 把这段程序复制在<head>与</head>之间,那么一旦用户按下提交按钮,就会调用这段程序对用户输入的信息进行检验,如果信息不正确就会给出提示,提醒用户输入正确的信息。注:在<form>标记中设置onsubmit="test(form1)"也能达到同样的效果。 三、制作一个留言簿 这个留言簿虽简单,但已包含了留言簿的基本功能,它是通过邮件的方式接收用户的信息,无需CGI支持。它的制作也比较简单,它采用表格产生立体效果,在表单中先插入一个表格,并设置好表格的有关参数,在表单方面,只是比例一多了一个多行文本框。在<input>标记中设置type="textarea",不能得到一个多行文本框。我们用HTML的另一个标记<textarea>来设置一个多行文本框,若是默认的文本框大小不合适,可通过设定cols和rows参数来调整窗口的大小。其它标记参数的设置同例一。本例完成后的源代码如下: <form name="form2" action="mailto:fyy0528@sina.com" method="post" enctype="text/plain" > <table width="50%" border="1" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#CCFFCC" cellpadding="4" align="left"> <tr> <td colspan="2"> <div align="center"><b>留 言 簿</b></div> </td> </tr> <tr> <td>姓名: <input type="text" name="textfield" size="8"> </td> <td>E_mail: <input type="text" name="textfield2" size="10" maxlength="20"> </td> </tr> <tr> <td colspan="2"> <div align="center">留 言<br> <textarea name="textfield3" cols="30" rows="3"></textarea> </div> </td> </tr> <tr> <td> <div align="right"> <input type="submit" name="Submit" value="提 交"> </div> </td> <td> <input type="reset" name="Submit2" value="重 写"> </td> </tr> </table> </form> 用好HTML表单的选择框 冯永曜 黄山村夫 在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在HTML的<input>标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚至全选。请看下面的例子: 下面给出这个例子的源代码,结合代码来讲各参数的设置: <form name="form1" > 你是否喜欢旅游?请选择:<br> <input type="radio" name="radiobutton" value="radiobutton" checked> 喜欢 <input type="radio" name="radiobutton" value="radiobutton"> 不喜欢 <input type="radio" name="radiobutton" value="radiobutton"> 无所谓<br> <br> 您对那些运动感兴趣,请选择:<br> <input type="checkbox" name="checkbox1" value="checkbox"> 跑步 <input type="checkbox" name="checkbox2" value="checkbox"> 打球 <input type="checkbox" name="checkbox3" value="checkbox"> 登山 <input type="checkbox" name="checkbox4" value="checkbox"> 健美<br> </form> 从上面的源代码中可看出,制作单选框只要把<input>标记的type参数设置为type="radio"就行了;而制作复选框则只要把<input>标记的type参数设置为type="checkbox"就行了。至于实际应用中用那种选择框,要根据实际需要而定。若只需用户有一种选择的,就用单选框,如本例中“你是否喜欢旅游?”这个问题,用户只能是一种选择,所以采用了单选框;若允许用户有多项选择的内容,则采用复选框,如本例中的“你对那些运动感兴趣?”这个问题,因一个人的兴趣可能是多方面的,所以采用了复选框。 在<input>标记中设定checked参数,则该选框就被默认选中。如本例的第一个单选框(“喜欢”下面那个单选框)就设置为默认选中,这样用户若是想选择“喜欢”的话,就可以不用再选了,当然,若用户要选择了“不喜欢”,则只要点击“不喜欢”下的那单选框,而默认值被自动取消。用同样的方法也可以设置某个复选框为默认被选中。但是复选框的默认选中不可滥用,否则会引起用户的反感。 用好表单的下拉式菜单 冯永曜 黄山村夫 用<select>标记可以在表单中方便地插入一个下拉式菜单,以方便用户进行选择,这在制作调查表或用户订单时非常有用,对这种下拉式菜单稍加改造则可以制作出名符其实的下拉式导航菜单。 一、下拉式选择框 这两个示例,外观形式有所不同,但都是用了<select>和<option>标记做出来的,只是设置了不同的参数而已。比较一下它们的源代码,就明白了: 左边的菜单源代码: <select name="select" size="4" multiple> <option value="1" selected>选择旅游线路</option> <option value="2">黄山二日游</option> <option value="3" >黄山精华游</option> <option value="4">黄山精品游</option> <option value="5">黄山四日游</option> </select> 右边的下拉菜单代码: <select name="select2" size="1"> <option value="1" selected>选择旅游线路</option> <option value="2">黄山二日游</option> <option value="3">黄山精华游</option> <option value="4">黄山精品游</option> <option value="5">黄山四日游</option> </select> 从上面的源代码中可以看出,两个菜单的所有<option>标记的参数设置均相同,所不同的是左边菜单在<select>标记中设置了size="4",从而使得它一次可以显示四个菜单项。另外,它还设置了multiple参数,从而使得在该菜单上可以选择多项,在选择多项时要同时按下“shift”键。 二、制作导航菜单 这个例子从外观上看与上例没有什么区别,但当你用鼠标点出下拉出的菜单项后,却能链接到相应的网页,也就是说,它是一个名符其实的下拉式导航菜单了,先看看它的源代码有什么变化: <select name=D1 onchange="location.href=this.options[this.selectedIndex].value" size=1 > <option selected value="村夫站导航">村夫站导航</option> <option value="http://go.163.com/~fym888/home.htm">村夫家</option> <option value="http://go.163.com/~fym888/dwyd.htm">DW 园地</option> <option value="http://go.163.com/~fym888/flashyd.htm">Flash园地</option> <option value="http://go.163.com/~fym888/pageabc.htm">网页ABC</option> <option value="http://go.163.com/~fym888/download.htm">文章下载</option> </select> 从上面的代码中可看出,value的值中与上例不同,不再是数字,而是网页URL地址,这样一旦你选择一个菜单就相当于获得一个网页地址,但仅有网页地址是不够的。在本例中关键的是这一行代码:onchange="location.href=this.options[this.selectedIndex].value" 这句代码的作用是,一旦选择项发生改变,立即从当前被选择的菜单中获得网页的地址,并链接到这个地址,从而保证了导航功能的实现。 用好表单的按钮(一) 冯永曜 黄山村夫 对于一个交互式表单,按钮是必不可少的。按钮一般分为两类,一类本身就具有特定的功能,叫做特殊按钮,如Submit(提交按钮)——用于传输用户所填写的信息至服务器、Reset(复原按钮)——清除所填写的信息以利重新填写;另一类本身不具特殊功能的,叫作普通按钮。特殊按钮只能用于表单才能发挥特殊的功能。而普通按钮除可在表单中应用外,在网页的其它地方使用也很方便。 一、制作常规按钮 制作按钮非常简单,在<input>标记中把type参数设置为:type="submit"就获得一个提交按钮,如本例的“提交”按钮;在<input> 标记中把type参数设置为:type="reset"就获得一个复原按钮,如本例的“重写”按钮;在<input>标记中把type参数设置为:type="button"就获得一个普通按钮。本例的按钮源代码如下: <input type="submit" name="Submit" value="提 交"> <input type="reset" name="Reset" value="重 写"> <input type="button" name="butto11" value="点我试试" onclick="alert('谢谢您点击!')" > 按钮的制虽简单,但在制作按钮时要注意两点: 1、对于特殊按钮,一般不需另加动作,当按下按钮时就有动作发生;而对于普通按钮,必须加上指定的动作并用相就的事件来触发,才会在事件发生时激发动作,否则按下普通按钮,什么也不发生。在本例的普通按钮上加了一个弹出提示窗口的动作:alert('谢谢您点击!'),并用onclick事件来触发,所以当你在那个按钮上点击时会弹出一个窗口,并显示“谢谢您点击!”这句话。 2、按钮上的文字是通过设置value参数来实现的,其默认值是英文名。 二、改变按钮的外观 HTML对文本提供了丰富的颜色设置,唯独对表单按钮默认的则是Windows系统的颜色,显得有点死板,而且也没有提供按钮的颜色设置参数,因此,要改变表单按钮的外观,只能借助于CSS了。请看下面的示例: 你看!这个按钮是不是变了样,新鲜多了吧?我们来看看它的源代码作了那些改变。按钮源代码: <input type="submit" name="Submit" value="提 交" style=" font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF"> 从源代码中可以看出,按钮的基本参数设置没变,只是加了一段CSS代码,正是这段CSS代码改变了按钮的外观风格。在这段CSS代码中,不仅重新设置了表单按钮的背景色和字号大小,而且还对按钮的边框线进行了设置,把上边框线、左边框线设置浅一点的颜色,而把下边框线、右边框线设置深一点的颜色,其目的是使表单按钮产生立体效果。当然,你可以任意改变CSS代码中颜色,以使按钮的颜色与所在网页的颜色协调。 用好表单的按钮(二) 冯永曜 黄山村夫 若想使表单按钮一改那死板板的老面孔,能象网页中其它导航菜单那样具有动态变换样式的效果且仍具其特殊地表单按钮功能,使它更具吸引人的魅力,采用本文介绍的制作方法是个不错的主意。请看下面的示例子。 一、动态变换文本按钮 鼠标不在按钮上 鼠标在按钮上 你看!这个按钮的效果不错吧?!制作这种效果的思路是这样的,利用CSS属性可以动态改变的特点,先给按钮定义两种外观样式,再在<input>标记中加上两个事件,即onmuseover(鼠标在按钮上)和onmuseout (鼠标离开按钮),我们用这两个事件分别调用不同的CSS定义的按钮外观样式,从而达到动态变换的效果。为了提高CSS的利用率(若有多个按钮,则可重复使用),把CSS放到<head>与</head>之间,在按钮中用class 调用CSS格式。本例在<head>与</head>之间的CSS代码是这样的: <style type="text/css"> <!-- .style1 { font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF} .style2 { font-size: 12px; font-weight: bold; background: #CCFFCC; border-width: thin medium medium thin; border-color: #CCFF99 #999999 #999999 #CCFF99} --> </style> 本例按钮的代码如下: <input type="submit" name="Submit" value="提 交" onmouseover="this.className='style2'" onmouseout="this.className='style1'" class="style1"> 从上面的代码中可看到,当鼠标移到按钮上,也就是onmuseover事件发生,那么按钮将采用style2甩定义的外观样式;当鼠标移开按钮时,也就是onmuseout事件发生,那么按钮就采用style1所定义的外观样式,从而实现了动态变化的目的。后面那个class="style1"的作用是当onmouseover、onmouseout这两个事件都没发生时,采用style1所定义的外观样式,从而保持了按钮外观的一致性。 二、动态变换图像按钮 鼠标不在按钮上 鼠标在按钮上 本例与上例在制作思路和制作方法上均没有多大区别,只是采用了两张图片来作按钮背景,但产生的效果却非同一般。在制作这种效果的按钮时要注意两点: 1、作按钮背景的图片最好用具透明背景的gif图片,这样可以做出各种各样形状的按钮,将具有很强的个性; 2、背景图片的大小要与按钮的大小一致,否则,由于背景的平铺填充,将使按钮面目全非。 下面是本例在<head>与</head>之间的CSS代码: <style type="text/css"> <!-- .style3 { font-size: 12px; background: url(image/buttonbg1.gif); border: 0px; width: 60px; height: 22px} .style4 { font-size: 12px; font-weight: bold; background: url(image/buttonbg2.gif); border: 0px 0; width: 60px; height: 22px} --> </style> 本例的按钮代码如下: <input type="submit" name="Submit2" value="提 交" onmouseover="this.className='style4'" onmouseout="this.className='style3'" class="style3"> 从按钮代码可看出它与例一的按钮代码完全相同,但本例的CSS代码与例一有较大的区别,这里要注意:url后面的括号中是按钮背景图片的地址,也就是含路径的图片文件名,你在实际制作时要把它改成图片的实际地址。 另外再多讲一句,你若是用图形化网页制作工具(如Dreamweaver),那么凡是用CSS产生的效果,一般在编辑窗中是看不到的, 如本文的按钮效果,只有在预览时才能看到,在编辑窗口中看到的仍是表单默认的那种样子。 用好HTML的帧窗口标记 冯永曜 黄山村夫 帧窗口是一种复杂的页面技术,应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容,可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果。实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口。每个窗口都对应有自己的HTML页面,按照一定的组合方式组合在一起,以实现特殊的效果。 在HTML中用<frameset>(分割窗口标记)来分割窗口,<frameset>在多窗口页面中的地位就相当于<body>在普通单窗口页面中的地位,在页面中用<frameset>……</frameset>标志页面主体部分的起止位置。而且,<frameset>标记决定了怎样划分窗口,以及每个窗口的位置和大小。其基本语法结构如下: <frameset cols=n rows=n frameborder=yes|no border=n bordercolor=#n framespacing=n> cols和rows:是决定页面如何分割的两个参数。分割左右窗口用cols,各帧的左右宽度用占窗口宽度的百分比来表示。比如:cols="30%,40%,*"就表示水平方向分割成三个窗口,各自所占总宽度的百分比依次是30%,40%和30%。其中"*"表示剩余部分,也就是说"*"对应的小窗口宽度为剩余的宽度。分割上下窗口用rows,同样采用百分比的设定方法。 frameborder:是指定各分窗口是(ye)否(no)要加边框;如果加过框的话,则用 border参数指定边框的宽度,bordercolor指定边框的颜色。 framespacing:用于设定各分窗口之间的间隔大小,默认值是0。 用<frameset>标记把窗口分割好后,各窗口的属性是用HTML的<frame>标记来定义的,所以<frameset>标记中必须包含<frame>标记,用以定义各分窗口的属性。其语法如下: <frame align=left|center|right|top|bottomv name=framename src=url noresize scrolling=yes|on|auto frameborder=yes|no bordercolor=#n marginheight=n marginwidth=n> align:设定分窗口的位置是靠左(left)、靠右(right)、居中(center)、靠上(top)还是靠底(bottom)。 name:用于指定分窗口的名称,src则用于指定分窗口所对应的HTML页面地址。 noresize:是对用户来说的,当<frame>标记中包含此参数的时候,用户就不能用鼠标调整修改各分窗口的大小。 scrolling:设定分窗口是否要滚动条。scrolling=no时不要滚动条,scrolling=yes时表示要滚动条,scrolling=auoto时表示根据实际情况自动设置滚动条。 frameborder和bordercolor:是设定分窗口有无边框和边框颜色的。但对象只限于用<frame>标记的分窗口。 marginheight和marginwidth:分别用于设定分窗口的上下边缘和左右边缘的宽度。 用上面的两个标记,就能够实现多窗口页面,下面将举例说明。 1、左小右大两窗口 这种页面一般在左边的窗口放一个网站导航页,右面放网站页面内容。制作方法: 先用<frameset>标记并通过设置其cols参数,沿水平方向分割成两个窗口,左边的窗口占20%,右边的窗口取剩余部分,再用<frame>标记分别定义两个窗口的属性。完成后的分帧页面源代码如下: <html> <head> <title>分帧窗口示例 <body> <p>很抱歉!这是一个分帧页面,但由于你的浏览器不支持,所以不能浏览! </p> <p>Sorry!This page uses frames,but your browser doesn't support them . </body> 从上面的代码看,设计帧窗口页面并没有想象得那么复杂,但以下几点在具体操作时要注意: 1)用标记定义分窗口属性时,要注意其在标记中的顺序,切不要搞乱了; 2)分窗口的名称虽可随意定,但最好是以其所在位置命名比较好; 3)分窗口的scrolling(滚动条)一般取其默认值"auto"比较好; 4)虽然在最终往往不要分窗口的边框,但在设计阶段,还是设置为有边框比较好,这样在编辑时一目了然; 5)上面页面代码中后面那句话一般加上为好,因为有的浏览器版本不支持分帧页面,若没加那名话,用户的浏览器若不支持分帧时,看到的是一片空白,不知是怎么一回事了,有那句话提示一下就明白了。 2、一顶一左一右页面 先看这种分帧页面的源代码: 从上面的代码中可看出,建立复杂分帧页面的方法是由简到繁,如本例中,先用定义其“rows”参数,把窗口分成上下两个窗口,再用标记定义上部窗口,因下部窗口还需再分,所以不用定义其属性,而是用标记设置其cols参数,把它再分成左右两个窗口,因已达目的,所以开始用标记定义左右两个窗口的属性。 只要记住:先粗分,后细分,cols横向分, rows纵向分,无需再分的窗口用定义属性,这些基本原则,制作分帧窗口页面就会轻松自如。 帧窗口之间的交互技巧 冯永曜 黄山村夫 在多窗口的分帧页面中,各分窗口之间的信息交互是经常的事。在导航窗口中点了超级链接,那么如何在另一窗口中打开链接的网页呢?我在这个窗口中按下按钮,能在另一个窗口中写信息吗?窗口那么多,又如何识别窗口呢?请看下面的例子。 一、在导航窗口点击链接,在另一窗口打开网页 现有一分帧页面如上图所示的,A窗口是网站logo及广告,B窗口是导航栏,C是显示页面的窗口。该分帧页面的源代码为: 若要求在B窗口中的链接页面(test.htm)在C窗口中打开,那么B窗口中的链接应这样写:此链接的页面在C窗口中打开,在这里起关键作用的是标记中的target参数,你想在那个窗口中打开网页,就在Target参数中设置那个窗口的名称。关于该参数的其它用法请看《用好超级链接标记—A》一文。 二、在B窗口中按下一个按钮,在C窗口中写一行字 本例的页面格式与上例相同,完成后的效果是这样的:按下B窗口中“在C窗口写字”的按钮后,在C窗口中就出现一行文字“嗨!你好!这是通过B窗口控制而写的字。”。分帧页面的代码及每个窗口中的网页文件与上例相同。 制作方法: 1、 在C窗口网页(mainpage.htm)的源代码与之间插入下面这段Javascript程序: 这段程序的作用是在当前窗口写上一段文字。 2、那么如何在B窗口中调用C窗口中的程序呢?先看B窗口中“在C窗口中写字”这个按钮的源代码: 在这段代码中,关键是代码“parent.mainFrame”,这里引入一个新的概念—窗口结构关系,也就是在多窗口页面中,各窗口之间的关系是以什么原则来确定的。窗口关系的确定原则是:当前窗口分割出来的窗口为当前窗口的“子窗口”(children),那么当前窗口就是分割出来窗口的“父窗口”(parent)。如本例中各窗口的关系如下: 从上表可得知,“浏览器窗口”是“topFrame”和“下部窗口”的“父窗口”,而下部窗口又是“leftFrame”和“mainFrame”两个窗口的“父窗口”。两个窗口之间的联系必须通过它们的父窗口才能进行,所以本例中要调用C窗口中网页上的“htest()”很显然是通过C与B的parent再到mainFrame,然后调用htest()程序。 那么若C窗口中向B窗口中写字的代码就是这样的了: onclick="parent.leftFrame.htest()";那么,在A窗口中要向C窗口中写一段文字的代码你知道怎样写吗?对了,就是这样:onclick="grandchildren.mainFrame.htest()"。 从上面的例子中可看出,在各窗口之间进行交互信息,关键的问题是要搞清楚窗口与窗口之间的关系,其它的操作就比较简单了。宝宝的HTML
WELCOMEWELCOME
SO
GlAD TO KNOW YOU !
HAVE A GOOD TIME !
~~~~蝴蝶谷~~~~
歡迎來到蝴蝶谷.這一個充滿歡樂的地方,希望你也能夠喜歡上這里.我們熱烈歡迎你的到來,用我們的徽笑迎接著你.你所留下的片言只語,對我們來說都是珍貴的.謝謝你的光臨!
由于蝴蝶谷主頁的聊天室速度比較慢,所以蝴蝶谷的主聊天室是在OICQ上的聊天室,自建十四,<蝴蝶寶寶>房間.你可以在那兒和其它蝴蝶谷成員神侃一翻.但要說明的是請遵守<蝴蝶谷的原則>,呵呵.
關于蝴蝶谷家族成員的各種消息,你可以在這個主頁上查看.<蝴蝶之身世>里有比較詳細的蝴蝶成員自我介紹,也有蝴蝶谷成員的OICQ號碼,方便聯絡和交流感情.我們熱情歡迎你的加入,並成為蝴蝶谷的一員.
你的加入對于蝴蝶谷來說不至是一份快樂,更是一份支持.讓這里永遠都充滿著歡笑吧,願在這個天地里,一個美麗輝煌的憧憬,同時在我們明眸里出現.