html之图像

来源：互联网发布：c 面向对象编程编辑：程序博客网时间：2024/05/18 01:35

html

1.关于web图像

六要素：
格式
web上采用最广泛的三种格式：GIF PNG JPEG
JPEG格式适用于彩色照片，因为它包含了大量的颜色并进行了合理的压缩，使文件变得比较小。
PNG和GIF格式通常用于保存拥有大量纯色和图案或有透明度的标志之类的文件。对于连续的颜色或重复的图案PNG和GIF的格式的压缩效果要好于JPEG。选择PNG更好一些，因为他对于文件的压缩算法更好，且具有更高级的透明度支持。

颜色
GIF和PNG-8只能拥有256种颜色
复杂的图片应保存为JPEG或PNG-24格式

尺寸和分辨率
数字图像以像素为单位进行度量。
ppi(pixels per inch 像素每英尺)
长期以来，1024像素×768像素的屏幕分辨率都是标准的分辨率，习惯于网页保持960像素宽

速度
实用小图像
对图像进行压缩

透明度
使用透明度将一个图像置于另一个图像的后面可以创建复杂的布局。可以利用透明度为图像创建非矩形的边缘。JPEG不支持透明度
动画

2.在页面中插入图像

在html代码中，将光标放在希望图像出现的位置
输入<img src="image.url",其中image.url指示图像文件在服务器上的位置
输入一个空格和/>

图像必须先上传到服务器中，访问者才能看到

3.提供替代文本

如果图片加载不出，就显示这段文字
步骤：
在img标记内，在src属性及其值后面，输入alt=”
输入图像出于某种原因没有显示对应该出现的文本
输入”

<img src="cornermarket.jpg" alt="Fruit Stand in Market" width="300" height="399" />

在html5中，img元素必包含alt属性
如果图像有标题，或周围的文字可以描述图像，也可以是alt留空

4.指定图像尺寸

使用ps或背景信息查看图像尺寸
在img标记中，src属性后面，输入width=”x”,height=”y”以像素为单位指定x和y(不一定反映实际的尺寸)
可以只设置width或只设置height，让浏览器按比例自动调整另一个值

5.为网站添加图标

创建一个16像素×16像素的图像，并保存为ICO格式，亦可以保存为PNG,GIF格式
为触屏设备创建一个114像素×114像素的图像，并保存为PNG格式

在HTML5文档的head部分，输入<link rel="shortcut icon" href="favicon.ico" />其中favicon.ico是服务器上图标的名称和位置。如果图像为PNG，则输入<link rel="icon" type="image/png" href="favicon.png" />如果图像为GIF，则输入<link rel="icon" type="image/gif" href="favicon.gif" />

在html文档的head部分，输入<link rel="apple-touchicon" href="/apple-touch-icon.png" />其中apple-touch-icon.png是服务器上图标的名称和位置

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8" />    <title>Farm Training Podcasts</title>    <link rel="stylesheet" href="css/ftpodcasts.css" />    <link rel="shortcut icon" href="favicon.ico" />    <link rel="apple-touch-icon" href="apple-touch-icon.png" /></head><body>    <img src="ftplogo.png" width="200" height="111" alt="Farm Training Podcasts Logo" />    <h1>Welcome!</h1>    <p>Welcome to the <cite>Farm Training Podcasts</cite> home page. We hope to up and running in the next few days with weekly programs on the topics you're most curious about: how to clip your goat's toenails, how to tell which hens are laying, and how to hoe effectively, among many others.</p></body></html>

点击此处查看上述代码效果

阅读全文

0 0