10 HTML5嵌入图片与创建分区响应图

「已注销」

于 2019-08-29 14:33:53 发布

阅读量221

点赞数

分类专栏： HTML5+CSS+JS

本文链接：https://blog.youkuaiyun.com/Tracy785/article/details/100135877

版权

HTML5+CSS+JS 专栏收录该内容

27 篇文章

订阅专栏

本文深入探讨了HTML5中如何有效嵌入图片，并详细讲解了创建响应式图像分区的方法，确保在不同设备和屏幕尺寸上提供优秀的视觉体验。通过使用新的HTML5元素和CSS3特性，实现灵活的图片显示和布局调整。

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

在这里插入图片描述

<html>
<head>
	<meta charset='utf-8'>
	<title>image</title>
</head>
<body>
<img src='D:\0Files\pics\head.jpg' width='80px'><!-- height自适应 -->
<img src='D:\0Files\pics\head1.jpg' width='80px' alt='?'><!-- 当图片丢失或不存在时,alt提示图片内容 -->
<a href='D:\0Files\pics\bg.jpg' target='_blank'>
	<img src='D:\0Files\pics\head.jpg' width='80px'>
</a>
<br><br>
<img src='D:\0Files\HTML+CSS+JS\10 hotel.jpg' width='300px' usemap='#map1'>
<form>
	<input type='image' src='D:\0Files\HTML+CSS+JS\10 hotel.jpg' width='300px'>
</form>
<map name='map1'>
	<area href='D:\0Files\HTML+CSS+JS\10 tableware.html' shape='rect' coords='22,17,75,70' target='_blank'>
	<area href='D:\0Files\HTML+CSS+JS\10 room card.html' shape='rect' coords='90,17,142,70' target='_blank'>
</map>
</body>
</html>

在这里插入图片描述