HTML学习笔记(六)使用图像

设置图像高度,默认情况下,改变高度的同时,其宽度也会等比例进行调整;设置图像宽度,如果同时设置两个属性,且缩放比例不同的情况下,图像很可能变形;在默认情况下,页面中插入的图像是没有边框的,可以通过border属性为图像添加边框。<img src="图像文件的地址" width="图像的宽度" height="图像的高度" border="图像边框的宽度"/>

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5  <title>插入图像文件</title>
 6  </head>
 7   <body>
 8   <h3>编程词典,精彩无限</h3>
 9   &nbsp;&nbsp;编程词典个人版是一套学、查、用为一体的数字化学习编程软件。<br />
10 <center>
11    <img src="2.jpg" height="310" width="310" border="3"/>
12   <img  src="2.jpg" height="100" width="120"/>
13  </center>
14  </body>
15  </html>

设置图像水平间距,如果不适用<br/>或<p>标记进行换行显示,那么添加的图像会紧跟在文字之后。而图像与文字之间的水平距离是可以通过hspace参数进行调整的。<img src="图像文件的地址"  hspace="水平间距"/>

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3   <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5   <title>设置图像的水平间距</title>
 6   </head>
 7   <body>
 8  <h3>请选择您喜欢的图片:</h3>
 9   <hr  size="2"/>
10  人物头像<img  src="1.jpg" height="160" width="160" border="2"/> <img  src="2.jpg" height="160" width="160" border="2"/> <img  src="3.jpg" height="160" width="160" border="2"/> <img  src="4.jpg" height="160" width="160" border="2"/> <br />
11  <br />
12  另外一组人物头像<img  src="1.jpg" height="160" width="160" border="2" hspace="20"/> <img  src="1.jpg" height="160" width="160" border="2" hspace="20"/> <img  src="1.jpg" height="160" width="160" border="2" hspace="20"/> <img  src="1.jpg" height="160" width="160" border="2" hspace="20"/>
13  </body>
14  </html>

设置图像的提示文字,提示文字有两个作用:第一,当浏览该网页时,如果图像下载完成,光标放在该图像上片刻就会出现提示文字;第二,如果图像没有被下载,在图像的位置上就会显示提示文字<img src="图像文件的地址" alt="提示文字的内容"/>。设置图像垂直间距,vspace属性用来调整图像和文字之间的上下距离<img src="图像文件的地址" vspace="垂直间距"/>

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2  <html>
 3   <head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5   <title>设置图像的垂直间距</title>
 6  </head>
 7  <body>
 8  <img  src="1.jpg" height="160" width="160" border="2" vspace="30" alt="编程词典个人版,是今年明日科技主推的产品"/>编程词典个人版是一套学、查、用为一体的数字化学习编程软件。
 9   </body>
10  </html>

设置图像和文字之间的排列通过align参数来调整,图像的绝对对齐方式与相对文字的对齐方式不同,绝对对齐方式包括左对齐、右对齐和居中对齐3种,而相对文字对齐方式则是指图像与一行文字的相对位置<img src="图像文件的地址" align="相对文字的对齐方式">

align 对齐方式
top 把图像的顶部和同行的最高部分对齐
middle 把图像的中部和同行的中部对齐
bottom 把图像的底部和同行文本的底部对齐
texttop 把图像的顶部和同行中最高的文本顶部对齐
absmiddle 把图像的中部和同行中最大项的中部对齐
baseline 把图像的底部和文本的基线对齐
absbottom 把图像的底部和同行中最低项的底部对齐
left 使图像和左边界对齐
right 使图像和右边界的对齐
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>设置图像与文字的相对位置</title>
 6 </head>
 7 <body>
 8 <font size="+3" color="#FF66CC">图片的相对位置</font> <img  src="1.jpg" height="160" width="160" border="2" align="right"/> <img  src="2.jpg" height="160" width="160" border="2" align="left"/> <img  src="3.jpg" height="160" width="160" border="2" align="middle"/> <img  src="3.jpg" height="160" width="160" border="2" align="baseline"/>
 9 </body>
10 </html>

设置整幅图像文件的超链接<a href="链接地址" target="目标窗口的打开方式"><img src="图像文件的地址" /></a>

设置图像热区链接,首先需要在图像文件中设置映射图像(即包含热区的图像)名,在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称,语法如下:<img src="图像地址" usemap="映射图像名称" />,然后需要定义热区图像以及热区的链接属性,语法如下:<map name="映射图像名称"><area shape="热区形状" coords="热区坐标" href="链接地址" /></map>

时间: 2024-11-07 12:39:44

HTML学习笔记(六)使用图像的相关文章

python之raw_input()(学习笔记六)

python之raw_input()(学习笔记六) 我们经常使用raw_input()读取用户的输入,如下例子所示: >>> name = raw_input('please input your name:'),截图如下: 下面简单说下,raw_input()与if搭配使用,脚本如下: #!/usr/bin/env python # -*- coding:utf-8 -*- birth = raw_input('birth:') if birth < 2000: print '0

swift学习笔记(六)析构过程和使用闭包对属性进行默认值赋值

一.通过闭包和函数实现属性的默认值 当某个存储属性的默认值需要定制时,可以通过闭包或全局函数来为其提供定制的默认值. 注:全局函数结构体和枚举使用关键字static标注    函数则使用class关键字标注 当对一个属性使用闭包函数进行赋值时,每当此属性所述的类型被创建实例时,对应的闭包或函数会被调用,而他们的返回值会被作为属性的默认值. ESC: Class SomeCLass{ let someProperty:SomeType={ //给someProperty赋一个默认值 //返回一个与

java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessController的checkPerssiom方法,访问控制器AccessController的栈检查机制又遍历整个 PerssiomCollection来判断具体拥有什么权限一旦发现栈中一个权限不允许的时候抛出异常否则简单的返回,这个过程实际上比我的描述要复杂 得多,这里我只是简单的一句带过,因为这

初探swift语言的学习笔记六(ARC-自动引用计数,内存管理)

Swift使用自动引用计数(ARC)来管理应用程序的内存使用.这表示内存管理已经是Swift的一部分,在大多数情况下,你并不需要考虑内存的管理.当实例并不再被需要时,ARC会自动释放这些实例所使用的内存. 另外需要注意的: 引用计数仅仅作用于类实例上.结构和枚举是值类型,而非引用类型,所以不能被引用存储和传递. swift的ARC工作过程 每当创建一个类的实例,ARC分配一个内存块来存储这个实例的信息,包含了类型信息和实例的属性值信息. 另外当实例不再被使用时,ARC会释放实例所占用的内存,这些

Linux System Programming 学习笔记(六) 进程调度

1. 进程调度 the process scheduler is the component of a kernel that selects which process to run next. 进程调度器需要使 处理器使用率最大化,并且提供 使多个进程并发执行的虚拟 Deciding which processes run, when, and for how long is the process scheduler's fundamental responsibility. 时间片:th

Lua学习笔记(六):函数-续

Lua中的函数是带有词法定界(lexical scoping)的第一类值(first-class values).第一类值指:在Lua中函数和其他值(数值.字符串)一样,函数可以被存放在变量中,也可以存放在表中,可以作为函数的参数,还可以作为函数的返回值.词法定界指:嵌套的函数可以访问他外部函数中的变量.这一特性给Lua提供了强大的编程能力. Lua中关于函数稍微难以理解的是函数也可以没有名字,匿名的.当我们提到函数名(比如print),实际上是说一个指向函数的变量,像持有其他类型的变量一样:

laravel3学习笔记(六)

原作者博客:ieqi.net ==================================================================================================== ORM Laravel3中MVC体系中Model里最重要的组成部分无疑是ORM了,ORM — object-relational mapper — 将数据操作面向对象化,使得整个web框架的核心风格统一,降低整体复杂度,为开发者提供便利. Laravel3中的ORM叫

IBatis.Net学习笔记六--再谈查询

在IBatis.Net学习笔记五--常用的查询方式 中我提到了一些IBatis.Net中的查询,特别是配置文件的写法. 后来通过大家的讨论,特别是Anders Cui 的提醒,又发现了其他的多表查询的方式.在上一篇文章中我提到了三种方式,都是各有利弊:第一种方式当数据关联很多的情况下,实体类会很复杂:第二种方式比较灵活,但是不太符合OO的思想(不过,可以适当使用):第三种方式最主要的问题就是性能不太理想,配置比较麻烦. 下面是第四种多表查询的方式,相对第二种多了一点配置,但是其他方面都很好(当然

[傅里叶变换及其应用学习笔记] 六. 热方程讨论

这份是本人的学习笔记,课程为网易公开课上的斯坦福大学公开课:傅里叶变换及其应用. 上节课讲到,在对非周期函数进行傅里叶分析时,有 $C_k = \displaystyle{\frac{1}{T}\int_{-\frac{T}{2}}^{\frac{T}{2}}f(t)e^{-2\pi i\frac{k}{T}t}dt }$ $f(t) = \displaystyle{\sum_{k=-\infty}^{\infty}C_ke^{2\pi i\frac{k}{T}t} }$ 我们希望仅让$T\to

ActiveMQ学习笔记(六)——JMS消息类型

1.前言 ActiveMQ学习笔记(四)--通过ActiveMQ收发消息http://my.oschina.net/xiaoxishan/blog/380446 和ActiveMQ学习笔记(五)--使用Spring JMS收发消息http://my.oschina.net/xiaoxishan/blog/381209   中,发送和接受的消息类型都是TextMessage,即文本消息(如下面的代码所示).显然消息类型只有文本类型是不能满足要求的. //发送文本消息  session.create