(22)HTML标签详解之<img><map><area>
来源:互联网 发布:交叉熵 圣经网络 编辑:程序博客网 时间:2024/05/14 09:33
HTML标签详解之<img><map><area>
在任何一个网页中图片都是很常见的,有的作为背景图片,有的是直接插入在网页中作为展示或者链接。
<img>标签的四大属性width、height、src 和 alt 。在一个图文混排的网页中,需要注意图片与周围文字的排布情况。以往都是使用align属性来设置如何根据周围的文本来排列该图像,但是建议使用float属性来控制图片与文字的排布。
默认情况下,图片后如果紧跟着英文,则文字会在下一行显示,并且不能够自动换行。汉字则可以当前行显示并且自动换行。实现自动换行可以在外部div中使用word-break:break-all属性。
此截图效果对<img>标签使用了float:left;属性。右侧文字的首行缩进,对外面的div使用了text-indent:2em; 属性。
对于"text-indent:2em;"属性,只能加在块状元素上面,内联元素是不起作用的。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /></map>应用<map>和<area>可以对一张图片中特定的区域设置链接,最主要的是<area>标签中的shape属性和坐标coords属性。
圆形:shape="circle",coords="x,y,z"
这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。
多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形:shape="rectangle",coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。
如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。 0 0
- (22)HTML标签详解之<img><map><area>
- HTML标签<img><map><area>
- html<img><map><area>标签总结
- <html>img、map、area
- html中的Map,area标签详解
- html中的Map,area标签详解
- html map area 标签
- html map area 标签
- html之img标签
- HTML标签 map area的使用
- 备战黑马程序员-html(<map>、<img>、列表标签)
- 前端html之img标签
- web前端之html图片操作详解从零开始(三)----img标签
- html之map标签
- html area map标签的使用(局部区域标记可以点击)
- HTML <area><map>标签及在实际开发中的应用
- HTML学习之路02--img标签
- HTML <map> <area>
- vs运行时出现的问题及其解决方法1.1——1.10
- LeetCode进阶之路(Reverse Nodes in k-Group)
- Java中的基本数据类型
- JAVA(七)java面向对象1-面向对象的概念,类与对象
- 算法竞赛入门经典3.3 数数字UVa1225
- (22)HTML标签详解之<img><map><area>
- 设计模式10_门面模式
- Mac 升级到El Capitan或者Yosemite出现用户级目录404 NOT FOUND的解决方案
- leetcode题解日练--2016.7.27
- Java第三天
- 剑指offer——丑数
- [CF Gym 100827F] Knights [2014-2015 ACM-ICPC Pacific Northwest Regional Contest F]
- 物联网开发的生命周期模型
- 关于新导入java项目后提示:Configure build path