HTML 学习笔记(图像)
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 学习笔记(图像)的更多相关文章
- tensorflow学习笔记——图像数据处理
喜欢摄影的盆友都知道图像的亮度,对比度等属性对图像的影响是非常大的,相同物体在不同亮度,对比度下差别非常大.然而在很多图像识别问题中,这些因素都不应该影响最后的结果.所以本文将学习如何对图像数据进行预 ...
- OpenCV学习笔记——图像的腐蚀与膨胀
顺便又复习了一下cvcopy如何进行图像拼接(最近觉得打开多幅图像分别看不如缩小掉放拼接到一幅图像上对比来的好) 首先把拼接的目标图像设置兴趣区域ROI,比如我有一个total,要把a.b.c分别从左 ...
- opencv学习笔记-图像对比度、亮度调节
在数学中我们学过线性理论,在图像亮度和对比度调节中同样适用,看下面这个公式: 在图像像素中其中: 参数f(x)表示源图像像素. 参数g(x) 表示输出图像像素. 参数a(需要满足a>0)被称为增 ...
- opencv学习笔记-图像叠加、混合
在图像处理中,目标区域定义为感兴趣区域ROI(region of Interest),这是后期图像处理的基础,在获取ROI后,进行一些列的处理.ROI区域在Opencv中就是Rect,先构建Rect, ...
- opencv学习笔记——图像缩放函数resize
opencv提供了一种图像缩放函数 功能:实现对输入图像缩放到指定大小 函数原型: void cv::resize ( InputArray src, OutputArray dst, Size ds ...
- (转) OpenCV学习笔记大集锦 与 图像视觉博客资源2之MIT斯坦福CMU
首页 视界智尚 算法技术 每日技术 来打我呀 注册 OpenCV学习笔记大集锦 整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的 ...
- C#数字图像处理算法学习笔记（三）--图像几何变换
C#数字图像处理算法学习笔记(三)--图像几何变换 几何图像处理包括 图像的平移变换,镜像变换,旋转变换,伸缩变换,在这里仅以水平镜像为例,通过代码来理解其基本操作方式: 翻转前:
- OpenCV 学习笔记 02 使用opencv处理图像
1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...
- OpenGL ES学习笔记（二）——平滑着色、自适应宽高及三维图像生成
首先申明下,本文为笔者学习<OpenGL ES应用开发实践指南(Android卷)>的笔记,涉及的代码均出自原书,如有需要,请到原书指定源码地址下载. <Android学习笔记--O ...
随机推荐
- PHP学习之登录以及后台商品展示
1.3用户登录 用户登录成功后跳转到商品显示页面 1.3.1设计界面 1.新建一个login.php页面,用来做用户的登录 2.登录业务原理 通过输入的用户名和密码查询对应的记录,表示登陆成功,否则登 ...
- JAVA Web 实现会话跟踪的技术笔记
1.HTTP协议无状态:客户端的请求与服务器的响应所发生的一系列行为简单的说是客户发送了请求,服务器就给客户端响应,它们彼此之间都没有记录下来.如: 顾客与自动售货机 普通顾客(非会员)与商场 2.c ...
- jax-rs中的一些参数标注简介(@PathParam,@QueryParam,@MatrixParam,@HeaderParam,@FormParam,@CookieParam)
先复习一下url的组成: scheme:[//[user:password@]host[:port]][/]path[?query][#fragment] jax-rs anotation @Path ...
- Android ListView添加多种类型的ItemView
一般复杂的ListView都会重写BaseAdapter,通过重用convertView来减少inflate,通过setTag()和ViewHolder改变ItemView的内容. 重写BaseAda ...
- 【代码笔记】iOS-点击任何处，出现城市
一,效果图. 二,工程目录. 三,代码. //点击任何处,出现城市 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { ...
- nutz如何体现mvc思想的
如何理解web mvc框架?? 一.没有使用mvc框架之前我们都是自己根据mvc分层思想的理解去把它物理化,比如:根据包的命名,根据类的后缀名,根据文件夹的命名去定义分层. 因为每个人对mvc的理解不 ...
- informatica 学习日记整理
1. INFORMATICA CLIENT的使用 1.1 Repository Manager 的使用 1.1.1 创建Repository. 前提: a.在ODBC数据源管理器中新建一个数据源连接至 ...
- R语言中的循环函数（Grouping Function）
R语言中有几个常用的函数,可以按组对数据进行处理,apply, lapply, sapply, tapply, mapply,等.这几个函数功能有些类似,下面介绍下这几个函数的用法. Apply 这是 ...
- 编写一个Java应用程序，该应用程序包括2个类：Print类和主类E。Print 类里有一个方法output()功能是输出100 ~ 999之间的所有水仙花数（各位数字的 立方和等于这个三位数本身，如: 371 = 33 + 73 + 13。）在主类E的main方法中来 测试类Print
package zuoye; public class print { void output() { System.out.println("100-999之间的水仙花数是:") ...
- Centos修改DNS重启或者重启network服务后丢失问题处理
本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 阅读目录 介绍 起因 处理 GitHub 本文版 ...