HTML插入图片

简介: HTML插入图片

一、src属性

符号:img

特点:单标签

代码:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
    <body>
      <p>要展示的图片:</p>
      <img src="fish.jpg">
    </body>
</html>

总结:在img标签中引入src属性名即可完成对图片的插入,其中src的属性值为“文件名”或“路径./文件名”,注:要插入的图片必须与html项目在同一文件夹中!此部分在下文会有重点说明。

二、其余属性

属性名 属性功能
alt 替换文本,当图片无法成功显示时显示alt属性对应属性值的内容
title 当鼠标悬停与图片上时,显示title属性对应属性值的内容
width 宽度大小,若手动设置宽度则自动匹配合适的高度
height 高度大小,若手动设置高度则自动匹配合适的宽度


三、alt用法

说明:当图片因某些原因无法显示时,显示alt属性对应的属性值。

代码:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
    <body>
      <p>要展示的图片:</p>
      <img src="potato.jpg" width="500" alt="土豆">
    </body>
</html>

效果:

 

四、title用法

说明:若图片正常显示,则当鼠标悬停于图片上时,显示title属性对应属性值的内容

代码:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
    <body>
      <p>要展示的图片:</p>
      <img src="fish.jpg" width="500" alt="鱼" title="这是一条熟的鱼">
    </body>
</html>

效果:若图片可以正常显示,将鼠标停留在图片上,会出现“这是一条熟的鱼”字样。

五、属性特点

图片标签的属性特点适用绝大多数的HTML标签:

1.标签的属性写在开始标签内部

2.标签内可同时存在多个属性

3.属性间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性间没有顺序之分

六、src路径的讲解

若出现图片无法显示的情况,则多半是src的属性值出现了问题,即路径问题。

 

相关文章
|
6月前
html中设置背景图片不重复不平铺只显示一张图片
html中设置背景图片不重复不平铺只显示一张图片
180 0
|
3天前
|
移动开发
uni-app使用v-html输出富文本图片溢出解决
uni-app使用v-html输出富文本图片溢出解决
61 1
|
3天前
|
前端开发 UED 开发者
【专栏:HTML与CSS实战项目篇】制作一个响应式图片画廊
【4月更文挑战第30天】本文介绍了如何使用HTML和CSS创建响应式图片画廊。响应式画廊能根据用户设备屏幕大小自动调整布局。首先规划结构,包含一个图片容器和每张图片元素,并为图片提供替代文本。接着设计样式,设置图片大小、间距和视觉效果。然后通过媒体查询实现响应式设计,根据不同屏幕尺寸调整图片排列。同时考虑性能优化,如压缩图片和使用懒加载技术。最后,测试和调试确保画廊在各种设备上正常工作。这个过程强调了响应式设计和用户体验的重要性。
|
3天前
在线拼接图片工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。 无需本地安装软件。 下载时,使用日期时间作为文件名, 规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
19 0
在线拼接图片工具HTML源码
|
3天前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
25 0
|
3天前
|
UED
12.使用HTML制作交互图片
12.使用HTML制作交互图片
42 0
|
3天前
|
Web App开发 前端开发 iOS开发
编程笔记 html5&css&js 008 HTML图片
编程笔记 html5&css&js 008 HTML图片
|
3天前
|
前端开发
html+css实现图片缓慢变大效果
html+css实现图片缓慢变大效果
56 0
|
3天前
解决html中图片自适应屏幕大小的问题
解决html中图片自适应屏幕大小的问题
|
3天前
html中img图片进行等比例缩放的实例代码
HTML中,要修改img元素定义的图片的大小,且是等比例缩放,不改变宽和高的比值,那么可以采用只设置img元素属性中width和height中的任何一个,不要同时设置两个即可实现img图片的等比例缩放效果。下面将通过两个实例来分别实现这两种方法。
91 1