html语言剖析 ▲top
文件标记
<html> ; <head> ; <title> ; <body>
欲明白本篇【html剖析】之标记分类请看 【标记一览 】。
亦请先明白围堵标记与空标记的分别请看 【html概念 】。
■ html 基本架构:
以下 html source code 便是一份 html 文件的基本架构 :
<html>
<head>
<title> 网页的标题 </title>
</head>
<body>
网页的内容,很多标记都作用于此
</body>
</html>
特点解说:
整份文件处于标记<html>与</html>之间。
<html>用以声明这是 html 文件,让浏览器认出并正确处理此 html 文件。
文件分两部分,由<head>至</head>称为开头 ,<body>至</body>称本文 。
基本上两者各有适用的标记,如<title>只可出现于开头部分。
开头 部分用以存载重要资讯,而只有本文 部分会被显示。
所以大部分标记会运用于本文部分。
<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 剖析】介绍。
html语言剖析 ▲top
排版标记
<!--注解--> ; <p> ; <br> ; <hr> ; <center> ; <pre> ; <div> ; <nobr> ; <wbr> ;
像很多电脑语言一样,html 文件亦提供注解功能。浏览器会忽略此标记中的文字(可以 是很多行)而不作显示,一般使用目的:
为文中不同部份加上说明,方便日后修改。
这对较复杂或非私人网页尤其重要,它不单是提醒自已,亦提醒你的同事这部分 做什么、那部分做什么。
例子:
<!--由这处开始是产品订购表格-->
用作版权声明。
假如你不希望别人使用或复制你的网页,可加上警告字眼。
例子:
<!--本文版权为 1998, creation of webpage 所拥有,未经许,请勿抄摘-->
<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>称为换行标记 。作用:令字、画、表格等显示于下一行。
由于浏览器会自动忽略原始码中空白和换行的部分,这令到<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>称为水平线 。作用:插入一条水平线。
<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>称为居中标记 。作用:令字、画、表格等显示于中间。
这标记原先是 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>称为预设格式标记 。作用:令文件按照原始码的排列方式显示。
这标记允许保留你于原始码中输入的空白及 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>称为区隔标记 。作用:设定字、画、表格等的摆放位置。
<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>称为不折行标记 。作用:令某些文字不因太长而绕行,一 显示于同一行或下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。
例子:(其中 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>称为建议折行标记 。作用:预设折行部位。
它没有侵犯到 <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.
html语言剖析 ▲top
字体标记
<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>
这一节【字体标记】你必须先明白实体标记 与逻辑标记 的分别,否则你会迷惑于为何不同 的标记却有相同的效果。两者分别有以下两处:
实体标记有固定的显示效果,逻辑标记则依不同浏览器而不同。
例如逻辑标记的 <em> 由于浏览器的不同它所标示的文字不一定出现斜体效果, 它可能是加底线、粗体或反白等,所以这一节是以它们在 ie 和 nc 中的效果作介 绍。
多个实体标记亦可有效标示同一字句,逻辑标记则通常于旧浏览器不能有效显示多 重的标示。
例如两个逻辑标记 <em> 及 <strong> 同时标示一字句于旧浏览器常失去作用。
实体标记有:
<i> <b> <u>
逻辑标记有:
<strong> <em> <var> <cite> <dfn> <address> <code> <kbo> <samp> <tt>
若要求真确的效果当然以实体标记为佳。
两者皆能产生字体加粗的效果,但必须注意的是当文件被设为 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>:
这些标记于 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>
为方便对照及记认,所以把十个标记于在一起介绍。
<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>:
这些是标题标记,由 <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
这一节只有这两个标记具参数设定,且两者的参数设定是一样的 ,都是负责设定文字的大 小、字形及颜色,但各有用处,且看以下比较:
<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
html语言剖析 ▲top
清单标记
<ol> <li>
<ul>
<menu> <dir>
<dl> <dt> <dd>
<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>称为无序清单 标记。
所谓无序清单就是在每一项前面加上 、 、 等符号,故又称符号清单。
<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
这两个标记都不为 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> 则用以标示定义内容。
所谓定义清单就是一种分二层的项目清单,其不故符号及数目。
三个标记都没有常用的参数。而 <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.
html语言剖析 ▲top
表格标记
<table> <tr> <td>
<th>
<caption>
这三个标记是定义表格的最重要的标记,可以说只学这三个己足够。
<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>
显示结果
例子二:
原始码
<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>与<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> 的作用是为表格标示一个标题列 ,有如在表格上方加上一没格线的打通列。 当然亦可置于下方,通常用以存放该表格的标题。
<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%
html语言剖析 ▲top
表单标记
<form> <input>
input 的种类: text , radio ,checkbox , password , submit/reset , image , file , hidden , button 。
<select> <option>
<textarea>
■ 引子
表单的用处很多,于网上无处不见,当然是配合 cgi 使用为佳,所以馈下有意使用或学 习 cgi 的话,表单设计见必需的,这一节介绍的标记不多,但其参数变化很多。一份表单的基本架构是:在 <form> 标记 的包围下加上一种或以上的表单输入方式及一个或以上的按键。
<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 己有很多的选择,而不同的选择表示出不同的输入方式,且其它 参数亦因此而异,故以下将独立介绍不同输入方式及其它参数设定。
输入方式一: 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>
显示结果
输入方式四: 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> 所标示,把它当作围堵标记或空标 记使用都可以。
<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>
显示结果
例子二: (容许多重选择 的卷动选单)
原始码
<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>
显示结果
例子三:(设定了 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>
显示结果
<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>
显示结果
html语言剖析 ▲top
图形标记
<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> 放大了的图片
显示结果
放大了的图片
html语言剖析 ▲top
链接标记
<a>
<base>
<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="http://www.sdjtu.edu.cn/xdjyzx/"> 现代教育中心</a>
<p> <a href="http://www.sdjtu.edu.cn">
<img src="sdjtu.gif" width=212 height=60 border=1 alt="现代教育中心"> </a>
<p> <a href="http://www.sdjtu.edu.cn">
<img src="sdjtu.gif" width=212 height=60 border=0 alt="现代教育中心"> </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>
显示结果
<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 参数相同。
例子容後再写,你可亲自尝试或到一些以框架制作的网页去体验一下。
html语言剖析 ▲top
排版标记
<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> 称框架标记,用以宣告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> 这个标记,当使用者的浏览器看不到框架时,他就会看 到 <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>范围内的文字会被显示。
这标记只适用於 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://www.sdjtu.edu.cn/" name="test" align="center" width="450" height="200" marginwidth="5" marginheight="5" frameborder="1">
很抱歉,馈下使用的浏览器并不支援 iframe,不能正常浏览我的网页。</iframe>
</center>
显示结果
html语言剖析 ▲top
多媒体标记
<bgsound>
<embed>
<bgsound> 是用以插入背景音乐,但只适用於 ie,其参数设定不多。如下
<bgsound src ="your.mid" autostart =true loop =infinite>
src ="your.mid"
设定 midi 档案及路径,可以是相对或绝对。
autostart =true
是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
loop =infinite
是否自动反覆播放。loop=2 表示重复两次,infinite 表示重复多次。
<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 只显示音量调整钮
html语言剖析 ▲top
其他标记
<marquee>
<blink>
<isindex>
<meta>
<link>
<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> 是令文字闪烁,只适用於 nc ,用法直接,没有参数。看看例子便知:
例子:
原始码
<blink> 我是天上星,闪又闪</blink>
显示结果
我是天上星,闪又闪
<isindex> 可让某些 web server 找寻网页内的关键字,假如你的 web server 提供这样的 找寻功能,使用者的浏览器也支援这些找寻功能,那堋,载入网页时就会看到一个简单的 找寻方块。其用法直接,没有参数,本来是要放於 <head> 标记内的,但把它放在 <body> 标记内亦不见有问题,请记住,3w 以反对 此标记。
例子:
<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> 用来将目前文件与其它 url 作连结,但不会有连结按钮,用於 <head> 标记间, 格式如下:
<link href="url" rel="relationship">
<link href="url" rev="relationship">
其用法我们会於 style sheet 一节详细介绍。
html语言剖析 ▲top
特殊字符
只要你认识了 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语言剖析 ▲top
调色原理
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 基本架构:
■ 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
html语言剖析 ▲top
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)