一起自学前端开发!

html常用标签:图片标签---前端入门教程

来源:原创    更新时间:2017-07-26 21:18:29    编辑:前端编辑    浏览:1777

在上一个小节中我们学习了一些文本标签,但是有些内容不好通过文本来描述,需要插入图片内容。插入图片就需要使用图片标签了,本节将讲些图片标签<img>


一、<img>标签

img,即“image(图像)”。理解标签语义更有利于你记忆,而记忆HTML标签的语义是HTML的基础。更多标签语义请查看HTML标签的含义。

<img>标签的格式为:

<img src="url" alt=""> 

说明:

img标签是一个自闭合标签,没有结束标签。

src 指 "source" , 属性的值是图像的 URL 地址

alt属性 在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息


二、标签属性

1.源属性src

<img> 标签的 src 属性是必需的。

它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。

src的属性值可以是网络上图片的图片网址,也可以是本地图片文件的路径。


2. 文本替换属性alt

如果无法显示图像,浏览器将显示替代文本 ,alt属性是必需的。

用户使用屏幕阅读器的时候会阅读alt属性的内容。

对于残疾人来说,alt 属性通常是他们了解图像内容的唯一方式。


3.图片的宽度属性width和高度属性height

为图像指定 height 和 width 属性是一个好习惯。

如果设置了这些属性,就可以在页面加载时为图像预留空间。

如果没有这些属性,浏览器就无法了解图像的尺寸,也就无法为图像保留合适的空间,因此当图像加载时,页面的布局就会发生变化。

注意:

请不要通过 height 和 width 属性来缩放图像。

如果通过 height 和 width 属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。

正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸


举例:插入一个网上的图片

代码如下:

<img src="http://fenzhen2016.oss-cn-hangzhou.aliyuncs.com/headimg/2016112209124095207.png" alt="卡通队长" width="200" height="200">


效果:


评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜