html图像入门

在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"是指在另外一个页面打开一个新的页面。

时间: 2024-10-17 00:38:45

html图像入门的相关文章

SVG 图像入门教程

http://www.ruanyifeng.com/blog/2018/08/svg.html 一.概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics).其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真. SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作. <!DOCTYPE html> <

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

上个随笔已经介绍EmguCV的一些常用库和程序安装以及环境变量的配置,这次写的是如何使用这个类库对图像进行操作. EmguCV图像处理系统组成(个人见解): 图像的基本操作: 贴个代码: using Emgu.CV; //使用命名空间 using Emgu.CV.Structure; using Emgu.CV.CvEnum; using Emgu.Util; static void Main(string[] args) { Mat srcImg = CvInvoke.Imread("1.jp

【转载】大话图像处理之入门篇

原文链接:http://c.biancheng.net/cpp/html/3077.html 本文由@陈俊岭编辑. 最近有人问我图像处理怎么研究,怎么入门,怎么应用,我竟一时语塞.仔细想想,自己也搞了两年图像方面的研究,做个两个创新项目,发过两篇论文,也算是有点心得,于是总结总结和大家分享,希望能对大家有所帮助. 在写这篇教程之前我本想多弄点插图,让文章看起来花哨一点,后来我觉得没必要这样做,大家花时间沉下心来读读文字没什么不好,况且学术和技术本身也不是多么花哨的东西. 一.图像处理的应用 这个

图像处理入门教程

最近有人问我图像处理怎么研究,怎么入门,怎么应用,我竟一时语塞.仔细想想,自己也搞了两年图像方面的研究,做个两个创新项目,发过两篇论文,也算是有点心得,于是总结总结和大家分享,希望能对大家有所帮助.在写这篇教程之前我本想多弄点插图,让文章看起来花哨一点,后来我觉得没必要这样做,大家花时间沉下心来读读文字没什么不好,况且学术和技术本身也不是多么花哨的东西. 一.图像处理的应用 这个其实没什么好说的,一种技术的应用价值不是靠嘴上说,而是要看有多少人去搞,很简单的道理.其实我觉得判断一项技术有没有价值

SSE图像算法优化系列十:简单的一个肤色检测算法的SSE优化。

在很多场合需要高效率的肤色检测代码,本人常用的一个C++版本的代码如下所示: void IM_GetRoughSkinRegion(unsigned char *Src, unsigned char *Skin, int Width, int Height, int Stride) { for (int Y = 0; Y < Height; Y++) { unsigned char *LinePS = Src + Y * Stride; // 源图的第Y行像素的首地址 unsigned char

【OpenCV入门教程之三】 图像的载入,显示和输出 一站式完全解析

了解过之前老版本OpenCV的童鞋们都应该清楚,对于OpenCV1.0时代的基于 C 语言接口而建的图像存储格式IplImage*,如果在退出前忘记release掉的话,就会造成内存泄露.而且用起来超级麻烦,我们往往在debug的时候,很大一部分时间在纠结手动释放内存的问题.虽然对于小型的程序来说手动管理内存不是问题,但一旦我们写的代码变得越来越庞大,我们便会开始越来越多地纠缠于内存管理的问题,而不是着力解决你的开发目标. 这,就有些舍本逐末的感觉了. 而自从OpenCV踏入2.0时代,用Mat

【OpenCV入门教程之四】 ROI区域图像叠加&amp;初级图像混合 全剖析(转)

本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/20911629 作者:毛星云(浅墨)    邮箱: [email protected] 写作当前博文时配套使用的OpenCV版本: 2.4.8 在这篇文章里,我们一起学习了在OpenCV中如何定义感兴趣区域ROI,如何使用addWeighted函数进行图像混合操作,以及将ROI和addWeighted函数结合起来使用,对指定区域进行图像

c#图像处理入门(-bitmap类和图像像素值获取方法)

c#图像处理入门 -bitmap类和图像像素值获取方法 一.Bitmap类 Bitmap对象封装了GDI+中的一个位图,此位图由图形图像及其属性的像素数据组成.因此Bitmap是用于处理由像素数据定义的图像的对象.该类的主要方法和属性如下: 1. GetPixel方法和SetPixel方法:获取和设置一个图像的指定像素的颜色. 2. PixelFormat属性:返回图像的像素格式. 3. Palette属性:获取和设置图像所使用的颜色调色板. 4. Height Width属性:返回图像的高度和

【OpenCV入门教程之六】 创建Trackbar &amp; 图像对比度、亮度值调整(转)

本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/21479533 作者:毛星云(浅墨)    邮箱: [email protected] 写作当前博文时配套使用的OpenCV版本: 2.4.8 这篇文章中我们一起学习了如何在OpenCV中用createTrackbar函数创建和使用轨迹条,以及图像对比度.亮度值的动态调整. 文章首先详细讲解了OpenCV2.0中的新版创建轨迹条的函数c