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"是指在另外一个页面打开一个新的页面。
html图像入门的更多相关文章
- opencv学习(一)——图像入门
图像入门 一.读取图像 在opencv中使用cv.imread(filename, flags)函数读取图像.filename参数表示读取图像的路径.读取图像的路径应完整给出,且不能含有中文,否则在调 ...
- 自然饱和度(Vibrance)算法的模拟实现及其SSE优化(附源码,可作为SSE图像入门,Vibrance算法也可用于简单的肤色调整)。
Vibrance这个单词搜索翻译一般振动,抖动或者是响亮.活力,但是官方的词汇里还从来未出现过自然饱和度这个词,也不知道当时的Adobe中文翻译人员怎么会这样处理.但是我们看看PS对这个功能的解释: ...
- SVG 图像入门教程
http://www.ruanyifeng.com/blog/2018/08/svg.html 一.概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector ...
- SSE图像算法优化系列八:自然饱和度(Vibrance)算法的模拟实现及其SSE优化(附源码,可作为SSE图像入门,Vibrance算法也可用于简单的肤色调整)。
Vibrance这个单词搜索翻译一般振动,抖动或者是响亮.活力,但是官方的词汇里还从来未出现过自然饱和度这个词,也不知道当时的Adobe中文翻译人员怎么会这样处理.但是我们看看PS对这个功能的解释: ...
- 使用C#+EmguCV处理图像入门(图像读取_显示_保存)二
上个随笔已经介绍EmguCV的一些常用库和程序安装以及环境变量的配置,这次写的是如何使用这个类库对图像进行操作. EmguCV图像处理系统组成(个人见解): 图像的基本操作: 贴个代码: using ...
- 使用C#+EmguCV处理图像入门(一)
首先我们先了解一下该库的一些相关信息 OpenCV(Open Source Computer Vision Library)是一个(开源免费)发行的跨平台计算机视觉库,可以运行在Linux.Windo ...
- opencv入门系列教学(二)图像入门:读取、展示并保存视频
一.从相机读取视频 通常情况下,我们必须用摄像机捕捉实时画面.让我们从摄像头捕捉一段视频(我使用的是我笔记本电脑内置的网络摄像头) ,将其转换成灰度视频并显示出来. 要捕获视频,我们需要 ...
- SVG图像学习
参考阮一峰老师: SVG 图像入门教程 基本使用 可以直接放入到html中 <body> <svg viewBox="0 0 800 600" > < ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
随机推荐
- Tomcat安装阿里云免费证书
安装证书 Tomcat支持JKS格式证书,从Tomcat7开始也支持PFX格式证书,两种证书格式任选其一.下载包中包含PFX格式证书和密码文件. 1.PFX证书安装 找到安装 Tomcat 目录下该文 ...
- 《asp.net mvc3 高级编程》第三章 视图
一.视图的作用 视图的职责是向用户提供界面.从ASP.NET MVC3开始,视图数据也可以通过ViewBag属性访问.例如:ViewBag.Message 就等于ViewData["Mess ...
- centos 6.5 服务器安装 (LNMP ntfs文件支持 PHP-RPM CHROOT沙盒)
centos 6.5 最小化安装 进入系统 手动开启网卡 #ifconfig eth0 //(默认会自动获得ip) 修改网站配置文件,默认开启 #cd /etc/sysconfig/ne ...
- thinkphp action.class.php 学习
控制器类(Action) 描述 Description ThinkPHP Action控制器基类 抽象类 位置:ThinkPHP/Lib/Core/Action.class.php 声明: abstr ...
- Ppthon基础学习之Dict
一.什么是字典? 字典是Python语言中唯一的映射类型. 映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关系,通常被认为是可变的哈希表. 字典对象是可变的,它是一个容器 ...
- bzoj2487: Super Poker II
Description I have a set of super poker cards, consisting of an infinite number of cards. For each p ...
- Zend framework重定向的方法
zend framework重定向的方法有三种.render, forward, redirect.它们各自的用法是什么样子的呢?有什么区别呢? 一.render render是用来调视图用的,不会调 ...
- HDU Train Problem I 1022 栈模拟
题目大意: 给你一个n 代表有n列 火车, 第一个给你的一个字符串 代表即将进入到轨道上火车的编号顺序, 第二个字符串代表的是 火车出来之后到顺序, 分析一下就知道这,这个问题就是栈, 先进后出吗, ...
- HDU 4627 There are many unsolvable problem in the world.It could be about one or about zero.But this time it is about bigger number.
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82974#problem/E 解题思路:数论,从一个数的中间开始往两边找,找到两 ...
- mysql启动停止,一台服务器跑 多个mysql数据库
一.以非特权用户运行MySQL服务器在讨论如何启动MySQL服务器之前,让我们考虑一下应该以什么用户身份运行MySQL服务器.服务器可以手动或自动启动.如果你手动启动它, 服务器以你登录Unix(Li ...