今天学习image在html中的应用

上次在学习超级链接的使用中有一小问题，是在添加网址中href=“http://www.baidu.com“

中不能忘记http：//，否则链接会出现莫名错误。

接下来学习image

网页中的图片多数支持gif/bmp/jpeg/png/tiff格式，最广泛的是gif和jpeg

Gif像素大小为256色

Jpeg最大像素达到1670万色

Png图片具有不失真，传输效率高，支持透明在网页中很流行

网页中图片路径有绝对路径和相对路径之分。

在网页中插入图片用

属性

值

描述

Alt

Text

定义图形简短的描述

Src

url

要显示图形的url

Height

Pixels%

定义图形高度

Ismap

url

把图像定义为服务器端的图形映射

Usermap

url

作为客户端图形映射的一幅图像

Vspace

Pixels

定义图像顶部和底部的空白

width

Pixels%

定义图像的宽度

用于插入图像的语句

<img src=”图片路径”>

这里的图片路径是指图片的储存路径，如c：image/1.png

路径可以是相对路径也可以是绝对路径

在网页中插入一张图片

<img src=”1.jpg”>

从不同位置插入图片

{

来自一个文件夹的图片;

<img src=”image/1.jpg”>

}

来自百度的图片:

{

<img src=”http://baidu.com/image/0545151151.jpg”>

}

定义图片的高度和宽度

<img src=”1.jpg” width=”500px” height=”300px”>

设置图片的提示字

<img src=”1.jpg” alt=“这张图片来自百度”>

将图片设置成网页背景

<body background=”image/1.jpg”>

<h3>图像背景</h3>

排列图像像，会用到几个属性

Align=“bottom/middle/top“

在网页中排列图像

<p>图像<img src=”1.jpg”  align=“bottom“>在文本中</p>

<p>图像<img src=”1.jpg”  align=“middle“>在文本中</p>

<p>图像<img src=”1.jpg”  align=“top“>在文本中</p>

注意在浏览网页中出现了图片不显示，一定要仔细检查图片路径。

如果在同一个文件中反复使用同一个图片，最好使用相对路径，不要使用绝对路径或者url，因为使用相对路径，浏览器只下载一次，再次使用时只显示即可。使用绝对路径每次都需要下载，大大降低了图像的显示速率。

附:

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

在网页中插入一张图片<br/>

<img src="data:image/0.jpg"><br/>

从不同位置插入图片<br/>

来自一个文件夹的图片;<br/>

<img src="0.jpg"><br/>

来自百度的图片:<br/>

<img src="http://baidu.com/image/0545151151.jpg"><br/>

定义图片的高度和宽度<br/>

<img src="0.jpg" width="500px" height="300px"><br/>

设置图片的提示字<br/>

<img src="0.jpg" alt="这张图片来自百度"><br/>

将图片设置成网页背景<br/>

<!-- <body background="0.jpg"><br/> -->

<h3>图像背景</h3>

在网页中排列图像

<p>图像<img src="0.jpg" align="bottom">在文本中</p><br/>

<p>图像<img src="0.jpg" align="middle">在文本中</p><br/>

<p>图像<img src="0.jpg"  align="top">在文本中</p><br/>

</body>

</html>

今天学习image在html中的应用的更多相关文章

  1. 前端学习 第二弹: JavaScript中的一些函数与对象（1）

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  2. SSH 框架学习之初识Java中的Action、Dao、Service、Model-收藏

    SSH 框架学习之初识Java中的Action.Dao.Service.Model-----------------------------学到就要查,自己动手动脑!!!   基础知识目前不够,有感性 ...

  3. Java学习-040-级联删除目录中的文件、目录

    之前在写应用模块,进行单元测试编码的时候,居然脑洞大开居然创建了一个 N 层的目录,到后来删除测试结果目录的时候,才发现删除不了了,提示目录过长无法删除.网上找了一些方法,也找了一些粉碎机,都没能达到 ...

  4. VC++学习之网络编程中的套接字

    VC++学习之网络编程中的套接字 套接字,简单的说就是通信双方的一种约定,用套接字中的相关函数来完成通信过程.应用层通过传输层进行数据通信时,TCP和UDP会遇到同时为多个应用程序进程提供并发服务的问 ...

  5. zigbee学习:示例程序SampleApp中按键工作流程

    zigbee学习:示例程序SampleApp中按键工作流程 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:IAR8. ...

  6. zigbee学习:示例程序SampleApp中通讯流程

    zigbee学习:示例程序SampleApp中通讯流程 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 参考链接: http://wjf88223.bl ...

  7. [学习opencv]高斯、中值、均值、双边滤波

    http://www.cnblogs.com/tiandsp/archive/2013/04/20/3031862.html [学习opencv]高斯.中值.均值.双边滤波 四种经典滤波算法,在ope ...

  8. map和flatmap的区别+理解、学习与使用 Java 中的 Optional

    转自:map和flatmap的区别 对于stream,   两者的输入都是stream的每一个元素,map的输出对应一个元素,必然是一个元素(null也是要返回),flatmap是0或者多个元素(为n ...

  9. python学习第九讲,python中的数据类型,字符串的使用与介绍

    目录 python学习第九讲,python中的数据类型,字符串的使用与介绍 一丶字符串 1.字符串的定义 2.字符串的常见操作 3.字符串操作 len count index操作 4.判断空白字符,判 ...

随机推荐

  1. [OC Foundation框架 - 9] NSMutableArray

    可变的NSArray,可以随意添加OC对象   1.创建 void arrayCreate() { NSMutableArray *array = [NSMutableArray arrayWithO ...

  2. .NET设计模式（1）：开篇

    转载:http://terrylee.cnblogs.com/archive/2005/12/09/293465.html .NET设计模式开篇 --.NET设计模式系列之一 Terrylee,200 ...

  3. 空循环比较 for foreach array_map array_walk

    申请一个数组,然后不断的跑空循环,看看执行时间 for循环 foreach (不使用键) foreach(使用键) array_map array_walk 查看效率速度发现很明显 是foreach更 ...

  4. webService 接口调用配置

    1.配置XML文件,如果新建一个XML文件需要在applicationContext.xm里面配置一下 <import resource="cxf-client.xml" / ...

  5. 基于华为Java编程规范的Eclipse checkStyle.xml

    发现项目组成员代码规范存在较大的问题,于是就在华为编程规范的基础上制定了这份checkStyle.xml文档,至于Eclipse怎么安装checkStyle插件以及该插件怎么使用请自行Google之. ...

  6. Java算法实例集合（2）

    这是Standford一位计算机老师的私藏,里面包含了不少Java/C++的算法实现代码.有兴趣的朋友可以看看.

  7. c++ 操作注冊表

    1.       注冊表简单介绍 注冊表是为Windows NT和Windows95中全部32位硬件/驱动和32位应用程序设计的数据文件,用于存储系统和应用程序的设置信息.16位驱动在Winnt (W ...

  8. unity3D Socket连接C#server出现unity3D编辑器再次启动连接 unity3D编辑器马上卡死

    unity3D Socket与C#server第一次连接时通讯正常.客服端段关闭后.unity3D编辑器再次启动连接 unity3D编辑器马上卡死 原因是Socket处于异步状态,而异步线程是不受Un ...

  9. Abap 内表的语法

    ABAP中的内表相当于其他程序设计语言中的二维数组,存储多行结构相同的数据 不同于二维数组,内表在创建后,列结构与列数是固定不变的,而行数是动态增长的  内表支持循环对每行数据进行操作,也支持整体操作 ...

  10. javascript中的 "=="

    对象之间比较比较的是引用地址 对象和其他比较,转成字符串 字符串和数字比较,字符串转成数字 布尔值和任何比较,转成数字 undefined == null NaN 和谁都不相等 javascript权 ...