HTML学习笔记7----图像

随笔记录方便自己和同路人查阅。

#------------------------------------------------我是可耻的分割线-------------------------------------------

　　想要在HTML中加入图片其实很简单，如例1：

　　例1：

<img src="david.jpg" alt="David" />

　　你要做的只是：首先告诉浏览器你要插入一张图片（ img ），接着给出这张图片的存放位置（ src ，代表“来源（source）”）就行了。准备好图片了吗？

　　注意： img 元素没有尾标签，它与 <br /> 一样，不与特定的文本相关。“david.jpg”是要插入的图片的文件名，其中的“jpg”表明图片类型。就像后缀名“htm”代表文件是 HTML 文档一样，后缀名“jpg”表明文件是一个图片文件。有三种类型的图片文件可被

插入网页中：

　　• GIF（Graphics InterchangeFormat，图形交换格式）

　　• JPG 或 JPEG（Joint Photographic Experts Group，联合图像专家组）

　　• PNG（Portable Network Graphics，可移植网络图像）

　　一般来说， GIF F F F 是图形和图画的最佳格式，而 JPEG 格式则更适合存放照片 。原因有二：第一，GIF 格式只支持256色，而JPEG 格式支持数百万色；第二，GIF 格式擅长于压缩简单图像，而 JPEG 则更适于压缩复杂图像。压缩率越高，图像文件就越小，页面加载速度就越快。也许你也有同感，包含太多无用内容的网页是很不受欢迎的。过去，GIF 和 JPEG 是两大主要的图像格式，但是最近 PNG 格式也开始流行起来（主要是在取代 GIF 格式）。 PNG 格式拥有许多 G JPEG 与 F GIF 的共同优点：支持数百万色，且压缩效果好。

　　图片从何处获得？

　　要制作自己的图像，需要有一个图像编辑程序。 图像编辑程序是从事美观的 网页制作 所需的重要工具之一。

　　不幸的是 Windows或其他操作系统都没有自带比较好的图片编辑程序。所以，也许你得买一个 Paint Shop Pro、PhotoShop 或者 Macromedia Fireworks，这三个是目前市场上最好的图像编辑软件。

　　你可以从百度或其他网站上搜索图片，步骤如下：

　　1 右击网页中的图像。

　　2 在菜单中选择“图片另存为...”。

　　3 选择图片的存放位置，然后点击“保存”。

　　按此方法将下面的图片保存到你的 HTML 文档所在目录。（注意：将它保存为 PNG 文件，文件名为 logo.png ）：

　　关于图像就这么多吗？

　　关于图像，还有一些是需要介绍的。

　　首先，你可以轻易地把存放在其他文件夹、甚至其他网站的的图片插入到自己的网页中。

　　例2：

<img src="images/logo.png">

　　例3：

<img src="http://www.chinahtml.com/logo.png">

　　其次，图片也可以作为链接：

　　例4：

<a href="http://www.chinahtml.com">
<img src="logo.png"></a>

　　有什么属性需要了解的吗？

　　你总要用 src 属性来告诉浏览器图片的存放位置。除此以外，还有一些有用的属性。alt 属性用于给出图像的替用描述，假如由于某些原因该图像未能显示出来，浏览器就通过显示这个描述来替代图像。对于有视力障碍的人士来说，或者当网页打开很慢的时候，这一特性显得尤为重要。所以说，始终记得写 alt 属性：

　　例5：

<img src="logo.gif" alt="chinahtml.com logo">

　　有些浏览器会在鼠标光标移到图像上时显示出 alt 属性的文本。但是，在使用 alt 属性时请注意，该属性的目的是为图片提供一个替用描述，有视力障碍的人士会利用 alt 属性来听取有关图片的描述，所以不要将该属性用于显示文本提示——那是 title 属性的功能。

　　例6：

<img src="logo.gif" title="上 chinahtml.com 网站学习 HTML">

　　如果你把鼠标光标停留在该图片上（别点击它），提示文字“上 chinahtml.com 网站学习HTML”便会出现。

　　另外两个重要的属性是 width 和 height ：

　　例7：

<img src="logo.png" width="141" height="32">

　　width 和 height 属性分别用于设置图像的宽度和高度，以像素为单位。像素（pixel）是用于测量屏幕分辨率的计量单位。（目前大多数屏幕分辨率是1024×768或更高）。像素跟公分不同，像素是一种相对计量单位，一个像素的实际大小跟屏幕分辨率有关。在高分辨率显示模式下，差不多25个像素等于1公分；而在低分辨率显示模式下，同样的25个像素大约等于1.5公分。

　　如果你没有为图像设置宽度和高度，它将按原始尺寸显示。但是如果设置了的话，你就可以控制它的显示尺寸：

　　例8：

<img src="logo.gif" width="32" height="32">

　　但是值得注意的是，虽然可以通过设置高度和宽度来控制图片的显示尺寸，但图片文件的实际大小不会因此而发生变化。所以， 不要指望通过设置图片的宽度和高度来减小图片文件的大小。相反，你应该在图像编辑程序中来调整图片文件的大小，以加快页面加载速度。不过 width 和 height 属性还是有用的，它们可以在图片被完全下载之前令浏览器知道该用多大的空间来显示图片。这令浏览器可以更快显示出美观的页面。

#------------------------------------------------我是可耻的分割线-------------------------------------------