图片标签（img）

图片标签用于向当前页面中引入一个外部图片。
使用img标签来引入外部图片，img标签是一个自结束标签。
img这种元素属于替换元素（块元素和行内元素之间，具有两种元素的特点）。

属性

src属性

src 属性指定的是外部图片的路径（路径规则和超链接是一样的，可以是绝对路径，也可以是相对路径）。

alt属性

alt属性指定图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示。
搜索引擎会根据alt中的内容来识别图片，屏幕阅读器等可能会用到alt属性的内容，但是目前我们用到的概率不大。

图片的宽高

width属性指定图片的宽度（单位是像素）。
height属性指定图片的高度（单位是像素）。
宽度和高度如果只修改了一个，则另一个会等比例缩放，如果两个都做了修改，则以设置的数值为准。

注意

一般情况下在PC端，不建议修改图片的大小。大图缩小，浪费内存；小图放大，容易失真，需要多大的图片就裁多大。
但是在移动端，经常需要对图片进行缩放（一般是大图缩小，来确保图片的清晰度，很少小图放大使用）。

图片的格式

jpge(jpg)

支持的颜色比较丰富，不支持透明效果，不支持动图。
一般用来显示照片。

gif

支持的颜色比较少，支持简单透明，支持动图。
一般用来显示颜色单一的图片、动图。

png

支持的颜色丰富，支持复杂透明，不支持动图。
一般用来显示颜色丰富、复杂透明图片（专为网页而生）。

webp

这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式。
它具备其他图片格式的所有优点，而且文件还特别小。
缺点：兼容性不好。

base64

将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片。
一般都是一些需要和网页一起加载的图片才会使用base64。

使用规则

1、效果一样，用小的；
2、效果不一样，用效果好的，但是文件不能太大。
文件大小和展示效果要综合考虑。

【HTML】图片标签（img）相关推荐

web前段学习day_01:HTML（学习如何搭建页面结构和内容）：文本标签、列表标签、图片标签、超链接、表格、表单表单、分区标签、实体引用
学习如何构造页面结构和内容安装HBuilderX 一.HTML 创建第一个HTML页面写完html后如何测试写在body中的常见标签有哪些? 注释快捷键 Ctrl+Shift+/ 1.文本相关标 ...
图片标签|| 列表标签||链接标签||div和span|| 语义化标签
图片标签 img:展示图片 * 属性: * src:指定图片的位置相对路径 * 以.开头的路径 ...
读取CSV内容，根据不同的图片标签放到指定文件夹
读取csv文件内容,根据不同的图片标签到指定文件夹. 原本的数据是这样的然后根据CSV文件的内容进行读取,根据不同的label将图片放到指定的label 文件夹里 import pandas as ...
前端(一)——HTML之基本标签、图片标签、超链接、锚链接
文章目录 1. 定义 2. 发展史及优势 2.1 发展史 2.2 优势 3. W3C标准 4. HTML的基本结构 5. 网站的基本标签 5.1 标题标签 5.2 段落标签 5.3 水平线标签 5.4 ...
html图片标签和语义化标签和音频
图片标签 <img src="图片地址" alt="当图片找不到时提示的文字" title="当鼠标放图片上面时提示的文字" widh ...
HTML基础(part4)--常用标签之图片标签
鄙人的学习笔记. 段落标签<p> 段落标签语法 <p> 包裹段落的内容 </p> 备注:p标签之间不会相互共用一行.会独占一行或者多行的空间. 举个例子代码: & ...
使用JavaScript正则表达式解析markdown里的图片标签
需求:开发一个JavaScript函数,输入为markdown格式语法的图片标签: 输出是三个返回值: image31.png 31 https://upload-images.jianshu.io/ ...
[JavaWeb-HTML]HTML标签_图片标签
图片标签: * img:展示图片* 属性:* src:指定图片的位置* 代码:<img src="image/jingxuan_2.jpg ...
微信小程序开发实战基础一、页面跳转，底部导航栏，分享，加载图片标签，列表
1.页面跳转 wx.navigateTo({ url: "../four/four" })--可返回 wx.redirectTo({ url: "../four/four ...
html 图片行内剧中,HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)...
一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响. < ...

【HTML】图片标签（img）