1>显示图片、用a标签实现点击图片跳转、地图标签/点击图片上固定区域跳转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    <!-- 图片 -->

    <img src="dog.jpg" title="一只狗" alt"这是一只狗" usemap="#dogmap" />

    <!-- 用a标签实现点击图片跳转 -->

    <a href="http://www.baidu.com" target="_blank"><img src="dog.jpg" width="300" height="500" title="一只狗" alt"这是一只狗"/></a>

    <!-- 地图标签/点击图片上固定区域跳转 -->

    <map name="dogmap">

        <area shape="circle" coords="185,198,69" href="http://www.baidu.com" target="_blank" />

        <area shape="circle" coords="385,198,69" href="http://www.sina.com" target="_blank" />

        <area shape="rect" coords="50,50,100,100" href="http://www.sina.com" target="_blank" />

        <!-- 依次写各个点的坐标 -->

        <area shape="poly" coords="0,0,0,50,50,0" href="http://www.hao123.com" />

    </map>

</body>

</html>

2>index图片相对路径

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    <!-- ../代表往上反一层 -->

    <img src="../cat.jpg" />

    <!-- 相对路径 -->

    <img src="data:images/dog.jpg" />

</body>

</html>

HTML学习笔记——图片显示、图片跳转、图片相对路径的更多相关文章

  1. SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传

    SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...

  2. opencv学习笔记（六）直方图比较图片相似度

    opencv学习笔记(六)直方图比较图片相似度 opencv提供了API来比较图片的相似程度,使我们很简单的就能对2个图片进行比较,这就是直方图的比较,直方图英文是histogram, 原理就是就是将 ...

  3. Android学习笔记：如何设置ImageView中图片的显示方式

    我们在用ImageView显示图片时,很多情况下图片的大小与ImageView的尺寸不是完全一样的.这时就涉及到该如何设置显示图片了. ImageView有个重要的属性是ScaleType,该属性用以 ...

  4. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

  5. PHP学习笔记：利用gd库给图片打图片水印

    <?php $dst_path = '1.jpg';//目标图片 $src_path = 'logo1.png';//水印图片 //创建图片的实例 $dst = imagecreatefroms ...

  6. opengl学习笔记（四）:openCV读入图片，openGL实现纹理贴图

    在opengl中实现三维物体的纹理贴图的第一步就是要读入图片,然后指定该图片为纹理图片. 首先利用opencv的cvLoadImage函数把图像读入到内存中 img = cvLoadImage(); ...

  7. JS控制图片显示的大小（图片等比例缩放）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【JS控制图片显示的大小（图片等比例缩放）】

    效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  9. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  10. [原创]java WEB学习笔记35：java WEB 中关于绝对路径 和相对路径问题

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

随机推荐

  1. Mybatis学习--spring和Mybatis整合

    简介 在前面写测试代码的时候,不管是基于原始dao还是Mapper接口开发都有许多的重复代码,将spring和mybatis整合可以减少这个重复代码,通过spring的模板方法模式,将这些重复的代码进 ...

  2. PS转手绘

    2014-08-03  一.人物皮肤处理 复制两层图层,对背景图层隐藏,最后一层 高斯模糊 ,按住ALT创建图层蒙版, 使用画笔工具涂抹人物皮肤,眼睛不涂,把阴影和高光处抹均匀,最后应用图层蒙版,向下 ...

  3. iOS开发中的错误整理，pod文件Install失败

    一.之前用黑苹果,编辑pod文件用一下格式 platform :ios, "8.0" pod "MJExtension" pod "MJRefresh ...

  4. 通过js判断访客显示器屏幕分辨率并给出提示

    <script> <!-- fw="1920";fh="1200"; var uw=window.screen.width; var uh=w ...

  5. C#-ado.net-属性扩展

    属性扩展 是封装好的类中添加更多属性,此方法可以添加更多的数据运算方法,更灵活便捷 上一篇中介绍的是实体类和数据访问类,实体类封装的内容如下: 执行查询语句后,结果如下: 我们可以看到,性别显示的是t ...

  6. Web前端性能优化教程02：使用内容分发网络

    基础知识 服务器离用户越近,HTTP请求的响应时间将更短. CNAME:别名记录,当多个域名需要指向同一服务器IP,可以使用一个域名做A记录指向该服务器IP,然后让多个域名指向该A记录. ICP:In ...

  7. 【USACO 2.2】Subset Sums (DP)

    N (1 <= N <= 39),问有多少种把1到N划分为两个集合的方法使得两个集合的和相等. 如果总和为奇数,那么就是0种划分方案.否则用dp做. dp[i][j]表示前 i 个数划分到 ...

  8. 第6届蓝桥杯javaA组第7题，牌型种数，一道简单的题带来的思考

    题目: 小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花色,只考虑点数,也不考虑自己得到 ...

  9. java代码运行linux shell操作

    1.Java调用shell  Java语言以其跨平台性和简易性而著称,在Java里面的lang包里(java.lang.Runtime)提供了一个允许Java程序与该程序所运行的环境交互的接口,这就是 ...

  10. Perl 的面向对象编程

    转自 http://net.pku.edu.cn/~yhf/tutorial/perl/perl_13.html 拓展阅读 http://bbs.chinaunix.net/forum.php?mod ...