HTML学习总结基础篇图像标签imag的使用及其属性

图像标签

在HTML中，用img标签显示图像。
语法格式： < img src=" 图像路径">，src为必须要写的元素，用于指定文件的路劲和文件名

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

示例代码：

<html lang="en">
<head><meta charset="UTF-8"><title>图像标签及其属性</title>
</head>
<body><h3>使用img引用图像，src为路径</h3><img src="imag_l.jpg"><h3>alt表示的是在图片加载不出来显示不了时代替的文字</h3><img src="imag_l.jpg" alt="这是一张海贼王的图片"><h3>title表示在鼠标移到图片时，在鼠标旁边提示的文字</h3><img src="imag_l.jpg" title="这是一张海贼王的图片"><h3>width  height border 就是图片的长宽，边框的粗细</h3><img src="imag_l.jpg" width="600px" height="300px" border="700">
</body>
</html>
在这里插入代码片

图像标签的路径

目录文件夹：就是普通文件夹，里面存放了我们做页面所需要的相关素材。
根目录：打开目录文件夹的第一层就是根目录

路径可以分为相对路径和绝对路径

相对路径

相对路径：以引用文件夹所在位置为参考基础，而建立出的目录路径。 也就是相对于当前编写的HTML文件的位置 如果相对于HTML文件属于同一级的文件夹，则可以直接写文件名引用。如果图片相对于HTML文件属于下一级文件，则需要用文件夹名/图片文件名引用图片。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签及其属性</title>
</head>
<body><h3>使用img引用图像，src为路径</h3><img src="imag_l.jpg"><img src="data:images/imag_first.jpg">
</body>
</html>

如果图片相对于HTML文件属于上一级路径，则使用**…/** 引用图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签及其属性</title>
</head>
<body><h3>使用img引用图像，src为路径</h3><img src="../image/image_lf.jpg">
</body>
</html>

绝对路径

绝对路径：是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

HTML学习总结基础篇图像标签imag的使用及其属性相关推荐

计算机视觉面试宝典--深度学习机器学习基础篇（四）
计算机视觉面试宝典–深度学习机器学习基础篇(四) 本篇主要包含SVM支持向量机.K-Means均值以及机器学习相关常考内容等相关面试经验. SVM-支持向量机支持向量机(support vector ...
MySQL学习笔记-基础篇2
MySQL学习笔记-基础篇2 目录 MySQL学习笔记-基础篇2 8.子查询 8.1 需求分析与问题解决 8.1.1 实际问题 8.1.2 子查询的基本使用 8.1.3 子查询的分类 8.2 单行子查 ...
MySQL学习笔记-基础篇1
MySQL 学习笔记–基础篇1 目录 MySQL 学习笔记--基础篇1 1. 数据库概述与MySQL安装 1.1 数据库概述 1.1.1 为什么要使用数据库 1.2 数据库与数据库管理系统 1.2.1 ...
【Kotlin】学习小记-基础篇
Kotlin学习小记-基础篇 Kotlin的介绍入门基础篇属性声明关于val和final的小Tips 参数 1.可变参数 2.命名参数函数返回值 1.默认返回Unit值 2.返回Nothing ...
STM32运行深度学习指南基础篇(3)(STM32CubeMX.AI+Tensorflow)
STM32运行深度学习指南基础篇(3)(STM32CubeMX.AI+Tensorflow) 在上一篇文章中我们已经有训练好的tflite模型,接下来我们要在Clion中实现,如果是Keil的朋友可以 ...
Redis学习笔记①基础篇_Redis快速入门
若文章内容或图片失效,请留言反馈.部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 资料链接:https://pan.baidu.com/s/1189u6u4icQYHg_9_7ovWmA( ...
C++ 学习 ::【基础篇：13】：C++ 类的基本成员函数：类类型成员的初始化与构造函数问题
本系列 C++ 相关文章仅为笔者学习笔记记录,用自己的理解记录学习!C++ 学习系列将分为三个阶段:基础篇.STL 篇.高阶数据结构与算法篇,相关重点内容如下: 基础篇:类与对象(涉及C++的三大特 ...
C++ 学习 ::【基础篇：17】：C++ 类与对象：运算符重载介绍、运算符重载函数（类内与类外区别）写法及简单设计实现
本系列 C++ 相关文章仅为笔者学习笔记记录,用自己的理解记录学习!C++ 学习系列将分为三个阶段:基础篇.STL 篇.高阶数据结构与算法篇,相关重点内容如下: 基础篇:类与对象(涉及C++的三大特 ...
【SQL基础学习】----基础篇(1)
前言: 存储数据的容器在内存中(数据存在易失性,断电即数据没了): 数组集合磁盘(永久存储): 文件(不易管理) 数据库(持久化, ...

HTML学习总结基础篇图像标签imag的使用及其属性

图像标签

图像标签的路径

相对路径

绝对路径

HTML学习总结基础篇图像标签imag的使用及其属性相关推荐

最新文章

热门文章

HTML学习总结 基础篇 图像标签imag的使用及其属性

图像标签

图像标签的路径

相对路径

绝对路径

HTML学习总结 基础篇 图像标签imag的使用及其属性相关推荐

最新文章

热门文章

HTML学习总结基础篇图像标签imag的使用及其属性

HTML学习总结基础篇图像标签imag的使用及其属性相关推荐