html怎样在标签中显示图片,HTML-图片标签学习

这个账号呢我们要做一个计算机语言的基础教程，我们会尽量做到简单易懂，从最基础的入门开始，让想学习计算机语言的朋友可以入门到这个领域。

上一个章节我们讲了HTML的列表标签，这一节我们学习一下HTML的图片标签。当你打开一个网页，如果都是密密麻麻的文字，那阅读起来肯定是很累的，要是配上精美的配图或者是和网页新闻相关的照片，不仅美观易读，网页想要表达的内容也更加直观，容易理解，网友常说的“有图有真相”就表明了大家喜欢好看直观的网页。那么，我们怎么把一张图片素材显示到网页上呢，使用标签就可以实现。

img 元素向网页中嵌入一幅图像。请注意，从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。所以我们先来找一张图片(下图为郁金香照片)，这张图片的文件名称是eg_tulip.jpg：

标签有两个必需的属性，src和alt。src规定显示图像的 URL， src 属性是必需的，它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径；alt 属性也是一个必需的属性，它规定在图像无法显示时的替代文本。在下面的例子中，我们在页面中插入这幅郁金香照片：

源码( eg_tulip.jpg被放在和HTML文档同级目录下的img文件夹中)：

浏览器显示效果：

那么，alt 属性的显示效果是怎样的呢？如果无法显示图像，比如说网速太慢、src 属性中的错误、浏览器禁用图像等情况下浏览器将显示替代文本，就像这样：

接下来我们再看看标签的常见几个属性：

Width属性设置图片的宽度， height属性设置图片的高度，如果是单独设置，则在图片保证不失真的情况下自动缩小或者放大，单位可以是px也可以是百分比，px占用的是屏幕相对大小，百分比占用浏览器显示画面的相对大小；

title属性是图片标题，鼠标放在图片上的时候会显示；

另外，src也可以直接引用网络资源；

以下我们用代码例子看一下效果：

浏览器运行效果，可以看到第5张图片因为加了title属性，鼠标放上去会显示图片标题：

提示：为了整理文档的存储，创作者通常会把图像文件存放在一个单独的文件夹中，而且通常会将这些目录命名为 "pics" 或者 "images" 之类的名称，这样做的好处是可以最大程度地简化路径。

以上就是本章的内容，欢迎关注科技现象，我们会整理学习计算机语言方面最基础的知识给大家，方便大家学习和查阅，共同让计算机给我们工作生活提供更好的服务。

举报/反馈