HTML入门零基础教程（五）
创始人
2024-03-15 23:12:30
0次
嗨，大家好，我是异星球的小怪同志
一个想法有点乱七八糟的小怪
如果觉得对你有帮助，请支持一波。
希望未来可以一起学习交流。
目录
一、图像标签
1.图像标签
2.图标标签的其它属性
3.图像标签属性注意点：
一、图像标签
1.图像标签
在 HTML 标签中， 标签用于定义 HTML 页面中的图像。
![]()
单词 image 的缩写，意为图像。
src 是标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
那么，首先我们想要在网页中加入图片，一定要确保图片和网页的代码是在同一个文件夹里。
我们可以用代码来演示一下：
图像标签
这是一张图片![]()
这样看着可能不太美观，我们可以让文字放在图片的上面，可以用 标签，标签或者标题标签都可以。
图像标签
这是一张图片
![]()
2.图标标签的其它属性
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示的文字 |
| title | 文本 | 提示文本，鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
那么我们可以用代码来演示一下：（alt）
图像标签
这是一张图片
![]()
alt 替换文本 图像显示不出来的时候用文字替换：
![]()
我们再用另一个图片，来对比演示一下：
图像标签
这是一张图片
![]()
alt 替换文本 图像显示不出来的时候用文字替换：
![]()
我们用代码来演示一下：（title）
图像标签
这是一张图片
![]()
alt 替换文本 图像显示不出来的时候用文字替换：
![]()
title 提示文本 鼠标放到图像上，提示的文字：
![]()
区别：alt是图片显示不出来，文本替换图片，title是图片能显示出来，鼠标放在图片上，也能显示出提示的文字，增加了用户体验感。
那么还剩下图像标签还剩下三个分别是width、height、border，我们来简单的学习下吧。
我们先用代码演示一下：（width，height）
图像标签
width 给图像设定宽度：
![]()
height：给图像设定高度：
![]()
height：给图像设定高度：
![]()
总结一下：
通过以上的代码我们可以看到设置宽度时，图像可以等比例的按照图像宽度缩放，设置宽度和高度时，若是随意设置的，图像就会变得比较失真不好看，按照高度图像也可以等比例的按照图像的高度缩放。
那么最后我们来看一下border是怎么使用的。
我们用代码演示一下：（border）
图像标签
width 给图像设定宽度：
![]()
现在只是简单的设置了一下border，以后还会详细学习的。
3.图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面。 ② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 ③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。 好啦，今天就到这里，下次再更~相关内容
热门资讯
保存时出现了1个错误，导致这篇...
当保存文章时出现错误时，可以通过以下步骤解决问题：查看错误信息：查看错误提示信息可以帮助我们了解具体...
汇川伺服电机位置控制模式参数配...
1. 基本控制参数设置 1）设置位置控制模式 2）绝对值位置线性模...
不能访问光猫的的管理页面
光猫是现代家庭宽带网络的重要组成部分，它可以提供高速稳定的网络连接。但是，有时候我们会遇到不能访问光...
表格中数据未显示
当表格中的数据未显示时，可能是由于以下几个原因导致的：HTML代码问题：检查表格的HTML代码是否正...
本地主机上的图像未显示
问题描述：在本地主机上显示图像时，图像未能正常显示。解决方法：以下是一些可能的解决方法，具体取决于问...
表格列调整大小出现问题
问题描述：表格列调整大小出现问题，无法正常调整列宽。解决方法：检查表格的布局方式是否正确。确保表格使...
不一致的条件格式
要解决不一致的条件格式问题，可以按照以下步骤进行：确定条件格式的规则：首先，需要明确条件格式的规则是...
Android|无法访问或保存...
这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限：此外...
【NI Multisim 14...
目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器...
银河麒麟高级服务器操作系统简介： 银河麒麟高级服务器操作系统V10是针对企业级关键业务...