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

 

相关文章
|
11天前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
27 1
利用html2canvas插件自定义生成名片信息并保存图片
|
4月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
97 0
|
1月前
HTML图片
【10月更文挑战第4天】HTML图片。
25 2
|
2月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
36 5
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
50 13
|
3月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
43 0
在线将多张图片拼接起来图工具HTML源码
|
6月前
|
移动开发
uni-app使用v-html输出富文本图片溢出解决
uni-app使用v-html输出富文本图片溢出解决
654 1
|
3月前
|
Python
Python 下载 html 中的 图片
Python 下载 html 中的 图片
31 2
|
4月前
|
数据采集 缓存 自然语言处理
PHP将HTML标签转化为图片
通过这个方法,PHP后端能够实现将HTML内容转化为图片的功能。这种方式虽然牵涉到一些额外的安装和配置,但能够相对灵活且稳定地解冀转换需求,适用于需要在后端动态生成图片的场景。
189 1
|
4月前
|
JavaScript 前端开发 CDN
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
94 0
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)

热门文章

最新文章