HTML插入图片如何理解呢？
时间:2014-01-27 15:41 来源: 我爱IT技术网 作者:山风
HTML插入图片意思是说在HTML标记语言中给样式加上图片或在文字前加上图片标记。具体加图片的方式我们可以用下面的一段代码来演示。
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML插入图片</title> </head> <body> <img src="file:///C|/Users/Administrator/Desktop/1.jpg" alt="HTML插入图片" /> </body> </html> |
说明这种方式是插入绝对路径，这个绝对路径由于我是直接以我的电脑来为例子，所以展示的桌面的一张图片地址，实际上在网站上我们插入图片的时候，我们往往会把图片所在网站上所放置的绝对路径告诉这个src属性。其中的alt属性是对图片的描述。当然我们也可以采用相对路径。
<img src="../images /1.jpg" alt="HTML插入图片" />（这里的两点是跳到html代码所在的上一层，目录images文件夹里找到1.jpg这个图片）。那实际上我们在制作网站前台的时候，我们一般都不是这样去使用图片的，我们一般会把图片放到一个images文件夹下，而这个images文件夹和css文件夹也就是存放CSS的文件夹，然后我们通过这个CSS来引用这个图片，css文件夹和images文件夹是在同一级目录。所以我们会采用以下的相对路径来引用图片。HTML代码如下：
|
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML插入图片</title> </head> <body> <div class="imgtest"> </div> </body> </html> |
CSS代码如下：
|
@charset "utf-8"; /* CSS Document */ .imgtest{ background-image:url("../images/1.jpg") } |
然后我们在HTML代码中来引用这个css文件，这样的话也就是把图片分离到CSS中，而CSS存放在css文件夹，图片存放在images文件夹，且css文件夹和images文件夹同一级目录。这样的话就能够将图片、CSS样式以及HTML代码合理的分离开来了。而引用CSS的时候，我们只需要利用<link>标签即可。
而这个<link>标签我们通常放到<head>和</head>之间，其代码如下：
|
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML插入图片</title> <link type="text/css" rel="stylesheet" href="css/csstest.css"> </head> |
本文来源 我爱IT技术网 http://www.52ij.com/jishu/3767.html 转载请保留链接。
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-