常用HTML及颜色代码速查

来源：互联网发布：舍利子到底是什么知乎编辑：程序博客网时间：2024/06/14 09:42

标记或参数定义<A>连结标记<ADDRESS>地址标记（斜体效果）<AREA>连结区域标记（设定各连结区域）alink点击连结时的样式。例：alink="#FF0000"align水平方向摆放位置。例：align="center"alternate来回走动，例：behavior=alternatealt在连结中插入文字说明。例：alt="绿叶园"

<B>

字体加粗标记（产生字体加粗的效果）

<BODY>

正文标记（设计文件格式及内文所在）

<BR>

换行标记（令文字、图片等显示在下一行）

<BIG>

字体加大标记（令字体稍为加大）

<BLINK>

闪烁文字标记（令文字产生闪烁效果）

背景声音标记（于背景播放声音或音乐）

<BASE>

连结基准标记（可将网页中所有的相对路径转换成绝对路径）

基准字形标记（设定所有字的字形、大小、颜色）

引述文字区块、令文字在表格的上下左右留有一定的空间

background

背景墙纸。例：background=01.JPG

bgcolor

背景颜色。例：bgcolor="#ff0000"

bgproperties

固定背景墙纸。例：bgproperties="fixed"

border

边框。例：border=10

bordercolor

边框颜色。例：bordercolor="#000080"

bordercolorlight

边框向光部分的颜色。例：bordercolorlight="#000000"

bordercolordark

边框背光部分的颜色。例：bordercolordark="#ffffff"

bottom

置于底端。例：valign="bottom"

behavior

卷动方式。例：behavior=alternate

blank

表示连结的目标地址在新建窗口中打开。例：target=_blank

<CENTER>居中标记（令文字、图片、表格等显示于中间）<CAPTION>表格标题（做成一打通列以填入表格标题）<CODE>程式码（字体稍为加宽如）<CITE>引述（斜体效果）colspan该单元格向右打通。例：colspan="5"color颜色。例：color="#00FF00"cellspacing单元格间距。例：cellspacing="5"cellpadding单元格衬距。例：cellpadding="10"

<DIV>区域标记<DFN>述语定义标记（斜体效果）<DIR>目录清单标记（清单项目将以圆点排列，如<UL>）<DL>定义清单标记（清单分两层出现）<DT>定义条目标记（标示该项定义的标题）<DD>定义内容标记（标示定义内容）direction方向。例：direction=up<EM>强调标记（字体出现斜体效果）<EMBED>多媒体标记

<MENU>选单清单标记（清单项目将以圆点排列，如<UL>）<META>开头定义标记<MAP>影像地图名称标记（设定影像地图名称）<MARQUEE>走动标记middle居中。例：align="middle"marginwidth框架左右边缘与框架内的文件保留的空间。例：marginwidth=0marginhight框架上下边缘与框架内的文件保留的空间。例：marginheight=0

<NOBR>不换行标记（强制文字不自动换行）<NOFRAMES>不支持框架标记（当旧式浏览器不支援框架时显示提示）name参考点(锚点)。例：<a ></a>no否。例：scrolling=nonoshade平面显示。例：<hr noshade>noresize锁住框架窗口的大小<OL>顺序清单标记（清单项目将以数字、字母顺序排列）

<P>段落标记（为字、画、表格等之间留一空白行）<PRE>预设格式标记（令文件按照原始码的排列方式显示）_parent父窗口（连结的目标网页在本窗口中打开）。例：target=_parentplaybutton在媒体播放面板中显示播放按钮pausecutton在媒体播放面板中显示暂停按钮

<STRONG>加重语气标记（产生字体加粗 Bold 的效果）<SMALL>字体缩细标记（令字体稍为缩细）<STRIKE>划删除线标记（为字体加一删除线）<SAMP>范例标记（字体稍为加宽如）<SUB>下标字标记<SUP>上标字标记<STYLE>样式表标记<SPAN>自订标记（独立使用或与样式表同用）<SELECT>选择标记（建立 pop-up 走动清单）<SCRIPT>引用脚本标记size大小。例：size="7"src来源。例：src="logo.gif"_self相同窗口（在相同的框架中显示连结的内容）。例：target="_self">starttime开始播放的时间。例：starttime="00:10"smallconsole显示较小的面板。例：controls="smallconsole"stopbutton显示停止按钮。例：controls="stopbutton"scrolling滚动条。例：scrolling=noscroll走动。例：behavior="scroll"scrollamount走动的速度。例：scrollAmount=25scrolldelay走动的停顿时间。例：scrolldelay=1000slide逐格走动（幻灯式）。例：behavior="slide"

<TITLE>网页文件标题标记<TABLE>表格标记<TR>表格的行<TD>表格的列<TH>表格标头（相等于<TD>，但其内之字体会变粗）<TT>打字字体（Courier字体，字母宽度相同）<TEXTAREA>文字区块（提供文字方盒以输入较大量文字）topmargin网页的上边距。例：topmargin=10top上方。例：valign="top"text整个网页的文字颜色。例：text=#CE0063target超级连接打开窗口模式。例：target=_blank_top将连结的网页显示在没有框架的窗口中。例：target=_toptype样式。例：type="text/css"true是。例：loop="true"<U>下划线标记（给文本加上底线）<UL>无序清单（清单项目将以圆点排列）

<VAR>变数标记（斜体效果）valign摆放位置（垂直方向）。例：valign="top"vlink被访问后超链接文字的样式。例：vlink="#0000FF"vspace图片上下的空间。例：vspace=20volume音量（设定音量大小）。例：volume="100"volumelever显示音量调整钮。例：controls="volumelever"<WBR>建议换行标记（预设换行部位）width宽度、长度。例： width="540"

在搏客中比较常用的代码

一、美化文字的代码：
1.文字间换行：文字内容<br>文字内容
2.一个段落：<p>文字内容</p>
3.字体加粗：<b>文字内容</b>
4.字体加大：<big>文字内容</big>
5.文字标题：从一号标题H1到六号标题H6，逐渐减小
<h2>文字内容</h2>
6.斜体字：<i>文字内容</i>
7.在字前加圆点：<li>文字内容</li>
8.字体下划线：<u>文字内容</u>
9.字体删除线：<s>文字内容</s>
10.更改字体颜色： value值在000000与ffffff（16位进制）之间
<font color=“#value”>文字内容</font>
11.加入连接： target=“_blank” 在新窗口打开连接
<a href=“所要连接的相关地址” target=“_blank”>显示在页面上的文字</a>
12.消除连接的下划线：<a href=“相关地址” style=“text-decoration:none”>文字内容</a>
13.滚动文字效果： marquee有四个方向参数，如图1　
<marquee direction=“up”>文字内容</marquee>

图1

14.原始文字样式：可以显示半角的空格等原文内容：<pre> 正文</pre>
二、在博客中嵌入其他元素
1.在博客中贴图： width是图片的宽度，height是高度
<img src=“图片地址”； width=“120”； height=“90”； alt=“鼠标移动到图片上显示的字”；>
2.在博客中贴Flash： width，height可以是指定的高度，也可以不设置，可以是100% 。
<embed src=“flash地址” width=“100%” height=“100%”>
3.在博客中贴音乐：<embed src=“音乐地址” width=“宽度” height=“高度” autostart=false>
4.博客中贴食品：<img dynsrc=“文件地址” width=“宽度” height=“高度” start=mouseover>
5.设置日志背景：<body background=“背景图片地址”>
6.固定日志背景不随滚动条滚动：<body background=“背景图片地址” body bgproperties=fixed>
7.定制日志背景颜色：<body bgcolor=“#value”>
8.定制日志背景音乐：<bgsound=“背景音乐地址” loop=infinite>

博客基本代码大全[新学员]

一，基本代码
字体控制
◆字体加粗：<b>写上你想写的字</b>
◆字体斜体：<i>写上你想写的字</i>
◆字体下划线： <u>写上你想写的字</u>
◆字体删除线： <s>写上你想写的字</s>
◆字体加大： <big>写上你想写的字</big>
◆换行：<br>
◆空格： 
◆段落：<p>段落</p>
◆原始文字样式：<pre>正文</pre>
◆字体控制大小：<h1>写上你想写的字</h1> （其中字体大小可从h1-h5,h1最大，h5最小）
◆更改字体颜色：<font color=“#value”>写上你想写的字</font>（其中value值在000000与ffffff（16位进制）之间
◆移动字体（走马灯）：<marquee>写上你想写的字</marquee>

对齐方式

◆左对齐： LEFT
◆中对齐： CENTER
◆右对齐： RIGHT
◆段落水平对齐：<ALIGN=“相关参数”>。其常见的设定值有三个：
置左<ALIGN=“LEFT”>、置中<ALIGN=“CENTER”>、置右<ALIGN=“RIGHT”>
◆缩排：<BLOCKQUOTE> 要缩排的文字 </BLOCKQUOTE>。
一组缩排一个单位，二组缩排两个单位，以此类推。

文字控制代码

◆文字向上滚动的代码：
<MARQUEE scrollAmount=3 direction=up height=50>
<CENTER><FONT face=黑体 color=blue size=5><B>文字一<BR><BR>文字二<BR><BR>文字三< BR><BR>文字四<BR><BR>文字五</B></FONT> <BR><BR>
</CENTER></MARQUEE>
<MARQUEE >
里面的参数修改一下，效果将不一样，这里仅提醒一下direction参数，
可以改为向下（down）、向左（left）和向右（right）。

图片控制代码

◆贴图：<img src=“图片地址”>
◆换帖子背景：<body background=“背景图片地址”>
◆定制帖子背景颜色：<body bgcolor=“#value”>（value值）
◆固定帖子背景不随滚动条滚动：<body background=“背景图片地址” body bgproperties=fixed>
◆加背景：<TABLE style=“WIDTH: 706px; HEIGHT: 164px”
borderColor=#00fa9a height=164 width=706 align=center background=背景图片 border=3>
◆图片滚动代码（从下往上滚动）
<marquee align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior=“scroll”>
<img border=“0” src=“ http://要滚动的图片地址1”>
<img border=“0” src=“ http://要滚动的图片地址2”>
</marquee>
◆移动图片的代码：
<marquee><img src=“图片地址”；><img src=“图片地址”；><img src=“图片地址”；></marquee>
把里面的图片地址换成自己网上找的就行。
想多放几个图片就按照格式在中间重复插入：<img src=“图片地址”；>&<60;

颜色方面

◆颜色属性：<HR COLOR=“颜色代码或颜色名称”>。
◆宽窄属性：<HR WIDTH=“宽度”>，单位为px，宽度也可用百分比来作设定，如50%即为宽度占屏幕的50%。
◆厚度属性：<HR SIZE=“厚度”>。
◆位置属性：：<HR ALIGN=“水平位置设定值”>，其设定值有三个，
置左“LEFT”、置中“CENTER”、置右“RIGHT”。
◆阴影属性：<HR NOSHADE>，无设定值，只要将NOSHADE加入即可，通常会配合颜色设定，效果较佳。

链接代码

◆加入连接：<a href=“链接地址”>写上你的字</a>
◆新窗口打开连接：<a href=“链接地址” target=“_blank”>写上你的字</a>
◆消除连接的下划线：<a href=“相关地址” style=“text-decoration:none”>写上你想写的字</a>
◆贴带连接的字：<a href=“所要连接的相关地址”>写上你想写的字</a>

FLASH

◆贴flash: <embed src=“flash地址” width=“宽度” height=“高度”>
◆首页FLASH: 找到FLASH地址后点编辑-排版-模块-添加自定义HTML- 点 Flash 复制进去就行了这个很简单
◆日志里的FLASH: 好多朋友多说为什么我把代码粘贴到日志里但就是显示不出FLASH呢？
我现在就告诉你因为你忘记点下面那个 <代码> 了必须先点一下代码后再复制上去。
◆日志里FLASH的代码是：
<EMBED pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash
src= FLASH地址 width=800 height=600 type=application/x-shockwave-flash quality=“high”>

音乐

◆贴音乐：<embed src=“音乐地址” width=“宽度” height=“高度” autostart=false>
◆帖子背景音乐：<bgsound=“背景音乐地址” loop=infinite>
◆贴影视文件：<img dynsrc=“文件地址” width=“宽度” height=“高度” start=mouseover>
◆贴flash: <embed src=“flash地址” width=“宽度” height=“高度”>

其他

◆制作个性名片
编辑-排版-模块-添加自定义 HTML <table width=“100%”><tr><td style=“padding: 2px;”>
<img style=“border: 1px solid rgb（153, 153, 153）； width: 140px; height: 140px;”
src=头像图片地址></td><td valign=“top”><table width=“100%”><tr><td><img src=“/style/common/gg.gif”></td></tr><tr><td><div style=“font-weight: bold;font-size:16px;”><a href=“邮箱地址”>你的名字</a></div></td></tr><tr><td><div>年龄，星座</div></td></tr><tr><td><div>详细地址</div>
由于我只用QQ 所以我只会加QQ在线交谈按钮： QQ个人设置-右下角<生成在线状态> 进去填写好资料后生成网页代码然后全复制过来
◆滚动条添加
<DIV style=“OVERFLOW-Y: auto; OVERFLOW-X: hidden; WIDTH: 698px; HEIGHT: 125px”>
<P align=left>在这里输入是文字，也可以是链接</P></DIV>
注：（left）为对齐方式，当前是左对齐
◆友情连接
编辑-排版-模块-添加自定义HTML 然后把
<marquee behavior=“scroll” direction=right width=“90%” height=“100” scrollamount=“2” scrolldelay=“30” >
<a target=“cont” href=“对方地址”><img src=“对方图片” width=“100” height=“100” border=“0”>
</a></marquee>
复制上去就行了
◆贴网页：<iframe src=“相关地址” width=“宽度” height=“高度”></iframe>&<60;
◆博客上加新闻链接代码
<TABLE width=200 align=center>
<DIV g_p_fill?> <EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.xianguo.com/img/share/widget.swf?wd=200&ht=300&hs=www.xianguo.com&id=14889&
tp=2&ps=5&ss=1&
ar=1&ct=6&tt=%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Welcome width=“100%” type=application/x-shockwave-flash wmode=“transparent” quality=“high” autostart=“0” allowNetworking=“internal” allowScriptAccess=“never”></EMBED></DIV>
<TBODY></TBODY></TABLE>

常用颜色代码
颜色说明英文代码16进制值黑色Black #000000 银色Silver #C0C0C0灰色Gray #808080 粉红Pink #FFC8CB 茶色Maroon #800000 红色Red #FF0000 紫色Purple #800080 紫红Fuchsia #FF00FF 绿色Green #008000 亮绿Lime #00FF00橄榄Olive #808000 黄色Yellow #FFFF00 深蓝Navy #000080 蓝色Blue #0000FF青色Teal #008080 浅绿Aqua#00FFFF橙色Orange #FFA500褐色Brown#A52A2ARGB颜色查询对照表
颜色搭配图表
网页颜色选择器
颜色快速采集
百度搜索：颜色表
查看与不同文字颜色搭配的背景颜色。

部分16进制颜色
#FFFFFF
#FFFFF0
#FFFFE0
#FFFF00
#FFFAFA
#FFFAF0
#FFFACD
#FFF8DC
#FFF68F
#FFF5EE
#FFF0F5
#FFEFDB
#FFEFD5
#FFEC8B
#FFEBCD
#FFE7BA
#FFE4E1
#FFE4C4
#FFE4B5
#FFE1FF
#FFDEAD
#FFDAB9
#FFD700
#FFD39B
#FFC1C1
#FFC125
#FFC0CB
#FFBBFF
#FFB90F
#FFB6C1
#FFB5C5
#FFAEB9
#FFA54F
#FFA500
#FFA07A
#FF8C69
#FF8C00
#FF83FA
#FF82AB
#FF8247
#FF7F50
#FF7F24
#FF7F00
#FF7256
#FF6EB4
#FF6A6A
#FF69B4
#FF6347
#FF4500
#FF4040
#FF3E96
#FF34B3
#FF3030
#FF1493
#FF00FF
#FF0000
#FDF5E6
#FCFCFC
#FAFAFA
#FAFAD2
#FAF0E6
#FAEBD7
#FA8072
#F8F8FF
#F7F7F7

#F5FFFA
#F5F5F5
#F5F5DC
#F5DEB3
#F4F4F4
#F4A460
#F2F2F2
#F0FFFF
#F0FFF0
#F0F8FF
#F0F0F0
#F0E68C
#F08080
#EEEEE0
#EEEED1
#EEEE00
#EEE9E9
#EEE9BF
#EEE8CD
#EEE8AA
#EEE685
#EEE5DE
#EEE0E5
#EEDFCC
#EEDC82
#EED8AE
#EED5D2
#EED5B7
#EED2EE
#EECFA1
#EECBAD
#EEC900
#EEC591
#EEB4B4
#EEB422
#EEAEEE
#EEAD0E
#EEA9B8
#EEA2AD
#EE9A49
#EE9A00
#EE9572
#EE82EE
#EE8262
#EE7AE9
#EE799F
#EE7942
#EE7621
#EE7600
#EE6AA7
#EE6A50
#EE6363
#EE5C42
#EE4000
#EE3B3B
#EE3A8C
#EE30A7
#EE2C2C
#EE1289
#EE00EE
#EE0000
#EDEDED
#EBEBEB
#EAEAEA
#E9967A

#E0EEEE
#E0EEE0
#E0E0E0
#E066FF
#DEDEDE
#DEB887
#DDA0DD
#DCDCDC
#DC143C
#DBDBDB
#DB7093
#DAA520
#DA70D6
#D9D9D9
#D8BFD8
#D6D6D6
#D4D4D4
#D3D3D3
#D2B48C
#D2691E
#D1EEEE
#D1D1D1
#D15FEE
#D02090
#CFCFCF
#CDCDC1
#CDCDB4
#CDCD00
#CDC9C9
#CDC9A5
#CDC8B1
#CDC673
#CDC5BF
#CDC1C5
#CDC0B0
#CDBE70
#CDBA96
#CDB7B5
#CDB79E
#CDB5CD
#CDB38B
#cdaf95
#CDAF95
#CDAD00
#CDAA7D
#CD9B9B
#CD9B1D
#CD96CD
#CD950C
#CD919E
#CD8C95
#CD853F
#CD8500
#CD8162
#CD7054
#CD69C9
#CD6889
#CD6839
#CD661D
#CD6600
#CD6090
#CD5C5C
#CD5B45
#CD5555
#CD4F39

#CD3700
#CD3333
#CD3278
#CD2990
#CD2626
#CD1076
#CD00CD
#CD0000
#CCCCCC
#CAFF70
#CAE1FF
#C9C9C9
#C7C7C7
#C71585
#C6E2FF
#C67171
#C5C1AA
#C4C4C4
#C2C2C2
#C1FFC1
#C1CDCD
#C1CDC1
#C1C1C1
#C0FF3E
#BFEFFF
#BFBFBF
#BF3EFF
#BEBEBE
#BDBDBD
#BDB76B
#BCEE68
#BCD2EE
#BC8F8F
#BBFFFF
#BABABA
#BA55D3
#B9D3EE
#B8B8B8
#B8860B
#B7B7B7
#B5B5B5
#B4EEB4
#B4CDCD
#B452CD
#B3EE3A
#B3B3B3
#B2DFEE
#B23AEE
#B22222
#B0E2FF
#B0E0E6
#B0C4DE
#B0B0B0
#B03060
#AEEEEE
#ADFF2F
#ADD8E6
#ADADAD
#ABABAB
#AB82FF
#AAAAAA
#A9A9A9
#A8A8A8
#A6A6A6
#A52A2A

#A4D3EE
#A3A3A3
#A2CD5A
#A2B5CD
#A1A1A1
#A0522D
#A020F0
#9FB6CD
#9F79EE
#9E9E9E
#9C9C9C
#9BCD9B
#9B30FF
#9AFF9A
#9ACD32
#9AC0CD
#9A32CD
#999999
#9932CC
#98FB98
#98F5FF
#97FFFF
#96CDCD
#969696
#949494
#9400D3
#9370DB
#919191
#912CEE
#90EE90
#8FBC8F
#8F8F8F
#8EE5EE
#8E8E8E
#8E8E38
#8E388E
#8DEEEE
#8DB6CD
#8C8C8C
#8B8B83
#8B8B7A
#8B8B00
#8B8989
#8B8970
#8B8878
#8B8682
#8B864E
#8B8386
#8B8378
#8B814C
#8B7E66
#8B7D7B
#8B7D6B
#8B7B8B
#8B795E
#8B7765
#8B7500
#8B7355
#8B6969
#8B6914
#8B668B
#8B6508
#8B636C
#8B5F65
#8B5A2B

#8B5A00
#8B5742
#8B4C39
#8B4789
#8B475D
#8B4726
#8B4513
#8B4500
#8B3E2F
#8B3A62
#8B3A3A
#8B3626
#8B2500
#8B2323
#8B2252
#8B1C62
#8B1A1A
#8B0A50
#8B008B
#8B0000
#8A8A8A
#8A2BE2
#8968CD
#87CEFF
#87CEFA
#87CEEB
#878787
#858585
#848484
#8470FF
#838B8B
#838B83
#836FFF
#828282
#7FFFD4
#7FFF00
#7F7F7F
#7EC0EE
#7D9EC0
#7D7D7D
#7D26CD
#7CFC00
#7CCD7C
#7B68EE
#7AC5CD
#7A8B8B
#7A7A7A
#7A67EE
#7A378B
#79CDCD
#787878
#778899
#76EEC6
#76EE00
#757575
#737373
#71C671
#7171C6
#708090
#707070
#6E8B3D
#6E7B8B
#6E6E6E
#6CA6CD
#6C7B8B

#6B8E23
#6B6B6B
#6A5ACD
#698B69
#698B22
#696969
#6959CD
#68838B
#68228B
#66CDAA
#66CD00
#668B8B
#666666
#6495ED
#63B8FF
#636363
#616161
#607B8B
#5F9EA0
#5E5E5E
#5D478B
#5CACEE
#5C5C5C
#5B5B5B
#595959
#575757
#556B2F
#555555
#551A8B
#54FF9F
#548B54
#545454
#53868B
#528B8B
#525252
#515151
#4F94CD
#4F4F4F
#4EEE94
#4D4D4D
#4B0082
#4A708B
#4A4A4A
#48D1CC
#4876FF
#483D8B
#474747
#473C8B
#4682B4
#458B74
#458B00
#454545
#43CD80
#436EEE
#424242
#4169E1
#40E0D0
#404040
#3D3D3D
#3CB371
#3B3B3B
#3A5FCD
#388E8E
#383838
#36648B

#363636
#333333
#32CD32
#303030
#2F4F4F
#2E8B57
#2E2E2E
#2B2B2B
#292929
#282828
#27408B
#262626
#242424
#228B22
#218868
#212121
#20B2AA
#1F1F1F
#1E90FF
#1E1E1E
#1C86EE
#1C1C1C
#1A1A1A
#191970
#1874CD
#171717
#141414
#121212
#104E8B
#0F0F0F
#0D0D0D
#0A0A0A
#080808
#050505
#030303
#00FFFF
#00FF7F
#00FF00
#00FA9A
#00F5FF
#00EEEE
#00EE76
#00EE00
#00E5EE
#00CED1
#00CDCD
#00CD66
#00CD00
#00C5CD
#00BFFF
#00B2EE
#009ACD
#008B8B
#008B45
#008B00
#00868B
#00688B
#006400
#0000FF
#0000EE
#0000CD
#0000AA
#00008B
#000080
#000000