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>
然后得到的内容截图就是下面这个:

其中要说明的是:点击那个2蓝色字幕的时候会自动跳转到下一个窗口并且展示出新的照片

是不是感到很熟悉,没错,这就是之前的照片

接着,咱们还要说明的就是那个,点击4的pycharm的照片以及5的圆形图片的内部的时候会自动的跳转到另一个界面,但是由于新的界面跟原有的界面是一致的,因此,我们看到的仅仅是这个界面突然的闪了一下,嗯,这也可以很好地解释:为什么我们看小说点击“下一章”的时候会突然跳到某个黄色网站或者是棋牌广告界面网站。

希望本次分享能我让你学到点东西,谢谢大家能看到这里,大佬勿喷!

猜你喜欢

转载自www.cnblogs.com/2142781703wangzhichao/p/10792486.html