When I was young, Ilistened to the radio waiting for my favorite songs....
…</center>
Wonderful!!
Thismust be my dream.
输出为:
Wonderful!!
This must be mydream.
第三章:超文本链接指针
超文本链接指针是html最吸引人们优点之一。链接指针可以使读者在整个Internet网上方便地链接。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力,而每一个链接指针正好代表了作者或者读者的思维跳跃,这更加符合人类的思维方式。因而组织得好的链接指针有助于理解作者的意图。
一个超文本链接指针由两部分组成。一是被指向的目标,它可以是同一文件的另一部分,也可以是世界另一端的一个文件,还可以是动画或音乐;另一部分是指向目标的链接指针。
§3.1 统一资源定位器URL
统一资源定位器(uuiform Resource Locator)是文件名的扩展。在单机系统中,定位一个文件需要路径和文件名,对于遍布全球的Internet网,显然还需要知道文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是在单机系统中,所有的文件都由统一的操作系统管理,因而不必给出访问该文件的方法;而在Internet上,各个网络,各台主机的操作系统都不一样,因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为:
protocol:// machine.name[:port]/directory/filename
其中protocol是访问该资源所采用的协议,即访问该资源的方法,它可以是: http 超文本传输协议,该资源是html文件file 文件传输协议,用ftp访问该资源ftp 文件传输协议,用ftp访问该资源gophergopher协议,该资源是gopher文件news 表明该资源是网络新闻
madcine.name 是存放该资源主机的IP 地址,通常以字符形式出现,如sun.ihep.ac.cn port端口号,是服务器在该主机所使用的端口号。一般情况下端口号不需要指定。 只有当服务器所使用的端口号不是缺省的端口号时才指定。
directory和filename是该资源的路径和文件名。
一个典型的URL为:http://www.ihep.ac.cn它表示中科院高能所WWW服务器上的起始html文件。(文件具体存放的路径及文件名取决于该WWW服务器的配置情况)。
与单机系统绝对路径,相对路径的概念类似,统一资源定位器也有绝对URL和相对URL之分。上文所述的是绝对URL。相对URL是相对于你最近访问的URL。比如你正在观看一个URL为http://www.inep.ac.cn/index.html的文件,如果想看同一个目录下的另一个文件china.html,你可以直接使用china.html,这时china.html就是一个相对url,它的绝对url为http://www.ihep.ac.cn/china.html
§3.2 指向一个目标
在html文件中用链接指针指向一个目标。其基本格式为:
字符串
href属性中的统一资源定位器(url)是被指向的目标,随后的“字符串”在html文件中充当指针的角色, 它一般显示为蓝色。当读者用鼠标点这个字符串时,浏览器就会将url处的资源显示在屏幕上。例如:
IHEP CHINA homepage
用户用鼠标点取IHEP china homepage,即可看到高能所编写的关于中国情况的介绍。在这个例子中, 充当指针的是IHEP china homepage,下面我们将看到用图象做为指针的例子。
在编写html文件时,需要知道目标的url。如何才能得到目标的url呢?对于自己主机内的文件,它的url 可以根据该文件的实际情况决定。对于Interner上的资源, 我们在用浏览器观看时,它的url会在浏览器的Location一栏中显示出来,把它抄下来写到你的html文件中即可。
在编写html文件时,对有能确定关系的一组资源(比如在同一个目录中)应采用相对url,这不仅简化你的html文件,而且便于维护。比如当你需要将某个目录整个搬到另外一个地方或把某一主机的资源移到另一台主机时,用相对url写的html文件用不看更新其中的url(只要它们的相对关系没有改变)。但如果你用绝对url编写html,你就不得不逐字修改每个链接指针中的url,这是一件很乏味也很容易出错的工作。对于各个资源之间没有固定的关系,比如你的html文件是介绍各大学情况的,它所指向的目标分布在全球的主机中,这时你就只能用绝对url了。
在本章的末尾,作者给出一个完整的html文件,该文件使用了前三章介绍的全部元素,以便于读者理解。
§3.3 标记一个书签
上节提到的链接指针可以使读者在整个Interner网上方便地链接。但如果你编写了一个很长的html文件,从头到尾地读很浪费时间,能不能在同一文件的不同部分之间也建立起链接,使用户方便地在上下方之间跳转呢?答案是肯定的。前面曾提到过一个超文本链接指针包括两个部分,一个指向目标的链接指针,另一个是被指向的目标。对于一个完整的文件,我们可以用它的url来唯一地标识它, 但对于同一文件的不同部分,我们怎样来标识呢?下面的内容将介绍链接指针元素的另外的一个用途,标识书签。
标识一个书签的方法为:
text</a>
name属性将放置该标记的地方标记为“name”,name是一个全文唯一的标记串,text部分可有可无。这样,我们就把放置标记的地方做了一个叫做“name”的标记。
做好标记后,可以用下列方法来指向它,
text
url是放置标记的html文件的url name是标记名,对于同一个文件,可以写为
text
这时就可以点取text跳转到标记名为name的部分了。
§3.4 目标窗口
如果希望被指向的目标在一个新的窗口中显示,可以使用target属性来修饰链接指针元素。
text
将url代表的资源显示在一个新的窗口中,该窗口的名字叫window-name。
§3.5 图象链接指针
图象也可以做为链接指针。格式为:
可以看出,上例中用
取代了链接指针中text的位置。
是图象元素,它表明显示url代表的图象文件,参见图象一章。
下面是一个简单的图象链接指针:
China home page
边框
#=value
§3.6 图象地图(imagemap)
上一节介绍的图象链接指针每幅图只能指向一个地点,而图象地图可以把图象分成多个区域,每个区域指向不同的地点。你可以用图象地图编出很漂亮的html文件。
使用图象地图稍微复杂一点。图象地图不仅需要在html文件中说明,它还需要一个后缀为.map的文件,用来说明图象分区及其指向的url的信息。 在.map文件中说明分区信息的格式如下:
rect url 左上角坐标,右下角坐标
poly url 各顶点坐标
circle url 直径两端点坐标
default url
rect指定一个矩形区域,该区域的位置由左上角坐标和右下角坐标说明。poly 指定一多边形区域, 该区域的位置由各顶点坐标说明。circle 指定一圆形区域, 该区
域的位置由垂直通过圆心的直径与该圆的交点坐标说明。default 指定图象地图其它部分的url。坐标的写法为:x,y ,各点坐标之间用空格分开。下面是一个完整的说明文件,
default http://www.ihep.ac.cn
rect http://www.ibm.com 140,20 280,60
poly http://www.microsoft.com 180,80200,140
circle http://www.yahoo.com 80,140 80,100
图象地图需要一个特殊的处理程序 imagemap,imagemap放在/cgi-bin 中。在html 文件中引用图象地图的 格式为:

可以看出这是一个包含图象元素的链接指针元素。图象元素指明用于图象地图的图象的url,并用Ismap属性说明。需要说明的是链接指针中的href属性,它由两部分组成,第一部分是/cgi-bin/imagemap ,它指出用哪个程序来处理图象地图,它必须原样写入,第二部分才是图形地图的说明文件mymap.map。/cgi-bin/imagemap/mymap.map绝不表示mymap.map在/cgi-bin/imagemap目录中。在netscape扩展中,图象地图可以用一种比较简化的方式来表示,这就是客户端图象地图。用户端地图可以将图象地图的说明文件写在html文件中,而且不需要另外的程序来处理。这就使html作者可以用同别的元素相一致的写法来写图象地图。 客户端图象地图还有一个优点,当鼠标指向图象地图的不同区域时,浏览器能显示出各个区域所指向的url。但目前只有netscape2.0以上版本才支持这一扩展。
用户端图象地图的格式为:

src="/url" 指定用作图象地图的图象
usemap属性指明这是客户端图象地图
"#mymap"是图象文件说明部分的标记名,浏览器寻找名字为mymap的
href="/url",表示该区域所指向的 资源的url,也可以是nohref,表示在该区域鼠标点取无效。客户端图象地图各个区域可以重叠,重叠区以先说明的条目为准,下面是一个例子:
源程序:
此行是注释
href="page.html"
coords="140,20,280,60">
href="/image.html"
coords="100,100,180,80,200,140">
href="/nes.html"
coords="80,100,60>
第四章: 版面风格控制
§4.1 字体大小
html有七种字号,1号最小,7号最大。缺省字号为3,可以用设置缺省字号。
设置文本的字号有两种办法,一种是设置绝对字号,;另一种是设置文本的相对字号;。用第二种方法时“+”号表示字体变大,“-”号表示字体变小。
字体大小 字体大小
字体大小 字体大小
字体大小 字体大小
字体大小 字体大小
字体大小 字体大小
字体大小 字体大小
字体大小 字体大小
§4.1.2 字体风格
字体风格分为物理风格和逻辑风格。
物理风格直接指定字体,物理风格的字体有:黑体,斜体,下划线,打字机体。
逻辑风格指定文本的作用:强调特别强调 源代码例子 键盘输入变量 定义引用 较小较大 上标下标
物理风格(Physical Style):
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
逻辑风格(Logical Style):
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好!
今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
§4.1.3 字体颜色
字体的颜色用...指定
xxxxxx可以是6位16进数,分别指定红、绿、兰的值,也可以是black,olive,teal,red,blue,maroon,navy,gray,lime,fudrsia,white,green,purple,sliver,yellow,aqua 之一。
字体风格
字体风格
§4.1.4 闪烁
使文本闪烁,闪烁频率为1秒钟一次。
§4.2 标尺线(hr)
标尺线,一般用于分隔同一文体的不同部分。在窗口中划一条标尺线非常简单,只要写一个
即可。标尺线的宽度用指定,width=#>指n是线宽,单位是象素。例:
。
、
。
标尺线的位置用
指定。
#是left成right之一,left表示左端与左边界对齐,right是右端与右边界对齐,缺省,标尺线出现在窗口正中。
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
#=rrggbb 16 进制 RGB 数码,或者是下列预定义色彩:
Black, Olive, Teal,Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White,Green, Purple, Silver, Yellow, Aqua
4.3 行间图象
行向图象使你的页面更加漂亮,但是行向图象会导致网络通讯量急剧增大。使访问时间延长。所以在主页(homepage),不宜采用很大的图象。如果确实需要一些大图象,最好在主页中用一个缩小的图象指向原图,并标明该图的大小。这样读者可以快速地访问您的主页,自己选择看还是不看那些图象。
图象的基本格式为:
或
image-url是图象文件的url。目前,大部分浏览器支持 .gif 和 .xbm文件,netscape还支持jpeg文件。alt属性告诉不支持图象的浏览器用text代替该图。
4.3.2 图象与文本的对齐方式
图象在窗口中会占据一块空间,在图象的左右可能会有空白,不加说明时,浏览器将随后的文本显示在这些空白中,显示的位置由align属性指定。
My face!
My Face!
My face!
My Face!
My face!
My Face!
4.3.3 图象在页面中的对齐方式/布局(Floating Image)
My Face!
It isalways
smiling.
Hahaha....
My Face!
It is always
smiling.
Hahaha....
My Face!
It is always
smiling.
Hahaha....
My Face!
It is always
smiling.
Hahaha....
My Face!
It is always
smiling.
Hahaha....
#=value
My Face!
It is always
smiling.
Hahaha....
My Face!
It is always
smiling.
Hahaha....
4.4 分行
和禁止分行
表示在此处分行,....叫通知浏览器,其中的内容在一行内显示,若一行内显示不了,则超出部分被裁剪掉。
clear属性标明下一行的情况,如clear=left,表示下一行从左边界处开始。#可以是left,right,all之一。例:
§4.5 背影和文本颜色
窗口背景可以用下列方法指定
前者指定填充背景的图象,如果图象的大小小于窗口大小,则把背景图象重复,直到填满窗口区域。
后者指定的是16进制的红、绿、兰分量。
bgcolor 背景颜色
Text 文本颜色
Link 链接指针颜色
alinik 活动的链接指针颜色
vlinik 已访问过的链接指针颜色
例
大红背景色.
注意,此时体元素必须写完整,即用
结束
4.6 转义字符与特殊字符
html中< , >,&有特殊含义,(前两个字符用于标注,&用于转义),不能直接使用。使用这三个字符时,应使用它们的转义序列。
& 的转义序列为 &s 或 & #38;
< 的转义序列为 ≪ & #60;
> 的转义序列为 > & #62;
前者为字符转义序列,后者为数字转义序列。
例如 & Lt; font &Lgt;显示为若直接写为则被认为是一个标注。
需要说明的是:
a. 转义序列各字符间不能有空格;
b. 转义序列必须以“;”结束;
c. 单独的&不被认为是转义开始。
如“ & Lt; ”被解释为 “& Lt;”而不是<“ 62 ;”被解释为 “& # 60;”而不是>另一个需要转义的字符是引号,它的转义序列为"""或""",例如。html使用的字符集是ISO &859 Larin-1字符集,该字符集中有许多标准键盘上无法输入的字符。对这些特殊字符只能使用转义序列。
主题:Re:网页制作HTML代码全攻略
第五章:表格(Table)
§5.1 表格的基本形式
一个表由
结束,表的内容由,和 | 定义。 |
说明表的一个行,表有多少行就有多少个
;说明表的列数和相应栏目的名称,有多少个栏就有多少个 | ; | 则填充由 |
和组成的表格。是否用表格线分开为部分内容用border属性说明,下面是一个有表格线和一个元表格线的表及其输出。
带边框的表格:
|
Food | Drink | Sweet |
---|
A | B | C |
Food Drink Sweet
A B C
不带边框的表格:
Food Drink Sweet
A B C
5.2 有通栏的表
1、有横向通栏的表用属性说明:colspan表示横向栏距,#代表通栏占据的网格数,它是一个小于表的横向网格数的整数。
跨多列的表元
|
---|
Morning Menu
Food | Drink | Sweet |
---|
A | B | C |
Morning Menu
Food Drink Sweet
A B C
2、有纵向通栏的表用rowspan=#属性说明:rowspan表示纵向栏距,#表示通栏占据的网格数,应小于纵向网络数。需要说明的是有纵向通栏的表,每一行必须用
明确给出一横向栏目结束,这是和表的基本形式不同的。
跨多行的表元
Morning Menu |
Food | A |
Drink | B |
Sweet | C |
Morning Menu Food A
Drink B
Sweet C
5.3 表格属性
1、表的大小用width=#和height=#属性说明。前者为表宽,后者为表高,#是以象素为单位的整数。
表格尺寸设置:
Food Drink Sweet
A B C
2、边框宽度由border=#说明,#为宽度值,单位是象素。
边框尺寸设置:
Food Drink Sweet
A B C
3、表格间距即划分表格的线的粗细用cellspacing=#表示,#的单位是象素,下面的例子将表格间距定义为10个象素,它看起来象用很粗的线划分的表格。
表元间隙设置:
Food Drink Sweet
A B C
5.4 表中文本的输出
1、文本与表框的距离用cellpadding=#说明。下面的例子使表的内容与表框离开10个象素。
表元内部空白设置:
Food Drink Sweet
A B C
2、表格的后度大于其中的文本后度时,文本在其中的输出位置用align=#说明。#是 left,center和right三者之一,分别表示左对齐,居中和右对齐,align属性可修饰
,和 | 标注。
|
#=left, center, right
|
Food Drink Sweet
A B C
3、表格的高度大于其中文本的高度时,可以用valign=#说明文本在其中的位置。#是top,middle,bottom,baseline四者之一。分别表示上对齐,文本中线与表格中线对齐, 下对齐,文本基线与表格中线对齐,特别注意的是baseine对齐方式,它使得文本出现在网格的上方而不是相象中的下半部。同样,valign可以修饰 |
,, | 中的任何一个。
|
#=top, middle, bottom, baseline
|
Food | Drink |
Sweet | Other |
A
B
C
D
Food Drink SweetOther
A B C D
5.5 浮动表格
所谓浮动表格是指表与文件中重中内容对齐时,若在现在位置上不能满足其对齐方式,表格含上下移动,即“挤开”一些内容,直到满足其对齐要求。
浮动属性一般由align=left或right指定。
下面的例子也可以看出,cllign=left时把字符串“挤到”了表的右边。当右边空间不够时,该字符串会显示在表的下在边,看起来象是表“浮”到了字符串上。
|
Food | Drink | Sweet |
---|
A | B | C |
Myfavorites...
cookies,chocolates, and more.
Food Drink Sweet
A B C
My favorites...
cookies,chocolates, and more.
Food Drink Sweet
A B C
5.6 表格颜色
表格的颜色用bgcolor=#指定。
#是16进制的6位数,格式为rrggbb,分别表示红、绿、兰三色的分量。或者是16种已定义好的颜色名称,参见文本颜色。
Food
Drink
AB |
Food Drink
A B
第六章:帧结构 Frame
6 .1 帧结构的基本格式
帧结构将流览器的窗口分成多个区域,每个区域可以单独显示一个html文件,各个区域也可相关连地显示某一个内容,比如可以将索引放在一个区域,文件内容显示在另一个区域。
帧结构的基本结构如下
...
...
...中的内容显示在不支持帧结构的浏览器窗口中,因而这里指向一个普通版本的html文件,以便使用不支持帧结构浏览器的用户阅读。
帧结构由