<img>标签的补充

最新推荐文章于 2022-02-15 15:22:30 发布
最新推荐文章于 2022-02-15 15:22:30 发布
阅读量117 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/Vayne-N/p/6770017.html
本文介绍如何使用HTML中的&lt;img&gt;、&lt;map&gt;和&lt;area&gt;标签创建图像映射，并展示如何设置img元素的vertical-align属性实现不同对齐效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、img的对齐

img可以用vertical-align: ;属性来决定横排对齐方式；默认值为bottom；

vertical-align: ;可以作用于img或文字或display:inline-block;的元素

2、创建图像映射

带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

标签描述
<img>定义图像
<map>定义图像地图
<area>定义图像地图中的可点击区域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>

</body>
</html>

效果图：；

点击图中三个星球会有三个不同的跳转。

 

转载于:https://www.cnblogs.com/Vayne-N/p/6770017.html

你不知道的＜img＞
liuhao9999的博客
11-18 813
src属性是必须的，它包含了你想嵌入的图片的文件路径。 alt属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。 还有很多其他属性，可以实现各种不同的目的： Referrer/CORS控制，保证安全与隐私：详见crossorigin属性和referrerpolicy...
css--实现img图片填充，剪裁效果
haoyanyu_的博客
04-20 1万+
业务背景 实现一个轮播图，轮播区域宽度自适应，高度100px; 图片分辨率由用户上传获得。为了让图片不变形，需要对图片进行居中裁剪。 实现 使用css的属性 object-fit： cover 原理 css可替换元素 展示效果不是由css决定，是一种外部对象， 它们外观的渲染独立于css css不会影响到其中内容的展示，只能改变它的位置，和内容在框里的位置或者定位方式。 例如 object-...
img标签关于填充方式的属性
小于零等于二的博客
02-15 1万+
img属性object-fit 属性值：object-fit: fill / contain / cover / none / scale-down; fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。 contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。 cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。 none: 保持原有尺寸比例。同时保
img标签用法总结，及常见问题
08-04 502
 关健：功能：img标签用于插入图像。
html让背景图片自适应填充整个页面
热门推荐
爱撒娇的披萨
12-23 4万+
方法一： body类的样式：去除默认外边距和内外距为0； body中写img标签：图片设置宽高都为100%，位置为absolute； <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body { padding: 0; margin: 0; } img
html怎么使图片自动填充,CSS怎么将img图片填满父容器div自适应容器大小
weixin_39669075的博客
05-30 7684
CSS怎么将img图片填满父容器div自适应容器大小发布时间：2021-03-19 09:35:26来源：亿速云阅读：114作者：小新这篇文章将为大家详细讲解有关CSS怎么将img图片填满父容器div自适应容器大小，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。当一个页面中引入多张图片时候，会碰到图片尺寸不一致，单要求显示成一致的大小，我们直接设置图片尺寸会导致图...
html 图片 填充方式,HTML5 Canvas图片填充样式讲解
weixin_39640573的博客
06-04 1348
本篇教程探讨了HTML5 Canvas图片填充样式讲解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。<html>canvas*{margin:0;padding:0;outline:none;border:none;}#canvas{width:7rem;margin:.25rem001.5rem;border:1pxsolid...
<html> <head> <meta charset = "UTF-8" /> <title> 山科院</title> <link rel = "icon" href = "ui.ico" type ="image/x-icon" /> <meta name ="keywords" content = "" /> <meta name = "description" content = "" /> <link rel = "stylesheet" href = "css/commom.css" /> </head> <body> <div id = "header"> <div><img src = "img\logo横板.png" width = "236"></div> <ul> <li class = "cur"><a href = ""> 首页</a></li> <li><a href = ""> 特色</a></li> <li><a href = ""> 详细</a></li> <li><a href = ""> 路人世界</a></li> </ul> <ul class = ""> <li class = "c"><a href = "D:\ONE\images"> 登录</a></li> <li> | </li> <li><a href = ""> 注册</a></li> </ul> </div> <!--banner--> <div id = "banner" > <div class = "banner_img"> <!--滚图--> <img src = "img/6.jpg" /> </div> <div> </div> </div> </body> </html>
06-11
<p>这是相关内容或补充说明。</p> </aside> </article> ``` ##### （2）内联元素 内联元素不会独占一行，而是与其他内容在同一行显示。常见的内联元素包括： - `<span>`：通用的内联容器，常用于样式或脚本操作。...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Contact</title> <link rel="stylesheet" type="text/css" href="css/style_mobile.css"> <script language="javascript" type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script language="javascript" type="text/javascript" src="js/action.js"></script> </head> <body> <div id="container"> <div id="header"> <div id="logo">David Lanham</div> <ul> <li><a href="Index.html">Blog</a></li> <li><a href="Work.html">Work</a></li> <li><a href="About.html">About</a></li> <li><a class="active" href="Contact.html">Contact</a></li> </ul> </div> <div id="content"> <p class="content_text">Contact</p> <div id="from"> <form action="/submit" method="POST"> <tr><p class="font">Name<font color="#FF0000">*</font></p></tr> <tr><input class="input" type="text" name="name" id="name" ></tr> <tr> <p class="font">Email<font color="#FF0000">*</font></p></tr> <tr><input class="input" type="text" name="email" id="email"></tr> <tr> <p class="font">Message<font color="#FF0000">*</font></p></tr> <tr><textarea class="msginput" type="text" name="message" id="message"></textarea></tr> <tr><button type="submit" class="button">SUBMIT</button></tr> </form> </div> </div> <div id="footer"> <div id="fttext"> <p>All illustrations on this site are from the very talented</p> <p> illustrator and designer David Lanham. Make sure to</p> <p>check out his work at <a href="#">DavidLanham.com.</a></p> </div> <div id="ftimage"> <a href="#"><img src="images/footer_baby.png"></a> </div> <div id="ft_text"> <p class="ftname">David Lanham</p> <p class="ftabout">I create beatufiul illustrations and designs.<a href="#">About me.</a></p> </div> <ul> <li><a href="#"><img src="images/footer_bird.png"></a></li> <li><a href="#"><img src="images/footer_ball.png"></a></li> <li><a href="#"><img src="images/footer_be.png"></a></li> <li><a href="#"><img src="images/footer_@.png"></a></li> <li><a href="#"><img src="images/footer_message.png"></a></li> </ul> </div> </div> </body> </html>
最新发布
08-12
<li><a href="#"><img src="images/footer_message.png" alt="Contact"></a></li> </ul> </footer> </div> </body> </html> ``` --- ### **4. 关键改进点** 1. **语义化标签**： - 使用 `<header>`、`<nav>`...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>首页</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="box"> <nav> <img src="img/logo.png"> <ul id="nar"> <li class="lis"> <a href="index.html">首页</a> </li> <li class="lis"> <a href="page1.html">热门景点</a> </li> <li class="lis"> <a href="page2.html">特产美食</a> <ul class="lison"> <li><a href="#">特产</a></li> <li><a href="#">美食</a></li> </ul> </li> <li class="lis"> <a href="page3.html">民俗文化</a> <ul class="lison"> <li><a href="#">西河大鼓</a></li> <li><a href="#">吴桥杂技</a></li> <li><a href="#">河北梆子</a></li>> </ul> </li> <li class="lis"> <a href="page4.html">用户调研</a> </li> </ul> <div id="time"></div> </nav> <div class="banner"> <ul class="banner_pic" id="banner_pic"> <li class="current"><img class="one" src="img/p2.jpg" /></li> <li class="pic"><img class="one" src="img/p1.jpg" /></li> <li class="pic"><img class="one" src="img/p3.jpg" /></li> </ul> <ol id="button"> <li class="current"></li> <li class="but"></li> <li class="but"></li> </ol> </div> <table class="city"> <tr> <td><img src="img/p4.jpg"></td> <td><img src="img/p5.jpg"></td> <td><img src="img/p6.jpg"></td> <td><img src="img/p7.jpg"></td> <td><img src="img/p8.jpg"></td> </tr> <tr> <td> <h2>石家庄</h2> </td> <td> <h2>唐山</h2> </td> <td> <h2>张家口</h2> </td> <td> <h2>保定</h2> </td> <td> <h2>秦皇岛</h2> </td> </tr> </table> <h1>——<span>河北宣传片</span>——</h1> <div class="video"> <video src="img/shipin.mp4" controls></video> <p>这片土地既丰富又神秘<br> 没有人知道<br> 还有多少未知的物种等待去发现<br> 而即便是那些已经被广泛知晓的物种<br> 以我们目前的认知<br> 也仅仅只掌握了密码的一小部分<br> 每种生命都是复杂而珍贵的<br> 尊重和爱护它们的密码<br> 也是在保护我们自身的未来<br> 人们未来美好生活的蓝图<br> 建立在生物多样性的繁盛之上<br> 这张蓝图宏伟且谦卑<br> 它既承载着中国智慧<br> 也承载着世界生态文明的未来<br> <span>视频来源：河北文旅</span> </p> </div> <footer> <div> <p>电话：1234567890<br> 邮箱：6666666@163.com<br> </p> <img src="img/logo.png"> </div> <p style="text-align: center;">©河北文旅</p> </footer> </div> <script src="js/js.js"></script> </body> </html>分析此代码每行都是什么意思
06-06
DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>示例页面</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="box"><h2>欢迎标题</h2><p>这是一个示例内容。</p></div></...
``` <form action="xxx.jsp" method="GET" name="性别;生日;所在地区;婚姻状况;学历;喜欢的类型;自我介绍;"> <table width="500"> <style> body{ display:grid; place-content: center; height: 100vh; margin: 0%; font-family: '黑体'; font-size: 100px; } </style> <tr> <td><b>性别</b></td> <td> <input type="radio" id="man" name="sex"/> <label for="man"><img src="images/man.jpg"> 男 </label> <input type="radio" id="women" name="sex"/> <label for="women"><img src="images/women.jpg"> 女 </label> </td> </tr> <tr> <td><b>生日</b></td> <td> <select name="year"> <option selected="selected">--请选择年--</option> <option>1990</option> <option>2000</option> <option>2010</option> </select> <select name="month"> <option selected="selected">--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select name="day"> <option selected="selected">--请选择日--</option> <option>11</option> <option>12</option> <option>13</option> </select> </td> </tr> <tr> <td><b>所在地区</b></td> <td> <input type="text" value="安徽" name="area"> </td> </tr> <tr> <td><b>婚姻状况</b></td> <td> <input type="radio" name="marital_status" id="spinsterhood"> <label for="spinsterhood"> 未婚 </label> <input type="radio" name="marital_status" id="married"> <label for="married"> 已婚 </label> <input type="radio" name="marital_status" id="divorce"> <label for="divorce"> 离婚 </label> <input type="radio" name="marital_status" id="secret"> <label for="secret">保密</label> </td> </tr> <tr> <td><b>学历</b></td> <td><input type="text" name="edu_bg"></td> </tr> <tr> <td><b>喜欢的类型</b></td> <td> <input type="checkbox" name="like_type" id="wumei"> <label for="wumei"> 妩媚的 </label> <input type="checkbox" name="like_type" id="keai"> <label for="keai"> 可爱的 </label> <input type="checkbox" name="like_type" id="xiaoxianrou"> <label for="xiaoxianrou"> 小鲜肉 </label> <input type="checkbox" name="like_type" id="laolarou"> <label for="laolarou"> 老腊肉 </label> <input type="checkbox" name="like_type" id="douxihuan"> <label for="douxihuan"> 都喜欢 </label> </td> </tr> <tr> <td><b>自我介绍</b></td> <td> <textarea cols="30" rows="10" name="self_introduction"></textarea> </td> </tr> <tr> <td> <input type="submit" value=" 免费注册 "> </td> </tr> </table> </form>```帮我生成一个完整的正确代码
04-01
还有，图片标签`<img src="images/man.jpg">`中的路径是否正确，需要确保图片存在，但用户可能只是示例，所以暂时保留。 总结需要修改的地方： 1. 修正表单的`name`属性，去掉分号分隔的错误。 2. 为所有单选按钮...
css图片填充的几种方式
weixin_30444105的博客
08-19 1万+
当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。 img有个属性object-fit 属性值：object-fit: fill / contain / cover / none / scale-down; fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。 conta...
js方法中多个参数的获取和向img标签中填充src
Amor_fatii的博客
07-16 853
function toTpage(page,typeId){     alert("page="+arguments[0]+",typeId="+arguments[1]); }$('#image').attr('src','&lt;%=contextPath%&gt;/'+img);
html中img显示图片的两种常用方式
archer的技术故事
09-19 1万+
html中img显示图片的两种常用方式
align="absmiddle"
thamsyangsw的专栏
12-24 1488
AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。 AbsMiddle 图像的中间与同一行中最大元素的中间对齐。 Baseline 图像的下边缘与第一行文本的下边缘对齐。 Bottom 图像的下边缘与第一行文本的下边缘对齐。 Left 图像沿网页的左边缘对齐，文字在图像右边换行。 Middle 图像的中间与第一行文本的下边缘对齐。 NotSet 未设定对齐方式。 Right 图像沿网
img之间的空白和img的对齐方式
学知不足，业精于勤。
06-08 3002
去除img之间的空白 今天无意的一句代码居然搞定了且Ie、Firefox、Chrome、 Opera完全兼容。 去掉Img标签下的间距代码(红色部分)： img src="http://www.aaa.cn/images/logo.gif" align="absmiddle" /> 看我有间距没 终于可以松下一口气了。 注： 以前的解决方法是css中设置img标签的vertica
解决多个img标签之间出现间距问题
QUX轻博客
12-07 610
作为开发人员，我们在日常开发工作中经常会遇到由多个图片组成的页面。虽然元素之间的填充值设置为零，但我们仍然可以看到两张图片之间会有一个难看的间隙，无法无缝拼接。 ...
html5图片的纵向排列,css让图片横着排列的方法
weixin_42303112的博客
05-30 7877
css让图片横着排列的方法发布时间：2021-01-11 11:52:50来源：亿速云阅读：197作者：小新这篇文章给大家分享的是有关css让图片横着排列的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。css让图片横着排列的方法：首先创建一个div来包裹所有的图片；然后隐藏外层div在纵向的滚动条，将横向滚动条设置为自动；最后设置外层div的white-space属...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值