html常用标签:图片标签---前端入门教程
在上一个小节中我们学习了一些文本标签,但是有些内容不好通过文本来描述,需要插入图片内容。插入图片就需要使用图片标签了,本节将讲些图片标签<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">
效果: