Professional Documents
Culture Documents
HTML
HTML
Html 简介 .........................................................................................................................................2
HTML 标记一览 ............................................................................................................................3
文件标记 ..........................................................................................................................................7
排版标记 ..........................................................................................................................................9
字体标记.........................................................................................................................................14
清单标记.........................................................................................................................................18
表格标记.........................................................................................................................................22
表单标记 ........................................................................................................................................29
图形标记 ........................................................................................................................................41
链接标记 ........................................................................................................................................44
排版标记 ........................................................................................................................................47
多媒体标记....................................................................................................................................53
多媒体标记....................................................................................................................................55
其他标记 ........................................................................................................................................56
特殊字符 ........................................................................................................................................60
调色原理 ........................................................................................................................................62
Html 简介
译名: 超文件注标式语言(译名之一)
简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标记(tag)使文
件达到预期的显示效果。
文字及标记组合而成,于 编辑方面,任何文字编辑器都可以,只要能将文件另
■ 阅读须知:
的 HTML 分类,这可令你更易选择有兴趣的标记,其中只有【文件标记】是必读的,
页 编辑工具都可以变成一把利器。
■ 标记写法:
任何标记皆由"<"及">"所围住,如 <P>
标记名与小于号之间不能留有空白字符。
参数只可加于起始标记中。
在起始标记之标记名前加上符号"/"便是其终结标记,如 </font>
标记字母大小写皆可。
■ 围堵标记与空标记:
标记按型态分为围堵标记与空标记
1. 围堵标记
顾名思义,它以起始标记及终结标记将文字围住,令其达到预期显示效果。
其中 <b></b> 便称为围堵标记。
粗体,两者失其一都会发生错误显示。
2. 空标记
是指标记单独出现,只有起始标记没有终结标记。
例如 HTML Source:
显示成:
其中换行标记<br>便属空标记。
它的作用便是将标记后所有东西显示于下一行,可见终结标记于它是没意义的,
HTML 标记一览
标记 类型 译名或意义 作 用 备注
文件标记
<HEAD> ● 开头 提供文件整体资讯
<TITLE> ● 标题 定义文件标题,将显示于浏览顶端
<BODY> ● 本文 设计文件格式及内文所在
排版标记
<CENTER> ● 居中 令字、画、表格等显示于中间 反对
字体标记
<SAMP> ● 范例 字体稍为加宽如<TT>
<VAR> ● 变数 斜体效果
清单标记
表格标记
表单标记
<OPTION> ○ 选项 每一标记标示一个选项
图形标记
连结标记
框架标记
影像地图
多媒体
其他标记
<MARQUEE> ● 走动文字 令文字左右走动 IE
StyleSheet
注:
● 表示该标记属围堵标记,即需要关闭标记如 </标记>。
○ 表示该标记属空标记,即不需要关闭标记。
特 性,不用担心新浏览器不支援旧标记。
文件标记
■ HTML 基本架构:
特点解说:
整份文件处于标记<HTML>与</HTML>之间。
件。
文件分两部分,由<HEAD>至</HEAD>称为开头,<BODY>至</BODY>称本
文。
基本上两者各有适用的标记,如<TITLE>只可出现于开头部分。
开头部分用以存载重要资讯,而只有本文部分会被显示。
所以大部分标记会运用于本文部分。
<TITLE>所标示的是文件的标题。
的标题 是需要的。
上述标记中只有<BODY>具参数设定。
■ <BODY> 之参数设定:
例子:
bgproperties="fixed">
text="#000000"
用 以 设 定 文 字 颜 色 。 #000000 代 表 黑 色 , 亦 可 以 采 用 颜 色 的 名 称 , 即
text="black" 。各种颜色的值及名称可参考【调色原理】一节。
link="#0000FF"
设定一般文字连结颜色。
alink="#FF0000"
设定刚按下时文字连结颜色。
vlink="#0000FF"
设定连结后的颜色。(被按过)。
background="bg1.gif"
bgcolor="#FFFFFF"
设定背景颜色。当己设定背景墙纸时会失去作用,除非墙纸有透明部分。
leftmargin=2
topmargin=2
bgproperties="fixed"
介绍。
排版标记
<WBR> ;
■<!--注解-->: ▲Top
像很多电脑语言一样,HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字(可
以 是很多行)而不作显示,一般使用目的:
为文中不同部份加上说明,方便日后修改。
这对较复杂或非私人网页尤其重要,它不单是提醒自已,亦提醒你的同事这部
分 做什么、那部分做什么。
例子:
<!--由这处开始是产品订购表格-->
用作版权声明。
假如你不希望别人使用或复制你的网页,可加上警告字眼。
例子:
■ <P> : ▲Top
<P>称为段落标记。作用:为字、画、表格等之间留一空白行。
尾。
align="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
果
正确例子:
■ <HR> : ▲Top
<HR>称为水平线。作用:插入一条水平线。
<HR> 之参数修改:
align="LEFT"
设定线条置放位置,可选择:left;right;center 三种设定值。
size="2"
设定线条厚度,以像素作单位,内定为 2。
width="70%"
设定线条长度,可以是绝对值(以像素作单位)或相对值,内定为 100%。
color="#0000FF" 『只适用于 IE』
即 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>称为居中标记。作用:令字、画、表格等显示于中间。
有 align="CENTER" 的参数,<CENTER>似乎多馀了,事实上它还是常用的标记之一,
要 不 厌 其 烦 地 加 上 居 中 标 记 , 因 有 狻 多 浏 览 器 不 支 持 <TABLE> 标 记 中 的
align="CENTER" 参数。
例子:
■ <PRE> : ▲Top
<PRE>称为预设格式标记。作用:令文件按照原始码的排列方式显示。
这标记允许保留你于原始码中输入的空白及 Return。细看以下例子你便可体会到此
标记的 威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。
能以<PRE>标记产生对 效果,或产生多于一行的空白才算上乘!
例子:
<pre> CreationofWebpageLogAnalysisI
原
始
ComposerLearning 459407 480522547 586673
码
HTML Advanced 200268296358385453506</pre>
显 CreationofWebpageLogAnalysisI
示
结 ComposerLearning 459407 480522547 586673
果 HTML Advanced 200268296358385453506
■ <DIV> : ▲Top
<DIV>称为区隔标记。作用:设定字、画、表格等的摆放位置。
节才作详述,这处只介绍 一个属性设定。
align="center"
开始 的标准,后者是通用己久的标示法。
例子:
■ <NOBR> : ▲Top
<NOBR>称为不折行标记。作用:令某些文字不因太长而绕行,一 显示于同一行或
下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。
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>称为建议折行标记。作用:预设折行部位。
么它是 不会折行的。
例子:(若不加<WBR>标记,整个网址会显示于下一行。)
字体标记
<STRONG> <B>
<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
<FONT> <BASEFONT>
■实体标记与逻辑标记 : ▲Top
这一节【字体标记】你必须先明白实体标记与逻辑标记的分别,否则你会迷惑于为何
不同 的标记却有相同的效果。两者分别有以下两处:
1. 实体标记有固定的显示效果,逻辑标记则依不同浏览器而不同。
效果, 它可能是加底线、粗体或反白等,所以这一节是以它们在 IE 和 NC 中
的效果作介 绍。
2. 多个实体标记亦可有效标示同一字句,逻辑标记则通常于旧浏览器不能有效显
示多 重的标示。
去作用。
实体标记有:
逻辑标记有:
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>
若要求真确的效果当然以实体标记为佳。
例子: (第一行是没有任何字体标记的,作对照之用)
例子:
■<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB> ▲Top
为方便对照及记认,所以把十个标记于在一起介绍。
<U> 是加底线的标记,一些特别的浏览器并不支援,因顾虑到与连结混淆。
<STRIKE> 加上删除线的标记。
<BIG> 令字体加大。
<SMALL> 令字体变细。
例子: (第一行是没有任何字体标记的,作对照之用)
所标示 的字句将独占一行且上下留一空白行。
例子:
Header Level 1
Header Level 2
显
示
结
Header Level 3
果
Header Level 4
Header Level 5
Header Level 6
这一节只有这两个标记具参数设定,且两者的参数设定是一样的,都是负责设定文字
的大 小、字形及颜色,但各有用处,且看以下比较:
位置,将 影响全文字句,是一个空标记,用以改变字体显示的内定值。
只影响 所标示的字句,是一个围堵标记。
Webpage</font>
face="Arial"
会显示此标记 所指明的任何中文字形。
size="+2"
设定文字的大小。其值可以是绝对或相对,
一样的。
color="#008000"
设定文字的颜色。#008000 表示绿色
例子:
清单标记
<OL> <LI>
<UL>
<MENU> <DIR>
<OL>称为顺序清单标记。<LI>则用以标示清单项目。
<OL> 的参数设定(常用):
只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type="disc":
符号 是当 type="disc" 时的列项符号。
符号 是当 type="square" 时的列项符号。
value="4"
只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,
例子:
HTML Source Code (原始码) 浏览器显示结果
■ <UL> : ▲Top
<UL>称为无序清单标记。
所谓无序清单就是在每一项前面加上 、 、 等符号,故又称符号清单。
<UL> 的参数设定(常用):
type="square"
设定符号款式,其值有三种,如下,内定为 type="disc":
符号 是当 type="disc" 时的列项符号。
符号 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。
例子:
My Homepages: My Homepages:
<ul>
<li>Penpals Garden Penpals Garden
<li>ICQ Garden ICQ Garden
<li>Software City Software City
<li>Creation of Webpage Creation of Webpage
</ul>
与 <ul> 完全一 样。
例子:
My Homepages:
<dir> My Homepages:
<li>Penpals Garden Penpals Garden
<li>ICQ Garden ICQ Garden
<li>Software City Software City
<li>Creation of Webpage Creation of Webpage
</dir>
所谓定义清单就是一种分二层的项目清单,其不故符号及数目。
例子:
原 <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
表格标记
<TH>
<CAPTION>
这三个标记是定义表格的最重要的标记,可以说只学这三个己足够。
<TABLE>是一个容器标记,意思是说它用以声明这是表格而且其他表格标记只能在他
的 范围内才适用,属容器标记的还有其他。
<TR>用以标示表格列(row)
<TD>用以标示储存格(cell)
<TABLE> 的参数设定(常用):
cols="2">
width="400"
border="1"
表格边框厚度,不同浏览器有不同的内定值,故请指明。
cellspacing="2"
表格格线厚度,请看例子三,那是加厚到 5 的格线。
cellpadding="2"
文字与格线的距离,请看例子四,那是加至 10 的 padding。
align="CENTER"
,可选值为: left, right, center,请看例子五或六,那
表格的摆放位置(水平)
表格 是放于中间的,为怕一些浏览器不支援,故特加上居中标记<CENTER>,
只是多 层保证而己,当然只用<CENTER>亦可。
valign="TOP".
background="myweb.gif"
bgcolor="#0000FF"
bordercolor="#FF00FF"
表格边框颜色,NC 与 IE 有不同的效果,请看例子六。
bordercolorlight="#00FF00"
表格边框向光部分的颜色,请看例子二。『只适用于 IE』
bordercolordark="#00FFFF"
表 格 边 框 背 光 部 分 的 颜 色 , 请 看 例 子 二 , 使 用 bordercolorlight 或
cols="2"
表格栏位数目,只是让浏览器在下载表格是先画出整个表格而己。
<TR> 的参数设定(常用):
bordercolor="#FF00FF" bordercolorlight="#808080"
bordercolordark="#FF0000">
align="RIGHT"
valign="MIDDLE"
bgcolor="#0000FF"
该一列底色,请看例子五。
bordercolor="#FF00FF"
该一列边框颜色,请看例子三。『只适用于 IE』
bordercolorlight="#808080"
该一列边框向光部分的颜色,请看例子三。『只适用于 IE』
bordercolordark="#FF0000"
该 一 列 边 框 背 光 部 分 的 颜 色 , 请 看 例 子 三 , 使 用 bordercolorlight 或
<TD> 的参数设定(常用):
bordercolorlight="#FF0000" bordercolordark="#00FF00"
background="myweb.gif">
width="48%"
height="400"
该一储存格高度。
colspan="5"
该一储存格向右打通的栏数。请看例子六
rowspan="4"
该一储存格向下打通的列数。请看例子六
align="RIGHT"
valign="BOTTOM"
bgcolor="#FF00FF"
该一储存格底色,请看例子四。
bordercolor="#808080"
该一储存格边框颜色,请看例子三。『只适用于 IE』
bordercolorlight="#FF0000"
该一储存格边框向光部分的颜色,请看例子三。『只适用于 IE』
bordercolordark="#00FF00"
该一储存格边框背光部分的颜色,请看例子三,使用 bordercolorlight 或
background="myweb.gif"
例子一:
显
示
结 只有一个储存格(cell)的表格
果
例子二:
例子三:
显
示
结 第一列第一栏 第一列第二栏
果 第二列第一栏 第二列第二栏
例子四:
显
示
第一列第一栏 第一列第二栏
结
果
第二列第一栏 第二列第二栏
例子五:
<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%
■ <CAPTION> : ▲Top
<CAPTION> 的作用是为表格标示一个标题列,有如在表格上方加上一没格线的打通
列。 当然亦可置于下方,通常用以存放该表格的标题。
<CAPTION> 的参数设定(常用):
align="TOP"
例子:
<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>称为表单标记,用以宣告此为表单模式,属于一个容器标记,表示其它表单
标记需要在它的包围中才有效,<INPUT>便是其中的一个,用以设定各种输入资料的
方法。它 是一个空标记。
<FORM> 的参数设定(常用):
例 如 : <form action="http://your.isp.com/cgi-local/example.cgi"
method="POST">
action="http://your.isp.com/cgi-local/example.cgi"
所填的资料将会寄至 此电邮地址(红色部分)。
method="POST"
<INPUT> 的参数设定(常用):
其它 参数亦因此而异,故以下将独立介绍不同输入方式及其它参数设定。
type="Text"
maxlength="255">
type="Text"
name="age"
value="20"
此一单行文字盒内定值。若不填写则文字盒是空白的,等待访客亲自键入,若
align="MIDDLE"
size="2"
maxlength="255"
此一单行文字盒可输入字元的上限,为方便编排资料或避免错输入等,宜设定
例子:
显
果
checked>
type="Radio"
输入方式为 Radio,能产生一单一选择,以供点选。
name="gender"
value="female"
align="MIDDLE"
checked
使用这 参数。
例子:
显 请选性别: 女性 男性
示
结 你喜欢吗: 喜欢 不喜欢 不肯定
果
输入方式三: Checkbox (确认盒)
type="Checkbox"
输入方式为 Checkbox,能产生一确认盒,以供剔选。
name="idol"
value="Leon"
CGI,例如所传字串 idol=Leon 。
align="RIGHT"
checked
用这 参数,不像 Radio。
例子:
显 你喜欢以下那些明星:
示
黎明 酒井法子 郑秀文 BonJovi
结
果
maxlength="9">
例子:
显 请输入姓名:
示
结 请输入密码:
果
这是表单上重要的两个按键,两者所附带的参数相同,但用处不大。
type="Submit"
name="other_funtion"
传送 键,则是其内定,不必用此参数。
value="确定"
align="MIDDLE"
可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。
例子:
显
提交查询内容 重置
Image 参 数便容许你采用自已制造的按键。
type="Image"
输入方式为 Image。
name="submit"
align="BOTTOM"
src="ex_icon.gif"
绝对途 径。
例子:
码 </form>
显
示
结
果
输入方式七: File
maxlength="100" accept="text/html">
input type="File"
输入方式为 Image。通常用以传输文件。
name="upload"
这文件传输的名称,用以识别之用。
align="BOTTOM"
size="20"
所显示文字盒的长度。
maxlength="100"
可输入字元的上限。
accept="text/html"
所接受的文件类别,有二十六种选择,但可不设定。
例子:
显
示
结
果
输入方式八: Hidden
type="Hidden"
输入方式为隐藏或内定。它不会显示任何输入介面,而是一个内定值随表单一
name="ID"
这文件传输的名称,用以识别之用。
value="6618"
显
示 Submit
结
果
输入方式九: Button
type="Button"
name="useless"
这文件传输的名称,用处不大。
value="Back"
按键显示名称。
原 <form>
始 <input type="Button" value="回前一页" onclick="history.go( -1 );return true;">
码 </form>
显
示
结
果
或空标 记使用都可以。
<SELECT> 的参数设定(常用):
name="where"
这卷动选单的名称,作识别之用,将会传及 CGI。
size="6"
这卷动选单的列数,即其高度,请自行修改。若使用此参数则不会有 Pop Up 效
果。
multiple
令这卷动选单容许多重选择。
<OPTION> 的参数设定(常用):
value="tw"
这选项的值,将会传及 CGI。请自行修改,但不同选项必须有不同的值。
selected
设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。
■ <TEXTAREA> : ▲Top
料的用 途。
<TEXTAREA> 的参数设定(常用):
name="comments"
这文字区块的名称,作识别之用,将会传及 CGI。
cols="40"
这文字区块的宽度,请自行修改。
rows="4"
这文字区块的列数,即其高度,请自行修改。
wrap="VIRTUAL"
例子:
Give comments:
显 这是预设的字句,通常留空的,随你喜欢。
示
结
果
图形标记
<IMG>
■ <IMG> :
<IMG> 的一般参数设定:
src="logo.gif"
确的途径,相对及绝对皆可。
width=100 height=100
真,若 要改变图片大小最好事先使用图像编辑工具。
hspace=5 vspace=5
border=2
图片边框厚度。
align="top"
调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底端、 左右等,可选
值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle,
absbottom,
texttop 表示图片和文字依顶线对 ,
的下缘)
。
这是用以描述该图形的文字,若用者使用文字浏览器,由于不支持图片,这些文 字更会代替图
片而被显示。若于支持图片显示的浏览器,当鼠标移至图片上该些 文字亦会显示。
lowsrc="pre_logo.gif"
被显示以免浏览失却兴趣,通当是原图片灰阶版本。
例子一:
显
示
结
果
普通插入
例子二:
显
示
结
果
设定上下左右空白位置
例子三:
显
示
结
果
设定字画中间对 ,边框厚度为 4。
例子四:
设定图片靠右。
显
示
结
果
例子五:
原 <img src="girl.gif" width=200 height=220 alt="I'm not beautiful right now" border=0> 放大了的图片
始
码
显
示
结
果
放大了的图片
链接标记
<A>
<BASE>
■ <A> : ▲Top
个连结。
<A> 的一般参数设定:
href="index.html"
按的连结。
适当的路径,相对绝对皆可。
href="http://www.school.net.hk/~chris55/index.html#there"><
name="hello"
这参数是为文件埋下参考点,作为被连结,不会被显示。所以说造
个参考点。
target="_top"
设定连结被按後之结果所要显示的视窗。可选值为: _blank,
o target="框窗名称"
这只运用於框架中,若被设定则连结结果将显示於该“框窗
名称”之框窗 中,框窗名称是事先由框架标记所命名。
o target="_blank" 或 target="new"
将连结的画面内容,开在新的浏览视窗中。
o target="_parent"
将连结的画面内容,当成文件的上一个画面。
o target="_self"
将连结的画面内容,显示在目前的视窗中。(内定值)
o target="_top"
将框架中连结的画面内容,显示在没有框架的视窗中。
(即
除去了框架)
例子一:(外部连结)
<a href="../promote/engines.html">四百五十个寻找引擎</a>
<p><a href="http://www.hkseek.com/icq">
<img src="link_image.gif" width=99 height=44 border=1 alt="ICQ Garden"></a>
原
<p><a href="http://www.hkseek.com/icq">
始
<img src="link_image.gif" width=99 height=44 border=0 alt="ICQ Garden"></a>
码
四百五十个寻找引擎
显
示
结
果
连结。
<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> 是一个连结基准标记,用以改变文件中所有连结标记的参数内定
间。
<BASE> 的一般参数设定:
href="http://www.microsoft.com/"
则不受影响。这参数只可填入一个相 对或绝对的路径,不必填入
页网页所在的目录作为起点,若依这例子,该文件中所有连结将会
以 http://www.microsoft.com/ 作 为 起 点 , 若 其 中 有 连 结 如 <a
target="_top"
设定该页网页中所有连结被按後之结果所要显示的视窗,免得分别
例子容後再写,你可亲自尝试或到一些以框架制作的网页去体验一下。
排版标记
<FRAMESET> <FRAME>
<NOFRAMES>
<IFRAME>
■ 框架概念 :
下例:
<frameset cols="50%,*">
</frameset>
下、由左至右的次序。
<FRAME> 则只是设定某一个框窗内的参数属性。
<FRAMESET> 参数设定:
bordercolor="#008000">
COLS="90,*"
垂直切割画面(如分左右两个画面),接受整数值、百分数, * 则代表占用馀
下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如
一绝对分割,第二个视窗是当 分配完第一及第三个视窗後剩下的空间,第三
ROWS="120,*"
类形的框架,尽 采用多重分割。
frameborder="0"
(避 免使用 yes 或 no )
border="0"
bordercolor="#008000"
设定框架的边框颜色。
framespacing="5"
表示框架与框架间的保留空白的距离。
<FRAME> 参数设定:
bordercolor="#0000FF">
SRC="a.html"
设定此框窗中要显示的网页档案名称,每个框窗一定要对应著一个网页档案。
你可 使用绝对路径或相对路径,有关此两者详见於【连结进阶】。
NAME="top"
设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。
frameborder=0
(避 免使用 yes 或 no )
framespacing="6"
表示框架与框架间的保留空白的距离。
bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【HTML 剖析】。
scrolling="Auto"
AUTO 是视情况显示。
noresize
设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很
随 意地拉动框架,改变其大小。
marginhight=5
表示框架高度部份边缘所保留的空间。
marginwidth=5
表示框架宽度部份边缘所保留的空间。
例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="a.html">
<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
当别人使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了
些内容可以是提醒 浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自
动切换至没有框架的版本 亦可。
应用方法:
<frameset rows="80,*">
<noframes>
<body>
很抱歉,馈下使用的浏览器不支援框架功能,请转用新的浏览器。
</body>
</noframes>
</frameset>
由 於不认识所有框架标记,不明的标记会被略过,标记包围的东西便被解读出来,
所以放在 <noframes>范围内的文字会被显示。
■ <IFRAME> : ▲Top
本。
<iframe> 的参数设定如下:
scrolling="Yes">
src="iframe.html"
欲显示於此框窗的文件来源除档案名称,必要加上相对或绝对路径。
name="test"
align="MIDDLE"
width="300" height="100"
marginwidth="1" marginheight="1"
该插入的文件与框边所保留的空间。
frameborder="1"
scrolling="Yes"
例子:
显
示
结
很抱歉,馈下使用的浏览器并不支援 IFrame,不能正常浏览我的网页。
果
多媒体标记
<BGSOUND>
<EMBED>
■ <BGSOUND>:
src="your.mid"
设定 midi 档案及路径,可以是相对或绝对。
autostart=true
loop=infinite
■ <EMBED>:
及 新版的 IE 都支援。其参数设定狻多。如下
src="your.mid"
设定 midi 档案及路径,可以是相对或绝对。
autostart=true
loop="true"
HIDDEN="true"
STARTTIME="分:秒"
放。
VOLUME="0-100"
WIDTH="整数" 和 HIGH="整数"
设定控制画面的宽度和高度。(若 HIDDEN="no")
ALIGN="center"
baseline、 left、right、texttop、middle、absmiddle、absbottom。
CONTROLS="smallconsole"
设定控制画面的外貌。预设值是 console。
console 一般正常的面板
smallconsole 较小的面板
playbutton 只显示播放按钮
pausecutton 只显示暂停按钮
stopbutton 只显示停止按钮
volumelever 只显示音量调整钮
多媒体标记
<BGSOUND>
<EMBED>
■ <BGSOUND>:
src="your.mid"
设定 midi 档案及路径,可以是相对或绝对。
autostart=true
loop=infinite
是否自动反覆播放。LOOP=2 表示重复两次,Infinite 表示重复多次。
■ <EMBED>:
及 新版的 IE 都支援。其参数设定狻多。如下
src="your.mid"
设定 midi 档案及路径,可以是相对或绝对。
autostart=true
loop="true"
HIDDEN="true"
STARTTIME="分:秒"
VOLUME="0-100"
WIDTH="整数" 和 HIGH="整数"
设定控制画面的宽度和高度。(若 HIDDEN="no")
ALIGN="center"
left、right、texttop、middle、absmiddle、absbottom。
CONTROLS="smallconsole"
设定控制画面的外貌。预设值是 console。
console 一般正常的面板
smallconsole 较小的面板
playbutton 只显示播放按钮
pausecutton 只显示暂停按钮
stopbutton 只显示停止按钮
volumelever 只显示音量调整钮
其他标记
<MARQUEE>
<BLINK>
<ISINDEX>
<META>
<LINK>
■ <MARQUEE>:
的 文字,其参数设定狻多。我先举些例子,然後再列出各参数。
例子一:
显示结果
例子二:
显示结果
例子三:
显示结果
例子四:
显示结果
<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30"
scrolldelay="500">Hello</marquee>
behavior="SCROLL"
决定文字的卷动方式,可选值为:
SCROLL 一般卷动,是内定值。
SLIDE 如幻灯片,一格格的,效果是文字一接触左边便全部消失。
ALTERNATE 文字向左右两边撞来撞去。
direction="LEFT"
bgcolor="#0000FF"
设定文字卷动范围的背景颜色。
height="30" width="150"
hspace="0" vspace="0"
设定文字的水平及垂直空白位置。
loop="INFINITE"
示无 限次。
scrollamount="30"
每「格」文字之间的间隔,单位是像素。
scrolldelay="500"
文字卷动的停顿时间,单位是毫秒。
■ <BLINK> : ▲Top
例子:
原始码 <blink>我是天上星,闪又闪</blink>
显示结果 我是天上星,闪又闪
■ <ISINDEX> : ▲Top
样的 找寻功能,使用者的浏览器也支援这些找寻功能,那堋,载入网页时就会看到一
例子:
原 <isindex>
始
码
显
示 可以搜索该索引。请键入要搜索的关键字:
结
果
■ <META> : ▲Top
地介 绍。
该网页的描述,作用於寻找引擎的登录
该网页的关键字,作用於寻找引擎的登录
以上行功能相同,都是要浏览器重新载入该页,不要使用快取档案,当然可以修
改该 Expire 时间。
这只表示该网页由甚堋编辑器写成。
这一行较为实用,能於预定秒数内自动转到指定的网址。原始码中 10 表示 10
秒。
■ <LINK> : ▲Top
记间, 格式如下:
特殊字符
" " 引号
® ® 己注册
© © 版权
™ ™ 商标
  半方大的空白
  全方大的空白
不断行的空白
调色原理
HTML 的颜色表示可分两种:
以命名方式定义常用的颜色,如 RED。
例如
■ 16 常用颜色表: