HTML学习笔记——图片显示、图片跳转、图片相对路径
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学习笔记——图片显示、图片跳转、图片相对路径的更多相关文章
- SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传
SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...
- opencv学习笔记（六）直方图比较图片相似度
opencv学习笔记(六)直方图比较图片相似度 opencv提供了API来比较图片的相似程度,使我们很简单的就能对2个图片进行比较,这就是直方图的比较,直方图英文是histogram, 原理就是就是将 ...
- Android学习笔记：如何设置ImageView中图片的显示方式
我们在用ImageView显示图片时,很多情况下图片的大小与ImageView的尺寸不是完全一样的.这时就涉及到该如何设置显示图片了. ImageView有个重要的属性是ScaleType,该属性用以 ...
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...
- PHP学习笔记：利用gd库给图片打图片水印
<?php $dst_path = '1.jpg';//目标图片 $src_path = 'logo1.png';//水印图片 //创建图片的实例 $dst = imagecreatefroms ...
- opengl学习笔记（四）:openCV读入图片，openGL实现纹理贴图
在opengl中实现三维物体的纹理贴图的第一步就是要读入图片,然后指定该图片为纹理图片. 首先利用opencv的cvLoadImage函数把图像读入到内存中 img = cvLoadImage(); ...
- JS控制图片显示的大小（图片等比例缩放）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【JS控制图片显示的大小（图片等比例缩放）】
效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- [原创]java WEB学习笔记35：java WEB 中关于绝对路径 和相对路径问题
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
随机推荐
- display~
- zoj2770 差分约束系统
zoj1770 x1- x2 <= t1 x3 - x5 <= t2 x2 - x3 <= t3 .... 可以用最短路的方法来求的解. 最短路的松弛操作,和这些式子很相近. 如果 ...
- 数据库开发基础-SQl Server 控制数据库的服务+数据库的创建与管理（增删改查）
控制数据库的服务: 方法一: 1.Windows+R 打开运行 打开cmd 2.输入net start MSSQLserver 启动数据库服务 输入net stop MSSQLserver 关闭数据 ...
- 22 java当中的数组
class Test { public static void main(String args[]) { //数组的静态声明法 int arr[]={5,2,7,9,0}; //数组的动态声明法 i ...
- 如何在linux Shell脚本里面把一个数组传递到awk内部进行处理
前段时间和几位同事讨论过一个问题:Shell脚本里面怎样把一个数组传递到awk内部进行处理? 当时没有找到方法.前两天在QQ群里讨论awk的时候,无意间又聊起这个话题.机缘巧合之下找到一个思路,特此分 ...
- IE下实现PlaceHolder
/* * jQuery placeholder, fix for IE6,7,8,9 * @author JENA * @since 20131115.1504 * @website ishere.c ...
- Cell右滑的动作状态
//允许cell可以进行编辑 - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)index ...
- c# 监听文件夹动作
static FileSystemWatcher watcher = new FileSystemWatcher(); /// <summary> /// 初始化监听 ...
- js-JavaScript高级程序设计学习笔记9
依然第十三章 事件 1.页面上的所有元素都支持鼠标事件,除了mouseenter和mouseleave,所有鼠标事件都会冒泡. 2.修改键:shift.ctrl.alt.meta.四个属性表示修改键的 ...
- 【bzoj1588】 HNOI2002—营业额统计
http://www.lydsy.com/JudgeOnline/problem.php?id=1588 (题目链接) 题意 给出一个序列,对于每一个数,找出之前与它相差最小的数,两者相减取绝对值加入 ...