zoukankan      html  css  js  c++  java
  • map、area、picture、source、figure、figcaption元素

    map和area元素

    首先用img加载一张图片,再img里用usemap和map相关联,然后map里指定是什么形状,然后跳转到什么网址,下面具体说下shape:

    • 圆形:shape=circle,圆形的话提供圆心坐标和半径,
    • 多边形:shape=poly,然后按顺时针方向提供坐标
    • 矩形:shape=rect,需要提供左上角和右下角的坐标
    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8">
    </head>
    <body>
    	<img src="img/b.png" alt="练习" usemap="#pra">
    	<map name="pra">
    		<area shape="circle" coords="100,100,100" alt="1" href="https://www.baidu.com" target="_blank">
    		<area shape="poly" coords="200,200,400,200,400,400,200,400,300,300" alt="2" href="https://www.bilibili.com" target="_blank"> 
    		<area shape="rect" coords="420,420,660,660",alt="3" href="https://www.tencent.com" target="blank">
    	</map>
    </body>
    </html>
    

    picture元素和source元素

    在picture里可以为一张照片配置多个source,

    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8">
    </head>
    <body>
    	<picture>
    		<source media="(min- 1024px)" srcset="img/a.png">
    		<source media="(min- 512px)"  srcset="img/b.png">
    		<img src="img/c.png" alt="示例" style="auto;">
    	</picture>
    </body>
    </html>
    

    figure和figcaption元素

    将图片标记为插图,

    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8">
    </head>
    <body>
    	<figure>
    		<img src="img/a.png" alt="示例">
    		<figcaption>这是图片的标题</figcaption>
    	</figure>
    </body>
    </html>
    
  • 相关阅读:
    打包压缩文件命令
    用户与组管理命令
    cut 命令 通过列来提取文本字符
    linux文件拼接命令 paste
    shell 指定范围产生随机数
    shell 脚本随机抽取班级学生
    shell 输出九九乘法表
    shell 判断语句
    linux 排序命令sort
    linux之PATH环境变量
  • 原文地址:https://www.cnblogs.com/fate-/p/14411964.html
Copyright © 2011-2022 走看看