HTML标签:img标签的用法总结

不言
发布: 2018-08-08 09:38:33
原创
5272人浏览过

本篇文章给大家带来的内容是关于html标签:img标签的用法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、Img标签有两个重要的属性:

  1.src  属性:图片的地址

  2.alt  属性:图片不显示是现实的文字

二、Img标签是行级元素:

立即学习前端免费学习笔记(深入)”;

  img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。行内非替换元素,例如, height/width/padding top、bottom/margin top/bottom均无效果.只

  能用padding left/right和margin left/right改变宽度。

三、Img标签进行居中:

慧中标AI标书
慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

慧中标AI标书 120
查看详情 慧中标AI标书

  1、第一种方式:这种方式我不是很喜欢,Img标签有事不能设置为table-cell。容易产生错误。

img_p{
        display: table-cell;vertical-align: middle;  /*控制图片垂直居中*/
        text-align: center;  /*控制图片水平居中*/      }
登录后复制

  2、第二种方式:这种方式Img标签最好不要带有margin属性,否则不会居中。

img{
    position: absolute;top:50%;left: 50%;
    transform:translate(-50%,-50%);    
}
登录后复制

四、Img标签事件:

  1、使用HTML DOM Event 对象的 onerror事件可以对显示异常的图片进行处理。

<img src="img/1.jpg" alt="这是一张图片" onerror="alert(this.alt)">
登录后复制

 相关文章推荐:

html布局:html三列布局的实现代码

innerHTML属性是什么?innerHTML属性的用法

以上就是HTML标签:img标签的用法总结的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号