HTML入门教程(四)

秒速五厘米 2022-08-26 04:53 186阅读 0赞

四、图像标志

1.<img>  
  
    2.<hr>

再简单朴素的网页如果只有文字而没有图像的话将失去许多活力，图像在网页制作中是非常重要的一个方面，Html语言也专门提供了<img>标志来处理图像的输出。  
  
  
  
1.<img>  
  
    <img>标志并不是真正地把图像给加入到Html文档中，而是将标志对的 src 属性赋值，这个值是图形文件的文件名，当然包括路径，这个路径可以是 相对路径 ，也可以是 网址 。实际上就是通过路径将图形文件嵌入到您的文档中。您可能并不知道什么是相对路径，我现在就来讲一讲相对路径。所谓相对路径是指您所要链接或嵌入到当前Html文档的文件与当前文件的相对位置所形成的路径。假如您的Html文件与图形文件(文件名假设是logo.gif)在同一个目录下，则可以将代码写成<img   
src="logo.gif">；假如您的图形文件放在当前的Html文档所在目录的一个子目录(子目录名假设是images)下，则代码应为<img   
src="images/logo.gif">；假如您的图形文件放在当前的Html文档所在目录的上层目录(目录名假设是home)下，则相对路径就必须是 准网址 了，即用“ ../ ”表示您的网站，然后在后边紧跟文件在您的网站中的路径，假设home是您的网站下的一个目录，则代码应为<img   
src="../home/logo.gif">，若home是您的网站下的目录king下边的一个子目录，则代码应该变为<img src="../king/home/logo.gif">了。现在您对相对路径应该有所了解了吧！  
  
    必须强调一下，src属性在<img>标志中是 必须赋值 的，是标志中不可缺少的一部分。除此之外，<img>标志还有 alt 、 align 、 border 、 width 和 height 属性。align是图像的对齐方式，在前边的教程中已经讲了很多了，这里就不再提了。border属性是图像的边框，可以取 大于或者等于0的整数 ，默认单位是 像素 。width和Height属性是图像的 宽 和 高 ，默认单位也是象素。alt属性是当鼠标移动到图像上时显示的 文本 。  
  
  
  
2.<hr>  
  
    <hr>标志是在Html文档中加入一条水平线，它可以直接使用，具有 size 、 color 、 width 和 noshade 属性。size是设置水平线的 厚度 ，而width是设定水平线的 宽度 ，默认单位是像素。想必大家对color属性已经很熟悉了，在此就不再用多讲。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条 没有阴影 的水平线(不加入此属性水平线将有阴影)。  
  
    下面是本教程的一个综合例子。  
  
  
  
例5 图像标志举例  
  
<html>  
  
<head>  
  
<title>图像标志的综合示例</title>  
  
</head>  
  
  
  
<body>  
  
<p align="center"><a href="http://www.ad8.com.cn"   
target="\_blank"><img src="/images/20220824/3f5e43522746421d8d08228d303d2a9f.png"   
alt="网页制作" WIDTH="468" HEIGHT="60"   
border="0"></a></p>  
  
  
  
<hr width="600" size="1" color="\#0000FF">  
  
</body>  
  
</html>  
  
  
  
    本例在浏览其中的显示结果如下：

![网页制作][20088813252679677801.gif]

[20088813252679677801.gif]: /images/20220824/3f5e43522746421d8d08228d303d2a9f.png