今天学习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. 【转载】linux strace

    简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...

  2. 【HBase学习】Apache HBase项目简介

    原创声明:转载请注明作者和原始链接 http://www.cnblogs.com/zhangningbo/p/4068957.html       英文原版:http://hbase.apache.o ...

  3. Django – vicalloy's trac

    Django – vicalloy's trac Search:

  4. Fragment回调顺序及getActivity()为NullPointerException解决方法

    Fragment回调顺序 onAttach->onCreate->onCreateView->onActivityCreated ps:最后发现经常在Fragment里面getAct ...

  5. ACCESS-字符函数

    mid:等于delphi中的COPY举例str="123456"mid(str,2,1)的意思是在str字符串中从第2个字符开始取得一个字符,结果为2注意:下标是从1开始,而不是从 ...

  6. A Tour of Go Methods with pointer receivers

    Methods can be associated with a named type or a pointer to a named type. We just saw two Abs method ...

  7. weblogic11g 安装——linux 无图形界面

    weblogic11g 安装——linux下无weblogic安装图形界面 注意:此次安装,没做server.ip .系统规划 目的:学习weblogic11g 在linux下  无图形安装的过程 j ...

  8. android侧滑菜单笔记

    一.SlidingPaneLayout v4包下的控件,使用简单,功能简洁.官方文档明确说明该控件只能左侧滑动.使用如下: <android.support.v4.widget.SlidingP ...

  9. SQLite使用教程5 分离数据库

    http://www.runoob.com/sqlite/sqlite-detach-database.html SQLite 分离数据库 SQLite的 DETACH DTABASE 语句是用来把命 ...

  10. linux下eclipse的安装

    Eclipse的安装http://java.sun.com/javace/downloads/index.jsp下载:Jdk-6u17-linux-i586.binhttp://www.eclipse ...