HTML-7.1-图片标签

最新推荐文章于 2024-11-11 23:47:26 发布
原创 最新推荐文章于 2024-11-11 23:47:26 发布 · 329 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML图片标签 #相对路径 #绝对路径

本文详细介绍了HTML中的图片标签(img)的使用方法，包括图片类型、相对路径与绝对路径的区别及应用，以及img标签的各种属性如width、height、align、title、border、hspace、vspace和alt等。

HTML-7.1-图片标签

  • img：代表的就是一张图片，是单边标记
  • img是自封闭标签，也称单标签

一：图片类型

  • 能插入的图片类型
    • jpg(jpeg)
    • gif
    • png
    • bmp
  • 不能往网页中插入的图片格式是
    • psd
    • ai
  • HTML页面不是直接插入图片，而是插入图片的引用地址
    • 所以要把图片上传到服务器上

二：相对路径和绝对路径

  • src属性：指图片的路径

1、相对路径

  • 相对当前页面所在的路径
  • 两个标记
    • ./
      • 当前目录
    • .//
      • 上一目录，父路径
<body>
	<img src="./backgroud.jpg" alt="无法显示" title="美景图" width="1500px">
</body>

2、绝对路径

  • 以盘符开始的绝对路径
    • <img src=“G://web/qwh/1.jpg”>
  • 网络路径
    • < img src=“http://img.com/20190823.jpg”>

3、相对路径和绝对路径的总结

  • 相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径是不变的
    • 前提是网页文件和图片，必须在一个服务器上
  • 无论是 a 标签还是 img 标签，只有两种路径
    • 相对路径
      • ./image/这种路径
      • 从自己出发，找到别人
    • 绝对路径
      • 就是http://开头路径
  • 绝对不允许使用file://开头的东西，这是错的

三：图片标签的属性

  • width
    • 图片的宽度
  • height
    • 图片的高度
  • align
    • 图片的水平对齐方式
    • 默认属性是left
    • left, center, right
    • 不知道为啥center用不了
  • title
    • 提示性文本
    • 共有属性，鼠标悬停时出现的文本
  • border
    • 给图片加边框（描边），单位是像素，边框的颜色是黑色
  • Hspace
    • 指图片左右的边距
  • Vspace
    • 指图片上下的边距
  • Alt
    • 当图片显示不出来的时候，代替图片显示的内容
    • alternate“代替”的意思



  • 如果想保证图片等比缩放，请只设置 width 和 height 其中的一个
  • 如果想实现图文混排的效果，请使用 align 属性，取值为 left 或 right
<body>
	<p align="center">这是照片页面</p>
	<center>
	<img src="./backgroud.jpg" alt="无法显示" title="美景图" width="200px" border="10" >
	</center>
</body>
04 - 【HTML】- 常用标签（下篇）
weixin_43608968的博客
09-05 165
04 - 【HTML】- 常用标签（下篇）主要讲解表格、表单、列表等标签的使用和注意事项
android7.1 保存图片到系统图库
黄孝果的博客
01-17 9475
根据stormzhang博客进行更改：Adnroid中保存图片的方法可能有如下两种： 第一种是自己写方法，如下代码： public static File saveImage(Bitmap bmp) { File appDir = new File(Environment.getExternalStorageDirectory(), "Boohee"); if (!appDir.ex
html-7（JavaScript-1）
m晴朗的博客
05-28 376
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>dem</title> <style type="text/css"> h1 { color: red; } </style> </head> <body> <p id="dem">改变内容</p> <button type="button
HTML学习 - 标签总结
qq_40531442的博客
12-10 612
1. 基本骨架2. 排版标签2.1 标题标签2.2 段落标签2.3 换行标签2.4 水平分割线标签3. 文本格式化标签4. 媒体标签4.1 图片标签4.1.1 图片属性4.1.1.4 width 和 height4.2 音频标签4.3 视频标签5. 链接标签5.1 标签属性5.1.1 target属性。
语法篇--HTML
qq_62377885的博客
04-01 4456
这篇博客介绍了HTML的基本概念和常用标签，包括文本、链接、图片、表格、表单等，以及HTML5新增的一些元素，例如Canvas和视频音频嵌入等。还包含表单验证和路径等相关知识。"
Web学习记录 -- HTML标签（上）
m0_48860919的博客
01-20 1115
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、连接、文字、声音、视频等元素组成。通常我们看到的网页，常以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。HTML指的是超文本标记语言（Hyper Text Makup Language），它是用来描述网页的一种语言。
【前端】HTML标签汇总
最新发布
2302_78914800的博客
11-11 6579
在这里我们没有写 target 属性, 所以 target 会取默认值 _self 导致在本窗口打开新的网站. 为了在新窗口打开,我们把 target 取值为 _blank, 如下。被 <thead> 标签包围的行在顶端显示, 被 <tfoot> 标签包围的行在底端显示, <tbody> 在中间显示。数字输入框的属性: min 最小值, max 最大值, value 输入框的默认值, step 步长。table 是放表格的容器, tr 是表格的行, td 是表格的单元格, 没有列的概念, 如下。
7.1-7.9学习总结
hello world
07-09 380
http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。http-equiv 属性可用于模拟一个 HTTP 响应头。 <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。HTML 4.01 与 HTML5之间的差异 使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式： HTML 4.01： <meta
01-HTML+CSS
Robber的博客
03-12 1704
前端开发第一阶段熟练使用Table、Form、div等元素，并掌握Css以及Css3中新增加的特性
HTML-基础介绍
simple的博客
07-20 244
文章目录HTML-基础介绍1 开发工具的介绍1.1 编辑器1.2 五大主要浏览器1.3 PhotoShop(协助)2 浏览器的内核2.1 渲染引擎2.2 JS引擎3 web标准3.1 出现原因3.2 是什么3.3 作用4 HTML骨架4.1 定义4.2 骨架5 标签的分类5.1 双标签5.2 单标签6 标签之间的关系6.1 嵌套关系(父子关系)6.2 并列关系(兄弟关系)7 常用的标签7.1 标题标签(hx)7.2 段落标签(p)7.3 换行标签(br)7.4 水平线标签(hr)7.5 盒子标签(div)7
Python库 | django_countries-7.1-py3-none-any.whl
03-18
只需简单调用，即可在前端页面显示对应国家的国旗图片，提升用户体验。 3. **查询集扩展**：`django_countries` 提供了一些查询集方法，如 `CountryField` 的 `in` 和 `not_in` 查询，这使得在数据库查询中筛选按...
[论坛社区]飞天论坛FTBBS ASP 7.1 静态UTF-8版 Build 20100220.zip
04-04
【标签】中的"论文"暗示这个论坛系统可能被用作毕业论文的一部分，涉及到了技术实施、需求分析、系统设计等多个方面，对于撰写技术论文的学生来说，这样的源码示例可以帮助他们理解和描述项目的具体实现过程。...
大河生活网 7.1.rar
05-24
大河生活网 7.1 更新说明： 在7.0的基础上修复了个别浏览器中错位情况，修正了用户提出的错误。修改了论坛不统一的头部。调换了幻灯显示。 后台管理地址:/admin/login.asp 用户名：admin 密码：admin888 验证码...
Discuz! 7.1GBK版图片投票特殊主题插件使用教程
7.1 GBK.rar”文件的知识点详细说明： **插件功能与应用背景：** 该插件是为Discuz!论坛系统7.1版本（GBK编码）特别设计的，它能够实现一个特殊的功能——在用户创建投票帖子时，允许用户上传图片并以图片投票的...
JavaScript-3.5-JavaScript 函数-案例
QWH_PYTHON的博客
10-24 1060
JavaScript-3.5-JavaScript 函数-案例案例一：使用函数实现计算机功能二：递归 案例 一：使用函数实现计算机功能 使用 prompt 输入两个数和运算符号，计算两个数的操作结果 使用 switch 判断运算符号，调用函数计算两数结果 <!DOCTYPE html> <html lang="en"> <head> <meta ch...
HTML-1.1-HTML的介绍
QWH_PYTHON的博客
09-03 871
HTML-1.1-HTML的介绍一：HTML概述二：HTML的作用三：HTML的历史四：HTML的网络术语五：计算机编码的介绍1、ASCII码2、ANSI编码3、GBK4、Unicode编码（统一编码）5、UTF-8(Unicode Transform Format)编码6、中文能够使用的两种字符集7、避免乱码8、UTF-8和GB2313的比较六：HTML颜色介绍1、颜色表示2、RGB色彩模式 一...
JavaScript-3.1-JavaScript 函数-函数的声明与调用
QWH_PYTHON的博客
10-18 803
JavaScript-3.0-JavaScript 函数-函数的声明与调用函数的声明与调用一：函数的声明1、有参函数2、无参函数二：函数的调用三：函数的作用域四：函数声明和调用的注意事项五：函数声明与函数调用没有先后之分 函数的声明与调用 函数的主要作用是将程序中需要重复使用的代码进行封装，从而可以使代码重复使用 函数的使用 声明 调用 一：函数的声明 在 JavaScript 中，函...
CSS-6.3-CSS常用背景属性
QWH_PYTHON的博客
09-13 773
CSS-6.3-CSS常用背景属性一：背景颜色属性1、background-color二：背景图像属性1、background-image2、background-repeat3、background-size4、backgrpund-position5、background-origin6、background-clip7、background-attachment8、background C...
CSS-4.1-CSS选择器
QWH_PYTHON的博客
09-09 772
CSS-4.1-CSS选择器一：基本选择器1、标签选择器 CSS选择器 指定CSS要作用的标签，那个标签的名称就是选择器 CSS选择器分为两大类 1.基本选择器 2.扩展选择器 基本选择器 1.标签选择器：针对一类标签 2.类选择器：针对想要的所有标签使用 3.ID选择器：针对某一个特定的标签使用 4.通用选择器（通配符）：针对所有的标签都适用（不建议使用） 扩展选择器 1.后...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值