HTML:使用图像
2017-11-19 10:57
176 查看
第四章:使用图像
4.1图像的格式
网页中的图片格式通常有三种,即GIF,JPEG,和PNG。1. GIF,Graphic Interchange Format,文件最多可以使用256种颜色,最适合显示色调不连续或具有大面积单一颜色的图像。其最大优点是可以制作动态图像,其另一优点是将图像以交错的方式在网页中呈现,所谓交错显示,就是当图像尚未下载完成时,浏览器会先以马赛克的形式将图像慢慢显示,让浏览者可以大致猜出下载图像的雏形。
2. JPEG,Joint Photographic Experts Group,此文件格式适合用于摄影或连续色调图像的高级格式,可包含数百万种颜色。JPEG格式是一种压缩的非常紧密的格式,专用于不含大色块的图像。
3. PNG格式,Portable Network Graphics,是一种非破坏性的网页图像文件格式,它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备GIF图像格式的优点,而且还支持48位的色彩、更快的交错显示、跨平台的图像亮度控制、更多曾的图像透明度设置。
4.2 插入图象
插入图象的标记只有一个,那就是img标记。### **4.2.1插入图像标记img
图像是网页构成中最重要的元素之一,img元素的相关属性如下表:
属性 | 描述 |
---|---|
src | 图像的源文件 |
alt | 提示文字 |
width,height | 宽度和高度 |
border | 边宽 |
vspace | 垂直间距 |
hspace | 水平间距 |
align | 排列 |
dynsrc | 设定avi文件的播放 |
loop | 设定avi文件循环播放的次数 |
lopdelay | 设置avi循环播放延迟 |
start | 设定avi文件播放方式 |
lowsrc | 设定低分辨率图片 |
usemap | 映像地图 |
4.2.2图像的源文件src
src属性是指图像源文件所在的路径,它是图像必不可少的属性。语法:
<img src="图像文件的地址">
说明:这一路径可以是绝对路径,也可以是相对路径。可以使用文件和http://关键字作为图像的地址,并且能够用于在网页上加载图片。
4.2.3图像的提示文字alt
提示文字有两个作用,第一个是,当浏览网页时,如果图片下载完成,将鼠4000
标指针放在该图像上,鼠标指针旁边会出现提示性文字。第二个作用是,如果图片没有被下载,在图像的位置上会显示提示文字。
语法:
<img src="图像文件的地址" alt="提示文字的内容">
说明:提示的内容可以是中文,也可以是英文。
4.2.4图像的宽度和高度
width和height属性用来定义图片的宽度和高度,如果元素不定义高度和宽度,图片就会显示原始尺寸。<img src="图片的地址" width="图片的宽度" height="图片的高度">
说明:在该语法中,图像的高度和宽度的单位是像素。
4.3 图像的超链接
除了文字可以添加超链接外,图像也可以设置超链接属性。同一个图像的不同部分也可以链接至不同的文档,这就是热区链接。4.3.1 图像的超链接
图像的链接和文字的链接是一样的,都是使用a标签来完成语法:
<a href="链接地址"><img src="图像文件的地址"></a>
说明:href参数用来设置图像的链接地址。
图像的热区链接
在HTML中可以把图片划分为多个热点取余,每一个热点区域链接到不同的网页语法:
首先在图像文件中设置映像图像名,在图像的属性中使用usemap标记添加添加图像要引用的映射图象的名称如下:
<img src="图像地址" usemap ="映像图像名称">
然后需要定义热区图像以及连接属性如下:
<map name="映像图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址"> </map>
说明:在该语法中要先定义映射图象的名称,然后再引用这个映像图像。在area标记中定义了热区的位置和链接。对于不同形状来说,coords设置的方式也不同。
相关文章推荐
- 使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies .
- HTML学习笔记【3】使用图像
- html语法之--使用图像映射
- 黄聪:使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)
- 使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)(转)
- HTML与CSS入门——第十一章 在网页中使用图像
- 在Html中,图像使用map标签 [转]
- Chap 04 HTML使用图像
- 使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)
- 在Html中,图像使用map标签
- Barcode Professional for ASP.NET使用教程:如何用System.Net.Mail 类创建条码图像的HTML邮件
- 使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies
- HTML学习笔记[3]使用图像
- Barcode Professional for ASP.NET使用教程:如何用System.Net.Mail 类创建条码图像的HTML邮件
- Outlook 2007不再使用IE来解析HTML/GIF,只能显示GIF图像的第一帧。
- html中的图像使用map标签
- 黄聪:使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)
- HTML-图像的使用(img标签和map标签的使用)
- 【python】使用HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies
- HTML使用图像