今天学习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. HDU 1024 DP Max Sum Plus Plus

    题意:本题的大致意思为给定一个数组,求其分成m个不相交子段和最大值的问题. kuangbin专题. dp[i][j]=Max(dp[i][j-1]+a[j] , max( dp[i-1][k] ) + ...

  2. 利用迅雷提供的接口从磁力链得到bt种子文件

    本地下载工具的磁力链下载速度不给力,而百度云盘有提供离线下载服务,相当于就是直接到服务器取个链接而已.但这需要bt文件,而我只有链力链.网上搜了一下,可以从磁力链构造一个bt文件的下载地址,用pyth ...

  3. Codeforces Round #226 (Div. 2 )

    这次精神状态不怎么好,第一题的描述看得我就蛋疼...看完就速度写了~~~最终fst了%>_<%,第二题写复杂了,一直WA pretest 3,然后就紧张,导致精神更不好了,一直纠结在第二题 ...

  4. android 的开源输入法介绍，及 自动触摸的实现方法

    输入法的开源代码见我自己的360云盘里的 openwnn-legacy-android-open-ime.tar.bz2 文件 http://www.pocketmagic.net/injecting ...

  5. mssql游标demo

    declare @billIds varchar(400) declare @billId varchar(40) DECLARE c1 CURSOR FOR select top 5 SaleNo ...

  6. _int、NSInteger、NSUInteger、NSNumber的区别和联系

    1.首先先了解下NSNumber类型: 苹果官方文档地址:https://developer.apple.com/library/ios/documentation/Cocoa/Reference/F ...

  7. .Net 项目常见疑难杂症

    1.A项目引用 B项目 B项目引用C.dll 同时 A也必须引用 C.dll 则 A中引用的C的版本 必须和 B中引用C的版本相同 否则就会出现下面这类问题:解决办法 :同步A B项目中引用C的版本一 ...

  8. ilitek的电容屏驱动程序ilitek_aimvx.c的分析

    本文记录了ili驱动程序. 参考  http://linhui.568.blog.163.com/blog/static/962652682011786352856/ 后记:现在的情况是,在win上是 ...

  9. MSSQLSERVER数据库- SP_EXECUTESQL的使用

    EXEC和SP_EXECUTESQL有什么区别呢? 1,它们之间最大的区别是嵌入式的参数,如下面一个语句 declare @sql nvarchar() declare @id varchar() ' ...

  10. Java foreach操作（遍历）数组

    语法: 我们分别使用 for 和 foreach 语句来遍历数组 运行结果: 练习: import java.util.Arrays; public class HelloWorld { public ...