今天学习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. zoj 1670 Jewels from Heaven

    题意:三个人,在给定正方形内,求第一个人拿到珠宝的概率.珠宝随机出现在正方形内. 思路:中垂线+半平面相交. #include<cstdio> #include<cstring> ...

  2. SQL Server Cpu 100% 的常见原因及优化

    SQL Server Cpu 100% 的情况并不太常见,一般引起 SQL Server 产生性能问题的,都是 阻塞.连接数.IO 磁盘等.所以,一般SQL Server 的使用率都是比较低的.但是, ...

  3. nyoj 79 拦截导弹

    拦截导弹 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 某国为了防御敌国的导弹袭击,发展中一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到 ...

  4. 多进程解决datasnap支持的tcp长连接数量少的问题

    对于实时采集数据的项目,应用场景比如是这样的:5000客户端,每个客户端每隔500MS要给服务器上传一次数据. 大家知道,像INDY这种阻塞型的通信控件,所能支持的TCP长连接的一般地不能超过1000 ...

  5. [OC Foundation框架 - 5] NSString的常用方法

             NSString *s1 = ";   1.比较 使用 == 号比较的是字符串地址 NSString *s4 = @"abcdefg"; NSStrin ...

  6. 学习和理解C#中的事件

    注:本文系学习笔记. 上一篇文章记录了我对C#中委托的理解.委托实际上是一种类型.可以将一个或多个方法绑定到委托上面,调用委托时,一次执行委托上面绑定的方法.本文要讲述的事件实际上和委托有很深的“感情 ...

  7. mysql数据库全局只读和会话只读问题解析

    对于系统的发布是经常有的事情,有些时候需要隔绝外界对数据库的更改但是还要求可以读取数据,对于mss sql 这个就是很简单,直接属性—>选项—>只读 ,但是对于mysql这是不同的,今天仔 ...

  8. Gitbook安装

    Gitbook安装 Gitbook是从NMP安装的,命令行: $ npm install gitbook -g 安装完之后,你可以检验下是否安装成功: $ gitbook -V 0.4.2 如果你看到 ...

  9. 记一次js中和php中的字符串长度计算截取的终极问题和完美解决方案

    1.js是用unicode算长度的,比如单字节的算1,中文也算1,但是正常我们想让两个单字节算1,如何计算这个长度 第一种解决方案,用正则,如下 /[\u0x00-\u0xff]/,天真的想着,这样就 ...

  10. 把sublime添加到右键菜单（转）

    sublime text是前端利器,为了方便,我们把它加入到win7系统的右键菜单(xp不支持) 保存为bat文件,放入sublimetext安装文件夹与sublime_text同级,双击执行即可. ...