Ⅰ 程序员必须知道的HTML常用代码有哪些
html+css代码
文本设置
1、font-size: 字号参数
2、font-style: 字体格式
3、font-weight: 字体粗细
4、颜色属性
color: 参数
注意使用网页安全色
超链接设置
text-decoration: 参数
主要用途是改变浏览器显示文字链接时的下划线。
参数取值范围:
underline:为文字加下划线
overline:为文字加上划线
line-through:为文字加删除线
blink:使文字闪烁
none:不显示上述任何效果
背景
1、背景颜色
background-color: 参数
2、背景图片
background-image: url(URL)
URL就是背景图片的存放路径,none表示无。
3、背景图片重复
background-repeat: 参数
参数取值范围 :
no-repeat:不重复平铺背景图片
repeat-x:使图片只在水平方向上平铺
repeat-y:使图片只在垂直方向上平铺
如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。
4、背景图片固定
背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力,一般都设为固定
background-attachment: 参数
参数取值范围:
fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动
scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
区块
1、单词间距
word-spacing: 间隔距离
2、字母间距
letter-spacing: 字母间距
3、文本对齐
text-align: 参数
参数的取值:
left:左对齐
right:右对齐
center:居中对齐
justify:相对左右对齐
4、垂直对齐
vertical-align: 参数
top:顶对齐
bottom:底对齐
text-top:相对文本顶对齐
text-bottom:相对文本底对齐
baseline:基准线对齐
middle:中心对齐
sub:以下标的形式显示
super:以上标的形式显示
5、文本缩进
text-indent: 缩进距离
12px相当于一个文字距离
6、空格
white-space: 参数
normal 正常
pre 保留
nowrap 不换行
7、显示样式
display: 参数
参数取值范围:
block:块级元素,在对象前后都换行
inline:在对象前后都不换行
list-item:在对象前后都换行,增加了项目符号
none:无显示
方框
1、height 高度
2、width 宽度
3、padding 内边距
4、margin 外边距
5、float(浮动):可以让块级元素在一行中排列,例如横向菜单。
6、clear 清除浮动
边框
1、样式
border style 参数
边框样式的参数:
none:无边框
dotted:边框为点线
dashed:边框为长短线
solid:边框为实线
double:边框为双线
2、宽度
border width 参数
3、颜色
border color 参数
列表
list-style-type 列表样式
不同浏览器的列表符可能不相同,可能会影响到网页,所以网页中的列表大多都是由背景图片显示。
控制用户界面的样式
鼠标
cursor:鼠标形状参数
CSS鼠标形状参数表:
鼠标形状:CSS代码
style="cursor:hand" 手形
style="cursor:crosshair" 十字形
style="cursor:text" 文本形
style="cursor:wait" 沙漏形
style="cursor:move" 十字箭头形:
style="cursor:help" 问号形
style="cursor:e-resize" 右箭头形
style="cursor:n-resize" 上箭头形
style="cursor:nw-resize" 左上箭头形
style="cursor:w-resize" 左箭头形
style="cursor:s-resize" 下箭头形
style="cursor:se-resize" 右下箭头形
style="cursor:sw-resize" 左下箭头形
HTML常用代码之:结构性定义
文件类型<HTML></HTML> (放在档案的开头与结尾)
文件主题<TITLE></TITLE> (必须放在“文头”区块内)
文头<HEAD></HEAD> (描述性资料,像是“主题”)
文体<BODY></BODY> (文件本体)
标题<H?></H?> (从1到6,有六层选择)
标题的对齐 <H?ALIGN=LEFT|CENTER|RIGHT></H?>
区分<DIV></DIV>
区分的对齐 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文区块<BLOCKQUOTE></BLOCKQUOTE> (通常会内缩)
强调<EM></EM> (通常会以斜体显示)
特别强调<STRONG></STRONG> (通常会以加粗显示)
引文<CITE></CITE> (通常会以斜体显示)
码<CODE></CODE> (显示原始码之用)
样本<SAMP></SAMP>
键盘输入<KBD></KBD>
变数<VAR></VAR>
定义<DFN></DFN> (有些浏览器不提供)
地址 <ADDRESS></ADDRESS>
大字<BIG></BIG>
小字<SMALL></SMALL>
与外观相关的标签(作者自订的表现方式)
加粗<B></B>
斜体<I></I>
底线<U></U> (尚有些浏览器不提供)
删除线<S></S> (尚有些浏览器不提供)
下标<SUB></SUB>
上标<SUP></SUP>
打字机体<TT></TT> (用单空格字型显示)
预定格式<PRE></PRE> (保留文件中空格的大小)
预定格式的宽度<PRE WIDTH=?></PRE>(以字符计算)
向中看齐<CENTER></CENTER> (文字与图片都可以)
闪耀<BLINK></BLINK> (有史以来最被嘲弄的标签)
字体大小 <FONTSIZE=?></FONT>(从1到7)
改变字体大小 <FONTSIZE=+|-?></FONT>
基本字体大小 <BASEFONTSIZE=?> (从1到7; 内定为3)
字体颜色 <FONTCOLOR="#$$"></FONT>($$为颜色代码)
HTML常用代码之:修改页面的实用性HTML代码
贴图:<img src="图片地址">
加入连接:<a href="所要连接的相关地址">写上你想写的字</a>
在新窗口打开连接:<a href="相关地址" target="_blank">写上要写的字</a>
移动字体(走马灯):<marquee>写上你想写的字</marquee>
字体加粗:<b>写上你想写的字</b>
字体斜体:<i>写上你想写的字</i>
字体下划线: <u>写上你想写的字</u>
字体删除线: <s>写上你想写的字</s>
字体加大: <big>写上你想写的字</big>
字体控制大小:<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大,h5最小)
更改字体颜色:<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间
消除连接的下划线:<a href="相关地址" style="text-decoration:none">写上你想写的字</a>
贴音乐:<embed src="音乐地址" width="宽度" height="高度" autostart=false>
贴flash: <embed src="flash地址" width="宽度" height="高度">
贴影视文件:<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>
换行:<br>
段落:<p>段落</p>
原始文字样式:<pre>正文</pre>
换帖子背景:<body background="背景图片地址">
固定帖子背景不随滚动条滚动:<body background="背景图片地址" body bgproperties=fixed>
定制帖子背景颜色:<body bgcolor="#value">(value值见10)
帖子背景音乐:<bgsound="背景音乐地址" loop=infinite>
贴网页:<iframe. src="相关地址" width="宽度" height="高度"></iframe>
HTML常用代码之:常常会遇到的问题
点击关闭窗口
<a href="javascript.:top.window.close();">点击关闭窗口</a>!
请问如何去掉主页右面的滚动条?
<body scroll="no">
<body style="overflow-y:hidden">
如何做到让一个网页自动关闭.
<html>
<head>
<OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
</head>
<body >
这个窗口会在10秒过后自动关闭,而且不会出现提示. </body>
如何在不刷新页面的情况下刷新css?
<style>
button{ color:#000000;}
</style>
<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>点击按钮直接修改style标签里button选择符使按钮改为红色</button>
请问如何让网页自动刷新?
在head部记入<META. HTTP-EQUIV="Refresh" c>其中20为20秒后自动刷新,你可以更改为任意值。
如何让页面自动刷新?
方法一,用refresh
HTML 代码片段如下:
<head>
<meta. http-equiv="refresh" c>
</head>
5表示刷新时间
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
方法二,使用setTimeout控制
<img src=/logo.gif>
<script>
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
</SCRIPT>
如何让超链接没有下划线
在源代码中的<HEAD>…</HEAD>之间输入如下代码:
<style. type="text/css"> <!--
a { text-decoration: none}
--> </style>
请问如何去掉IE的上下滚动条?
<body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>
</body>
怎样才能把RealPlayer文件在网页做一个试听连接?
<embed height=25src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>
如何用html实现浏览器上后退按钮的功能?
<a href="java script.:history.go(-1)">点击后退</a>
或者
<script> history.back() </SCRIPT>
HTML常用代码之:你不一定知道的技巧
ncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
<table borderncontextmenu=return(false)><td>no</table> 可用于Table
<body nselectstart="return false"> 取消选取、防止复制
onpaste="return false" 不准粘贴
on="return false;" ncut="return false;" 防止复制
<link rel="Shortcut Icon"href="favicon.ico"> IE地址栏前换成自己的图标
<link rel="Bookmark"href="favicon.ico"> 可以在收藏夹中显示出你的图标
<inputstyle="ime-mode:disabled"> 关闭输入法
永远都会带着框架
<script. language="JavaScript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
// --></script>
防止被人frame.
<SCRIPT. LANGUAGE=JAVASCRIPT><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
网页将不能被另存为
<noscript><iframe.src=*.html></iframe></noscript>
查看网页源代码
<input type=button value=查看网页源代码
onclick="window.location = "view-source:"+"http://www.w3cschool.cn"">
删除时确认
<a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp? &areyou=删除&page=1"">删除</a>
屏蔽功能键Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift键!");//可以换成ALTCTRL
}
document.onkeydown=look;
</script>
网页不会被缓存
<META. HTTP-EQUIV="pragma" CONTENT="no-cache">
<META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">
<META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META. HTTP-EQUIV="expires"CONTENT="0">
怎样让表单没有凹凸感?
<input type=text style="border:1 solid #000000">
<input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>
不要滚动条?
让竖条没有:
<body style="overflow:scroll;overflow-y:hidden">
</body>
让横条没有:
<body style="overflow:scroll;overflow-x:hidden">
</body>
两个都去掉?更简单了
<body scroll="no">
</body>
怎样去掉图片链接点击后,图片周围的虚线?
<a href="#"nFocus="this.blur()"><img src="logo.jpg"border=0></a>
电子邮件处理提交表单
<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">
<input type=submit>
</form>
在打开的子窗口刷新父窗口的代码里如何写?
window.opener.location.reload()
如何设定打开页面的大小
<body nload="top.resizeTo(300,200);">
打开页面的位置<bodynload="top.moveBy(300,200);">
在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
检查一段字符串是否全由数字组成
<script. language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
获得一个窗口的大小
document.body.clientWidth; document.body.clientHeight
怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");
TEXTAREA自适应文字行数的多少
<textarea rows=1 name=s1 cols=27npropertychange="this.style.posHeight=this.scrollHeight">
</textarea>
日期减去天数等于第二个日期
<script. language=Javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")
} cc("12/23/2002",2)
</script>
选择了哪一个Radio
<HTML><script. language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio"value="style" checked>Style.
<INPUT name="radio1" type="radio"value="barcode">Barcode
<INPUT type="button" value="check"nclick="checkme()">
</BODY></HTML>
脚本永不出错
<SCRIPT. LANGUAGE="JavaScript">
<!-- Hide function killErrors(){return true;} window.onerror = killErrors;// -->
</SCRIPT>
ENTER键可以让光标移到下一个输入框
<input nkeydown="if(event.keyCode==13)event.keyCode=9">
Ⅱ 图片格式jpg、gif、jpeg、png,bmp分别是什么意思,
JPG格式是最常用的图像文件格式,由一个软件开发联合会组织制定,是一种有损压缩格式,能够将图像压缩在很小的储存空间,图像中重复或不重要的资料会被丢失,因此容易造成图像数据的损伤。尤其是使用过高的压缩比例,将使最终解压缩后恢复的图像质量明显降低,
如果追求高品质图像,不宜采用过高压缩比例。
但是JPEG压缩技术十分先进,它用有损压缩方式去除冗余的图像数据,在获得极高的压缩率的同时能展现十分丰富生动的图像,换句话说,就是可以用最少的磁盘空间得到较好的图像品质。
而且JPEG是一种很灵活的格式,具有调节图像质量的功能,允许用不同的压缩比例对文件进行压缩,支持多种压缩级别,压缩比率通常在10:1到40:1之间,压缩比越大,品质就越低;相反地,压缩比越小,品质就越好。比如可以把1.37Mb的BMP位图文件压缩至20.3KB。当然也可以在图像质量和文件尺寸之间找到平衡点。
JPEG格式压缩的主要是高频信息,对色彩的信息保留较好,适合应用于互联网,可减少图像的传输时间,可以支持24bit真彩色,也普遍应用于需要连续色调的图像。
GIF 是用于压缩具有单调颜色和清晰细节的图像(如线状图、徽标或带文字的插图)的标准格式。
GIF分为静态GIF和动画GIF两种,支持透明背景图像,适用于多种操作系统,“体型”很小,网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件,从而形成动画,所以归根到底GIF仍然是图片文件格式。但GIF只能显示256色。
GIF主要分为两个版本,即GIF 89a和GIF 87a:
GIF 87a:是在1987年制定的版本
GIF 89a:是1989年制定的版本。在这个版本中,为GIF文档扩充了图形控制区块、备注、说明、应用程序编程接口等四个区块,并提供了对透明色和多帧动画的支持
GIF格式自1987年由CompuServe公司引入后,因其体积小而成像相对清晰,特别适合于初期慢速的互联网,而从此大受欢迎。它采用无损压缩技术,只要图像不多于256色,则可既减少文件的大小,又保持成像的质量。(当然,现在也存在一些hack技术,在一定的条件下克服256色的限制,具体参见真彩色)然而,256色的限制大大局限了GIF文件的应用范围,如彩色相机等。(当然采用无损压缩技术的彩色相机照片亦不适合通过网络传输。)另一方面,在高彩图片上有着不俗表现的JPG格式却在简单的折线上效果差强人意。因此GIF格式普遍适用于图表,按钮等等只需少量颜色的图像(如黑白照片)。
PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG's Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。
PNG图片文件一般应用于JAVA程序中,或网页或S60程序中是因为它压缩比高,生成文件容量小。
使用彩色查找表或者叫做调色板可支持256种颜色的彩色图像。
流式读/写性能(streamability):图像文件格式允许连续读出和写入图像数据,这个特性很适合于在通信过程中生成和显示图像。
逐次逼近显示(progressive display):这种特性可使在通信链路上传输图像文件的同时就在终端上显示图像,把整个轮廓显示出来之后逐步显示图像的细节,也就是先用低分辨率显示图像,然后逐步提高它的分辨率。
透明性(transparency):这个性能可使图像中某些部分不显示出来,用来创建一些有特色的图像。
辅助信息(ancillary information):这个特性可用来在图像文件中存储一些文本注释信息。
独立于计算机软硬件环境。
使用无损压缩。
PNG文件格式中要增加下列GIF文件格式所没有的特性:
每个像素为48位的真彩色图像。
每个像素为16位的灰度图像。
可为灰度图和真彩色图添加α通道。
添加图像的γ信息。
使用循环冗余码(cyclic rendancy code,CRC)检测损害的文件。
加快图像显示的逐次逼近显示方式。
标准的读/写工具包。
可在一个文件中存储多幅图像。
BMP是一种与硬件设备无关的图像文件格式,使用非常广。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大。BMP文件的图像深度可选lbit、4bit、8bit及24bit。BMP文件存储数据时,图像的扫描方式是按从左到右、从下到上的顺序。
由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准,因此在Windows环境中运行的图形图像软件都支持BMP图像格式。
典型的BMP图像文件由四部分组成:
1:位图文件头数据结构,它包含BMP图像文件的类型、显示内容等信息;
2:位图信息数据结构,它包含有BMP图像的宽、高、压缩方法,以及定义颜色等信息;
3:调色板,这个部分是可选的,有些位图需要调色板,有些位图,比如真彩色图(24位的BMP)就不需要调色板;
4:位图数据,这部分的内容根据BMP位图使用的位数不同而不同,在24位图中直接使用RGB,而其他的小于24位的使用调色板中颜色索引值。
位图的类型:
位图一共有两种类型,即:设备相关位图(DDB)和设备无关位图(DIB)。DDB位图在早期的Windows系统(Windows 3.0以前)中是很普遍的,事实上它也是唯一的。然而,随着显示器制造技术的进步,以及显示设备的多样化,DDB位图的一些固有的问题开始浮现出来了。比如,它不能够存储(或者说获取)创建这张图片的原始设备的分辨率,这样,应用程序就不能快速的判断客户机的显示设备是否适合显示这张图片。为了解决这一难题,微软创建了DIB位图格式。
设备无关位图 (Device-Independent Bitmap)
DIB位图包含下列的颜色和尺寸信息:
* 原始设备(即创建图片的设备)的颜色格式。
* 原始设备的分辨率。
* 原始设备的调色板
* 一个位数组,由红、绿、蓝(RGB)三个值代表一个像素。
* 一个数组压缩标志,用于表明数据的压缩方案(如果需要的话)。
以上这些信息保存在BITMAPINFO结构中,该结构由BITMAPINFOHEADER结构和两个或更多个RGBQUAD结构所组成。BITMAPINFOHEADER结构所包含的成员表明了图像的尺寸、原始设备的颜色格式、以及数据压缩方案等信息。RGBQUAD结构标识了像素所用到的颜色数据。
DIB位图也有两种形式,即:底到上型DIB(bottom-up),和顶到下型DIB(top-down)。底到上型DIB的原点(origin)在图像的左下角,而顶到下型DIB的原点在图像的左上角。如果DIB的高度值(由BITMAPINFOHEADER结构中的biHeight成员标识)是一个正值,那么就表明这个DIB是一个底到上型DIB,如果高度值是一个负值,那么它就是一个顶到下型DIB。注意:顶到下型的DIB位图是不能被压缩的。
位图的颜色格式是通过颜色面板值(planes)和颜色位值(bitcount)计算得来的,颜色面板值永远是1,而颜色位值则可以是1、4、8、16、24、32其中的一个。如果它是1,则表示位图是一张单色位图(译者注:通常是黑白位图,只有黑和白两种颜色,当然它也可以是任意两种指定的颜色),如果它是4,则表示这是一张VGA位图,如果它是8、16、24、或是32,则表示该位图是其他设备所产生的位图。如果应用程序想获取当前显示设备(或打印机)的颜色位值(或称位深度),可调用API函数GetDeviceCaps(),并将第二个参数设为BITSPIXEL即可。
显示设备的分辨率是以每米多少个像素来表明的,应用程序可以通过以下三个步骤来获取显示设备或打印机的水平分辨率:
1. 调用GetDeviceCaps()函数,指定第二个参数为HORZRES。
2. 再次调用GetDeviceCaps()函数,指定第二个参数为HORZSIZE。
3. 用第一个返回值除以第二个返回值。即:DetDeviceCaps(hDC,HORZRES)/GetDeviceCaps(hDC,HORZSIZE);
应用程序也可以使用相同的三个步骤来获取设备的垂直分辨率,不同之处只是要将HORZRES替换为VERTRES,把HORZSIZE替换为VERTSIZE,即可。
调色板是被保存在一个RGBQUAD结构的数组中,该结构指出了每一种颜色的红、绿、蓝的分量值。位数组中的每一个索引都对应于一个调色板项(即一个RGBQUAD结构),应用程序将根据这种对应关系,将像素索引值转换为像素RGB值(真实的像素颜色)。应用程序也可以通过调用GetDeviceCaps()函数来获取当前显示设备的调色板尺寸(将该函数的第二个参数设为NUMCOLORS即可)。
Win32 API支持位数据的压缩(只对8位和4位的底到上型DIB位图)。压缩方法是采用运行长度编码方案(RLE),RLE使用两个字节来描述一个句法,第一个字节表示重复像素的个数,第二个字节表示重复像素的索引值。有关压缩位图的详细信息请参见对BITMAPINFOHEADER结构的解释。
应用程序可以从一个DDB位图创建出一个DIB位图,步骤是,先初始化一些必要的结构,然后再调用GetDIBits()函数。不过,有些显示设备有可能不支持这个函数,你可以通过调用GetDeviceCaps()函数来确定一下(GetDeviceCaps()函数在调用时指定RC_DI_BITMAP作为RASTERCAPS的标志)。
应用程序可以用DIB去设置显示设备上的像素(译者注:也就是显示DIB),方法是调用SetDIBitsToDevice()函数或调用StretchDIBits()函数。同样,有些显示设备也有可能不支持以上这两个函数,这时你可以指定RC_DIBTODEV作为RASTERCAPS标志,然后调用GetDeviceCaps()函数来判断该设备是否支持SetDIBitsToDevice()函数。也可以指定RC_STRETCHDIB作为RASTERCAPS标志来调用GetDeviceCaps()函数,来判断该设备是否支持StretchDIBits()函数。
如果应用程序只是要简单的显示一个已经存在的DIB位图,那么它只要调用SetDIBitsToDevice()函数就可以。比如一个电子表格软件,它可以打开一个图表文件,在窗口中简单的调用SetDIBitsToDevice()函数,将图形显示在窗口中。但如果应用程序要重复的绘制位图的话,则应该使用BitBlt()函数,因为BitBlt()函数的执行速度要比SetDIBitsToDevice()函数快很多。
设备相关位图 (Device-Dependent Bitmaps)
设备相关位图(DDB)之所以现在还被系统支持,只是为了兼容旧的Windows 3.0软件,如果程序员现在要开发一个与位图有关的程序,则应该尽量使用或生成DIB格式的位图。
DDB位图是被一个单个结构BITMAP所描述,这个结构的成员标明了该位图的宽度、高度、设备的颜色格式等信息。
DDB位图也有两种类型,即:可废弃的(discardable)DDB和不可废弃的(nondiscardable)DDB。可废弃的DDB位图就是一种当系统内存缺乏,并且该位图也没有被选入设备描述表(DC)的时候,系统就会把该DDB位图从内存中清除(即废弃)。不可废弃的DDB则是无论系统内存多少都不会被系统清除的DDB。API函数CreateDiscardableBitmap()函数可用于创建可废弃位图。而函数CreateBitmap()、CreateCompatibleBitmap()、和CreateBitmapIndirect()可用于创建不可废弃的位图。
应用程序可以通过一个DIB位图而创建一个DDB位图,只要先初始化一些必要的结构,然后再调用CreateDIBitmap()函数就可以。如果在调用该函数时指定了CBM_INIT标志,那么这一次调用就等价于先调用CreateCompatibleBitmap()创建当前设备格式的DDB位图,然后又调用SetDIBits()函数转换DIB格式到DDB格式。(可能有些设备并不支持SetDIBits()函数,你可以指定RC_DI_BITMAP作为RASTERCAPS的标志,然后调用GetDeviceCaps()函数来判断一下)。
对应的数据结构:
1:BMP文件组成
BMP文件由文件头、位图信息头、颜色信息和图形数据四部分组成。
2:BMP文件头(14字节)
BMP文件头数据结构含有BMP文件的类型、文件大小和位图起始位置等信息。
其结构定义如下:
typedef struct tagBITMAPFILEHEADER
{
WORDbf Type; // 位图文件的类型,必须为BM(0-1字节)
DWORD bfSize; // 位图文件的大小,以字节为单位(2-5字节)
WORD bfReserved1; // 位图文件保留字,必须为0(6-7字节)
WORD bfReserved2; // 位图文件保留字,必须为0(8-9字节)
DWORD bfOffBits; // 位图数据的起始位置,以相对于位图(10-13字节)
// 文件头的偏移量表示,以字节为单位
} BITMAPFILEHEADER;
3:位图信息头(40字节)
BMP位图信息头数据用于说明位图的尺寸等信息。
typedef struct tagBITMAPINFOHEADER{
DWORD biSize; // 本结构所占用字节数(14-17字节)
LONG biWidth; // 位图的宽度,以像素为单位(18-21字节)
LONG biHeight; // 位图的高度,以像素为单位(22-25字节)
WORD biPlanes; // 目标设备的级别,必须为1(26-27字节)
WORD biBitCount;// 每个像素所需的位数,必须是1(双色),(28-29字节)
// 4(16色),8(256色)或24(真彩色)之一
DWORD biCompression; // 位图压缩类型,必须是 0(不压缩),(30-33字节)
// 1(BI_RLE8压缩类型)或2(BI_RLE4压缩类型)之一
DWORD biSizeImage; // 位图的大小,以字节为单位(34-37字节)
LONG biXPelsPerMeter; // 位图水平分辨率,每米像素数(38-41字节)
LONG biYPelsPerMeter; // 位图垂直分辨率,每米像素数(42-45字节)
DWORD biClrUsed;// 位图实际使用的颜色表中的颜色数(46-49字节)
DWORD biClrImportant;// 位图显示过程中重要的颜色数(50-53字节)
} BITMAPINFOHEADER;
4:颜色表
颜色表用于说明位图中的颜色,它有若干个表项,每一个表项是一个RGBQUAD类型的结构,定义一种颜色。RGBQUAD结构的定义如下:
typedef struct tagRGBQUAD {
BYTE rgbBlue;// 蓝色的亮度(值范围为0-255)
BYTE rgbGreen; // 绿色的亮度(值范围为0-255)
BYTE rgbRed; // 红色的亮度(值范围为0-255)
BYTE rgbReserved;// 保留,必须为0
} RGBQUAD;
颜色表中RGBQUAD结构数据的个数有biBitCount来确定:
当biBitCount=1,4,8时,分别有2,16,256个表项;
当biBitCount=24时,没有颜色表项。
位图信息头和颜色表组成位图信息,BITMAPINFO结构定义如下:
typedef struct tagBITMAPINFO {
BITMAPINFOHEADER bmiHeader; // 位图信息头
RGBQUAD bmiColors[1]; // 颜色表
} BITMAPINFO;
5:位图数据
位图数据记录了位图的每一个像素值,记录顺序是在扫描行内是从左到右,扫描行之间是从下到上。位图的一个像素值所占的字节数:
当biBitCount=1时,8个像素占1个字节;
当biBitCount=4时,2个像素占1个字节;
当biBitCount=8时,1个像素占1个字节;
当biBitCount=24时,1个像素占3个字节;
Windows规定一个扫描行所占的字节数必须是
4的倍数(即以long为单位),不足的以0填充,
biSizeImage = ((((bi.biWidth * bi.biBitCount) + 31) & ~31) / 8) * bi.biHeight;
具体数据举例:
如某BMP文件开头:
4D42 4690 0000 0000 0000 4600 0000 2800 0000 8000 0000 9000 0000 0100*1000 0300 0000 0090 0000 A00F 0000 A00F 0000 0000 0000 0000 0000*00F8 0000 E007 0000 1F00 0000 0000 0000*02F1 84F1 04F1 84F1 84F1 06F2 84F1 06F2 04F2 86F2 06F2 86F2 86F2 .... ....
BMP文件可分为四个部分:位图文件头、位图信息头、彩色板、图像数据阵列,在上图中已用*分隔。
一、图像文件头
1)1:(这里的数字代表的是"字",即两个字节,下同)图像文件头。0x4D42=’BM’,表示是Windows支持的BMP格式。
2)2-3:整个文件大小。4690 0000,为00009046h=36934。
3)4-5:保留,必须设置为0。
4)6-7:从文件开始到位图数据之间的偏移量。4600 0000,为00000046h=70,上面的文件头就是35字=70字节。
二、位图信息头
5)8-9:位图图信息头长度。
6)10-11:位图宽度,以像素为单位。8000 0000,为00000080h=128。
7)12-13:位图高度,以像素为单位。9000 0000,为00000090h=144。
8)14:位图的位面数,该值总是1。0100,为0001h=1。
9)15:每个像素的位数。有1(单色),4(16色),8(256色),16(64K色,高彩色),24(16M色,真彩色),32(4096M色,增强型真彩色)。1000为0010h=16。
10)16-17:压缩说明:有0(不压缩),1(RLE 8,8位RLE压缩),2(RLE 4,4位RLE压缩,3(Bitfields,位域存放)。RLE简单地说是采用像素数+像素值的方式进行压缩。T408采用的是位域存放方式,用两个字节表示一个像素,位域分配为r5b6g5。图中0300 0000为00000003h=3。
11)18-19:用字节数表示的位图数据的大小,该数必须是4的倍数,数值上等于(≥位图宽度的最小的4的倍数)×位图高度×每个像素位数。0090 0000为00009000h=80×90×2h=36864。
12)20-21:用象素/米表示的水平分辨率。A00F 0000为0000 0FA0h=4000。
13)22-23:用象素/米表示的垂直分辨率。A00F 0000为0000 0FA0h=4000。
14)24-25:位图使用的颜色索引数。设为0的话,则说明使用所有调色板项。
15)26-27:对图象显示有重要影响的颜色索引的数目。如果是0,表示都重要。
三、彩色板
16)28-....(不确定):彩色板规范。对于调色板中的每个表项,用下述方法来描述RGB的值:
1字节用于蓝色分量
1字节用于绿色分量
1字节用于红色分量
1字节用于填充符(设置为0)
对于24-位真彩色图像就不使用彩色板,因为位图中的RGB值就代表了每个象素的颜色。
如,彩色板为00F8 0000 E007 0000 1F00 0000 0000 0000,其中:
00FB 0000为FB00h=1111100000000000(二进制),是蓝色分量的掩码。
E007 0000为 07E0h=0000011111100000(二进制),是绿色分量的掩码。
1F00 0000为001Fh=0000000000011111(二进制),是红色分量的掩码。
0000 0000总设置为0。
将掩码跟像素值进行“与”运算再进行移位操作就可以得到各色分量值。看看掩码,就可以明白事实上在每个像素值的两个字节16位中,按从高到低取5、6、5位分别就是r、g、b分量值。取出分量值后把r、g、b值分别乘以8、4、8就可以补齐第个分量为一个字节,再把这三个字节按rgb组合,放入存储器(同样要反序),就可以转换为24位标准BMP格式了。
四、图像数据阵列
17)27(无调色板)-...:每两个字节表示一个像素。阵列中的第一个字节表示位图左下角的象素,而最后一个字节表示位图右上角的象素。
五、存储算法
BMP文件通常是不压缩的,所以它们通常比同一幅图像的压缩图像文件格式要大很多。例如,一个800×600的24位几乎占据1.4MB空间。因此它们通常不适合在因特网或者其它低速或者有容量限制的媒介上进行传输。 根据颜色深度的不同,图像上的一个像素可以用一个或者多个字节表示,它由n/8所确定(n是位深度,1字节包含8个数据位)。图片浏览器等基于字节的ASCII值计算像素的颜色,然后从调色板中读出相应的值。更为详细的信息请参阅下面关于位图文件的部分。 n位2n种颜色的位图近似字节数可以用下面的公式计算: BMP文件大小约等于 54+4*2的n次方+(w*h*n)/8
,其中高度和宽度都是像素数。 需要注意的是上面公式中的54是位图文件的文件头,是彩色调色板的大小。另外需要注意的是这是一个近似值,对于n位的位图图像来说,尽管可能有最多2n中颜色,一个特定的图像可能并不会使用这些所有的颜色。由于彩色调色板仅仅定义了图像所用的颜色,所以实际的彩色调色板将小于。 如果想知道这些值是如何得到的,请参考下面文件格式的部分。 由于存储算法本身决定的因素,根据几个图像参数的不同计算出的大小与实际的文件大小将会有一些细小的差别。
Ⅲ 程序员学生必备的六大软件
程序员学生必备的六大软件
程序员六大必备软件
99%的人都没见过
1.Giphy Capture
Giphy Cap tire是一个专为Man用户准备的一款GIF制
作器,错做非常简单,除了可以录屏之外,还可以
对生成的GIF进行编辑, 像大小调节、长度控制、
播放的顺序等,如果你想写文章时,想要在文章插
入一些GIF动图来让你的代码和程序更好理解, 这
款工具就很适合
2.json editor online
json editor online是一个简单、灵活、可视化在线的
JSON编辑器, 支持差异化对比,可查看、编辑和
格式化JSON数据, is on格式是开发中比较常见的,
is on阅读和格式化就是一个常见的工具, 用了这个
工具,其他的突然就不香了!
3.oh-my-zsh
m命令行是程序员的最爱, 所以这款替代bash工具
必须得拿出来, 索然我们的bash shell功能也很好了
。但还是略显朴素,没有那么的酷炫,所以这个
oh-my-zsh就值得一提, 都说它是最好用的shell,
没有之一,包含
275+插件、150+主题、Git Hub 113, 259星数, 从这
一系列的数字中就能够感觉到这个shell工具的完善
以及强大之处,小白程序员也可以用,高端大气上
档次!
4.Process On
Process on是一款在线作图工具, 可制作思维导图、
流程图、UML图、界面原型设计、组织结构图等等
上手也很简单,并且免费、免安装,在线即可操
作,大家都知道身为程序员,必须时刻保持思路清
晰,这样代码写出来就是分分钟的事情,所以作图
是很有必要的,反正这个工具是真香!
5.Copy Translator
Copy Translator是一款非常出色的翻译软件, 免费且
开源,支持几十种不同语言的翻译,不管你是科研
人员还是算法工程师(当然英文很好的可以忽略)这
款翻译软件都很适合,相比其他翻译软件
Copy Transat or可以解决一些多余的断句和换行带来
的乱码问题,也会更高效,
只需复制文本到粘贴板,下一秒即可查看翻译结果
,提高工作效率。
6.VisualStudiop Code
VisualStudio Code是一个运行与MacOSX、Windows
和Linux之上的, 针对于编写现代Web和云应用的跨
平台源代码编辑器,包含所有主流的开发语言的语
法高亮、只能代码补全、自定义热键、括号匹配、
代码片段、代码对比Diff、Git等特征, 支持插件扩
展, 可以通过安装插件来支持C++、C#、Python、
PHP、Java等语言。同时针对网页开发和云端应用开
发也做了优化。