HTML插入图片
Posted SCK-DN
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="https://it.cha138.com/file/image/no.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的属性值出现了问题，即路径问题。对于此部分的详细说明可以参考我的另一篇文章——《路径讲解与跨级别插入图片》
html中插入的图片太大，怎么缩小？
参考技术A windows自带图片编辑器，改属性里面也可以用光影魔术手
你要把分辨率缩小，或者图片大小缩小，都可以本回答被提问者采纳
以上是关于HTML插入图片的主要内容，如果未能解决你的问题，请参考以下文章