一、HTML简介
[全写]:HyperText Mark-up Language
[译名]:超文件注标式语言
[简释]:
HTML是在 SGML 定义下的一个描述性语言,或可说 HTML 是 SGML 的一个应用程式,HTML 不是程式语言,它只是标示语言。
[两种标记]:
围堵标记:顾名思义,它以起始标记及终结标记将文字围住,令其达到预期显示效果。
空 标 记:是指标记单独出现,只有起始标记没有终结标记。
二、 说明
任何标记皆由"<"及">"所围住。
标记名与小于号之间不能留有空白字符。
某些标记 要加上参数,某些则不必。
在起始标记之标记名前加上符号"/"便是其终结标记。
标记及其参数均不区分大小写
三、 文件标记
1、文件的基本架构:
<Html>
<head>
<title></title>
</head>
<body>
</body>
</Html>
说明:整份文件处于标记<HTML>与</HTML>之间。文件分两部分:由<HEAD>至</HEAD>称为开头,<BODY>至</BODY>称本文,开头部分用以存载重要资讯,而只有本文部分会被显示。<TITLE>所标示的是文件的标题,上述标记中只有<BODY>具参数设定。
2、<BODY>标记的参数:
text用以设定文字颜色。 可以采用#数字也可采用颜色的名称;
link设定一般文字连结颜色
alink 设定刚按下时文字连结颜色;
vlink 设定连结后的颜色。(被按过)。
background 设定背景墙纸。GIF 或 JPEG 皆可,可以是绝对途径或相对途径。
bgcolor 设定背景颜色。当己设定背景墙纸时会失去作用,除非墙纸有透明
leftmargin 设定整份文件显示画面的左方边沿空间,单位为像素(只适用于IE)
topmargin设定整份文件显示画面的上方边沿空间(只适用于IE)
bgproperties 固定背景墙纸,当卷动文字时墙纸不会跟著卷动(只适用于IE)
例子
<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">
四、 排版标记
1、 注解标记:
<!--注解-->:浏览器会忽略此标记中的文字(可以 是很多行)而不作显示。
[作用]:
为文中不同部份加上说明,方便日后修改。
用作版权声明。
2、<P>标记(段落标记)
[作用]:为字、画、表格等之间留一空白行。
[参数]:align可选值:right, left, center。内定值: align="left"
[例子]:<p align="center">
3、<BR>标记(换行标记)
[作用]:令字、画、表格等显示于下行。
由于浏览器会自动忽略原始码中空白和换行的部分,这令到<BR>成为最常用的标记之一
4、<HR>标记(水平线标记)
[作用]:插入一条水平线。
[参数]:
align 设定线条置放位置,可选择:left;right;center 三种设定值。
Size 设定线条厚度,以像素作单位,内定为 2。
width 设定线条长度,可以是绝对值(以像素作单位)或相对值,内定为 100%。
Color设定线条颜色,内定为黑色, (只适用于IE)
Noshade 设定线条为平面显示,若删去则具阴影或立体,这是内定值。
[例子]:
<HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>
5、<CENTER> 标记(居中标记)
[作用]:令字、画、表格等显示于中间。
这标记原先是 Netscape 所定义,后来其它浏览器都支持它,但你会发现很多标记已有 align="CENTER" 的参数,<CENTER>似乎多余了,事实上它还是常用的标记之一,其简单易用,常用于文字上,对于己加有 align="CENTER" 参数的 <TABLE> 标记亦要不厌其烦 地加上居中标记,因有很多浏览器不支持<TABLE> 标记中的 align="CENTER" 参数。
6、<PRE>标记(预设格式标记)
[作用]:令文件按照原始码的排列方式显示。
这标记允许保留你于原始码中输入的空白及 Return。
7、<DIV>标记(区隔标记)
[作用]:设定字、画、表格等的摆放位置。
<DIV>应用于 Style Sheet(式样表)方面会更显威力,它最终目的是给设计者另一种组织 能力,有 Class ; Style ; title ; ID 等属性,将会于【Style Sheet】一节才作详述
[参数]:align 可选值:center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 8、<NOBR>标记:(不折行标记)
[作用]:令某些文字不因太长而绕行,一显示于同一行或下一行。它对住址、数学算式、一行数字、程式码等尤为有用。
9、<WBR>标记(建议折行标记)
[作用]:预设折行部位。 它没有侵犯到 <BR> 的责任,只是作建议而已,若观者的系统解像度够高的话,那么它是不会折行的。
五、 字体标记
1、 实体标记与逻辑标记 :
必须先明白实体标记与逻辑标记的分别,否则你会迷惑于为何不同 的标记却有相同的效果。[区别]:一是实体标记有固定的显示效果,逻辑标记则依不同浏览器而不同。二是多个实体标记亦可有效标示同一字句,逻辑标记则通常于旧浏览器不能有效显示多重的标示。
实体标记有: <I> <B> <U>
逻辑标记有: <STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT> 若要求真确的效果当然以实体标记为佳。
2、<STRONG>与<B>标记 :
[作用]:两者皆能产生字体加粗的效果,但必须注意的是当文件被设为 gb2312 Encoding 时,两者所标示的中文字不会于Netscape Netvigator 显示粗体效果。
3、<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>标记:
[作用]:这些标记于 Internet Explorer 都产生斜体效果,而只有 </DFN> 于 Netscape Netvigator 失去作 用。这些标记中只有 <ADDRESS> 较为特别,因它包括换行效果所以不必在它前面加上 <BR> 标记。
4、<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>标记:
为方便对照及记认,所以把十个标记于在一起介绍。
[作用]:
<TT> <SAMP> <CODE> <KBD>
可令每字母有相等宽度且每字母之间的距离稍为加 宽。但于NC 不见得如此。
<U> 是加底线的标记,一些特别的浏览器并不支援,因顾虑到与连结混淆。
<STRIKE> 加上删除线的标记。
<BIG> 令字体加大。
<SMALL> 令字体变细。
<SUB> 为下标字, <SUP> 则为上标字,仅剩的数学标记。
5、<H1> <H2> <H3> <H4> <H5> <H6>:
[作用]:这些是标题标记,由 <H1> 至 <H6> 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。
6、<FONT>与<BASEFONT>标记:
[作用]:
这两个标记具参数设定,且两者的参数设定是一样的,都是负责设定文字的大小、字形及颜色,但各有用处,且看以下比较:
<BASEFONT>标记:可以用于文件的开头部分,即 <HEAD> 与 </HEAD> 之间的位置,将 影响全文字句,是一个空标记,用以改变字体显示的内定值。
<FONT>标记:是应用于文件的内文部分,即 <BODY> 与 </BODY> 之间的位置,只影响 所标示的字句,是一个围堵标记。
两标记可同时存在,唯没被 <FONT> 所标示的字句才直接受 <BASEFONT> 所影 响,而 <FONT> 本身亦受 <BASEFONT> 的影响。
[参数]:
face设定文字的字形
size 设定文字的大小。其值可以是绝对或相对, 绝对的意思便是标记自己决定文字的大小,不受<BASEFONT> 的影响, 。<BASEFONT>只有绝对表示法
color设定文字的颜色。
六、清单标记
1、<OL>(顺序清单标记)与<LI>标记(标示清单项目)
[作用]:所谓顺序清单就是在每一项前面加上 1,2,3... 等数目,又称编号清单。
[OL参数]:
type设定数目款式,其值有五种(1,a,A,i,I)内定为 type="1"。 各种格式如下
1, 2, 3, ...
a, b, c, ...
A, B, C, ...
i, ii, iii, ...
I, II, III, ...
start设定开始数目,不论设定了哪一数目款式,其值只能是 1,2,3.. 等整 数,内定为 start="1"。
[LI参数]:type="square"
只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type="disc":
符号 是当 type="disc" 时的列项符号。
符号 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。 value="4"
只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增, 但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。
2、<UL>标记(无序清单标记又称符号清单)
[作用]:所谓无序清单就是在每一项前面加上 、 、 等符号,故又称符号清单。
[参数]:
type 设定符号款式,其值有三种,如下,内定为 type="disc":
符号 是当 type="disc" 时的列项符号。
符号 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。
注意:由于 <UL> 及 <LI> 都有 type 这个参数,两者尽可能选用其一。
3、<MENU>与<DIR>标记 :
这两个标记都不为 W3C 所赞同,希望用者能以 <ul> 及 <ol> 代之。
4、<DL>、<DT>、<DD>
<DL>称为定义清单标记。
<DT> 用以标示定义条目
<DD> 则用以标示定义内容。
所谓定义清单就是一种分二层的项目清单,其不故符号及数目。
三个标记都没有常用的参数。
而 <DT> <DD> 可以独立使用,只是一些旧的浏览器并不支持,如 IE 3.0。常用的如 <DD> 标记可用以制造段落第一个字前面的空白。
七、 表格标记
1、<TABLE> <TR> <TD>标记 :
这三个标记是定义表格的最重要的标记,可以说只学这三个己足够。 <TABLE>是一个容器记,意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用,属容器标记的还有其他。
<TR>用以标示表格列(row)
<TD>用以标示储存格(cell)
[TABLE参数]:
width表格宽度,接受绝对值(如 80)及相对值(如 80%)。
border表格边框厚度,不同浏览器有不同的内定值,故请指明。
cellspacing表格格线厚度。
cellpadding 文字与格线的距离。
align表格的摆放位置(水平),可选值为: left, right, center。
valign表格内字画等的摆放贴位置(垂直),可选值为: top, middle, bottom。
background表格纸,与 bgcolor 不要同用。
bgcolor表格底色,与 background 不要同用。
bordercolor表格边框颜色,NC 与 IE 有不同的效果。
bordercolorligh表格边框向光部分的颜色。(只适用于 IE)
bordercolordark表格边框背光部分的颜色
使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。(只适用于 IE)
cols表格栏位数目,只是让浏览器在下载表格是先画出整个表格而己。
[TR参数]:
例子:<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">
align 该一列内字画等的摆放贴位置(水平),可选值为: left, center, right。
valign 该一列内字画等的摆放贴位置(垂直),可选值为: top, middle, bottom。
bgcolor 该一列底色
bordercolor 该一列边框颜色(只适用于 IE)
bordercolorlight该一列边框向光部分的颜色(只适用于 IE)
bordercolordark 该一列边框背光部分的颜色,使用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该一储存格宽度,接受绝对值(如 80)及相对值(如 80%)。
Height0该一储存格高度。
colspan该一储存格向右打通的栏数。请看例子六
rowspan该一储存格向下打通的列数。请看例子六
align该一储存格内字画等的摆放贴 位置(水平),可选值为: left, center, right。
valign该一储存格内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。
bgcolor该一储存格底色,请看例子四。
bordercolor该一储存格边框颜色,请看例子三。『只适用于 IE』
bordercolorlight该一储存格边框向光部分的颜色,请看例子三。『只适用于 IE』
bordercolordark该一储存格边框背光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』
background该一储存格纸,与 bgcolor 任用其一。
2、<CAPTION>标记 :
[作用]是为表格标示一个标题列,有如在表格上方加上一没格线的打通列。 当然亦可置于下方,通常用以存放该表格的标题。
[参数]:
align该表格标题列相对于表格的摆放贴 位置(水平),可选值为: left, center, right, top, middle, bottom,若 align="bottom" 的话标题列便会出现对表格的下方,不管你 的原始码中把 <caption> 放在 <table> 中的头部或尾部。
valign该表格标题列相对于表格的摆放位置(上下),可选值为: top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的,虽然功能重复了,但如果你要标题列置于下方及向右或向左贴 ,那末两个参数便可一 用了。当只 一个参数时, 请首选 align,因为 valign 是由 HTML 3.0 才开始的参数。
八、表单标记
1、引子
表单的用处很多,于网上无处不见,当然是配合 CGI 使用为佳,所以馈下有意使用或学 习 CGI 的话,表单设计见必需的,这一节介绍的标记不多,但其参数变化很多。一份表单的基本架构是:在 <FORM> 标记 的包围下加上一种或以上的表单输入方式及一个或以上的按键。
2、<FORM> <INPUT>标记(表单标记):
[作用]:以宣告此为表单模式,属于一个容器标记,表示其它表单标记需要在它的包围中才有效,<INPUT>便是其中的一个,用以设定各种输入资料的方法。它是一个空标记。
[Form参数]:
例子: <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
action表单通常是与 CGI 配合使用的,参数 action 便是用以指明该 CGI 程式的位置,这 样此表单所填的资料才能正确传给 CGI 作处理。若馈下没有 CGI 以进行测试,可设定此参数为 ACTION="mailto:
[email protected]" 那样该表单所填的资料将会寄至 此电邮地址。
method传送资料给 CGI 的的方式,可选值为 POST, GET。你只需记住POST容许传送大量资料,但 GET则只接受低于 1K 的资 料,所以你若看过别人的表单原始码的话,你会发现申请表单用的是POST 而搜找器用的是 GET。
[INPUT参数]:
由于其第一个参数 type 己有很多的选择,而不同的选择表示出不同的输入方式,且其它 参数亦因此而异,故以下将独立介绍不同输入方式及其它参数设定。
Type 可选值为 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,能产生一单行文字盒,上限为 255 字元。
name 此一单行文字盒名称,这是最重要的一个,方便 CGI 辨认由表单传来的资料。
Value 此一单行文字盒内定值。。
align 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。
size 此一单行文字盒显示的长度,若采用 Big5 编码的中文网页便要小心,同 size 的文字盒 NC 会显示得比 IE 长。
maxlength 此一单行文字盒可输入字元的上限。
输入方式二: Radio (单一选择)
例子:<input type="Radio" name="gender" value="female" align="MIDDLE" checked>
type 输入方式为 Radio,能产生一单一选择,以供点选。
Name 此一 Radio 名称,方便 CGI 辨认由表单传来的资料。
Value 内定值。每一个 radio 必须及仅有一个 value,通常有同时采用两个或以上同 name 不同 value 的 Radio 输入方式,可让使用使任选其一。
Align 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。
checked 设该 Radio 为内定被选。同 name 的各个Radio中只能有一个使用,或全不使用这参数
输入方式三: Checkbox (确认盒)
例子:<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked>
type 输入方式为 Checkbox,能产生一确认盒,以供剔选。
name 此一 Checkbox 名称,方便 CGI 辨认由表单传来的资料。
Value 内定值。每一个 Checkbox 必须及仅有一个 value,当被剔选时这值便会传及 CGI。
Align 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。
checked 设该 Checkbox 为内定被选。每个 Checkbox 都是独立的,所以每一个都可使用这 参数,不像 Radio。
输入方式四: Password (密码输方盒)
例子:<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9">
Password 的其他参数和 Text 是完全相同的,请参考 Text 的介绍。
两者作用不同,Password 所输入的字元全以 * 号表示。
输入方式五: Submit (传送键)及 Reset (清除键)
这是表单上重要的两个按键,两者所附带的参数相同,但用处不大。
例子:
<input type="Submit" name="other_funtion" value="确定" align="MIDDLE">
<input type="Reset" value="清除" align="MIDDLE">
type 设定输入方式为 Submit 或 Reset。
Name Submit的功能随 name 的不同而不同,须和 CGI 配合。若你只需要普通的传送键,则是其内定,不必用此参数。
value这个值不是输给 CGI 的,而是显示在按键上,可以不用,传送键的内定值为 Submit Query,清除键的内定值为 Reset。
Align 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。
输入方式六: Image (图片按键)
这通常用以取代 Submit 及 Reset 两个按键,因为由程式产生的按键并不漂亮,这 Image 参数便容许你采用自已制造的按键。
例子:<input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif">
type 输入方式为 Image。
Name 所要代表的按键,可以是 submit, reset, 或其它。
Align 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。
Src 按键图片来源,若此图片文件不与该 html 文件在同一目录下,请加上相对或绝对途 径。
输入方式七: File
例如:<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">
type 输入方式为File。通常用以传输文件。
Name 这文件传输的名称,用以识别之用。
Align 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。
Size 所显示文字盒的长度。
Maxlength 可输入字元的上限。
Accept 所接受的文件类别,有二十六种选择,但可不设定。
输入方式八: Hidden
例如:<input type="Hidden" name="ID" value="6618">
type 输入方式为隐藏或内定。它不会显示任何输入介面,而是一个内定值随表单一起传给 CGI,列如由 CGI 产生的会员号码,或传入可更改的参数以调整 CGI 而避免 修改 CGI 程式码。
Name 这文件传输的名称,用以识别之用。
Value 内定值。
输入方式九: Button
例如:<input type="Button" name="useless" value="Back">
type 输入方式为一般按键。常配合 Java Script 作为其启动按键。
name 这文件传输的名称,用处不大。
value 按键显示名称。
3、<SELECT> <OPTION>标记 :
[作用]:<SELECT>是卷动选单标记,每一选项皆由 <OPTION> 所标示,把它当作围堵标记或空标 记使用都可以。
[SELECT参数]:
例子: <select name="where" size="6" multiple>
name 这卷动选单的名称,作识别之用,将会传及 CGI。
Size 这卷动选单的列数,即其高度。
multiple令这卷动选单容许多重选择。
[OPTION参数]:
例子<option value="tw" selected>
value 这选项的值,将会传及 CGI。请自行修改,但不同选项必须有不同的值。
selected 设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。
4、<TEXTAREA>标记(表单文字区块标记):
[作用]:常用于 bug report, feedback 等需要填写大量资料的用 途。
[TEXTAREA参数]:
例子:<textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">
name 这文字区块的名称,作识别之用,将会传及 CGI。
cols 这文字区块的宽度,请自行修改。
rows 这文字区块的列数,即其高度,请自行修改。
wrap设定其折行问题,可选值为:off, physical, virtual。off 表示不使用此属性,physical 时则会强迫刘览器在送资料到 CGI(Web 伺服器端)必须将实№文字中的换行一 并送出,设为 virtual 时则送出连续成串的字(除非使用者按了键盘的 RETURN / ENTER)。
九、图形标记
1、<IMG>标记(图形标记):
[作用]:插入图片于网页中,至于其它用处如配合影片文件等的播放及影像地图(Image Map 或称一图多连结)。
[参数]:
例子<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图片来源,接受 .gif, .jpg 及 .png 格式,前两者通行己久,后者由 96 年开始发展, 于未来取代前两者。若图片文件与该html文件同处一目录则只写上文件案名称,否则必须加上正确的途径,相对及绝对皆可。
Width与height设定图片大小,此宽度、及高度一般采用pixels作单位。通常只设为图片的真实大小以免失真,若要改变图片大小最好事先使用图像编辑工具。
Hspace与vspace设定图片边沿空白,以免文字或其它图片过于贴近。hspace 是设定图片左右的空 间,vspace 则是设定图片上下的空间,高度采用 pixels 作单位。
border图片边框厚度。
align调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底端、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom,
texttop表示图片和文字依顶线对 ,
baseline表示图片对到目前文字行底线值,
absmiddle表示图片对到目前文字行绝对中央,
absbottom表示图片对到目前文字行绝对底部,(绝对底部意指它考虑到比方 y 、g、q 等字的下缘)。
alt这是用以描述该图形的文字,若用者使用文字浏览器,由于不支持图片,这些文 字更会代替图片而被显示。若于支持图片显示的浏览器,当鼠标移至图片上该些 文字亦会显示。
lowsrc设定先显示低解像图片,若所加入的是一张很大的图片,下载 时很长,这张低 解像图片会先被显示以免浏览失却兴趣,通当是原图片灰阶版本。
十、 链接标记
1、<A>标记(连结标记)
由 <A>与</A> 所围的文字、图片等等可以成为一个连结。
[参数]
例子<a href="index.html" name="hello" target="_top">
href这参数不能与另一参数name同时使用,使用这参数才能造成可按的连结。
当作为一外部连结时:href 所设定的是该连结所要连到的文件名称,若 该文件与此 html 档不是同在一目录请加上适当的路径,相对绝对皆可。
当作为一内部连结时: href 所设定的是该连结所要连到的同文件内参考点或指定文件之参考点,且不要包围任何字画只加上结束标示</a>便可以,例如<a href="#there"></a>其中 there便是参考点,并於其前加上符号#以作识别,参考点由下一个参数name事先於文件中埋下<a name="test"></a> 这参数是为文件埋下参考点,作为被连结,不会被显示。所以说造成一个内部连 结 要使用两次 <A> 连结标记。一个使用参数 name 事先於文件中埋下一参考点,另一个使用参数 href 连到这个参考点。
target 设定连结被按後之结果所要显示的视窗。可选值为: _blank, _parent, _self, _top, 框 窗名称。
target 这只运用於框架中,若被设定则连结结果将显示於该“框窗名称”之框窗 中,框窗名称是事先由框架标记所命名。
target="_blank" 或 target="new" 将连结的画面内容,开在新的浏览视窗中。
target="_parent" 将连结的画面内容,当成文件的上一个画面。
target="_self" 将连结的画面内容,显示在目前的视窗中。(内定值)
target="_top" 将框架中连结的画面内容,显示在没有框架的视窗中。(即除去了框架)
2、<BASE>标记(连结基准标记) :
[作用]:改变文件中所有连结标记的参数内定值。它只能应用於文件的开头部分,即标记 <HEAD> 与 </HEAD> 之间。
[参数]:
例如 <base href="http://www.microsoft.com/" target="_top">
href设定该页网页中所有 HTTP文件及图形(包括相对路径连结及 <IMG> 图形标记 等)的内定路径,其他如 ftp:// 及 gopher:// 等则不受影响。这参数只可填入一个相对或绝对的路径,不必填入档案名称。一般相对路径连结及 <IMG> 图形标记等是 内定以该页网页所在的目录作为起点,若依这例子,该文件中所有连结将会以 http://www.microsoft.com/ 作为起点,若其中有连结如 <a href="index.html">Back to Main Page</a> ,那末它不会连到自已目录下的 index.html,它将会连到 Microsoft 的首页,这是因为相对路径己给 <BASE> 转成绝对的了。
target 设定该页网页中所有连结被按後之结果所要显示的视窗,免得分别为所有连结加 上 target 参数,常应用於框架中。其设定与 <A> 连结标记中 target 参数相同。
十一、排版标记
1、框架概念 :
所谓框架便是网页画面分成几个框窗,同时取得多个 URL。只要 <FRAMESET><FRAME> 即可,而所有框架标记要放在一个总起的html档,这个档案只记录了该框架如何划分,不会显示任何资料,所以不必放入<BODY>标记,浏览这框架必须读取这档案而不是其它框窗的档案。<FRAMESET>是用以划分框窗,每一框窗由一个<FRAME>标记所标示,<FRAME>必须在<FRAMESET>范围中使用。<FRAME> 标记所标示的框窗永远是按由上而下、由左至右的次序。
2、<FRAMESET><FRAME>标记 :
<FRAMESET>称框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割。
<FRAME>则只是设定某一个框窗内的参数属性。
[FRAMESET参数]:
例子:<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000">
COLS垂直切割画面(如分左右两个画面),接受整数值、百分数, * 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以 切成三个视窗,第一个视窗是 30 pixels 的宽度,为一绝对分割,第二个视窗是当 分配完第一及第三个视窗後剩下的空间,第三个视窗则占整个画面的 50% 宽度 为 一相对分割。您可自己调整数字。
ROWS就是横向切割,将画面上下分开,数值设定同上。唯 COLS 与 ROWS 两参数尽量 不要同在一个 <FRAMESET> 标记中,因 Netacape 偶然不能显示这类形的框架,尽 采用多重分割。
frameborder设定框架的边框,其值只有 0 和 1 , 0表示不要边框, 1表示要显示边框。(避 免使用 yes 或 no )
border 设定框架的边框厚度,以 pixels 为单位。
bordercolor设定框架的边框颜色。
framespacing表示框架与框架间的保留空白的距离。
[FRAME参数]:
例子:<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">
SRC设定此框窗中要显示的网页档案名称,每个框窗一定要对应著一个网页档案。你可 使用绝对路径或相对路径,有关此两者详见於【连结进阶】。
NAME设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。
frameborder设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避 免使用 yes 或 no )
framespacing表示框架与框架间的保留空白的距离。
bordercolor设定框架的边框颜色。颜色值请参考【HTML 剖析】。
scrolling设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示, AUTO是视情况显示。
noresize设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随 意地拉动框架,改变其大小。
marginhight表示框架高度部份边缘所保留的空间。
marginwidth表示框架宽度部份边缘所保留的空间。
3、<NOFRAMES> :
当别人使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免 这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看 到 <NOFRAMES> 与 </NOFRAMES> 之间的内容,而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自动切换至没有框架的版本 亦可。
应用方法: 在<frameset> 标记范围加入 </NOFRAMES> 标记。 若浏览器支援框架,那堋它不会理会 <noframes> 中的东西,但若浏览器不支援框架,由 於不认识所有框架标记,不明的标记会被略过,标记包围的东西便被解读出来,所以放在 <noframes>范围内的文字会被显示。
4、<IFRAME>标记 :这标记只适用於IE。 它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是 一个围堵标记,但围著的字句只有在浏览器不支援 iframe 标记时才会显示,如<noframes> 一样,可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 Java Script 会较好,若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。
[参数]:
例子:<iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">
src欲显示於此框窗的文件来源除档案名称,必要加上相对或绝对路径。
name此框窗名称,这是连结标记的 target 参数所 要的,
align可选值为 left, right, top, middle, bottom,作用不大
width 与height 框窗的宽及长,以 pixels 为单位。
Marginwidth与 marginheight 该插入的文件与框边所保留的空间。
frameborder使用 1 表示显示边框, 0 则不显示。(可以是 yes 或 no)
scrolling 使用 Yes 表示容许卷动(内定), No 则不容许卷动。
十二、多媒体标记
1、<BGSOUND>:
用以插入背景音乐,但只适用於 IE。
[参数]
<BGSOUND src="your.mid" autostart=true loop=infinite>
src 设定 midi 档案及路径,可以是相对或绝对。
autostart是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
loop是否自动反覆播放。LOOP=2 表示重复两次,Infinite 表示重复多次。
2、<EMBED>:
用以插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU 等等,Netscape 及
版的 IE 都支援。
[参数]:
<EMBED src="your.mid" autostart="true" loop="true" hidden="true">
src设定 midi 档案及路径,可以是相对或绝对。
autostart是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
loop是否自动反覆播放。LOOP=2 表示重复两次,true 是, false 否。
HIDDEN是否完全隐藏控制画面,true 为是,no 为否 (内定)。
STARTTIME设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。 VOLUME设定量的大小,数值是0到100之间。内定则为使用者系统本身之设定。
WIDTH="整数" 和 HIGH="整数" 设定控制画面的宽度和高度。(若 HIDDEN="no")
ALIGN设定控制画面和旁边文字的对 方式,其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
CONTROLS="smallconsole"
设定控制画面的外貌。预设值是 console。
console 一般正常的面板
smallconsole 较小的面板
playbutton 只显示播放按钮
pausecutton 只显示暂停按钮
stopbutton 只显示停止按钮
volumelever 只显示音量调整钮
十三、其他标记
1、<MARQUEE>:
只适用於 IE ,译为「跑马灯」如Status Bar 的那种,意指走动或卷动的 文字。
[参数]:
<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 一般卷动,是内定值。
SLIDE 如幻灯片,一格格的,效果是文字一接触左边便全部消失。
ALTERNATE 文字向左右两边撞来撞去。 direction="LEFT"
设定文字的卷动方向,LEFT 表示向左,是内定值,RIGHT 表示向右。
bgcolor设定文字卷动范围的背景颜色。
Height与width 设定文字卷动范围,可采用相对或绝对,如 30% 或 30 等,单位为像素。
Hspace与vspace 设定文字的水平及垂直空白位置。
loop设定文字卷动次数,其值可以是正整数或 INFINITE,INFINITE 是内定值,表示无 限次。
scrollamount每「格」文字之间的间隔,单位是像素。
scrolldelay文字卷动的停顿时间,单位是毫秒。
2、<BLINK> :
<BLINK> 是令文字闪烁,只适用於 NC,用法直接,没有参数.
3、<ISINDEX> :
让某些 Web Server 找寻网页内的关键字,假如你的 Web Server 提供这样的找寻功能,使用者的浏览器也支援这些找寻功能,那么,载入网页时就会看到一个简单的找寻方块。其用法直接,没有参数,本来是要放於 <HEAD> 标记内的,但把它放在 <BODY> 标记内亦不见有问题,请记住,3W以反对此标记。
4、<META>标记 :
<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秒。
5、<LINK> :
<LINK> 用来将目前文件与其它 URL 作连结,但不会有连结按钮,用於 <HEAD> 标记间, 格式如下:
<link href="URL" rel="relationship">
<link href="URL" rev="relationship">