html 笔记 – 第三章:图像和对象(xhtml)

<img>元素。

使用<img>元素插入图像。<img>有两个必需的属性:src 属性 和 alt 属性。

示例:<img src=”logo.png” alt=”站点logo”>

src属性:用于指定加载图像的URL。

alt属性:用于指定图像的备选文本,当用户无法加载图像时使用。

align属性:用于对齐页面中的图像或包含图像的元素。

     值                                                  目 的                           
top           图像的顶部与当前文本行的顶部对齐。
middle           图像的中部与当前文本的基线对齐。
bottom           图像的底部与当前文本行的基线对齐,他通常导致图像位于文本之上。(默认值)
left           图像包含与它的窗口或元素以及任何环绕它的文本的左边对齐。
right           图像与包含它的窗口或元素以及任何环绕它的文本的右边对齐。

border属性(逐渐淘汰):置顶图像周围的边框的宽度,单位是像素。

height 和 width 属性:分别是图像的高度(height)和宽度。height=”120″ width=”180″。使用这两个属性可以使页面的加载速度更快,因为浏览器可以在不完全加载对象的情况下开始布局页面的剩余部分。

hspace 属性和 vspace 属性(逐渐淘汰):用于控制图像周围的空白数量,左右间距(hspace )和上下间距(vspace)。

ismap 属性和 usemap 属性:用于图像映射,后面将会介绍图像映射方面的知识。

longdesc 属性:<img> 标签的 longdesc 属性与 alt 属性类似,但它允许更长的描述性文字。longdesc 的值是一个指向包含图像说明文档的 URL。如果说明多于 1024 个字符,那么可以使用 longdesc 属性来设置指向它的链接。

不论是 HTML 还是 XHTML 都没有指定说明中必须是什么内容,而且目前浏览器都还没有支持 longdesc 属性。因此,对于如何创建那些大块的描述,我们的建议是创建一个超链接指向包含描述的页面即可。

name 属性(逐渐淘汰):用于为图像指定一个名称,以便通过脚本代码引用该图像。已经被id属性替代。

<object> 元素。

定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。
<object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。
浏览器的对象支持有赖于对象类型。不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型。
而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object> 和 </object> 之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。

archive 属性:通常用于java 的应用程序,它允许预先加载档案文件中的一些类型或者对象集合。

border 属性(逐渐淘汰):指定显示在对象周围的边框的宽度,该属性的值是像素。

classid 属性:用于指定对象的实现,当需要在页面中包含需要加载的 Flash 或 Quick Time 文件以及相关的应用插件时,该属性的值只是播放运行这些文件所需的应用程序。

codebase 属性:为<object>元素中的相对URL 提供一个可选的基 URL 。如果没有指定这个属性,则将使用页面所在的文件夹。例如,如果工作与java环境中。则指定该属性如下:

codebase=”http://www.example.org/javaclasses/”

但是,当遇到 Quick Time 电影或 Flash 文件时,IE使用该属性指定播放或运行这些文件所需要的程序的位置。例如,可以从如下位置下载 Quick Time ActibeX 控件(播放 Quicktime 电影所需要的控件):codebase=”http://www.apple.com/qtactivex/qtplugin.cab”

该属性也可以标识需要下载的文件的版本。如果对象没有安装在加载页面的机器中,浏览器将进入 URL 指定的位置获取它(然而在开始下载之前将对用户显示一个警告)。

codetype 属性:指定浏览器所期望的 MIME 类型。仅在已经指定 classid 属性后才会使用该属性。

用于标识程序代码类型。
只有在浏览器无法根据 classid 属性决定 applet 的 MIME 类型,或者如果在下载某个对象时服务器没有传输正确的 MIME 类型的情况下,才需要使用 codetype 属性。
codetype 属性与 type 属性类似。不同的是,它用来标识程序代码类型,而 type 属性用来标识数据文件类型。
下面这个例子显式地告知浏览器,对象的代码是 Java:
<object codebase=”clock.class” codetype=”application/java”>
</object>

declare 属性:可以定义一个对象,但同时防止浏览器进行下载和处理。
与 name 属性一起使用时,这个工具类似于更为传统的编程语言中的某种前置声明,这样的声明能够延迟下载对象的时间,直到这个对象确实在文档中得到了应用。

data 属性:用于指定供对象处理的数据文件的 URL。如 Mp3:

data=”http://dxsop.com/mp3/music.mp3″
该属性的值是文件的 URL,该 URL 可能是相对于文件基本 URL 的绝对 URL 或相对 URL,或者是相对于用 codebase 属性提供的 URL 的绝对或相对 URL。
浏览器通过插入到文档中的对象类型来决定数据的类型。
该属性类似于 <img> 标签中的 src 属性,因为它下载的是要由包含对象进行处理的数据。当然,它们之间的差别在于,data 属性允许包含几乎任何文件类型,而不仅仅是图像文件。

height 和 width 属性:分别用于指定对象的高度和宽度,属性值的单位是像素或者包含元素的百分比。用这两个属性可以使页面的加载速度更快,因为浏览器可以在不完全加载对象的情况下开始布局页面的剩余部分。

hspace 和 vspace 属性(逐渐淘汰):用于指定显示在对象周围的空白数量。

name 属性(逐渐淘汰):提供一个名称,可以使用该名称访问对象,特别是用于脚本中。已经被id属性替代,使用它可以兼容更早期的浏览器版本。

standby 属性:它的值是正在加载对象的文字描述。

tabindex 属性:用于指定页面中对象的焦点移动顺序。第五章详细介绍焦点移动顺序。

usemap 属性:用于指明对象是一个图像映射,该图像映射中包含了一些作为超链接的已定义区域。

<param> 元素。

<param> 元素用于向对象传递参数,参数取决于对象的类型。如果是加载mp3播放器到页面中,需要指定mp3文件的位置。如果需要添加一个视频到页面中,则对象用于表明是否在页面加载时自动播放,或者是否等待用户点击播放按钮后再开始播放。

name 属性和 value 属性:name属性传递给应用程序参数的名称,value 给出该参数的值。示例,第一个参数指示需要加载以播放的文件的来源,第二个参数指示电影应该在加载时自动开始播放:

<param name=”src” value=”movietrailer.mov” /> 第一个,src是参数名称:文件来源。

<param name=”autoplay” value=”true” /> autoplay- 在加载时播放,true-是。(false否)

如果处理的是一个java小程序,可以使用 name 和 value 属性传递值到方法中。

valuetype 属性:如果对象接收参数,该属性指示参数的类型,例如文件、URL 或另一个对象。

     值                                                  目 的                           
data           参数值是一个简单的字符串———-默认值
ref           参数值是一个URL
object           参数值是另一个对象

type 属性:如果传递给对象的参数是一个字符串,则不需要指定type 属性。但是,如果传递一个 URL 或对象,则应当使用 type 属性。该属性告诉对象即将传递的参数的 MIME 类型。例如,假设希望指定正在传递一个Java 对象作为参数,则 type 属性如下所示:

type=”application/java”

客户端图像映射

用<map>元素和<area>元素的客户端图像映射。<map>元素为图像创建映射,通常它紧跟在<img />元素之后。它是<area>元素的容器,<area>元素实际地定义可单击的热点。<map>仅附带一个 name 属性,该属性用于标识映射的名称。这就是<img />元素知道使用哪个<map>元素的方式。

<area>元素定义每一个可单击热点的边界的形状和坐标。

<img src=”gallery_map.gif” alt=”Gallery map” width=”500″ height=”300″ border=”0″ usemap=”#gallery” />

<map name=”gallery”>

<area shape=”circle” coords=”154,150,59″ href=”foyer.html” target=”_self” alt=”foyer”/ >

<area shape=”poly” coords=”272,79,351,79,351,15,486,15,486,218,272,218,292,166,292,136,270,76″ href=”dxsop.html” target=_self” alt=”鼠标指向显示的提示信息” />

</map>

<img />元素中 usemap 属性的值是#gallery,并且该值也用于<map>元素中。然后<area>元素实际定义了图像中可单击的每一部分。

如果出现两个区域互相重叠,则代码中首先出现的区域将具有较高的优先级。

<area>元素的属性:

shape 属性:实际上影响了浏览器使用坐标的方式(坐标的值由 coords 属性指定),影响浏览器对 coords 属性的解释,因此它是必须的属性,如果不指定 shape 属性,则 IE 通常假设该区域是矩形。

     值                                                  创 建 的 形 状
default           整个图像都被定义在一个区域中(应该最后指定该值),指定剩余的全部区域
rectangle 或 rect (简写)           矩形
polygon 或 poly(简写)           多边形
circle 或 circ(简写)           圆形

最好使用值得缩写形式,因为它们能够被较老的浏览器更好的支持。应当在最后使用值 default 指定图像剩余的所有区域。

coords 属性:指定可单击的热点区域,坐标的数量取决于 shape 属性所创建的形状。

一个矩形包含 4 个坐标,其中前两个坐标便是矩形的左上角,后两个坐标表示右下角。

一个圆形包含三个坐标,前两个坐标是圆形的中心,第三个坐标是半径,单位是像素。

多边形的每一个顶点由两个坐标表示,因此一个三角形包含 6 个坐标,五角形将包含 10 个坐标值。不需要咋最后再次指定第一个坐标,因为形状将会自动闭合。

href 属性和 nohref 属性:href 属性类似于<a>元素中的href 属性;nohref 属性表示该区域不包含链接 URL 。

alt 属性:某个区域的备选文本,类似于<img />元素中的 alt 属性。当用户使用鼠标在该区域上移动时,该属性将重写为图像指定的 alt 文本。

target 属性:热点区域打开的页面加载到哪一个框架或者窗口中。与<a>元素的 target 属性相同。

tabindex 属性:指定用户按下 Tab 键时页面上各个项的切换顺序。

使用<object>元素创建客户端图像映射:

HTML 4 开始提倡使用<object>元素在文档中添加图像映射,而不是使用上面介绍的<map>元素。但是在 strict HTML 1.0 中仍然可以使用<map>元素。

<object data=”gallery_map.gif” type=”image/gif” alt=”Gallery Map” width=”500″ hetght=”300″ border=”0″ usemap=”#gallery” />

<map name=”gallery”>

<a shape=”poly” cords=”154,150,59″ href=”foyer.html” target=”_self”>foyer</a>

</map>

应当将 alt 文本放置在<a>元素中,而不是使用 alt 属性。但是,这种图像映射创建方式的支持非常有限,隐藏最好坚持使用传统的方式。

《html 笔记 – 第三章:图像和对象(xhtml)》有1个想法

发表评论