HTML入门零基础教程（五）_编程开发

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" 的格式，属性 =“属性值”。 好啦，今天就到这里，下次再更~

上一篇：java 基于 SpringMVC+Mybaties+ easyUI 快递公司管理系统的设计与实现

下一篇：Python的整数是如何实现的

相关内容

热门资讯

AWSECS：访问外部网络时出... 如果您在AWS ECS中部署了应用程序，并且该应用程序需要访问外部网络，但是无法正常访问，可能是因为...

AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如，在Dockerfile中添加以下代码：FR...

银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介：银河麒麟高级服务器操作系统V10是针对企业级关键业务...

北信源内网安全管理卸载北信源内网安全管理是一款网络安全管理软件，主要用于保护内网安全。在日常使用过程中，卸载该软件是一种常...

AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...

AWS管理控制台菜单和权限要在AWS管理控制台中创建菜单和权限，您可以使用AWS Identity and Access Ma...

ToDesk 远程工具安装及... 目录前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示文件传输设备链接 ...

群晖外网访问终极解决方法：IP... 写在前面的话受够了群晖的quickconnet的小水管了，急需一个新的解决方法&#x...

不能访问光猫的的管理页面光猫是现代家庭宽带网络的重要组成部分，它可以提供高速稳定的网络连接。但是，有时候我们会遇到不能访问光...

Azure构建流程（Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤，确保正确配置了“Arti...

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

HTML入门零基础教程（五）

一、图像标签

1.图像标签

这是一张图片

2.图标标签的其它属性

这是一张图片

alt 替换文本 图像显示不出来的时候用文字替换：

这是一张图片

alt 替换文本 图像显示不出来的时候用文字替换：

这是一张图片

alt 替换文本 图像显示不出来的时候用文字替换：

title 提示文本 鼠标放到图像上，提示的文字：

width 给图像设定宽度：

height：给图像设定高度：

height：给图像设定高度：

width 给图像设定宽度：

3.图像标签属性注意点：

相关内容

热门资讯

alt 替换文本图像显示不出来的时候用文字替换：

alt 替换文本图像显示不出来的时候用文字替换：

alt 替换文本图像显示不出来的时候用文字替换：

title 提示文本鼠标放到图像上，提示的文字：