HTML插入图片与<IMG>标签


关键词

HTML插入图片 img标签

摘要

介绍HTML中使用<IMG>标签来插入图片,包括图片的src属性、height与width属性、alt属性等。顺便还提到了相对路径与绝对路径。

在HTML中已经有了各种字体、颜色、样式之后,今天洪哥带大家一起看看怎么在HTML中插入图片。
我们之前提到过,HTML文档本身是纯文本的,所以不可能像Word一样,直接把文字和图片都保存在同一个文件(.doc文件)里面。在讲HTML中怎么 插入图片之前,我们先谈谈HTML中有哪些外面元素。这里说的图片,肯定就是一种外面的元素了。还有什么呢?Flash算不算,当然算。还有视频对不对? 当然,除了这些我们看得见的元素之外,还有脚本、层叠样式表等我们看不到的元素,这些都是在外部的(这话表达得不是很太好,应该这样讲,这里列出的元素都 可以放在外面,但脚本和样式表其实也可以放在HTML文档里面)。

<html>
<head>
<title>洪哥的HTML页面有图片</title>
</head>
<body>
<font size="7">有图片的HTML文档</font>
<img src="sample.jpg" width="200" height="200" alt="示例图片" />
</body>
</html>
将文件保存为"honge4.html",并且去找一张jpg格式的图片过来,放到跟hong4.html同一目录,并且命名为sample.jpg。做完这些后,打开honge4.html页面,看看是不是图片已经被插入到网页中了?

然后来解释一下这段代码。<font>标签是设置字体样式的,我们前面已经学习了,所谓“学以致用”,我们这里就拿来用一下。而真正插入图片的标签,我想大家已经看到了,那就是<img>标签。

<img>标签,它是image图片这个单词的简写。顾名思义,那就插入图片了。其中src属性,是source的简写,意思是“来源”。那 么它表示的意思就是图片的路径了。之前洪哥让大家把sample.jpg放到跟hong4.html同一目录,而且设置src="sample.jpg" 时,这里的路径被省略掉了,只有文件名。这是因为洪哥使用的是相对路径,什么是相对路径呢,这样来说吧,honge4.html也在当前目 录,sample.jpg也在当前目录,两个的目录相互抵销了。于是honge4.html在引用sample.jpg图片时,直接就用 sample.jpg的文件名即可了。另外,除了相对路径,那就还有绝对路径了,关于相对路径和绝对路径的问题,我们后面单独写一篇文章来讲。

width和height是我们以后要经常遇到的两个属性,一个表示宽度,一个表示高度。那图片的宽度就表示水平的长度,而高度就表示垂直的长度了。这里 的单位是像素,即px,玩Photoshop的朋友肯定很熟。如果不指定图片的宽度和高度,则图片会使用自己的实际宽度和高度显示在网页上,这样可能会让 网页看起来很丑。不过,如果这里指定的高度和宽度与图片的真实宽高不成比例的话,那图片又会显示扭曲变形,这些都得注意。

alt属性一般人很少用,它的作用是如果图片打不开(原因可能是不存在这个图片,或者其它的),那么将在图片的位置上显示alt属性指定的几个字。听起来 好像没有什么用哈,但实际做SEO(搜索引擎优化)的人,很喜欢搞这个。所说百度图片上进行搜索时,百度都是根据alt属性来判断图片的内容的。

好了,关于图片就说这么多。有一点扩展的,大家可以自己去试试。那就是用图片做超链接!我们已经学习过图片怎么插入了,也学习过超链接是怎么回事了,还讲过标签与标签之间是可以嵌套的,那聪明的你应该知道怎么做了吗?

 

要饭二维码

洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权

本文属于“洪哥笔记”原创文章,转载请注明来源地址:HTML插入图片与<IMG>标签:http://www.splaybow.com/post/html-img.html

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D

« HTML字体样式 HTML标题(<H1>~<H6>)标签 »