您的位置：首页 > Web前端 > CSS

写给自己看的HTML、CSS、XHTML指南 七

2010-05-16 16:15 218 查看
经过前面六章的学习，相信大家对HTML有了一定的理解，并能够顺利编写出符合Web标准的简单网页了。

然而在前面的教程中，我们创建的网页只是包含了一些文本内容，并没有加入任何图片，当然，这并没有任何问题，并且早期的浏览器都是这样做的（不支持图片），但在今天，随着人们对互联网的要求越来越高，浏览器的功能越来越强，我们确实有必要在网站中加入各种图片，以丰富我们的网站，还可以让我们的网站显得更专业、更美观。

下面，我们来学习一个新的HTML元素吧，通过使用该元素，我们可以让用户对我们的网站竖起大拇指。

在了解<image>元素的构造之前，我们先来看一个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<html>

<head>

<title>这是第一个包含了图片的网页</title>

</head>

<body>

<h1>这是我们在HTML中加入的第一张图片</h1>

<img src="http://www.baidu.com/img/baidu_logo.gif" width="270" height="129">

<p>上面的图片是百度公司的标志</p>

</body>

</html>

把这段代码输入到记事本中，然后命名为：image.html，接着用浏览器运行以便查看结果。

成功啦！

祝贺你，成功在HTML中加入了图片。

那么，我们来详细了解一下<image>元素吧！

<image>元素负责在HTML中加入一张图片，当浏览器解析HTML标记时，遇到<image>元素，会去查找其src属性指定的値（在这例子中，我们使用的是相对URL，当然，我们也可以使用绝对URL，若忘记什么是相对定位和绝对定位，参考上一章），如果能找到该图片，则在该页面中加入此图片，若找不到图片，浏览器给出的提示也会不尽相同，在IE中，该图片所在的位置将显示X。

<image>的height和width属性负责告知浏览器该图片在页面中占用多大的空间，height属性则指定该图片的高度，width属性指定该图片的宽度。

等等，是不是<image>元素只有这几个属性？以后在网页中加入图片时，我一一指定它们就可以了？不，不是这样的，我们前面说过，一个元素可能包含一个或多个属性，我们只列举出相对重要的几个属性罢了，我们还可以通过在<image>元素中加入alt属性，告知浏览器这张图的含义。

我们再来创建一个网页：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<html>

<head>

<title>这是第一个包含了图片的网页</title>

</head>

<body>

<h1>这是我们在HTML中加入的第一张图片</h1>

<img src="http://www.baidu.com/img/baidu_logo.gif" width="270 height="129" alt="百度公司LOGO">

<p>上面的图片是百度公司的标志</p>

</body>

</html>

然后保存我们的工作结果，命名为：image2.html，接着并运行浏览器，仔细观察其与image.html的不同。

我们看到，在image.html中，由于没有指定图片的alt属性，因此在将鼠标移动到图片上时，没有任何说明信息。而在image2.html中，我们加入了alt属性，在把鼠标移动到图片上，会出现一段提示文字：百度公司LOGO。

alt属性对于使用视觉障碍人士是非常有帮助的，因为某些语音浏览器会发将alt属性的値读出来，我们的目标是编写符合Web标准的网页，为了养成良好的习惯，因此每次在需要加入图片时，指定其alt属性；但需要注意的是，有些图片的含义仅仅是用来让页面变得更加美观，因为，当我们遇到这种类型的图片时，只需要指定其alt属性为空。（像这样：alt=""）

对于图片，我们需要讨论的还有更多。

下一章将继续介绍图片。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航