一些基本的HTML代码解释和使用方法(一)

      代码素材 2007-9-9 15:24

一、文字的布局

1、文字的大小;颜色及字体

<font size=4 color=#ff1493 face=新宋体> 你需要的文字 </font>

2、行的控制

段(Paragraph) (可以看作是空行) <p>

例1:你好吗?<p>很好。

你好吗?

很好。

换行 <br>

例2:你好吗?<br>很好。

你好吗?
很好。

3、文字的对齐(Alignment)

<p align=#> ... ... </p>   #=left, center, right

<center> ... ... </center>

4、文字的分区(Division)显示

<div align=#> ... ... </div>  #=left, center, right

注解:

<P align=center>表示居中,<P align=left>表示居左,<P align=right>表示居右。

<div align=center>表示居中,<div align=left>表示居左,<div align=right>表示居右。


face=字体 常用字体为:宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等

size=字体大小,这里的最大值为7 取值越大文字就越大

另一种贴法:

<font style=font:40pt face=新宋体 color=#ff0000>插入文字</font>

font:40pt 数值越大文字就越大。

color=颜色代码。

二、如何贴图

1、单张图片  

  代码如下:
<img src=http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg>

注明:多张图片连贴时,注意使用换行代码<p>或<br>


单张图片尺寸压缩用语

一张普通图片如下图:






尺寸压缩后如下图

  代码如下:
<TABLE border=3>
<TBODY>
<TR>
<TD>
<IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg" width=250 height=250> </TD></TR></TBODY></TABLE>

border为图片边框的尺寸,width和height则为图片的宽高,

这个尺寸可以随意调节,以图片美观,则大小适宜。


再一个就是--没有边框的:

代码如下:

<img src=http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg _fcksavedurl="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg" width=250>

 

2,背景图片代码:

<TABLE cellSpacing=10 cellPadding=10 width=550 align=center background=http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif border=5>
<TBODY>
<TR>
<TD>

.... 在这里输入你需要的文字或图片 ...

</TR></TD></TBODY></TABLE>

效果如下:










给图片外框增添颜色

  代码如下:

<TABLE borderColor=#ff7f50 border=3>
<TBODY>
<TR>
<TD>
<IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg">
</TD></TR></TBODY></TABLE>

比上面的尺寸压缩里多了个bordercolor="#FF7F50"

大家看到了么,这个就是边框颜色。

如果不要边框怎办,把border=0就行了。

文字在图片里居中







秋风秋雨迎秋致,

秋意秋韵宜秋君,

秋花秋蟹捎秋讯,

秋情秋果喜煞人。





代码如下:
<TABLE borderColor=#ff1493 cellSpacing=10 cellPadding=0 width=550 align=center background=http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif border=5>
<TBODY>
<TR>
<TD>
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<CENTER><FONT size=5 color=#d3d3d3>
秋风秋雨迎秋致,<BR><BR>秋意秋韵宜秋君,<BR><BR>
秋花秋蟹捎秋讯,<BR><BR>秋情秋果喜煞人。<BR><BR> <BR><BR><BR><BR></FONT> </CENTER></TD></TR></TBODY></TABLE>

文字在图片里居中滚动









秋风秋雨迎秋致,

秋意秋韵宜秋君,

秋花秋蟹捎秋讯,

秋情秋果喜煞人。

代码如下:
<CENTER>
<TABLE cellSpacing=5 cellPadding=5 width=500 align=center background="http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif" border=5>
<TBODY>
<TR>
<TD>
<BR><BR><BR><BR>
<MARQUEE scrollAmount=2 direction=up height=230>
<CENTER><FONT size=5 color=red><BR>
秋风秋雨迎秋致,<BR>秋意秋韵宜秋君,<BR>
秋花秋蟹捎秋讯, <BR>秋情秋果喜煞人。<BR></FONT></MARQUEE> </TD></TR></TBODY></TABLE></CENTER>

<marquee >文字内容</marquee>为滚动用语

direction=up 为上滚; scrollamount=2为滚动速度

height=230为滚动范围,也可不要。

 

图片在背景图片里居中滚动



代码如下:
<CENTER>
<TABLE cellSpacing=5 cellPadding=5 width=550 align=center background="
http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif" border=5 >
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 direction=up height=530>
<CENTER><IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg"> <IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg"> <IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg"> <BR><BR></CENTER></MARQUEE></TD></TR></TBODY></TABLE>



标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}