博客常用代码
一、文字代码
1、字体代码:face
常用字体:宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等
如:<font size=4 color=#ff1493 face=新宋体> 文字</font>
2、字体加粗代码:<b>文字</b>
3、文字大小代码:size 最大值为7 取值越大文字就越大。
文字大小也可:<h1>文字</h1> (字体大小可从h1-h5,h1最大,h5最小)
4、换行与空格代码:<br>
如: <br><a href="地址" target="_blank">文字</a>
不换行代码:<nobr>...</nobr>
空格代码:
段落:<p>段落</p>
5、文字的对齐(alignment)
<P align=left>-------居左,
<P align=center>-----居中,
<P align=right>-------居右。
或者
<div align=left>-----居左,
<div align=center>-----居中,
<div align=right>----居右。
6、 水平线: <hr>
<HR style="WIDTH: 660px; HEIGHT: 6px" color=#ff0000 SIZE=6>
width="80%" 水平线长短=长度
color="ff0000" 水平线颜色
size="9" 水平线粗细=宽度
二、基本颜色的代码:
1、预定义色彩: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
2、点击 颜色代码快速采集 得到需要的颜色代码
三、表格代码:
1、表格的基本语法:
<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元
属性定义:
边框尺寸: border=# 是框线粗细。
边框的色彩: bordercolor=#
表元内空间大小: cellpadding=# 是格的大小。 设置cellpadding后,可随格内内容改变格的大小。
表元间隙大小: cellspacing=# 是格线粗细。
表元的背景色彩: bgcolor=#
表元的背景图象: background="地址"
2、带边框的表格: <table border>
<table border><tr>
<th>文字</th><th>文字</th><th>文字</th><tr><td>A</td><td>B</td><td>C</td> </table>
文字 | 文字 | 文字 |
---|---|---|
A | B | C |
3、不带边框的表格: <table>
<table><tr><th>文字</th><th>文字</th><th>文字</th><tr><td>A</td><td>B</td><td>C</td> </table>
文字 | 文字 | 文字 |
---|---|---|
A | B | C |
4、跨多列的表元: <th colspan=#>
<table border><tr><th colspan=3>文字</th>
<tr><th>文字</th> <th>文字</th> <th>文字</th>
<tr><td>A</td><td>B</td><td>C</td> </table>
文字 | ||
---|---|---|
文字 | 文字 | 文字 |
A | B | C |
5、跨多行的表元: <th rowspan=#>
<table border><tr><th rowspan=3>单位</th>
<th>姓名</th> <td>A</td></tr>
<tr><th>性别</th> <td>B</td></tr>
<tr><th>数量</th> <td>C</td></tr></table>
单位 | 姓名 | A |
---|---|---|
性别 | B | |
数量 | C |
6、简单实用的表格代码:一行四格
<TABLE style="WIDTH: 500px; HEIGHT: 40px" cellSpacing=5 cellPadding=5 bgColor=#00ff00 border=3>
<TBODY>
<TR>
<TD width=120>
<P>文字</P></TD>
<TD width=120>
<P>文字</P></TD>
<TD width=120>
<P>文字</P></TD>
<TD width=120>
<P>文字</P></TD></TR>
</TBODY></TABLE>
文字 | 文字 | 文字 | 文字 |
四、导航表格的代码:实际是表格里插入图片和文字连接代码,图片没有和日志地址连接
<TABLE style="WIDTH: 364px; HEIGHT: 107px" borderColor=#ff0000 cellSpacing=5 cellPadding=20 width=364 border=4>
<TBODY>
<TR>
<TD width="50%"><IMG src="图片地址" border=0> <A href="日记地址" target=_blank><FONT face=_GB2312 color=#0000ff size=0>日记名称</FONT></A></TD>
<TD width="50%"><IMG src="图片地址" border=0> <A href="日记地址" target=_blank><FONT face=_GB2312 color=#0000ff size=0>日记名称</FONT></A></TD></TR></TBODY></TABLE>
五、链接代码
1、文字链接代码:
a、在原窗口打开连接:<a href=地址>文字</a>
b、在新窗口打开连接:<a href=地址 target=_blank>文字</a>
<a>:表示超链接,可以为HTML网页、图片,影视文件等。用法如下:<a href="地址">文字</a>
href:表示链接文件的路径
target:在一个新窗口打开链接。
2、图片链接代码(1):
<img src="图片地址"> ;<img src=图片地址 alt=提示文字> 。
图片链接日志代码(2):点图片就可以打开链接。
<A href="日志地址" target=_blank><IMG height=400 alt=" 提示文字" src="图片地址" width=300> </A>
3、边框图片链接代码: 边框实际就是表格
<TABLE border=3><TBODY><TR><TD><IMG src="图片地址" width=300 height=20></TD></TR></TBODY></TABLE>
4、给图片外框增添颜色
<TABLE borderColor=#ff7f50 border=3><TBODY><TR><TD><IMG src="图片地址" width=300 height=20></TD></TR></TBODY></TABLE>
5、背景图片代码:
<TABLE cellSpacing=5 cellPadding=50 width=550 align=center background=背景图片地址 border=5>
<TBODY><TR><TD> 文字或图片</TR></TD></TBODY></TABLE>
可以简化为:去掉border=5就没有边框。
<TABLE background=背景图片地址 border=5>
<TBODY><TR><TD> 文字或图片</TR></TD></TBODY></TABLE>
6、flash链接代码:: <embed src="flash地址" width="宽度" height="高度">
7、影视文件链接代码::<img dynsrc="地址" width="宽度" height="高度"
8、音乐链接代码:<embed src="地址" width="宽度" height="高度" autostart=false>
9、背景音乐链接代码::<bgsound="背景音乐地址" loop=infinite>
10、显示、隐藏播放器:
<EMBED src="音乐地址" width=350 height=45 type="audio/x-pn-realaudio-<br>plugin" loop="true" autostart="true" controls="ControlPanel,StatusBar">
plugin" loop="true" autostart="true" controls="ControlPanel,StatusBar">
隐形播放器代码如下:
<EMBED src=http://mp3.baidu.com/u?u=音乐文件网址 width=0 height=0 type=audio/mpeg Loop="true" AutoStart="true">
说明:
autostart="true"-----是否自动播放,
TRUE-----要自动播放,
true------默认
LOOP=3 ----重复3次,
FALSE----- 播放一次即停止。
width height 可设定播放器面板大小。如果都为0,播放器隐藏。
11、移动的友情链接代码:向右运动 点击图片,打开对方地址。
<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><a target="cont" href="对方地址"><img src="图片地址" width="100" height="100" border="0"></a></marquee>
效果:
把图片连接的代码<img src="对方图片" width="100" height="100" border="0">变成“对方名称”就没有图片了。
六、图片上写日志的代码 实际就是背景图片的代码
<table width="450" border="0"><tr><td height="562" background=图片地址></td></tr></table>
七、 图片中插入动画文字的代码
<TABLE style="WIDTH: 480px; HEIGHT: 300px" height=300 cellPadding=0 width=480 align=center background="图片地址" border=0>
<TBODY>
<TR>
<TD>
<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src="动画地址"width="100%" type=application/x-shockwave-flash quality="high" wmode="transparent" ></EMBED>
<DIV align=center><FONT face=楷体_GB2312><FONT size=4><FONT color=#ffffff></FONT></FONT></FONT>
<MARQUEE style="WIDTH: 435px; HEIGHT: 84px" scrollAmount=2 direction=up height=84><FONT color=#00ff00 face=隶书 size=5>
<DIV align=center><FONT face=华文行楷 color=ff0000 size=6>文字---欢迎光临fdycq博客</FONT></DIV>
<DIV align=center> </DIV>
<DIV align=center>文字</DIV>
<DIV align=center>文字</DIV>
<DIV align=center> </DIV></FONT></MARQUEE>
</TR></TBODY></TABLE>
八、框架导航的代码:
在原窗口打开:<a href="地址"><font size="4">名称</font></a>
在新窗口打开:<a href="地址" target="_blank"><font size="4">名称</a>
<table border="5" cellpadding="0" cellspacing="0" height="5" width="330"><tbody><tr>
<td><div align="center">
<a href="地址"><font size="4">名称</font></a>
<a href="地址"><font size="4">名称</font></a>
<a href="地址"><font size="4">名称</font></a>
<a href="地址"><font size="4">名称</font></a></div></td></tr>
<tr><td><div align="center">
<a href="地址"><font size="4">名称</font></a>
<a href="地址"><font size="4">名称</font></a>
<a href="地址"><font size="4">名称</font></a>
<a href="地址"><font size="4">名称</font></a></div></td></tr></tbody></table>
例如:在原窗口打开
九、鼠标指向图片显示地址的导航代码:
<p align="center"><A href=链接的地址" target="_blank"><img title="名称" src="图片地址" width="150" height="70"></a><br/>
十、日志图片导航代码:同样可以作首页图片导航代码
<TABLE borderColor=#f68080 cellSpacing=15 cellPadding=1 width="70%" bgColor=#fee4de border=3>
<TBODY>
<TR>
<TD><A href="日志地址" target=_blank><IMG height=100 src="图片地址" width=100 border=0></A>
<P><A href="日志地址" target=_blank><FONT color=#ff0000 size=2>名称</FONT></A> </P></TD>
<TD><A href="日志地址" target=_blank><IMG height=100 src="图片地址" width=100 border=0></A>
<P><A href="日志地址" target=_blank><FONT color=#ff0000 size=2>名称</FONT></A> </P></TD></TR></TBODY></TABLE>
效果:http://fdycq.blog.163.com/blog/static/1966494320091993334610/edit/
十一、飘动在图片背景上的文字代码:实际是波浪运动
<TABLE borderColor=#cd5c5c height=350 width=450 align=center border=3>
<TBODY>
<TR>
<TD background=背景图片地址>
<MARQUEE scrollAmount=3 direction=down behavior=alternate height=350>
<MARQUEE scrollAmount=3 behavior=alternate width=500>
<P align=center><FONT color=red size=6><B>飘动的文字</B></FONT></P></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>
效果
十二、 在主页用自定义贴照片:<img src="图片地址">
十三、框架:可以在一个窗口显示多个网页
<frameset></frameset>设置框架划分
cols:按列分框架;rows:按行分框架。
<frame>:设定网页。src:地址和文件名。
<iframe></iframe>可将框架置于一个文件内:<iframe src="地址"></iframe>
1、列分框架
<frameset cols="25%,50%,25%">
<frame src="地址">
<frame src="地址"><frame src="地址"></frameset>
2、行分框架
<frameset rows="25%,50%,25%">
<frame src="地址"><frame src="地址"><frame src="地址"></frameset>
3、混合框架
<frameset rows="50%,50%">
<frame src="地址">
<frameset cols="25%,75%">
<frame src="地址"><frame src="地址"></frameset>
</frameset>
评论