常用属性:
[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>