HTML5之图像标签

标签

常用属性:
          [src]: 规定显示图像的URL
          [alt]: 规定图像的替代文本,当图像显示出现问题时,文字会出现替代图像
          [width]: 规定图像的宽度
          [height]: 规定图像的高度
          [usemap]: 将图像定义为客户器端图像映射
          [ismap]: 将图像规定为服务器端图像映射
类别:
          文本级标签
作用:
          定义HTML页面中的图像
说明:
          从技术上讲,图像并不会插入HTML页面中,而是链接到HTML页面上。 标签的作用是为被引用的图像创建占位符
全局属性: 支持
事件属性: 支持
注意:
          1.srcalt必需 属性
          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 属性可引用 idname 属性 (取决于浏览器),所以我们应同时向 添加 idname 属性
全局属性: 支持
事件属性: 支持
 

标签

常用属性:
          [href]: 规定区域的目标URL
          [alt]: 规定区域的替代文本。如果使用 href 属性,则该属性是必需的
          [rel]: 规定当前文档与目标URL之间的关系
          [target]: 规定在何处打开目标URL
          [shape]: 规定区域的形状
          [coords]: 规定区域的坐标,有以下三种情况
                    1. 圆形: shape=“circle”coords=“x,y,z”:这里的xy定义了圆心的位置 ("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>

你可能感兴趣的:(前端技术-HTML)