HTML5网页制作（3）
今天，就开始嵌入图片以及创建图片分区的学习吧！
这两张图片其实是我用HTML5写的（纯粹当做笔记来记了），以上就是今天要学的一些内容
下面是我今天敲的代码：
<!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的圆形图片的内部的时候会自动的跳转到另一个界面，但是由于新的界面跟原有的界面是一致的，因此，我们看到的仅仅是这个界面突然的闪了一下，嗯，这也可以很好地解释：为什么我们看小说点击“下一章”的时候会突然跳到某个黄色网站或者是棋牌广告界面网站。
希望本次分享能我让你学到点东西，谢谢大家能看到这里，大佬勿喷！
HTML5网页制作（3）的更多相关文章
- HTML5网页制作教程:HTML5块级链接
网页制作Webjx文章简介:Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5, ...
- HTML5 网页制作技巧
本文总结自由人民邮电出版社出版的<HTML.CSS.Javascript网页制作>. 总结进行学习,并分享给同样编写HTML5的朋友. 1:背景音乐的添加 <embed src=&q ...
- HTML5网页制作好好玩啊
---恢复内容开始--- 这两天在看HTML5,由于学习的需要,所以要学的,嗯,这个整人还是很有意思的(但是超超是好人,从不干坏事) 现在请欣赏一下我的代码和图片吧!(想整人的小伙伴可以自己copy来 ...
- HTML5 页面制作工具
https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站 81 235 初页 制 ...
- IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作
学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...
- 推荐21款最佳 HTML5 网页游戏
尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等 ...
- 学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）
最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...
随机推荐
- 一个通过GINA拦截 盗窃登陆口令的病毒分析
病毒行为: 1\将资源中的DLL释放到当前目录下 2\设置注册表,将GINA DLL设置为上一步中释放的DLL DLL行为: 1\在DLL被进程装载时, 装载正常的msgina.dll, 并保存句柄, ...
- 关于SQLSERVER数据库连接池
页内导航 1.如何开启连接池? 2. 那连接池是和有什么有关呢? 3.如何使用相同的连接池访问不同的数据库? ‘关于数据库连接池大家都听说过或者用过,但真正的了解有多少呢? 数据连接池如何启用?有哪些 ...
- erlang并发编程（二）
补充-------erlang并发编程 Pid =spawn(fun()-> do_sth() end). 进程监视: Ref = monitor(process, Pid)靠抛异常来终结进程 ...
- flink基础教程读书笔记
数据架构设计领域发生了重大的变化,基于流的处理是变化的核心. 分布式文件系统用来存储不经常更新的数据,他们也是大规模批量计算所以来的数据存储方式. 批处理架构(lambda架构)实现计数的方式:持续摄 ...
- xml的作用
XML应用面主要分为两种类型,文档型和数据型.下面介绍一下几种常见的XML应用: 1.自定义XML+XSLT=>HTML,最常见的文档型应用之一.XML存放整个文档的XML数据,然后XSLT将X ...
- callback理解
ex: var fn1 = function(callback){ //do something callback && c ...
- install openjdk & tomcat on the centos
1.检查当前服务器是否已安装openjdk
- SVG路径path的贝塞尔曲线指令
深度好文分享: http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/ ...
- Delphi10.2 关于Http 下载
演示如图: 代码如下: unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Vari ...
- 了解box-sizing 盒子模型
最近看到别人代码有用到box-sizing属性,自己没用过,记录一下 box-sizing:border-box 指定宽度和高度(最小/最大属性)确定元素边框box 理解:假设宽高为100px,设置了 ...