HTML实例之图像

最新推荐文章于 2022-12-14 07:42:38 发布
最新推荐文章于 2022-12-14 07:42:38 发布
阅读量280 收藏
点赞数
分类专栏： HTML实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43131852/article/details/101374796
版权

参考https://www.w3school.com.cn/html/index.asp

插入图像

<html>

<body>

<p>
一幅图像：
<img src="https://www.w3school.com.cn/i/eg_mouse.jpg" width="128" height="128" />
</p>

<p>
一幅动画图像：
<img src="https://www.w3school.com.cn/i/eg_cute.gif" width="50" height="50" />
</p>

<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>

</body>
</html>

在这里插入图片描述

从不同的位置插入图片

<html>

<body>

<p>
来自另一个文件夹的图像：
<img src="http://www.w3school.com.cn/i/ct_netscape.jpg" />
</p>

<p>
来自 W3School.com.cn 的图像：
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
</p>

</body>
</html>

在这里插入图片描述

背景图片

<html>

<body background="http://www.w3school.com.cn/i/eg_background.jpg">

<h3>图像背景</h3>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面，图像会进行重复。</p>

</body>
</html>

在这里插入图片描述

排列图片

<html>

<body>

<h2>未设置对齐方式的图像：</h2>

<p>图像 <img src ="http://www.w3school.com.cn/i/eg_cute.gif"> 在文本中</p>

<h2>已设置对齐方式的图像：</h2>

<p>图像 <img src="http://www.w3school.com.cn/i/eg_cute.gif" align="bottom"> 在文本中</p>

<p>图像 <img src ="http://www.w3school.com.cn/i/eg_cute.gif" align="middle"> 在文本中</p>

<p>图像 <img src ="http://www.w3school.com.cn/i/eg_cute.gif" align="top"> 在文本中</p>

<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

</body>
</html>

在这里插入图片描述

浮动图像

<html>

<body>

<p>
<img src ="http://www.w3school.com.cn/i/eg_cute.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>

<p>
<img src ="http://www.w3school.com.cn/i/eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

</body>
</html>

在这里插入图片描述

调节图像尺寸

<html>

<body>

<img src="http://www.w3school.com.cn/i/eg_mouse.jpg" width="50" height="50">

<br />

<img src="http://www.w3school.com.cn/i/eg_mouse.jpg" width="100" height="100">

<br />

<img src="http://www.w3school.com.cn/i/eg_mouse.jpg" width="200" height="200">

<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>

</body>
</html>

在这里插入图片描述

为图片显示替换文本

<html>

<body>


<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>

<p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>

<img src="http://www.w3school.com.cn/i/eg_goleft.gif" alt="向左转" />

<p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>

<img src="http://www.w3school.com.cn/i/eg_goleft123.gif" alt="向左转" />

</body>
</html>

在这里插入图片描述

制作图像链接

<html>

<body>
<p>
您也可以把图像作为链接来使用：
<a href="http://www.w3school.com.cn/example/html/lastpage.html">
<img border="0" src="http://www.w3school.com.cn/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>

在这里插入图片描述

创建图像映射

<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img
src="http://www.w3school.com.cn/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="http://www.w3school.com.cn/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="http://www.w3school.com.cn/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="http://www.w3school.com.cn/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

在这里插入图片描述

把图像转换为图像映射

<html>

<body>

<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>

<a href="http://www.w3school.com.cn/example/html/html_ismap.html">
<img src="http://www.w3school.com.cn/i/eg_planets.jpg" ismap />
</a>

</body>
</html>

在这里插入图片描述

唱戏先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML-img图片详解
主营前端方向，技术栈是vue
11-22 5687
图片(img图片标签说明和属性、src路径、png24图片问题解决方法，相对路径、格式和使用规则，背景图片的样式、重复方式、定位、简写，sprite雪碧图精灵图原因和实例说明)
HTML实例
jiayuScholar的博客
03-03 387
HTML实例 0.欢迎进入HTML <html> <head> <title>HTML学习</title> </head> <body> welcome to html! </body> </html> 实例展示： [外链图片转存失败,源站可能有防盗链机制,...
Qt中插入html样式
连城
04-20 1305
Qt中引入html调节样式 HTML 设置行间距字体高度和颜色 <html><head/><body><p style=\"height:16px;line-height:24px;color:#787878\"> helloWorld</p></body></html> 技巧 实现Html链接动态...
Qt学习笔记：QLabel同时显示图片和文字
热门推荐
chase_hung的博客
08-25 4万+
前言 QLabel是Qt自带的一个显示用控件，可以用来显示图片和文本。其使用也非常方便：用setPixmap(const QPixmap &amp;amp;amp;amp;)接口来设置要显示的图片，用setText(const QString &amp;amp;amp;amp;)接口来设置要显示的文本。然而在使用过程中，我发现QLabel的setPixmap(const QPixmap &amp;amp;amp;amp;)和setText(const QString...
HTML 图像实例
Zyyss1993的博客
11-14 306
61.插入图像本例演示如何在网页中显示图像。图像标签（<img>）和源属性（Src）在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是：<img src="u...
HTML 实例
一个臭小孩的修炼之路
12-14 329
HTML教程-------HTML简介
html.rar_html实例
09-22
这个名为“html.rar”的压缩包文件似乎是一个丰富的HTML实例集合，对于学习和理解HTML的各种功能和结构提供了宝贵的资源。接下来，我们将深入探讨HTML的一些核心概念和常见元素，以及如何通过实例来提升你的HTML技能...
html+css实例小demo
最新发布
05-31
在这些实例中，我们可能看到如何创建基本的元素如标题（`<h1>`至`<h6>`）、段落（`<p>`）、链接（`<a>`）、图像（`<img>`）以及表格（`<table>`）。更进一步，还会展示如何使用语义化标签（如`<header>`、`<nav>`、`...
html5实例代码
07-29
这个“HTML5实例代码”压缩包很可能是包含了一系列使用HTML5新特性的示例代码，用于帮助开发者理解和应用这些特性。 1. **离线存储**：HTML5引入了离线存储（AppCache）机制，允许网页在用户离线时也能访问。通过...
html的简单例子—包括好多有用的标记啊~
12-29
使用了简单的几个标记，很适合初学者使用啊~~~~~~~~~这只是一个静态的网页啊~~
非常漂亮的网站html页面原型
09-19
非常漂亮的网站html页面原型
html5 实例详解
07-14
4. **SVG矢量图**：HTML5支持内嵌SVG（Scalable Vector Graphics）图形，SVG是一种可缩放的矢量图形格式，可以实现高质量的图像显示，且文件大小较小。 5. **离线存储**：通过离线存储（App Cache）机制，开发者...
HTML5外企网站实例源码
10-14
"HTML5外企网站实例源码"是一套由国外资深开发者编写的示例代码，旨在展示如何运用HTML5技术来构建企业级别的商业网站。这些实例涵盖了网站布局、用户登录以及内容展示等多个关键环节，对于学习和理解HTML5的应用...
HTML四个实例
m0_70933211的博客
08-16 1487
HTML四个实例1.HTML 标题（Heading）是通过 二、HTML 段落 1.HTML 段落是通过 标签进行定义的 以下实例 三 、HTML 链接 HTML 链接是通过 标签进行定义的 以下实例 注释：在 href 属性中指定链接的地址HTML 图像是通过 标签进行定义的 以下实例 注释：图像的名称和尺寸是以属性的形式提供的.........
HTML创建图片
在到处之间找我
03-04 1426
&lt;img&gt;标签定义和用法img元素向网页中嵌入一幅图像。注意：从技术上说，&lt;img&gt;标签并不会在网页中插入图像，而是从网页上链接图像。&lt;img&gt;标签创建的是被引用图像的占位空间。&lt;img&gt;标签有两个必须的属性：src属性和alt属性必须的属性src属性设置图片的位置（显示图片），规定显示图像的URL。要在页面上显示图像，需要使用源属性（src）。sr...
初识HTML（八）——图像
weixin_45927758的博客
07-07 242
1.插入图像 <!DOCTYPE HTML> <html> <body> <p> 一幅图像： <img src="https://pics.images.ac.cn/image/5f01cc56d34fe.html" width="128" height="128" /> </p> <p> 一幅动画图像： <img src="/i/eg_cute.gif" width="50" height="50" /&g
HTML 图像程序案例1（一看就懂）
chenggong9527的博客
07-03 131
这相对简单的，就不做多说了，后续细节可以不断的补充，完善。 效果 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device...
html图片标签的实例,HTML-
weixin_39851048的博客
06-04 172
一、img的属性：alt/titlealt属性是替换名字，是给搜索引擎抓取使用，当图片显示不出来时，就会显示出alt的内容；title 属性是提示文字，当鼠标移到图片上的时候会显示出来，大部分的标签都会有这个属性*******************************alt和title属性的区别******************************** alt属性：alt属性是为了在文...
HTML语言实例教程：源代码解析
"HTML语言源代码实例，包括基本结构、换行标签、强制不换行标签、自动换行标签、分段控制标签以及原样...随着经验的积累，还可以学习更复杂的HTML元素，如表格、图像、链接、样式和脚本等，以实现更丰富的网页设计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

唱戏先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值