HTML5网页制作(3)

今天,就开始嵌入图片以及创建图片分区的学习吧!

HTML5网页制作(3)

HTML5网页制作(3)

这两张图片其实是我用HTML5写的(纯粹当做笔记来记了),以上就是今天要学的一些内容

下面是我今天敲的代码:

 【冒泡】林北的爸爸 2019/4/29 19:37:07

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>王智超练习五</title>
</head>
<body>
<h1 align="center">今天先说嵌入图片,接着说创建分区响应图</h1>
<ol type="1">
<li>先开始嵌入图片</li>
<img  src="download2.png" width="128px"/>
    <a href="text001.html" target="_blank">
     <li>这是新创建一个窗口</li>
    </a>
    <br />
    <img src="timg.png" usemap="#map1 "/><!--其中的src仅仅是用来设置图片(显示图片)-->
    <li>这是另一种方式嵌入图片</li>
    <br />
<li>下面的是创建图片响应分区</li>其中的
    <form>
     <input type="image" src="timg.png" />
    </form>
    <map name="map1" >
     <area href="text001.html" shape="rect" coords="5,7,68,98" target="_blank"/><!--其实,这个rect是shape(形状)里的一个,coords测量的就是个边缘的x或者是y的值,这样点击相应的区域后就能跳转到下一个链接地址-->
    </map>
    <li>下面的是另一个常见的图形类型</li>
    <form>
     <input type="image" src="download2.png"  width="128px"/>
    </form>
    <map name="map2">
     <area href="download2.png" shape="circle" coords="64,64,64" target="_blank" /><!--其实,这个跟上面的那个类似,只需要测量的是圆的左右边缘到圆心的距离以及半径就可以了-->
    </map>
</ol>
</body>
</html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzdpwp.html