现在的位置: 网页制作教程HTML教程 >正文
HTML语言

如何在网页中插入图片-HTML教程第十讲

发表于2014/9/9 HTML教程 0条评论 ⁄ 热度 3,416℃

网页上必备的元件除了文字之外,图片也是不可少的元素。一张运用得当的图片,能给您的网页增色不少。今天,我们就谈谈如何在网页中插入图片。

图片在网页中的运用

网页中插入图片归纳起来主要有以下方式:img标签插入图片,background背景图片。

img标签插入图片

在 HTML 中,图像由 <img> HTML标签定义。

请参考以下实例:

<img src="http://www.webym.net/images/baidusousuo.png" />

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

以上实例就是插入了一张位于 www.webym.net 的 images 目录中名为baidusousuo.png的图片。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

替换文本属性(Alt)

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="logo.gif" alt="LOGO图片">

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

alt属性在seo角度上是一个非常好的图片优化方式,所以建议将网页中的图片写上alt属性。

width和height属性

width属性是定义图片宽度,height属性是定义图片的高度。

这两个属性均可省略不写,省略的话图片将以原始大小显示。

<img src="logo.gif" alt="LOGO图片" width="30px" height="20px">

background背景图片

这种方式是将图片以背景的方式在网页中显示。

为网页规定一幅背景图像:

<html>  
  <body background="colour.jpg">  
    <h1>Hello world!</h1>  
    <p><a href="http://www.webym.net/">访问源码站!</a></p>  
  </body>  
</html>

background 属性规定规定文档的背景图像。

由于兼容性的问题,目前主流的做法已经不在body里使用background属性了,而是使用 CSS 代替。CSS图片扩展阅读:CSS控制图片水平垂直居中

CSS 语法:

<body style="background-image:url(bgimage.jpg)">

在以后的实践中,你就会发现图片的应用非常灵活,使用方式也是多种多样。

  • 暂无评论