HTML链接和图像

 2013年6月7日 |  0 条评论 |   583

如何做链接?
做链接也是通过元素(element)实现的。做链接只需一个元素和一个属性就行了。下面是一个例子,它是一个指向ifen8.com的链接:

例1:
<a href=”http://www.ifen8.com/”>这是一个指向ifen8.com的链接</a>

该例在浏览器中将显示如下:

这是一个指向ifen8.com的链接
元素a代表“链接(anchor)”;属性href代表“超文本引用(hypertext reference)”,它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。

在上例中,属性href的值为“http://www.ifen8.com”,这是ifen8.com网站的完整地址,也被称作URL(统一资源定位符)。注意,在URL里必须包含“http://”。“这是一个指向ifen8.com的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上</a>。

如何在同一网站的网页之间添加相互链接?
如果你要在同一网站的不同网页间做链接,那就不必拼写出网页的完整URL。举个例子,假如你有两个网页(比如说page1.htm和page2.htm),而且它们被存放在同一个文件夹中,那么你在做链接的时候,只要写出文件名就行了。这样,page1.htm到page2.htm的链接将如下所示:

例2:
<a href=”page2.htm”>点击这里转到第2页</a>

如果page2.htm被放在下一级文件夹中(比如“subfolder”),那么链接将是这样:
点击这里转到第2页

例3:
<a href=”subfolder/page2.htm”>点击这里转到第2页</a>

反过来,从page2.htm(在下级文件夹中)到page1.htm的链接将是这样:
点击这里转到第2页

例4:
<a href=”../page1.htm”>转到第1页</a>

“../”代表当前位置(即该链接所在文件所处的文件夹)的上一级文件夹。同理,当前位置的上上级文件夹可用“../../”表示。

明白其中的规则了吗?当然,如果给出完整URL也行。

如果要在一个网页内做链接怎么办呢?
你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录,在其中列出指向下面各章的链接。这可以通过使用id属性和“#”符号来实现。

用id属性标出要被指向的元素。例如:

<h1 id=”heading1″>标题1</h1>

然后通过在链接中利用“#”来指向那个元素。 “#”后面必须紧跟着一个id属性的值,表明链接指向该id属性被定义的地方。例如:
<a href=”#heading1″>转到标题1</a>

来看一个例子就明白了:

例5:
<html>
<head>
</head>
<body>
<p><a href=”#heading1″>转到标题1</a></p>
<p><a href=”#heading2″>转到标题2</a></p>
<h1 id=”heading1″>标题1</h1>
<p>一些文字。。。。</p>
<h1 id=”heading2″>标题2</h1>
<p>一些文字。。。。</p>
</body>
</html>

该例在浏览器中将显示如下(你可以试试看点击这两个链接):

转到标题1

转到标题2

标题1
一些文字。。。

标题2
一些文字。。。

(注:id属性必须以字母开头)

除了网页,链接还能指向什么?
你还可以为e-mail地址做链接,方法跟为网页做链接差不多:

例6:

<a href=mailto:soft@ifen8.com>给soft@ifen8.com发电子邮件</a>

该例在浏览器中将显示如下:

给soft@ifen8.com发电子邮件

与指向网页的链接的唯一区别在于:指向e-mail地址的链接必须以mailto:开头,然后紧接着写e-mail地址。当点击这个链接的时候,缺省的e-mail程序将新建一封邮件,其中的收件人地址为链接中指定的e-mail地址。注意:这一功能仅当你的计算机安装了e-mail程序后才起作用。试试看吧!

有其他我需要知道的属性吗?
创建链接总要用到href属性。另外,你也可以在链接上使用title属性:

例7:
<a href=”http://ifen8.com” title=”上ifen8.com网站学习网站制作教程”>网站制作教程</a>

该例在浏览器中将显示如下:

网站制作教程

title属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上(别点击它)时,提示文字“上ifen8.com网站学习HTML”便会出现。

 

假如能把影歌两栖传奇人物David Hasselhoff的图像放到自己的网页上,那就太好了。

这貌似有点难度。。。
也许是有点难度,但其实也不难,一个元素就可以搞定:

例1:
<img src=”david.jpg” alt=”David” />

该例在浏览器中将显示如下:
你要做的只是:首先告诉浏览器你要插入一张图片(img),接着给出这张图片的存放位置(src,代表“来源(source)”)就行了。准备好图片了吗?

注意:img元素没有尾标签,它与<br />一样,不与特定的文本相关。

“david.jpg”是要插入的图片的文件名,其中的“jpg”表明图片类型。就像后缀名“htm”代表文件是HTML文档一样,后缀名“jpg”表明文件是一个图片文件。有三种类型的图片文件可被插入网页中:

GIF(Graphics Interchange Format,图形交换格式)
JPG或JPEG(Joint Photographic Experts Group,联合图像专家组)
PNG(Portable Network Graphics,可移植网络图像)
一般来说,GIP是图形和图画的最佳格式,而JPEG格式则更适合存放照片。原因有二:第一,GIF格式只支持256色,而JPEG格式支持数百万色;第二,GIF格式擅长于压缩简单图像,而JPEG则更适于压缩复杂图像。压缩率越高,图像文件就越小,页面加载速度就越快。也许你也有同感,包含太多无用内容的网页是很不受欢迎的。

过去,GIF和JPEG是两大主要的图像格式,但是最近PNG格式也开始流行起来(主要是在取代GIF格式)。PNG格式拥有许多JPEG与GIF的共同优点:支持数百万色,且压缩效果好。

图片从何处获得?
要制作自己的图像,需要有一个图像编辑程序。图像编辑程序是从事美观的网页制作所需的重要工具之一。

不幸的是Windows或其他操作系统都没有自带比较好的图片编辑程序。所以,也许你得买一个Paint Shop Pro、PhotoShop或者Macromedia Fireworks,这三个是目前市场上最好的图像编辑软件。

不过还是那句话,完成本教程的学习不需要购买任何昂贵的软件。你可以先下载一个Irfan View用,这是一个很不错的图像编辑软件。因为是自由软件,所以你可以免费使用它。

或者,你也可以从我们HTML.net网站下载一些图片来用,但请注意不要违反有关版权规定。具体下载方法如下:

右击网页中的图像。
在菜单中选择“图片另存为…”。
选择图片的存放位置,然后点击“保存”。
按此方法将下面的图片保存到你的HTML文档所在目录。(注意:将它保存为PNG文件,文件名为logo.png):

 

现在你可以把这个图片插入到自己的网页里。自己试试看。

关于图像就这么多吗?
关于图像,还有一些是需要介绍的。

首先,你可以轻易地把存放在其他文件夹、甚至其他网站的的图片插入到自己的网页中。

例2:

<img src=”Upload/images/20000-20999/20846/e91b3-small.jpg”>
例3:

<img src=”/newsfile/4000-4999/4723/070926132670380.jpg”>
其次,图片也可以作为链接:

例4:

<a href=”http://www.ifen8.com”> <img src=”Upload/images/20000-20999/20846/e91b3-small.jpg”></a>
该例在浏览器中将显示如下(你可以试试看点击这个图像):

 

有什么属性需要了解的吗?
你总要用src属性来告诉浏览器图片的存放位置。除此以外,还有一些有用的属性。

alt属性用于给出图像的替用描述,假如由于某些原因该图像未能显示出来,浏览器就通过显示这个描述来替代图像。对于有视力障碍的人士来说,或者当网页打开很慢的时候,这一特性显得尤为重要。所以说,始终记得写alt属性:

例5:

<img src=”logo.gif” alt=”ifen8.com logo”>
有些浏览器会在鼠标光标移到图像上时显示出alt属性的文本。但是,在使用alt属性时请注意,该属性的目的是为图片提供一个替用描述,有视力障碍的人士会利用alt属性来听取有关图片的描述,所以不要将该属性用于显示文本提示——那是title属性的功能。

例7:
<img src=”logo.png” width=”141″ height=”32″>

该例在浏览器中将显示如下:

 

width和height属性分别用于设置图像的宽度和高度,以像素为单位。像素(pixel)是用于测量屏幕分辨率的计量单位。(目前大多数屏幕分辨率是1024×768或更高)。像素跟公分不同,像素是一种相对计量单位,一个像素的实际大小跟屏幕分辨率有关。在高分辨率显示模式下,差不多25个像素等于1公分;而在低分辨率显示模式下,同样的25个像素大约等于1.5公分。

如果你没有为图像设置宽度和高度,它将按原始尺寸显示。但是如果设置了的话,你就可以控制它的显示尺寸:

例8:
<img src=”logo.gif” width=”32″ height=”32″>

该例在浏览器中将显示如下:

 

但是值得注意的是,虽然可以通过设置高度和宽度来控制图片的显示尺寸,但图片文件的实际大小不会因此而发生变化。所以,不要指望通过设置图片的宽度和高度来减小图片文件的大小。相反,你应该在图像编辑程序中来调整图片文件的大小,以加快页面加载速度。

不过width和height属性还是有用的,它们可以在图片被完全下载之前令浏览器知道该用多大的空间来显示图片。这令浏览器可以更快显示出美观的页面。

关于图像就说这么多了。

例6:
<img src=”logo.gif” title=”上jzxue.com网站学习HTML”>

该例在浏览器中将显示如下:

 

如果你把鼠标光标停留在该图片上(别点击它),提示文字“上ifen8.com网站学习HTML”便会出现。

另外两个重要的属性是width和height:

文章字数统计:4285 | 百度已收录

  |  pc蛋蛋微信群/网站建设  


微部落博客编辑整理发布,如有侵犯您的版权,请提供相关版权证明,博主将立即删除。

上一篇:

下一篇:

·博客大全  博客网址之家  博客导航  来路IP首页展示!   ·免费收录  ·免费推广你的博客   114.vprol.com
如果本文对您有用就 打个赏吧微信 OR 支付宝 扫描二维码
pay_weixin     pay_weixin
金额随意,您的支持是我的动力~

草根站长,博客导航,博客大全,博客网站,增加网站流量
回复 取消

欢迎评论发言,灌水及广告评论将被定期删除!