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的属性值出现了问题,即路径问题。

 

相关文章
|
3月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
69 0
|
9天前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
26 5
|
26天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
33 13
|
2月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
29 0
在线将多张图片拼接起来图工具HTML源码
|
5月前
|
移动开发
uni-app使用v-html输出富文本图片溢出解决
uni-app使用v-html输出富文本图片溢出解决
496 1
|
2月前
|
Python
Python 下载 html 中的 图片
Python 下载 html 中的 图片
25 2
|
3月前
|
数据采集 缓存 自然语言处理
PHP将HTML标签转化为图片
通过这个方法,PHP后端能够实现将HTML内容转化为图片的功能。这种方式虽然牵涉到一些额外的安装和配置,但能够相对灵活且稳定地解冀转换需求,适用于需要在后端动态生成图片的场景。
75 1
|
3月前
|
JavaScript 前端开发 CDN
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
30 0
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
|
4月前
|
移动开发 前端开发 JavaScript
将HTML5 Canvas的内容保存为图片
将HTML5 Canvas的内容保存为图片
32 5
|
4月前
|
前端开发 UED SEO
HTML基础-链接与图片插入:网页的连接与视觉元素
【6月更文挑战第2天】本文介绍了HTML中`<a>`和`<img>`标签的使用,包括链接的基本结构、目标类型以及图片的插入、尺寸调整和对齐方式。常见问题涉及链接和图片路径、缺失`alt`属性及尺寸不匹配,解决方案包括正确引用资源、使用绝对URL和重视`alt`属性。通过示例代码,展示了创建链接和图片的方法,强调了提升网页用户体验的重要性。
54 3
下一篇
无影云桌面