HTML 图像

图像标签（<img>）和源属性（Src）

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

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

要在页面上显示图像 你需要使用源属性(src) src是指"source"源属性指的是图片的URL地址。或者图片的文件路径。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

例子

<img src="img/HBuilder.png" width="100px" height="100px" alt="没找到图片" />

src 指出图片的路径  width height 表示你想要图片显示的宽度和高度。 alt 表示显示图片错误时 显示给用户的提示信息。

下面是更多的例子

设置HTML页面的背景图片

<body background="img/HBuilder.png">

</body>

注意 如果页面很大但是图片很小 会默认平铺多张图片 直到铺满整个页面。

使用下面这个属性 可以避免这种情况

<body background="img/HBuilder.png" style="background-repeat: no-repeat; ">

</body>

图片的排列

<body>

    <h2>未设置对齐方式的图像</h2>

    <p>图像<img src="img/HBuilder.png"/>在文本中</p>

    <h2>已经设置对齐方式的图像</h2>

    <p>图像 <img src="img/HBuilder.png" align="bottom"> 在文本中</p>

    <p>图像 <img src="img/HBuilder.png" align="middle"> 在文本中</p>

    <p>图像 <img src="img/HBuilder.png" align="top"> 在文本中</p>

    <p>请注意，bottom 对齐方式是默认的对齐方式。</p>

</body>

浮动图片

<body>

        <p>图片浮动到左侧

            <img src="img/HBuilder.png" align="left" width="50" height="50" />

        </p>

        <br />

        <p>图片浮动到右侧

            <img src="img/HBuilder.png" align="right" width="50" height="50" />

        </p>

    </body>

关于浮动 后面还会降到 float这事布局中常用的属性，后面将会详细介绍。

点击图像 跳转到一个链接

<body>

    <a href="http://www.baidu.com">

        <img src="img/HBuilder.png" width="100" height="100" />

    </a>

</body>

上面就是html图像标签<img />的一些基本使用。

HTML 学习笔记(图像)的更多相关文章

  1. tensorflow学习笔记——图像数据处理

    喜欢摄影的盆友都知道图像的亮度,对比度等属性对图像的影响是非常大的,相同物体在不同亮度,对比度下差别非常大.然而在很多图像识别问题中,这些因素都不应该影响最后的结果.所以本文将学习如何对图像数据进行预 ...

  2. OpenCV学习笔记——图像的腐蚀与膨胀

    顺便又复习了一下cvcopy如何进行图像拼接(最近觉得打开多幅图像分别看不如缩小掉放拼接到一幅图像上对比来的好) 首先把拼接的目标图像设置兴趣区域ROI,比如我有一个total,要把a.b.c分别从左 ...

  3. opencv学习笔记-图像对比度、亮度调节

    在数学中我们学过线性理论,在图像亮度和对比度调节中同样适用,看下面这个公式: 在图像像素中其中: 参数f(x)表示源图像像素. 参数g(x) 表示输出图像像素. 参数a(需要满足a>0)被称为增 ...

  4. opencv学习笔记-图像叠加、混合

    在图像处理中,目标区域定义为感兴趣区域ROI(region of Interest),这是后期图像处理的基础,在获取ROI后,进行一些列的处理.ROI区域在Opencv中就是Rect,先构建Rect, ...

  5. opencv学习笔记——图像缩放函数resize

    opencv提供了一种图像缩放函数 功能:实现对输入图像缩放到指定大小 函数原型: void cv::resize ( InputArray src, OutputArray dst, Size ds ...

  6. (转) OpenCV学习笔记大集锦 与 图像视觉博客资源2之MIT斯坦福CMU

          首页 视界智尚 算法技术 每日技术 来打我呀 注册     OpenCV学习笔记大集锦 整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的 ...

  7. C#数字图像处理算法学习笔记（三）--图像几何变换

    C#数字图像处理算法学习笔记(三)--图像几何变换 几何图像处理包括 图像的平移变换,镜像变换,旋转变换,伸缩变换,在这里仅以水平镜像为例,通过代码来理解其基本操作方式: 翻转前:

  8. OpenCV 学习笔记 02 使用opencv处理图像

    1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...

  9. OpenGL ES学习笔记（二）——平滑着色、自适应宽高及三维图像生成

    首先申明下,本文为笔者学习<OpenGL ES应用开发实践指南(Android卷)>的笔记,涉及的代码均出自原书,如有需要,请到原书指定源码地址下载. <Android学习笔记--O ...

随机推荐

  1. 如何更好的通过Inflate layout的方式来实现自定义view

    本篇文章讲的是如何用现有控件产生一个组合控件的方法,十分简单实用.现在开始! 一.需求 我们要实现一个有红点和文字的按钮控件,就像下面这样: 二.实现 我的思路是让一个button和一个textvie ...

  2. Android 手机卫士--事件传递&响应规则

    问题的提出: 本文地址:http://www.cnblogs.com/wuyudong/p/5911187.html ,转载请注明源地址. 前面的文章实现了点击SettingItemView条目的时候 ...

  3. View的事件体系

    View的滑动 实现手段 优点 缺点 备注 scrollTo/scrollBy 使用简单 只能滑动view的内容,并不会滑动view本身. 且内容超出view本身的布局范围部分的不会显示 不适合有交互 ...

  4. 利用听云Server和听云Network实测Kubernetes和Mesos在高并发下的网络性能

    文章出自:听云博客 随着公司业务的不断增长,我们的应用数量也有了爆发式增长.伴随着应用爆发式的增长,管理的难度也随之加大.如何在业务爆发增长的同时快速完成扩容成了很大的挑战.Docker的横空出世恰巧 ...

  5. 初次使用 git 的“核弹级选项”：filter-branch 从仓库中删除文件

    当初看 Pro Git 时就被作者这个“核弹级选项”的称呼吓到了,因此一直没敢好奇地去尝试.核弹啊,用对了威力无穷,用错了破坏力无穷! 但是,今天,我不得不用了,因为我想把我的原来写一些代码放到 gi ...

  6. DOM 节点操作

    一.获取节点 方法名 只能document调用 返回单一的值 返回动态集合 getElementById √ √ getElementsByTagName √ getElementsByClassNa ...

  7. LB 简单比较 – F5、NetScaler、LVS、Nginx、Haproxy

    LB 简单比较 – F5.NetScaler.LVS.Nginx.Haproxy 负载均衡技术是构建大型网站必不可少的架构策略之一.它的目的是,把用户的请求分发到多台后端的设备上,用以均衡服务器的负载 ...

  8. 【转】探索C#之布隆过滤器(Bloom filter)

    原文:蘑菇先生,http://www.cnblogs.com/mushroom/p/4556801.html 背景介绍 Bloom filter(后面简称BF)是Bloom在1970年提出的二进制向量 ...

  9. MongoDB查询重复记录并保存到文件csv

    客户1w用户记录,发现里面有小部分重复数据 需要查出,比对哪些信息不同 https://docs.mongodb.org/manual/reference/operator/aggregation/# ...

  10. #研发解决方案介绍#Recsys-Evaluate（推荐评测）

    郑昀 基于刘金鑫文档 最后更新于2014/12/1 关键词:recsys.推荐评测.Evaluation of Recommender System.piwik.flume.kafka.storm.r ...