html图片标签的用法,html图片标签有哪些属性?

图片标签的介绍

场景:在网页中显示图片

html图片标签的用法,html图片标签有哪些属性?

特点:
• 单标签
• img标签需要展示对应的效果,需要借助标签的属性进行设置!

图片标签的src属性

属性名:src
Ø 属性值:目标图片的路径
Ø 注意点:
Ø 当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)
Ø 路径的情况有很多,在之后的学习过程中,会了解用法。

html图片标签的用法,html图片标签有哪些属性?

 

图片标签的alt属性

属性名:alt
Ø 属性值:替换文本
• 当图片加载失败时,才显示alt的文本
• 当图片加载成功时,不会显示alt的文本

html图片标签的用法,html图片标签有哪些属性?

 

图片标签的title属性

属性名:title
Ø 属性值:提示文本
• 当鼠标悬停时,才显示的文本
Ø 注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签

html图片标签的用法,html图片标签有哪些属性?

图片标签的width和height属性

属性名:width和height
Ø 属性值:宽度和高度(数字)
Ø 注意点:
• 如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
• 如果同时设置了width和height两个,若设置不当此时图片可能会变形

html图片标签的用法,html图片标签有哪些属性?

 

总结:图片的常见属性有哪些?

html图片标签的用法,html图片标签有哪些属性?

主题测试文章,只做测试使用。发布者:果壳日志,转转请注明出处:https://www.xin12123.com/n/327.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年 11月 2日 下午10:05
下一篇 2022年 11月 2日 下午10:23

相关推荐

  • label标签的作用是什么?label标签的用法

    label标签 场景:常用于绑定内容与表单标签的关系,比如有个输入框,如果我想要点击输入框获得焦点,只有input情况下,我只能选中输入框,但加了label,把label和input绑定在一起后,点击label也可以选中输入框。这种是最常用的。 Ø 标签名:labelØ 使用方法①:1. 使用label标签把内容(如:文字)包裹起来2. 在input标签上添…

    2022年 11月 11日
    00
  • html路径有几种?html绝对路径和相对路径详解

    生活中两个人,我要去找你,需要通过一定的路径才能找到!同理:页面需要找到图片,也是需要通过路径才能找到。html标签路径分为两种,绝对路径和相对路径 ,我们先来介绍绝对路径,比较简单。   相对路径是大家常用的, 本文会详细介绍。 • 绝对路径 绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径 例如:• 盘符开头:D:\day01\im…

    2022年 11月 2日
    00
  • 表格标题和表头单元格标签怎么设置?表格中表示单元格的标签是

    表格标题和表头单元格标签 场景:在表格中表示整体大标题和一列小标题 注意点:• caption标签书写在table标签内部• th标签书写在tr标签内部(用于替换td标签) 表示表格整体大标题,使用什么标签完成?书写在什么位置?• 表格整体大标题:caption标签• 书写在table标签内部Ø 在表格第一行设置一列的小标题,使用什么标签完成?书写在什么位置…

    2022年 11月 11日
    00
  • html文本格式化标签有哪些?

    文本格式化标签的介绍:需要让文字加粗、下划线、倾斜、删除线等效果,语义:突出重要性的强调语境 实际项目开发中选择标签的原则:标签语义化 即:根据语义选择对应正确的标签• 如:需要写标题,就使用h系列标签• 如:需要写段落,就使用p标签   好处:• 对人:好理解,好记忆• 对机器:有利于机器解析,对搜索引擎(SEO)有帮助推荐下面这组:• stro…

    2022年 11月 2日
    00
  • html音频标签属性,html音频自动播放代码

    音频标签 audio作用:在网页中插入音频属性1、src:音频的路径2、controls:播放的控件3、autoplay:自动播放 (部分浏览器不支持)4、loop:循环播放

    2022年 11月 3日
    00

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信