• [07]HTML基础之图片标签


    1. <img>标签

    显示给定来源的图片。

    <img src="//www.juetan.cn" alt="头像" width="120" height="120">
    属性:
    src:图片来源地址,使用相同协议时,可省略协议
    alt:图片来源地址失效时使用,用于描述当前图片内容
    图片宽度
    height:图片高度
    ismap:是否为图像映射
    usemap:使用图像映射,值为#+对应映射元素的name属性值
    作为普通图片使用时,建议前四个属性都写上,不仅更加符合语义化,还能防止图片失效时
    影响页面布局;
    

    2. <area>标签

    定义图片映射内部的可点击区域。

    常用属性:
    shape: 区域形状,rect矩形,circle圆形,poly多边形,default默认
    coords:区域的坐标
    href:点击区域后的跳转地址
    alt:区域的替代文本
    其他属性:
    hreflang:目标地址的语言
    rel:当前图像与目标地址的关系
    media:在哪种设备使用该图像映射
    target:以什么形式打开目标地址
    type:目标地址的MIME类型
    

    3. <map>标签

    定义图像映射,与标签搭配。

    定义图片的映射,可用于地图之类的跳转点击
    name:图像映射的名字,应唯一
    

    4. <figture>标签

    表示图片容器。

    用作文档中插图的图片,与figcaption标签搭配使用
    <figture>
        <img src="//j.cn/sky.png" alt="傍晚的天空" width="300" height="200">
        <figcaption>傍晚的天空</figcaption>
    </figture>
    

    5. <figcaption>标签

    表示图片容器的标题,与<figture>标签搭配。
    使用如上,相较于直接使用img标签,这两个标签增加了语义化

    6. <svg>标签

    表示矢量图行,有专门的绘画API。

    7. <convas>标签

    表示标量图形,有专门的绘画API。

  • 相关阅读:
    [fw]error: aggregate value used where an integer was expected
    [fw]awk求和
    [fw]谈EXPORT_SYMBOL使用
    [fw]用Kprobes调试(debug)内核
    [FW]使用kprobes查看内核内部信息
    linux缺頁異常處理--內核空間[v3.10]
    用C语言给指定的内存地址赋值(通过指针)
    [fw]Linux 的 time 指令
    how to prevent lowmemorykiller from killing processes
    Android成长日记-Noification实现状态栏通知
  • 原文地址:https://www.cnblogs.com/juetan/p/13033259.html
Copyright © 2020-2023  润新知