Web前端开发笔记——第二章 HTML语言 第五节 图像标签
目录
- 前言
- 一、图像标签的属性
- （一）src属性和alt属性
- （二）width属性和height属性
- （三）borde属性
- 二、绝对路径和相对路径
- 三、图像映射
- 例题
- 结语
前言
本节介绍图像标签即img标签的用法以及相关应用例题。
一、图像标签的属性
（一）src属性和alt属性
img标签，即图像标签，该标签用于插入图像，动态图和静态图是一样的，它表示为<img src="图像名.图像类型" alt="文本" />，是个单独出现的标签。它一般有两个属性：src属性和alt属性。
src属性代表其文件名和类型，即其值是图像的 URL 地址。而alt属性的作用是当图片无法找到或者是出现问题无法打开等情况时，它就会替代图片显示，显示的即是alt属性内的文字，可以说是图片的替代文本。
例如，下面图片未能显示出来，代替的是文字“海边的风景图”：
（二）width属性和height属性
width属性和height属性用于设置图像的宽度和高度，其属性值默认单位为像素，但如果没有指定图片的高宽度，可能会对页面的布局有影响。
例如，下列html代码中，对图片11.jpg设置其宽度为600像素、高度为520像素：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>风景</title></head><body><h2>海边：</h2><img src="11.jpg" alt="海边的风景图" width="600" height="520"></body>
</html>运行结果如下：
（三）borde属性
borde属性用于设置图片是否有边框，border后面的取值即边框的大小，border=0或者不使用borde属性表示无边框。
例如，下列html代码中，对图片baidu.jpg加上属性为10的边框：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>my page</title></head><body><p>点击下列图像或者文字:<br /><a href="http://www.baidu.com"><img border="10" src="data:images/baidu.jpg" alt="百度一下" width="32" height="32">百度一下</a></p></body>
</html>运行结果如下：
二、绝对路径和相对路径
引用图片的两种路径，分为绝对路径和相对路径：
绝对路径是以根目录为基准，需要对文件的具体位置详细表示出来；相对路径是以该文档的所在位置为基准的。
1、当图片直接位于站点文件夹内时，且网页也位于其内时，设置src属性时只需以图像名.图像类型的形式即可，它省略当前的基准点位置。
<img src="图像名.图像类型" alt="文本" />
2、当网页位于站点文件夹内，图片位于站点文件夹内的子文件夹时，设置src属性时需要带上子文件夹的名称加上图像名.图像类型。
<img src="图片子文件夹名称/图像名.图像类型" alt="文本" />
3、当图片直接位于站点文件夹内，且网页位于子文件夹内时，设置src属性时需要用“…”来表示上一级文件夹再加上图像名.图像类型即可。
<img src="../图像名.图像类型" alt="文本" />
4、当图片和网页都位于站点文件夹内，且位于不同的子文件夹内时，设置src属性时需要用“…”来表示上一级文件夹且带上图片子文件夹的名称加上图像名.图像类型。
<img src="../图片子文件夹名称/图像名.图像类型" alt="文本" />
三、图像映射
在html中可使用图像映像，它带有可供点击区域的图像即map标签，其区域都是超链接，在<img>中的 usemap 属性可以引用 <map> 标签中的 id 或 name 属性。
在 <map> 标签中， id 属性必须定义，它表示该标签定义的名称，而name 属性即为 image-map 规定的名称。且通过定义<area>标签在<map>内，在 HTML5 中，该标签是单独的，它用于定义可供点击区域的图像区域。
例题
例、完成下列网页设计，通过图片标签，设置点击相应的图片链接进行相应的网页跳转，且在新的窗口中打开跳转网页，效果图如下:
1、创建站点文件夹，并创建image子文件夹，用于存放四个浏览器的缩略图，如下：
2、编辑主页的html代码，即主页.html文件，如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>主页</title></head><body><h2>通过点击以下图案打开相应浏览器的主页：</h2><p><a href="https://www.google-fix.com/" target="_blank"><img src="data:image/1-0.png" alt="谷歌" width="40" height="40"></a>谷歌浏览器</p><p><a href="https://home.firefoxchina.cn/" target="_blank"><img src="data:image/1-1.jfif"alt="火狐" width="40" height="40"></a>火狐浏览器</p><p><a href="https://www.sogou.com/" target="_blank"><img src="data:image/1-2.png" alt="搜狗" width="40" height="40"></a>搜狗浏览器</p><p><a href="https://cn.bing.com/" target="_blank"><img src="data:image/1-3.png" alt="Edge" width="40" height="40"></a>Edge浏览器</p></body>
</html>3、保存后，我们的站点文件夹里就有了一个主页的html文件以及之前创建的image文件夹，如下:
4、测试一下效果，打开主页.html，我们发现没有问题：
5、测试是否能通过点击图案跳转至相应的浏览器页面且在新窗口打开：
其它也是没有问题的：
达到了题设要求！
结语
以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！
Web前端开发笔记——第二章 HTML语言 第五节 图像标签相关推荐
- Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录 前言 一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接 二.从当前页面链接到指定位置 三.链接的访问情况 四.在新窗口中打开链接 例题 结语 前言 本节介绍超链接标签即 ...
- Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签
目录 一.区域标签 (一)div标签的定义 (二)div标签的属性 二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
- Web前端开发笔记——第二章 HTML语言 第十一节 语义标签
目录 一.语义标签的定义 二.头部标签.底部标签 三.导航栏标签 四.内容栏标签.区段标签 五.其它内容标签 六.< figure > 和 < figcaption >标 结语 ...
- Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
目录 一.画布标签 二.音视频标签 (一)音频标签 (二)视频标签 (三)资源标签 结语 一.画布标签 <canvas> </canvas> 画布标签用于图形.字符等的绘制,它 ...
- Web前端开发笔记——第二章 HTML语言 第七节 表格标签
目录 一.表格标签的定义 二.表格标签的属性 (一)边框属性 (二)单元格属性 三.表格标签的表头 表头属性 四.表格标签的标题 五.表格标签的嵌套 结语 一.表格标签的定义 在html中,表格标签表 ...
- Web前端开发笔记——第二章 HTML语言 第三节 文本格式化标签
目录 前言 一.文本加粗.斜体标签 二.文本字体缩小.放大标签 三.文本下标.上标标签 四.文本下划线.删除线标签 五.双引号字符 结语 前言 这里主要介绍对html语言中对文本的处理. 一.文本加粗 ...
- Web前端开发笔记——第二章 HTML语言 第八节 表单标签
目录 一.表单的定义 二.输入标签 (一)文本框和密码框 (二)提交按钮和重置按钮 (三)数值选项菜单 (四)滑动条 (五)搜索框 (六)input标签的其它type属性 (七)单选框和复选框 (八) ...
- Web前端开发笔记——第二章 HTML语言 第二节 基本标签
目录 前言 一.标题标签 二.段落标签和段内换行 三.预留格式标签 四.行内组合标签 五.水平线标签 六.注释标签 七.空格字符 例题(创建一个网页) 结语 前言 本节主要讲解HTML的一些基本标签. ...
- Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性
目录 一.什么是HTML? 二.标签 (一)标签.元素的定义 (二)标签的嵌套 (三)标签的属性 (四)父元素.子元素.兄弟元素 三.HTML DOM树 结语 一.什么是HTML? HTML语言,即超 ...
最新文章
- 芯片开发语言：Verilog 在左，Chisel 在右
- Protocol Buffer搭建及示例
- 初识Vue，写的一些小练习
- 《程序员的修炼——从优秀到卓越》一一1.6 勿以专家自居
- 内网渗透-域渗透简单思路
- Enums and Structs in C#(C#里的枚举和结构) (from codeproject)
- 【遥感数字图像处理教程】理论基础知识目录（5章全）
- spring 数组中随机取几个_准备几个月，面试阿里耗时两周，最终凭借这些知识拿下阿里offer...
- 省份，城市，地区------三级联动菜单//要加注释
- 转 Oracle DBCA高级玩法：从模板选择、脚本调用到多租户
- SylixOS 内存管理源代码分析--vmmMalloc.c
- 你的代码会说话吗？（上）
- rootfs bootfs bootloader
- 中国涂料工业协会：世界十大涂料品牌2011年度报告
- 嵌入式linux 竖屏,嵌入式Linux下竖屏显示配置
- strtotime 用法
- 如何学习编程语言_如何学习编程
- 程序员如何选择技术方向
- 掌上智维隐私政策privacy
- 云南省谷歌地球高程DEM等高线下载