15 12
发新话题
打印

[论坛代码及教程] [转贴]html语言剖析

10、HTML语言剖析之链接标记

<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="../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>  
显示结果 四百五十个寻找引擎






例子二(内部连结):请到 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 参数相同。
例子容後再写,你可亲自尝试或到一些以框架制作的网页去体验一下。
欢迎来到太宰府王国,论坛现诚招斑竹若干,点击此处申请

TOP

11、HTML语言剖析之多媒体标记

<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 只显示音量调整钮
欢迎来到太宰府王国,论坛现诚招斑竹若干,点击此处申请

TOP

12、HTML语言剖析之其他标记

<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 一节详细介绍。
欢迎来到太宰府王国,论坛现诚招斑竹若干,点击此处申请

TOP

13、HTML语言剖析之特殊字符

只要你认识了 HTML 标记,你便会知道特殊字符的用处。 HTML 原始码 显示结果 描述
< < 小於号或显示标记
> > 大於号或显示标记
& & 可用於显示其它特殊字符
" " 引号
® ? 己注册
© ? 版权
™ ? 商标
    半方大的空白
    全方大的空白
    不断行的空白

■ ISO Latin-1 特殊字符 :
HTML 原始码 显示结果 描述
&AElig; ? 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
&ETH; D 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
&THORN; T Uppercase THORN, Icelandic
Ú ú Uppercase U, acute accent
Û ? Uppercase U, circumflex accent
Ù ù Uppercase u, grave accent
Ü ü Uppercase U, dieresis or umlaut mark
Ý Y Uppercase Y, acute accent
æ ? Lowercase ae diphthing
á á Lowercase a, acute accent
â a Lowercase a, circumflex accent
à à Lowercase a, grave accent
å ? Lowercase a, ring
ã ? Lowercase a, tilde
ä ? Lowercase a, dieresis or umlaut mark
ç ? Lowercase c, cedilla
ð e 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)
þ t Lowercase thorn, Icelandic
ú ú Lowercase u, acute accent
û ? Lowercase u, circumflex accent
ù ù Lowercase u, grave accent
ü ü Lowercase u, dieresis or umlaut mark
ý y Lowercase y, acute accent
ÿ ? Lowercase y, dieresis or umlaut
欢迎来到太宰府王国,论坛现诚招斑竹若干,点击此处申请

TOP

14、HTML语言剖析之调色原理

HTML 的颜色表示可分两种:
以命名方式定义常用的颜色,如 RED。
以 RGB 值表示,如 #FF0000 表示 red。
命名方式涵括的色种不多亦不甚方便,较少采用,以下介绍 RGB 值的原理:

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

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

於应用时常在每个 RGB 值之前加上符号 # 以示分别,但不加亦可。

■ HTML 基本架构:
选按不同颜色按键以测试前景颜色效果 (只适合 Internet Explorer)
                  
选按不同颜色按键以测试背景颜色效果
                  
或输入一个 RGB 颜色码或名称
      

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

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

TOP

 15 12
发新话题