在HTML中，图像由<img>标签定义。

<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，需要使用源属性src, src指的是"source”（源）。源属性的值是图像的url地址

定义的图像语法是：    <img src="图片地址.jpg" />   。

浏览器将图像显示在文档图像标签出现的地方。如果将图像标签在两个段落之中的话，那样浏览器

会先选择第一个段落，然后在出现图像，在者就是后一个段落了。

alt属性用来为图像定义一串预留的可替换文本。替换文本属性值是自己设定的。中英文都可以使用。

例如:  <img src="boat.gif" alt="加载失败">

养成替换文本的好习惯有助于更好的显示信息，对于那些使用纯文本浏览器的人来说非常有用的。

假如某个HTML文件包 含十个图像，那么为了正确显示这个页面，需要加载11个文件。加载图片是需要时间的。

图像背景

gif和jpg文件均可用做HTML背景，如果图像小于页面，图片会进行重复。

例如：<body background="背景图像地址.jpg>

图像对齐

图片对齐底部<img src="图片地址.jpg” align="bottom">

图片对齐中间<img src="图片地址.jpg" align="middle">

图片对齐顶部<img src="图片地址.jpg" align=top">

图片的默认对齐方式是bottom。

图像浮动

带有图像的一个段落。图像的align属性设置为"left"。图像将浮动来文本左侧

<img src="图像地址.jpg" align="left">

带有图像的一个段落。图像的align属性设置为"right"。图像将浮动到文本右侧

<img src="图像地址.jpg" align="right">

调整图像的尺寸

通过改变 img 标签的"height"和"width"属性的值可以放大或缩小图像

缩小图像：<img src="图片地址.jpg" width="50" height="50">

放大图像：<img src="图片地址.jpg" width="200" height="200">

图片制作超链接

<a href="www.baidu.com"><img border="0" src="图片地址.jpg>

border是边框的意思，border="0"在这里的意思就是指定图片没有边框，在html里面，图像默认是有边框的。

图像映射

<img src="地图地址.jpg" border="0" usemap="#mingzi" alt="大图 />

<map name="mingzi"     id="mingzi">

<area

shape="square”

coords="0.0.0.0"

href="http://www.baidu.com"

target="_blank"

alt="小图" />

其中：usemap="#名字"  alt="替换文本"  map标签定义图像映射

area是热区的意思，就是在一张图片上画一个区域，然后可以给这个区域一个链接地址

shape=形状 热区有3种画法长方形，多边形，圆形。coords=地标，3点是圆形

href=超链接。  target="_blank"是指在另外一个页面打开一个新的页面。

html图像入门的更多相关文章

  1. opencv学习(一)——图像入门

    图像入门 一.读取图像 在opencv中使用cv.imread(filename, flags)函数读取图像.filename参数表示读取图像的路径.读取图像的路径应完整给出,且不能含有中文,否则在调 ...

  2. 自然饱和度(Vibrance)算法的模拟实现及其SSE优化（附源码，可作为SSE图像入门，Vibrance算法也可用于简单的肤色调整）。

    Vibrance这个单词搜索翻译一般振动,抖动或者是响亮.活力,但是官方的词汇里还从来未出现过自然饱和度这个词,也不知道当时的Adobe中文翻译人员怎么会这样处理.但是我们看看PS对这个功能的解释: ...

  3. SVG 图像入门教程

    http://www.ruanyifeng.com/blog/2018/08/svg.html 一.概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector ...

  4. SSE图像算法优化系列八：自然饱和度(Vibrance)算法的模拟实现及其SSE优化（附源码，可作为SSE图像入门，Vibrance算法也可用于简单的肤色调整）。

    Vibrance这个单词搜索翻译一般振动,抖动或者是响亮.活力,但是官方的词汇里还从来未出现过自然饱和度这个词,也不知道当时的Adobe中文翻译人员怎么会这样处理.但是我们看看PS对这个功能的解释: ...

  5. 使用C#+EmguCV处理图像入门（图像读取_显示_保存)二

    上个随笔已经介绍EmguCV的一些常用库和程序安装以及环境变量的配置,这次写的是如何使用这个类库对图像进行操作. EmguCV图像处理系统组成(个人见解): 图像的基本操作: 贴个代码: using ...

  6. 使用C#+EmguCV处理图像入门（一）

    首先我们先了解一下该库的一些相关信息 OpenCV(Open Source Computer Vision Library)是一个(开源免费)发行的跨平台计算机视觉库,可以运行在Linux.Windo ...

  7. opencv入门系列教学（二）图像入门：读取、展示并保存视频

    一.从相机读取视频 通常情况下,我们必须用摄像机捕捉实时画面.让我们从摄像头捕捉一段视频(我使用的是我笔记本电脑内置的网络摄像头) ,将其转换成灰度视频并显示出来.        要捕获视频,我们需要 ...

  8. SVG图像学习

    参考阮一峰老师: SVG 图像入门教程 基本使用 可以直接放入到html中 <body> <svg viewBox="0 0 800 600" > < ...

  9. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

随机推荐

  1. flvplayer.swf flv视频播放器使用方法

    今天由于网页上要加入一个视频文件,就研究了一下flv视频播放器flvplayer.swf      :   关于SewisePlayer  插件 演示例子链接   一.直接在html文件中加载: &l ...

  2. Layer 一个让你想到即可做到的web弹窗/层 解决方案

    最近工作上面用到的web弹窗组件layer layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. layer官方 ...

  3. C语言学习笔记--字符串函数

    字符串函数 需要包含头文件#include<stdio.h> strlen strcmp strcpy strchr strstr strcasestr

  4. LA 小、杂、乱题合辑

    ${\Large 1.}$(来自丘维声『高等代数』(上)$P_{189,194}$) $(1).$ 设$A,B$分别是数域${\mathbb F}$上$n\times n,m\times n$矩阵. ...

  5. HDU 3446 daizhenyang's chess

    http://acm.hdu.edu.cn/showproblem.php?pid=3446 题意:一个棋盘,有个KING,有一些能走的点,每次只能走到没走过的地方,没路可走的输,求先手是否必胜. 思 ...

  6. POJ2084 Game of Connections（数学,dp)

    题目链接. 分析: 简单的 Catalan 数 将x~y编号,设解为 d(x, y), d(x, y) = {d(x+1,i-1)*d(i+1,y)}, 其中 x+1<= i  <= y, ...

  7. 【转】显示Ubuntu文件浏览器的地址栏--不错

    原文网址:http://www.blogbus.com/anythingok-logs/144447448.html Ubuntu默认使用nautilus作为其可视化的文件浏览器,其默认值不显示地址栏 ...

  8. Notepad++去除代码行号的几种方法

    Notepad++去除代码行号的几种方法 (转自:http://hi.baidu.com/beer_zh/item/e70119309ee587f2a8842892)问:在网页中复制代码时,常常遇到高 ...

  9. 解读sample1

    说明 理解被测试代码 理解测试代码 TEST宏 EXPECT_*断言和ASSERT_*断言 检查数值比较结果的断言 检查布尔值的断言 说明 被测试代码文件 sample1.h.sample1.cc 测 ...

  10. fedorea19安装redis

    Redis 安装: $ wget http://redis.googlecode.com/files/redis-2.4.5.tar.gz $ tar xzf redis-2.4.5.tar.gz $ ...