《HTML教程》04章 页面的链接、背景、背景图


网页上所能看到的内容全部是<BODY>和</BODY>只见的内容,BODY元素可以设置页面的文字颜色、背景颜色、背景图像、链接的颜色。而链接的颜色又包括未访问过的颜色、访问过的颜色、鼠标定位时的颜色。

BODY元素和A元素的语法
<body
     text       = "文字颜色"
     bgcolor    = "背景颜色"
     background = "背景图像"
     link       = "未访问过的链接的颜色"
     vlink      = "访问过的链接的颜色"
     alink      = "鼠标定位时的颜色"
>
<A
     href       = "要链接的url地址"
     name       = "定位用的名字"
     target     = "窗口名或框架名"
     tabindex   = "TAB键的索引"
     accesskey  = "热键代码"
>

链接到另一网页

设置A元素的href属性内容便可以实现,注意url可以包含路径,当url没有文件名时,默认的文件名为index,后缀名为htm,如果没有index.htm,则查找index.html、index.asp、index.cgi、index.php,当然,这要看服务器所支持的环境来决定。

当href所指向的文件名不是网页的后缀时,链接后将自动启动相应的软件。例如后缀为.doc时,则启动word,为.zip时则下载软件,为.pdf时起动adobe阅读器。

当href所指向的URL以mailto:开头时,则自动转向outlook发送email,为tel:则拨打电话(i-mode方式常用功能)。参看s04_01.htm

<!--s04_01.htm 中文网页-->
<HTML>
<HEAD>
<TITLE>测试链接</TITLE>
</HEAD>
<BODY>
这是普通链接:<A href="s04_2.htm">s04_2.htm</A><br>
这是在新窗口打开链接:<A href="s04_2.htm" target="_blank">s04_2.htm</A><br>
这是Email链接:<A href="mailto:laner_ni@hotmail.com">laner_ni@hotmail.com</A>
</BODY>
</HTML>
定位到网页的某一位置

A元素的name属性可以标记页面的位置,这对于长的页面非常有用。定位时只要将href指向的url后面加上#name便可。参看s04_05.htms04_06.htm

<!--s04_05.htm 中文网页-->
<HTML>
<HEAD>
<TITLE>测试链接</TITLE>
</HEAD>
<BODY>
<a name="la">A位置:</a>  s04_05.htm
连接到本页面的B位置:<A href="#lb">本页面的B位置</A>
连接到s04_06页面的B位置:<A href="s04_06.htm#lb">s04_06页面的B位置
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>
p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>0<br>1<br>2<br>
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>
p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>0<br>1<br>2<br>
<a name="lb">B位置</a>
连接到本页面的A位置:<A href="#la">本页面的A位置</A>
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>
p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>0<br>1<br>2<br>
</BODY>
</HTML>
<!--s04_06.htm 中文网页-->
<HTML>
<HEAD>
<TITLE>测试链接</TITLE>
</HEAD>
<BODY>
<a name="la">A位置:</a>  s04_06.htm
连接到本页面的B位置:<A href="#lb">本页面的B位置</A>
连接到s04_05页面的B位置:<A href="s04_05.htm#lb">s04_05页面的B位置
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>
p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>0<br>1<br>2<br>
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>
p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>0<br>1<br>2<br>
<a name="lb">B位置</a>
连接到本页面的A位置:<A href="#la">本页面的A位置</A>
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>
p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>0<br>1<br>2<br>
</BODY>
</HTML>

设置颜色和背景

用BODY元素的text属性、bgcolor属性可以设置页面的文字颜色、背景颜色。但当用background属性设置了背景图像后背景颜色有可能被图像的背景遮盖(如果图像有背景)。

如果浏览器时IE的话,可以用BODY元素的bgproperties设置为fixed使背景图像不随文字的滚动而滚动。将s04_03缩小后滚动一下看看效果。参看s04_02.htms04_03.htm

<!--s04_02.htm 中文网页-->
<HTML>
<HEAD>
<TITLE>测试链接</TITLE>
</HEAD>
<BODY text="red" bgcolor="black">
文字颜色为红色<br>
背景颜色为黑色<br>
</BODY>
</HTML>
<!--s04_03.htm 中文网页-->
<HTML>
<HEAD>
<TITLE>测试链接</TITLE>
</HEAD>
<BODY text="red" bgcolor="black" background="i04_03.gif" bgproperties="fixed">
文字颜色为红色<br>
背景颜色为黑色<br>
文字颜色为红色<br>
背景颜色为黑色<br>
文字颜色为红色<br>
背景颜色为黑色<br>
文字颜色为红色<br>
背景颜色为黑色<br>
文字颜色为红色<br>
背景颜色为黑色<br>
文字颜色为红色<br>
背景颜色为黑色<br>
文字颜色为红色<br>
背景颜色为黑色<br>
文字颜色为红色<br>
背景颜色为黑色<br>
文字颜色为红色<br>
背景颜色为黑色<br>
文字颜色为红色<br>
背景颜色为黑色<br>
文字颜色为红色<br>
背景颜色为黑色<br>
</BODY>
</HTML>

设置链接的颜色

用BODY元素的link属性、vlink属性和alink属性可以分别设置链接的未访问过的颜色、访问过的颜色、鼠标定位时的颜色。参看s04_04.htm

<!--s04_04.htm 中文网页-->
<HTML>
<HEAD link="yellow" vlink="red" alink="green">
<TITLE>测试链接</TITLE>
</HEAD>
<BODY>
未访问过时是黄色:<A href="s04_2.htm">s04_2.htm</A><br>
访问过后是红色:<A href="s04_2.htm" target="_blank">s04_2.htm</A><br>
按下鼠标时是绿色:<A href="mailto:laner_ni@hotmail.com">laner_ni@hotmail.com</A>
</BODY>
</HTML>