细说HTML标签
在HTML语法中,大致上可以分为: ( 节录自‘网站建置百宝箱 ’)
网页架构 :主要网页主架构的介绍 分隔标签 :也就是所谓的水平线 排版标签 :针对标签的属性,可做适当的版面编排 字体标签 :教导您设定文字的字体。 文字标签 :教导您设定文字的颜色、行距、变化.....等等。 影像标签 :教导您如何在网页中,植入图像。 背景标签 :教导您如何设定背景颜色或是背景图像。 连结标签 :教导您如何设定超连结,以及开视窗的条件。 表格标签 :教导您如何在网页中运用表格。 序列标签 :教导您如何设定文字序列或图形序列。 表单标签 :教导您如何制作可填写用的表单。 框架标签 :可让同一个视窗由多个网页一起组成。 其他技巧 :让您的整个网页背景可以让您设定为图片或是声音。
4.1 网页架构 <回细说索引 >
<HTML> <HEAD> <TITLE>网页制作教学 </TITLE> <Meta> </HEAD> <BODY> BODY之间则为主要语法所在,也是网页的主要呈现部分。 </BODY> </HTML>
【标签解说】
以上看到的就是一篇最简单架构的网页。没错,网页其实就是一堆标签(所谓标签就是指被<>包起来的语法) 集合起来的,透过浏览器的消化整理,就便成了美仑美奂的网页了。
简单而言,通常一份完整的网页包含了二个部份:抬头(HEAD)、文件本体(BODY)。也就是各位在上面所看到的<HEAD></HEAD> 以及<BODY></BODY> 。
在抬头的部份<HEAD></HEAD>中,有另一组标签<TITLE></TITLE> 。打在<TITLE></TITLE>这里面的文字会出现在浏览器视窗最上头蓝色部份里,当作一篇网页的主题。
您可能会发现,为什么我一直没提到<HTML></HTML>这一组标签,嗯!因为它可有可无。这一组标签是告诉浏览器说:我是一份HTML文件喔!也就是说它是一个网页的格式啦!通常都包在网页的最上下两端,将所有的原始码都包起来。
4.2 分隔标签 <回细说索引 >
【文字上的分隔标签】 或许你已经发现这个问题了:天啊!我不是在记事本里排版排得很漂亮,为何透过浏览器看起来一切都走了样?对啊!别太讶异,在网页的编排里,并不像汉书或WORD一样,只要拼命按Enter键或空白键,便能完成分段或分行,因为,HTML语言是不认识我们所谓的Enter键或空白键,所以不管您按了多少次的空白或Enter,浏览器都会当作没看见啦!
使用方法: 强制断行标签 <br> 、强制分段标签 <p>
标签解说: 我们在写文章时,有时候在特定的地方会强迫断行(<br>),或是在写完某一段的时候便会分段(<p>),写网页也一样,而且更需要断行及分段的功能,以免整个网页看起来乱糟糟的。
使用范例:
原始码 呈现结果 这是一个断行的范例<br>看出来了吗? 这是一个断行的范例 看出来了吗? 这是一个分段的范例<p>基本上他会比断行还多空出一行 这是一个分段的范例 基本上分段会比断行还多空出一行
【分隔线标签】
使用方法: 上一段文字内容 <hr> 下一段文字内容
标签解说: 利用<hr> 这个标签便可产生一条横分隔线。另外,其有些属性分别说明如下:
使用范例:
一般用法 尚未加任何属性。 原始码 普通分隔线<hr> 呈现结果 普通分隔线
颜色属性 用法:<hr color="颜色码或颜色名称"> 原始码 橘色分隔线<hr color="#ff8000"> 呈现结果 橘色分隔线
宽度属性 用法:<hr width="宽度">,其单位为px(像素),宽度亦可用百分比来作设定,如50%即意为宽度占荧幕50%。 原始码 宽度为240px的分隔线<hr width="240"> 呈现结果 宽度为240px分隔线
厚度属性 用法:<hr size="厚度"> 原始码 厚度为5的分隔线<hr size="5"> 呈现结果 厚度为5分隔线
位置属性 用法:<hr align="水平对齐位置">,其设定值有三个,也就是置左align="left"、置中align="center"、置右align="right" 原始码 靠右的分隔线<hr align="right"> 呈现结果 靠右的分隔线
阴影属性 用法:<hr noshade>,无设定值,只要将 noshade 加入即可,通常会配合颜色设定,效果较佳。 原始码 实心分隔线(无阴影)<hr noshade> 呈现结果 实心分隔线(无阴影)
4.3 排版标签 <回细说索引 >
【文字置左、置中、置右】
使用方法: 老实说,刚刚我们学过的分段标签<p>再加上一些简单的属性设定,就可以让其整个文字段落置左、置中或置右了,就如下表所示:
原始码 呈现结果 <p align="left">文字靠左</p> 文字靠左
<p align="center">文字置中</p> 文字置中
<p align="right">文字靠右</p> 文字靠右
标签解说: 嗯!秘诀就在于“align=对齐位置 ”而已啦!align是分段标签<p>的属性之一,这个属性将来会常常在不同标签中看到,它的功能是专门在设定“水平对齐位置”,其常见的设定值有三个,也就是置左(align="left") 、置中(align="center") 、置右(align="right") 。
【置中标签】
使用方法: <center> 这是置中 </center>
标签解说: 这个标签是最常用到的标签了,除了文字,对于图片、表格,任何可以显现在网页上的东西都可以置中喔!
使用范例:
原始码 呈现结果 <center>这是最中间</center>
这是最中间
【向右缩排标签】
使用方法: <blockquote> 要缩排的文字 </blockquote>
标签解说: 利用<blockquote> </blockquote> 这个标签可以将其包起来的文字,全部往右缩排。而且加一组标签,往右缩排一单位,加两组标签,往右缩排两单位,依此类推。
使用范例:
原始码 呈现结果 <blockquote>缩排1单位</blockquote>
缩排1单位
<blockquote><blockquote>缩排2单位</blockquote></blockquote>
缩排2单位
【保存原始格式标签】
使用方法: <pre> 文字内容 <pre>
标签解说: 利用<pre> </pre> 这个标签可以将其包起来的文字排版、格式,原封不动的呈现出来。算是相当好用的标签之一。
使用范例:
原始码 呈现结果 <pre> 文 字 格 式 </pre> 文 字
格 式
4.4 字体标签 <回细说索引 >
【标题标签】
使用方法: <h1> 标题内容 </h1>
标签解说: 标题的大小一共有六种,两个标签一组,也就是从<h1>到<h6>,<h1>最大,<h6>最小。使用标题标签时,该标签会将字体变成粗体字,并且会自成一行。
使用范例:
原始码 呈现结果 <h1>标题一</h1> 标题一 <h2>标题二</h2> 标题二 <h3>标题三</h3> 标题三 <h4>标题四</h4> 标题四 <h5>标题五</h5> 标题五 <h6>标题六</h6> 标题六
【设定字体大小标签】
使用方法: <font size=3> 文字内容 </font>
标签解说: 标题的大小一共有七种,也就是<font size=1>(最小)到<font size=7>(最大),另外,还有一种写法:<font size=+1> 文字内容 </font> ,其意思就是说:比预设字大一级。当然也可以 font size=+2(比预设字大二级),或是 font size=-1(比预设字小一级),以一般而言,预设字体多为 3。
使用范例:
原始码 呈现结果 <font size=1>字体一</font> 或是 <font size=-2>字体一</font> 字体一 <font size=2>字体二</font> 或是 <font size=-1>字体二</font> 字体二 <font size=3>字体三</font> 或是 <font size=+0>字体三</font> 字体三 <font size=4>字体四</font> 或是 <font size=+1>字体四</font> 字体四 <font size=5>字体五</font> 或是 <font size=+2>字体五</font> 字体五 <font size=6>字体六</font> 或是 <font size=+3>字体六</font> 字体六 <font size=6>字体七</font> 或是 <font size=+4>字体七</font> 字体七
【字型变化标签】
使用方法: <b> 文字 </b>
标签解说: 在文字标签里,对于文字的格式也有相当多的变化,如粗体、斜体...等,此外,也定义了一些现成的格式供编者使用,如‘强调’、‘原始码’...等,当然,这只是方便您参考用,并无强迫说遇到原始码就要加上‘原始码’的标签。
使用范例:
原始码 呈现结果 <b>粗体</b> 粗体 <i>斜体</i> 斜体 <u>底线</u> 底线 <sup>上标</sup> 上标 <sub>下标</sub> 下标 <tt>打字机</tt> 打字机 <blink>闪烁</blink>(ie没效果)
闪烁
<em>强调</em> 强调 <strong>加强</strong> 加强 <samp>范例</samp> 范例 <code>原始码</code> 原始码
<var>变数</var> 变数 <dfn>定义</dfn> 定义 <cite>引用</cite> 引用 <address>所在地址</address> 所在地址
【文字颜色设定】
使用方法: <font color="#fefecb"> 文字颜色 </font>
标签解说: 文字也可以设定 颜色喔!至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧!
使用范例:
原始码 呈现结果 <font color="#ff0000">红</font> 红色的字喔! <font color="#ff8000">橙</font> 橙色的字喔! <font color="#ffff00">黄</font> 黄色的字喔! <font color="#00ff00">绿</font> 绿色的字喔! <font color="#0080ff">蓝</font> 蓝色的字喔! <font color="#0000a0">靛</font> 靛色的字喔! <font color="#8000ff">紫</font> 紫色的字喔! <font color="#000000">黑</font> 黑色的字喔! <font color="#c0c0c0">灰</font> 灰色的字喔!
4.5 文字标签 <回细说索引 >
【文字字型设定】
使用方法: <font face="字型名称"> 文字 </font>
标签解说: 网页上也可以使用字型喔!唯一的一个限制是:对方也要有该字型!否则看到的仍然还是宋体。另外要说明的是,这个标签并无法保证在每个浏览器上都能正常的显现,不过这并没有关系,看不到特殊的字型时,浏览器仍会以宋体来显示,所以不用怕会一团乱! 另外,如果您的网页中有加上这一行叙述<meta http-equiv="content-type" content="text/html;charset=big5">(指定网页的语言格式,以后我会解释),那么,netscape可以正确显示出中文,但英文无反应。若没有加该行,那么英文会正确显示,但中文却仍是宋体。至于 ie 系列,均能正常显示。
使用范例:
原始码 呈现结果 <font face="楷体_GB2312">楷体_GB2312</font> 楷体_GB2312 <font face="华康俪中黑">华康俪中黑</font> 华康俪中黑
【特殊字元】
使用方法:
标签解说: 很多特殊的符号是需要特别处理的,比如说" < "、" > "这两个符号若想要呈现在网页上是没有办法直接打" < "的,要呈现" < "必须输入编码表示法:“<”,常用的如下:
使用范例:
原始码 呈现结果 ( 代表一个不断行空白) < < > > & & " "
【设定文字内定值大小】
使用方法: <basefont size="1~7">
标签解说: 这个标签可以改变文字大小的内定值,直接加在<body>标签之后就行了。一般而言,若是没有特别设定,文字大小内定值预定值为3。
4.6 影像标签 <回细说索引 >
【影像标签】 在使用影像标签时有两件事值得注意一下,一是档名,二是路径。首先要注意的就是,档名是否正确以及大小写是否一致!图档名称不正确,任电脑再厉害也找不到您要的图,档名大小写不一致,如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示,但是一但传到网路上去时,因为系统不一样的关系(电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了)就变成三个不一样的档案了,所以,可别忽略档名大小写不一致的影响。
另外一个就是路径问题了,这个问题也不难,我们在稍后会提到。我们先来看看影像的标签如何写。
使用方法: <img src="boy.gif" alt="本站特约模特儿" align=right border=0 hspace=2 vspace=2 height=56 width=32>
标签解说: 目前常见的网页图形格式有两种就是gif及jpg两种格式。gif格式只有256色,不过色彩比较鲜艳干净漂亮,适合电脑美工图案。而jpg格式的图案是全彩失真压缩,比较适合一大堆颜色的图片,如照片就较适合用jpg格式来呈现。
使用范例:
基本用法 用法:<img src="图档名称、路径"> 显示图片最基本的方法(就是不加任何属性啦!)其中 boy.gif 就是图档的档名。 原始码 <img src="images/G-FASE4.GIF ">嗨!我是本站的模特儿喔! 呈现结果 嗨!我是本站的模特儿喔!
长宽设定 用法:<img src="图档" height="高度" width="宽度"> 设图片的大小,其实不用设也可以,但是有设更好,可以加快浏览速度,因为浏览器就不用在那边花时间算您的图片有多大啦!此外您也可以自己随意设定图片大小。 原始码 <img src="images/G-FASE4.GIF" height=32 width=32 > 呈现结果
加上说明 用法:<img src="图档" alt="说明文字"> 滑鼠一到图上时,说明文字就会自动出现。此外,在图片未显示出来或显示不出来时,也会以这一段字代替,让使用者知道这个未显示出来的图片究竟是干嘛用的。 原始码 <img src="images/G-FASE4.GIF" alt="本站特约模特儿" >移到图上看看。 呈现结果 移到图上看看。
图片位置 用法:<img src="图档" align="位置"> 图片位置设定!可以靠左放:align=left、靠上align=top、靠下align=bottom、垂直置中align=middle,其中靠左放可以造成‘文绕图’的效果。 原始码 <img src="images/G-FASE4.GIF" align=right >嗨!我往右边靠! 呈现结果 嗨!我往右边靠!原始码 <img src="images/G-FASE4.GIF" align=left >嗨!我往左边靠! 呈现结果 嗨!我往左边靠!原始码 <img src="images/G-FASE4.GIF" align=top >文字对齐我头顶! 呈现结果 文字对齐我头顶!原始码 <img src="images/G-FASE4.GIF" align=bottom >文字对齐我脚底! 呈现结果 文字对齐我脚底!原始码 <img src="images/G-FASE4.GIF" align=middle >文字对齐我中间! 呈现结果 文字对齐我中间!原始码 <img src="images/G-FASE4.GIF" align=absmiddle >文字对齐我绝对中间! 呈现结果 文字对齐我绝对中间!
边框设定 用法:<img src="图档" border="边框粗细"> 设定边框大小,通常都设成 0 感觉比较美观啦!因为内定的框框实在是不怎么漂亮....。尤其在连结时,设框框简直是丑毙了...。 原始码 <img src="images/G-FASE4.GIF" border="4" > 呈现结果
左右间距 用法:<img src="图档" hspace="离左右物件的距离"> 离文字的水平距离,通常多少也设一点,以免靠文字太近,看起来才不会有太挤的感觉。 原始码 左边的字<img src="images/G-FASE4.GIF" hspace="15" >右边的字 呈现结果 左边的字 右边的字
上下间距 用法:<img src="图档" vspace="离上下物件的距离"> 离文字的垂直距离,通常多少也设一点,以免靠文字太近,看起来才不会有太挤的感觉。 原始码 上面的字<br><img src="images/G-FASE4.GIF" vspace="15" ><br>下面的字 呈现结果 上面的字 下面的字
由于此网页有用css控制版面图文,故在netscape下观看,会稍有不正确。
【网页影像重要观念】
关于路径: 现在我们来谈谈图片路径的事,路径不对,不管您的网页名称写的多正确也没用,因为浏览器无法寻着您的路径去找到该有的图片,所以,我们来看看该如何正确的使用路径。有些人并不喜欢将网页及图通通放在同一个目录下,比如说有人将图档全放在c:/images里,而网页档放在c:/demo里,这样子的话,我们该如何正确的写图片的路径呢?我将几种常见的情形整理成下表:
html档的位置 图档的位置 写法 情形说明 c:/demo c:/demo <img src="tad.gif"> 图文均在同一目录 c:/demo c:/demo/images <img src="images/tad.gif"> 图在网页下一层目录 c:/demo c:/ <img src=" ../tad.gif"> 图在网页上一层 c:/demo c:/image <img src=" image/tad.gif"> 图文在同一层但不同目录
或许有人看到不明就理,我来说明一下,“../”是回到上一层目录的意思。“images/”则是进入下一层目录image之意,而“images/”的意思就是,回到上一层目录,然后再进入目录images中。以上我们使用的均为“相对路径 ”的概念。
影像单位: 或许您会常常看到px这个单位,没错,这是我们在制作最常用的一个单位了。这个单位完整的写法是“pixels”,我们称之为“像素”。像素,是荧幕上的一个小光点,然而这一小光点的大小,并非是固定的,举个例子而言,荧幕本身十五吋,不会因为你的任何设定而变成十七吋。但是,其解析度是可以改变的,我们常见的解析度有以下几种:“640 ×480”、“800 ×600”、“1024 ×768”。举其中之一的640 ×480来说,其代表的就是在荧幕上有宽640个光点,高有480光点,若是我们将解析度调整为800 ×600其宽势必要从640变成800个光点,也因此,该光点便会变小一点,所以,我们看起来就会觉得解析度调高后,荧幕内的东西,变得小小的,很精致,那就是因为光点变小的原因。
影像格式: 网页用的图档目前只有gif格式(即副档名为gif的图档,如:bg.gif)以及jpg格式(即副档名为jpg的图档,如:bg.jpg)为一般的浏览器所接受。其他如bmp格式或是pcx格式都是无法在网页上使用的,若非得要用,那就利用影像绘图软体来作格式的转换吧!
图档范例 说明 gif格式的图形只能以256个颜色显示,虽然其色彩较少,但颜色鲜艳亮丽,若是图形颜色不多,用gif格式存档会较漂亮。 jpg格式的图形是以全彩显示,适合用在相片或是渐层颜色的图片上,压缩比例以75%为适中。
4.7 背景标签 <回细说索引 >
【背景标签】 说穿了,背景标签只有<BODY>这个标签,其余的效果,只要加上一些简单的属性便可做到。
使用方法: <body bgcolor="#ffffff" background="bg.jpg" >
标签解说: 这个标签其实应该老早就要讲了,毕竟它是构成网页不可或缺的基本要素之一(哎哎哎...现在放马后炮有什么用!) 。我们背景颜色或图片的设定以及连结字体的颜色,通通都放在<body>这标签里面。我就其属性来一一解说:
背景颜色 用法:<body bgcolor="颜色码"> 设定背景颜色。有人会说:‘我已经设定了背景图片,那背景颜色还有用吗?’当然有用!当使用者连结到贵站时,若背景图案还没传输完之前(有的背景图蛮大的),就会先显现背景颜色,您说,是不是比一片灰灰的好看多了呢! 原始码 <html> <head> <title>这是标题</title> </head> <body bgcolor="#f9e6a2" >
这里是本文区
</body> </html>
呈现结果 按下此处观看结果
背景图案 用法:<body background="图档名称、路径"> g设定背景图案。图档可以是jpg或gif格式的图档,我建议:图档不要太大,否则网页载入会蛮慢的。 原始码 <html> <head> <title>这是标题</title> </head> <body background="bg.jpg" >
这里是本文区
</body> </html>
呈现结果 按下此处观看结果
【内文、连结文字颜色设定】
使用方法: <body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000 >
标签解说: 用字体标签中的颜色属性,可以设定文字的颜色,不过,却没有提到文字的颜色内定值该如何修改,这个<body>标签中,便有设定内文、连结等文字的颜色内定值功能。用法如下:
内文颜色 用法:<body text="颜色码"> 设定一般文字颜色,也就是说,若没有特别去设定文字颜色的话,浏览器就会自动显现您所设定的颜色。 原始码 <html> <head> <title>这是标题</title> </head> <body text="#0906a2" >
这里是本文区
</body> </html>
呈现结果 按下此处观看结果
连结颜色 用法:<body link="颜色码"> 设定“连结”的颜色。只要是有连结的地方就会出现你指定的颜色,当然,如果按下连结后,那又会变成另一个颜色了,这底下会说明。 原始码 <html> <head> <title>这是标题</title> </head> <body link="#ff6600" >
<a href="index.htm">连结文字</a>
</body> </html>
呈现结果 按下此处观看结果 (设定连结为橘色)
连结时颜色 用法:<body alink="颜色码"> 设定“按下连结”的颜色,也就是当您滑鼠按下那连结的瞬间所呈现的颜色。 原始码 <html> <head> <title>这是标题</title> </head> <body alink="#0099ff" >
<a href="index.htm">连结中文字</a>
</body> </html>
呈现结果 按下此处观看结果 (滑鼠点下连结瞬间才会出现我们设定的浅蓝色)
已连结颜色 用法:<body vlink="颜色码"> 设定“按下链结后”的颜色,也就是如果该连结已经有被按过了,那么就会呈现的颜色。如此的做法,是要让使用者容易识别到底哪些连结有去过了,哪些没去过。 原始码 <html> <head> <title>这是标题</title> </head> <body vlink="red" >
<a href="demo1-10-6.htm">连结文字</a>
</body> </html>
呈现结果 按下此处观看结果 (设定已执行过的连结以红色显示)
4.8 连结标签 <回细说索引 >
【WWW连结标签基本概念 】
连结基本概念: 一般而言,所谓连结就是,在网页中有些字会有特别的颜色,而且字的底下会有条线,当游标移到那些字上时,会变成手指形状,按下去,则会连到别的文章或网站,就像这样 (以上这段是给超级新手看的...) 。 扯到连结,最基本来看有‘内部连结’ 及‘外部连结’ ,所谓‘内部连结’就是自己网站间网页的连结,至于外部连结我们稍后再来讨论。
要了解内部连结,首先必须先了解一下这两种东西,一个是‘相对路径’ ,一个是‘绝对路径’ 。
现在假设一个情形:我们在自己的电脑里设计网页,所有网页相关的档案我们通通放在 c:/www 里面,现在假设 c:/www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok!
现在我们想在 index.htm 里面设一个连结,能够按一下就连到 text1.htm,那我们该怎么做呢?基本上,有两中方式可以做到,在 index.htm 里面加上下面任一叙述:
<a href="/c|/www/text1.htm "> 这就是‘绝对路径’ <a href="text1.htm "> 这就是‘相对路径’
瞧出什么端倪了没有?嗯嗯....没错,‘绝对路径’要给电脑一个非常详尽的位置,让电脑寻着这路径去找到档案。而‘相对路径’就简单多啦!如果没有特别指定,他就会直接在 index.htm 的所在目录 下找,也就是在 c:/www 底下去找text1.htm。
如果说,今天我们将 c:/www 里所有的档案都上传到网路上的网页伺服器(总不能做好了只给自己看吧!) ,且该伺服器是别人的电脑,而非你自己架设的主机,那么问题就来了!你猜,哪一种连结会出问题?呵呵...答案是‘绝对路径’,您猜对了吗?
为什么说‘绝对路径’会出问题呢?因为,当您将档案上传到网路上时,您的整个网页目录架构一定会变,到时候,电脑可能找不到 c:/ (尤其是unix系列的主机) 更可能找不到 www 这目录(有些会规定要放在特定的目录下才能显示网页) ,所以说,没事的话,尽量用‘相对路径’来作连结吧!好写又不容易出错。
另外一个情形是:为了整理方便,有些网友喜欢将图档通通放到同一个目录下,如:c:/www/gif/ 底下放进了p1.gif 、 p2.gif两个图,而index.htm 、 text1.htm 依旧在 c:/www 底下。现在我们想在 index.htm 下设个连结到 p1.gif 这图档(连结不限于只能连html档,图档、文字档均可) ,那我们又该如何来使用‘相对路径’呢?他们又不在‘同一个目录’下...?
<a href="/c|/www/gif/p1.gif "> 这是‘绝对路径’的写法 <a href="gif/p1.gif "> 这是‘相对路径’的写法
如何?不难吧!(只是字有点多,看到脑子发胀)
总整理: 很乱吗?嗯...看看这表,或许会清楚些。
相对路径表示方式 代表连结位置 <a href="text1.htm"> text1.htm在目前的目录中(就例子而言,就是在c:/www中) <a href="docs/text1.htm"> text1.htm在名为docs的次目录 中(就本例而言,就是在c:/www/docs中) <a href="../text1.htm"> text1.htm在目前目录的上一层目录中(就本例而言,就是在c:/底下了)
【网页内部的连结 】
使用方法:
先在欲连结处作记号: <a name="here1"> 这里是你想连结的点 </a>
设定连结: <a href="#here1"> 连结 </a>
标签解说: 有时候,当某页的内容很多时,我们可以利用网页的内部连结,来使使用者快速的找到资料。其原理不过是:在欲连结处做个记号(网页的任何地方都可以喔!) ,然后,连结时就寻这记号,就可以快速找到资料。很简单吧!
使用范例:
范例 第一步骤 第二步骤 www连结标签基本概念 <a name="m1">欲连结的位置</a> <a href="#m1">www连结标签基本概念</a> 网页内部的连结 <a name="m2">欲连结的位置</a> <a href="#m2">网页内部的连结</a> 网页外部的连结 <a name="m3">欲连结的位置</a> <a href="#m3">网页外部的连结</a>
【网页外部的连结 】
标签解说: 连结到外面去,可以扩充您网站的实用性及充实性,也正因这功能,才造就了www五彩缤纷的世界。由于网路上的服务五花八门,所以不同的服务有不同的连结方法,我将之整理在下表。
使用范例:
网站连结 好站 <a href="http://sunspot-design.com ">好站</a> 电子邮件连结 写情书给我 <a href="mailto:tad@ms1.url.com.tw ">写情书给我</a> ftp连结 下载档案 <a href="ftp://ftp.ntu.edu.tw ">下载档案</a> news连结 seednet news服务 <a href="news:news.seed.net.tw ">seednet news服务</a> gopher连结 seednet gopher服务 <a href="gopher://gopher.seed.net.tw/ ">seednet gopher服务</a> bbs连结 seednet gopher服务 <a href="telnet://bbs.seed.net.tw/ ">seednet bbs服务</a>
【连结标签的参数】
使用方法: 在连结后面加入 target=_参数
标签解说: 连结的参数并不多,常见的大概就属 target 这参数了,target 的意思是‘目标’,也就是网页连结的指向目标,这参数在框窗(frame)里尤为重要!
使用范例:
target=框窗名称 : 这在‘框架标签’中也有提到,而且也只有在框架(框窗 or frame)中才用得到。正常而言,框窗有各自的名称,因此,我们可以利用此标签,来指定连结的内容显示到哪一个框窗中。
target=_blank : 将连结的画面内容,开在新的浏览视窗中。
target=_parent : 将连结的画面内容,当成文件的上一个画面。
target=_self : 将连结的画面内容,显示在目前的视窗中。
target=_top : 这个参数可以解决新连结的画面内容,被旧框窗包围的困扰,使用这参数,会将整个画面重新显示成连结的画面内容。