HTML5之图像标签

标签

常用属性：
          [src]： 规定显示图像的URL
          [alt]： 规定图像的替代文本，当图像显示出现问题时，文字会出现替代图像
          [width]： 规定图像的宽度
          [height]： 规定图像的高度
          [usemap]： 将图像定义为客户器端图像映射
          [ismap]： 将图像规定为服务器端图像映射
类别：
          文本级标签
作用：
          定义HTML页面中的图像
说明：
          从技术上讲，图像并不会插入HTML页面中，而是链接到HTML页面上。 标签的作用是为被引用的图像创建占位符
全局属性： 支持
事件属性： 支持
注意：
          1.src 和 alt 为 必需 属性
          2.若指定width=“100%”，表示不管图片尺寸，将图片设置为浏览器宽度的100%，自动按照比例确定图片高度
          3.相对路径表示符：…/ ：上层目录     ./ ：本层目录     / ：进入目录，本层目录也可以直接写文件名
          4.绝对路径：http://pic.netbian.com/uploads/allimg/180905/103725-153611504561e1.jpg
          5.出于安全考虑，浏览器是不允许页面直接读取本地硬盘资源的。除非把浏览器的安全等级调到最低。唯一直接支持本地资源的方式，是把html文件储存到本地硬盘，然后用鼠标双击这个文件运行，这样的话本地图片就可以显示。而在web环境下（即在浏览器的地址栏输入网址）则默认是不允许的，因为这违反了浏览器的同源策略 （即html文件与图片不在用一个域）

代码示例：

<img src="./img/timg.jfif" alt="这张图片可能有问题" width="600px"/>

 

标签

常用属性：
          [width]： 规定画板的宽度
          [height]： 规定画板的高度
类别：
          文本级标签
作用：
          通过 脚本 （通常是JavaScript） 来绘制图形
说明：
          该标签只是图形容器，必须使用脚本来绘制图形
全局属性： 支持
事件属性： 支持
详见： https://blog.csdn.net/ff906317011/article/details/80415137

代码示例：

<canvas id="myCanvas" style="border: 1px solid;">你的浏览器不支持HTML5 canvas标签。canvas>
<script>
	var c = document.getElementById('myCanvas');
	var ctx = c.getContext('2d');
	ctx.fillStyle = '#FF0000';
	ctx.fillRect(0,0,80,100);
script>

 

常用属性：
          [name]： 必需，为image-map规定的名称，用来被img标签中的usemap使用
类别：
          文本级标签
作用：
          该标签用于客户端图像映射，图像映射指带有可点击区域的一幅图像
说明：
           中的 usemap 属性可引用 的 id 或 name 属性 （取决于浏览器），所以我们应同时向 添加 id 和 name 属性
全局属性： 支持
事件属性： 支持
 

标签

常用属性：
          [href]： 规定区域的目标URL
          [alt]： 规定区域的替代文本。如果使用 href 属性，则该属性是必需的
          [rel]： 规定当前文档与目标URL之间的关系
          [target]： 规定在何处打开目标URL
          [shape]： 规定区域的形状
          [coords]： 规定区域的坐标，有以下三种情况：
                    1. 圆形： shape=“circle”，coords=“x,y,z”：这里的x和y定义了圆心的位置 （"0,0"是图像左上角的坐标），r是以像素为单位的圆形半径。
                    2. 矩形： shape=“rect”，coords=“x1,y1,x2,y2”：第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，“0,0” 是图像左上角的坐标。定义举行实际上是定义带有四个顶点的多边形的一种简化方法
                    3. 多边形： shape=“poly”，coords=“x1,y1,x2,y2,x3,y3,…”：每一对"x,y"坐标都定义了多边形的一个顶点 （"0,0"是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域
类别：
          文本级标签
作用：
          标签定义图像映射内部的区域 （图像映射指的是带有可点击区域的图像）
说明：
           标签中的 usemap 属性与 标签中的 name 相关联，以创建图像与映射之间的关系
全局属性： 支持
事件属性： 支持

代码示例：

<img src="img/planets.gif" alt="这张图片可能有问题！" width="146" height="126" usemap="#img-map">
<map name="img-map">
	<area href="img/sun.gif" alt="this is sun!" target="_blank" shape="rect" coords="0,0,82,126"/>
	<area href="img/merglobe.gif" alt="this is mercur!" target="_blank" shape="circle" coords="91,59,3"/>
	<area href="img/venglobe.gif" alt="this is venus!" target="_blank" shape="circle" coords="124,58,8"/>
map>

 

标签

类别：
          容器级标签
作用：
          规定独立的流内容 （图像、图表、照片、代码等等）
说明：
          figure标签的内容应该与主内容相关，同时标签的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响
全局属性： 支持
事件属性： 支持
注意：
          1.使用

标签添加插图，并设置浮动，相关的文本可以在其附近围绕。
          2.

标签内部还可以添加

图题，其包含了对图片的完整说明
 

标签

类别：
          容器级标签
作用：
          为figure标签定义标题
说明：
          该标签应该被置于

标签的第一个或最后一个子标签的位置
全局属性： 支持
事件属性： 支持

代码示例：

<figure style="border: 1px solid red; width: 800px;">
	<img src="img/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
	<figcaption style="border: 1px solid green;">Fig1. - A view of the pulpit rock in Norway.figcaption>
figure>