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">

效果：