软件下载

html背景图片怎么添加(怎样在网页中加入图片)

软件下载 投稿 2022-05-31 11:21:10 浏览

1、HTML中图片用img标签引入,img是image的缩写。img标签有三个重要属性需要掌握:src、alt和title,其中src是图片的路径,alt用于向探索引擎描述图片,title用于向用户描述图片。img标签的语法是:

<img src=” ” alt=” ” title=” ” />

从下面的例子中可以看到,当鼠标放在图片上时,图片上出现的文字就是title属性里的内容,而alt的内容是看不见的。

HTML入门(8)怎样在网页中加入图片

 

当我们把src属性中的地址删掉,无法显示图片的时候,原来图片的位置上就会出现alt属性的内容了,如下图:

HTML入门(8)怎样在网页中加入图片

 

2、绝对路径

HTML入门(8)怎样在网页中加入图片

 

现在我的电脑上面有如下图所示的文件系统,绝对路径就是在计算机或服务器上的完整路径,无论在哪个网页上引用,路径都是一样的。代码和效果如下:

<img src="D:\study\computer\exam\pic2.jpg" alt="pic2.jpg" title="pic2">

注意这里的图片名pic2.jpg包括扩展名。

HTML入门(8)怎样在网页中加入图片

 

3、相对路径

相对路径是指相对于当前页面的位置,这句话不好理解,我们通过4种情况来说明。

HTML入门(8)怎样在网页中加入图片

 

(1)网页和图片在同一个文件夹里,就是这里的page3和pic1的关系或者page2和pic2的关系。这种情况直接引用图片的名称就可以。

<img src="pic1.jpg" alt="pic1.jpg" title="pic1">

HTML入门(8)怎样在网页中加入图片

 

(2)图片在与网页同级的文件夹里,就是这里的page2和pic1的关系,这里要用到pic1所在的文件夹名。

<img src="img\pic1.jpg" alt="pic1" title="pic1">

HTML入门(8)怎样在网页中加入图片

 

(3)图片在网页的上级文件夹里,就像page1和pic2的关系,引用代码如下:

<img src="..\pic2.jpg" alt="pic2" title="pic2">

注意这段代码里的“..\”表示的是上一级文件夹。谁的上一级文件夹?当前网页的所在文件夹的上一级。所以"..\pic2.jpg"的意思是“本网页的上一级文件夹里的pic2.jpg图片”。

HTML入门(8)怎样在网页中加入图片

 

(4)图片和网页分别在两个同级的文件夹中,就像此处的page1和pic1的关系,引用的代码和显示效果如下:

<img src="..\img\pic1.jpg" alt="pic1" title="pic1">

HTML入门(8)怎样在网页中加入图片

 

(5)会不会有其它的情况?

理论上说会,实际上谁把网页和相应的图片放在那么远的地方呢?

 

4、常见的图片格式

(1)常见的图片格式有两类:位图和矢量图

位图的常用格式有.jpg、.jpeg、.png、.gif,矢量图的常用格式为.swf,它们的特点如下图所示。

HTML入门(8)怎样在网页中加入图片

 

(2)以上三种位图的引用代码和显示效果如下:

<body>

<img src="abcjpg.jpg" alt="abcjpg" title="abcjpg">

<img src="abcgif.gif" alt="abcgif" title="abcgif"><br>

<img src="abcpng.png" alt="abcpng" title="abcpng">

</body>

注意:这段代码所用图片与网页在同一个文件夹内。

此网页的背景设置成了蓝色,大家可以清楚地看到,最后一张.png格式的图片是透明的。

HTML入门(8)怎样在网页中加入图片

「真诚赞赏,手留余香」

求资源网

真诚赞赏,手留余香

使用微信扫描二维码完成支付

继续浏览有关html的文章
发表评论
留言与评论(共有 0 条评论)
   
验证码:
版权声明

求资源网所发布的一切破解补丁,软件,以及其他分析文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途。
否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。