今天学习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. HTTP协议 概述

    本文主要说明一些 Http 相关的基本概念和基本知识,主要针对像我一样的初学者,知识主要来自于<Http 权威指南> 除了分享这些基本知识之外,笔者也是为将来找工作复习之用.(协议就是协议 ...

  2. 【原创】lua的module的一些点

    lua的module好像是5.1开始有的 在xx.lua的开头写上 module('my_module') 这行等价于如下几行 local name = 'my_module' local M = { ...

  3. 题解西电OJ (Problem 1005 -跳舞毯)--动态规划

    Description zyf不小心得了一种怪病,为了维持一天的精力他必须不停跳动.于是他买了一条跳舞毯,每天跳上几小时.众所周知,跳舞毯是给定一个序列,让你在指定时间踏指定的按钮,但zyf似乎不怎么 ...

  4. acm-DP整理

    一.背包 .各种01背包 void leastOne_Pack(int id, int num ) {//至少取一个: int i, j, c, v ; ; i <= num ; i ++ ) ...

  5. Android下NFC的简单使用

    现在很多手机已经配备了NFC(Near Field Communication 近场通信)的功能,我就为此专门研究过,可以到本文末尾下载源代码. Android官方资料:http://develope ...

  6. 通过在shell脚本中用scp或rsync实现远程同步文件

    通过在shell脚本中用expect实现远程scp文件  shell expect的简单用法 http://myunix.blog.51cto.com/191254/1095074 http://ji ...

  7. 【C语言】-条件语句-switch语句

    switch语句: 用于直接处理不同情况下的多路问题. switch语句又可称为开关语句,其执行流程和多分支if语句类似. switch (表达式) { case 常量表达式1:语句组1;break; ...

  8. A Tour of Go Interfaces

    An interface type is defined by a set of methods. A value of interface type can hold any value that ...

  9. 编写Qt Designer自定义控件（二）——编写自定义控件界面

    接上文:编写Qt Designer自定义控件(一)——如何创建并使用Qt自定义控件 既然是控件,就应该有界面,默认生成的控件类只是一个继承了QWidget的类,如下: #ifndef LOGLATED ...

  10. Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式

    方法一:使用document对象查找所有的按钮 [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 //按照dom的方式添加事件处理 function B ...