img标签

1.什么是img标签

img标签中的img其实是英文image的缩写。所以img标签的作用，就是告诉浏览器我们需要显示一张图片。

2.img标签的格式

< img src=" " >
img —— 代表一个标签
src="" —— 代表一个属性
img标签中的src是英文source的缩写
所以img标签中的src就是用来告诉img标签，需要显示的图片名称

3.注意

和H系列标签、P标签还有Hr标签不一样，img标签不会独占一行
如果我们手动指定img标签显示的图片的宽度和高度，有可能会导致图片的变形；
那么如果又想要指定高度和宽度，又不想让图片变形，我们可以只指定宽度和高度其中一个值，只要指定了高度，浏览器会自动根据比例计算出宽度，也就不会导致图片的变形。

4.属性

除了src属性，还有其他属性

width：宽度
height：高度
所以在img标签中width/height这两个属性的作用：
就是用来告诉img标签将来需要显示的图片有多宽有多高。如果img标签没有指定需要显示的图片的宽度和高度，那么浏览器会按照图片默认的宽度和高度来显示；如果img标签指定宽度高度，那么浏览器会按照指定的宽高来显示
title：用于告诉浏览器，当鼠标悬停在图片上时，需要弹出的描述框中显示什么内容
alt：其实是alternate的缩写，它的作用就是告诉浏览器，当需要的图片找不到时显示什么内容

<img src="71a66149764fd076d31d8d90996010c.png"><img src="71a66149764fd076d31d8d90996010c.png" width="400" height="500"><img src="71a66149764fd076d31d8d90996010c.png" width="500" ><img src="71a66149764fd076d31d8d90996010c.png" width="500" title="这个是图片"><img src="71a66149764fd076d31d8d90996010c1.png" width="500" alt="对不起，你需要查看的图片不见了">

运行截图：

5.HTML基础——img标签相关推荐

html标签体,HTMLCSS基础-html标签的实体
HTML&CSS基础-html标签的实体作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码尹正杰的网页我的博客地址:https://www.cnblog ...
JSP基础--动作标签
JSP基础--动作标签 JSP动作标签 1 JSP动作标签概述动作标签的作用是用来简化Java脚本的! JSP动作标签是JavaWeb内置的动作标签,它们是已经定义好的动作标签,我们可以拿来直接使用 ...
java笔记之基础-outer标签
日常笔记之java基础-outer标签介绍: 业务逻辑中经常需要用到for循环,其中也会有循环嵌套循环,结束一层循环仅需一个break即可,但如果想结束两层,或者三层怎么搞呢,Java提供了ou ...
HTML基础——table标签
HTML基础之table标签一.定义表格是网页中十分重要的组成元素.表格用来存储数据.表格包含标题.表头.行和单元格.在HTML语言中,表格标记使用符号<table>表示.定义表格仅使 ...
HTML5基础-新增标签+新增属性+布局案例
html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ...
HTML常见双标记图,HTML基础-常用标签及图片
标记/标签{元素} 双标签: 内容标签> 网页页面的根元素 .....h2-h6 标题表格.... 单标签: 内容例如:图片换行水平线.... 常用标签段落换行空格小 ...
06HTML基础--多媒体标签
video标签作用: 播放视频格式1: <video src=""> </video> video标签的属性 src: 告诉video标签需要播放的视频 ...
HTML5基础-Mark标签高亮显示文本
1.mark标签使用 <mark></mark> 2.mark作用使用mark标签元素,可以高亮显示文档中的文字以达到醒目的效果. 3.mark使用代码 1 <!DOC ...
Git 基础 - 打标签 tag
打标签同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列出所有可用的标签,如何新建标签,以 ...
html基础--列表标签03,03HTML基础--列表标签
列表标签无序列表(unordered list)作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后格式:li 英文是 list item, 翻译为列表项选择居住 ...

5.HTML基础——img标签

文章目录

img标签

1.什么是img标签

2.img标签的格式

3.注意

4.属性

5.HTML基础——img标签相关推荐

最新文章

热门文章