热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

htmlcssimg标签鼠标事件,HTML+CSS入门img标签学习

本篇教程介绍了HTMLCSS入门img标签学习,希望阅读本篇文章以后大家有所收获,帮助大家HTMLCSS入门。

本篇教程介绍了HTML+CSS入门 img标签学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

<

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

2.img标签格式:  img是标签名称,src是属性

其实img标签中的src是英文source的缩写,所以img标签中的src就是用来告诉img标签,需要显示的图片名称

3.注意点:

和H系列标签/p标签/还有hr标签不一样,img标签不会独占一行(可以用开发者工具中element来验证,选中img标签,看下是否占据一整行)

如果我们手动指定了img标签显示的图片的宽度和高度,有可能会导致图片变形了,那么如果又想指定宽度和高度,又不想图片变形,我们可以只指定宽度和高度其中一个值即可,如果只指定了宽度,系统会自动计算高度,如果指定了高度,系统会自动计算宽度,并且都是等比例拉伸的,也就是说不会变形的。

4.其它的一些属性:

width:宽度

height:高度

所以在img标签中width/height这两个属性的作用,就是用来告诉img标签将来需要显示图片有多宽多高

如果img标签没有指定需要显示的图片的宽高,那么系统会按照图片默认的宽高来显示,如果img标签指定了宽高,那么系统会按照指定的宽高来显示

title:用于告诉浏览器,当鼠标悬停在图片上时,需要弹出的描述框中显示什么内容

alt:其实是英文alternate的缩写,是“交换,替换”的意思,它的作用就是用于告诉浏览器,当需要显示的图片找不到时显示什么内容

本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!



推荐阅读
author-avatar
书友64457430
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有