HTML图像标签的基本特点和相关属性

HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签以及和它相关的属性。图像标签的基本语法格式如下。

<img src="图像URL" />

在上面的语法中,src属性用于指定图像文件的路径和文件名,是img标签的必需属性。
要想在网页中灵活地使用图像,仅仅依靠src属性是远远不够的。为此HTML还为标签准备了其他的属性,具体如下表所示。在这里插入图片描述
表1对标签的常用属性做了简要的描述,下面对它们进行详细讲解,具体如下:

1.图像的替换文本属性alt

有时页面中的图像可能无法正常显示,如图片加载错误,浏览器版本过低等。因此为页面上的图像添加替换文本是个很好的习惯,在图像无法显示时告诉用户该图片的信息,这就需要使用图像的alt属性。

2.图像的宽度和高度属性 width、height

通常情况下,如果不给标签设置宽高属性,图片就会按照它的原始尺寸显示,此外,也可以通过width和height属性用来定义图片的宽度和高度。通常我们只设置其中的一个属性,另一个属性则会依据前一个设置的属性将原图等比例显示。如果同时设置两个属性,且其比例和原图大小的比例不一致,显示的图像就会变形或失真。

3.图像的表框属性 border

默认情况下图像是没有边框的,通过border属性可以为图像添加边框、设置边框的宽度。

4.图像的边距属性 vspace、hspace

在网页中,由于排版需要,有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

5.图像的对齐属性align

图文混排是网页中很常见的效果,默认情况下图像的底部会与文本的第一行文字对齐,如图1在这里插入图片描述
图 1 图像标签的默认对齐效果

但是在制作网页时需要经常实现图像和文字环绕效果,例如左图右文,这就需要使用图像的对齐属性align。

注意:
1、实际制作中并不建议图像标签直接使用border、vspace、hspace及align属性,可用CSS样式替代。
2、网页制作中,装饰性的图像不建议直接插入标签,最好通过CSS设置背景图像来实现。

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是常见的 HTML 标签属性列表: ## 基础标签 - `<html>`:定义 HTML 档 - `<head>`:定义档的头部,包含档的元数据 - `<title>`:定义档的标题,显示在浏览器的标题栏上 - `<body>`:定义档的主体 - `<h1> - <h6>`:定义标题,从大到小依次为一级到六级标题 - `<p>`:定义段落 - `<br>`:定义换行 - `<hr>`:定义水平线 - `<a>`:定义超链接 - `<img>`:定义图像 - `<ul>` 和 `<li>`:定义无序列表 - `<ol>` 和 `<li>`:定义有序列表 - `<table>`、`<tr>`、`<th>` 和 `<td>`:定义表格及其各个部分 - `<form>`、`<input>` 和 `<button>`:定义表单及其各个部分 - `<select>`、`<option>`:定义下拉列表框 ## 格式化标签 - `<b>`:定义粗体本 - `<i>`:定义斜体本 - `<u>`:定义带有下划线的本 - `<sup>`:定义上标本 - `<sub>`:定义下标本 ## 其他标签 - `<div>`:定义档中的区块或分组 - `<span>`:定义档中的行内元素 - `<style>`:定义档的样式信息 - `<script>`:定义档的 JavaScript 代码 - `<meta>`:定义档的元数据,如编码方式、关键字等 ## 常见的属性 - `class`:为 HTML 元素定义一个或多个类名(类名用空格分隔) - `id`:为 HTML 元素定义唯一的标识符 - `style`:为 HTML 元素定义一条或多条样式规则 - `src`:定义图像或音频件的 URL - `href`:定义超链接的 URL - `alt`:定义图像的替代本 - `title`:定义有关元素的额外信息 - `name`:定义表单元素的名称 - `value`:定义表单元素的值 - `type`:定义表单元素的类型,如本框、单选框、复选框等 - `rows` 和 `cols`:定义本域的行数和列数 - `target`:定义超链接的目标窗口,如 `_blank`(在新窗口中打开链接)等 以上仅是常见的 HTML 标签属性,还有许多其他的标签属性可用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值