您好!欢迎你光临HTML简介_佳人有约!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习园地>>>HTML知识>>>HTML简介
HTML简介
发表日期:2006/2/23 11:26:00 出处:未知 作者:未知 发布人:maizi1020 已被访问 540
HTML代码简介


一:背景






一个完整的HTML帖子应该是:


美贴=背景+文章+插图+收尾






原代码如下:
<TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>

帖子的文章加图片

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


注意:前边用了多少<table......><tr><td>后面就要有多少</td></tr></table>收尾。多收和少收都会使帖子出错哦 :)


常用的参数设定及注解:

<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">

width="400"
表格宽度,接受绝对值(如 500)及相对值(如 80%)。

border="10"
表格边框的厚度。

cellspacing="2"
表格格线的厚度

cellPadding=5 表格格线内厚度


align="CENTER"
表格的摆放位置(水平),可选值为:左: left, 右: right, 居中: center

valign="TOP".
表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。   

background="背景图片网址"
表格的背景图片,与 bgcolor 不要同用。

bgcolor="#0000FF"
表格的底色,与 background 不要同用

bordercolor="#CF0000"
表格边框颜色

bordercolorlight="#00FF00"
表格边框向光部分的颜色

bordercolordark="#00FFFF"
表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

二.文字应用

1.文字基本设制

基本代码如下:

<P align=center><FONT color=#CFCF88 face=华文行楷 size=5>插入文字</FONT></P>


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

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

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

另一种贴法:

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

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

2.移动文字

效果:

移动文字
可根据下面基本代码
自行调节效果


基本代码:

<marquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1><font color=red size=+2 face=华文新魏>插入文字</font></marquee>

说明:
direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)

behavior=移动方式, scroll 一圈一圈绕着走, slide 只走一次, behavior=alternate 来回走

width=宽度  height=高度  scrolldelay=速度  scrollamount=位移

上面的参数大家可以根据不同的情况自行调节。


3。文字特效

效果1

欢迎你的到来



代码如下:
<table align=center border=3 bordercolor="#CD5C5C" width=500 height=375><td background=http://my.e-yu.cn/ctv/tp/fengjing/lu10.jpg><marquee behavior=alternate scrollamount=3 direction=down height=350><marquee behavior=alternate scrollamount=3 width=500><img src=http://my.e-yu.cn/ctv/tp/fengjing/xing01.gif><font color=red size=6><b>欢迎你的到来</b><img src=http://my.e-yu.cn/ctv/tp/fengjing/xing01.gif></font></marquee></table><br>



效果2



代码如下:

<center><table width=500><tr><td><font color=#991144&><marquee behavior=alternate><MARQUEE behavior=alternate><FONT face=宋体 color=red size=4><MARQUEE direction=up behavior=alternate width=60 height=120>南</MARQUEE><FONT color=orange> <MARQUEE direction=up behavior=alternate width=60 height=80>山</MARQUEE><FONT color=#FF8CA9><MARQUEE direction=up behavior=alternate width=60 height=120>欢</MARQUEE><FONT color=green> <MARQUEE direction=up behavior=alternate width=60 height=80>迎</MARQUEE><FONT color=blue><MARQUEE direction=up behavior=alternate width=60 height=120>光</MARQUEE><FONT color=lime> <MARQUEE direction=up behavior=alternate width=60 height=80>临</MARQUEE></FONT></FONT></FONT></FONT></FONT></FONT></marquee></font></td></tr></table></center>

三.贴图

1.基本代码:


<img src=图片网址 width=图片宽度 height=图片长度>

注意:设定图片大小,此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小,以免失真,若需要改图片大小最好使用图像编辑工具(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真。)。图片的居中,居左,居右上面已经介绍了,这里不再重复。。。。。

2.给图片加边框

效果:



基本代码:

<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://web.cn898.net/haoran/tp/lu/lu10.jpg width=500 height=375></td></table>

说明:

border="6" 表格边框的厚度,不同浏览器有不同的内定值。

cellspacing="2" 表格格线的厚度

cellPadding=1 表格格线内厚度

borderColor=#841A00 边框色彩

3.图片朦胧

A.圆形效果




代码: <IMG src="图片" width=500 height=375 style="filter:Alpha(opacity=100,style=2);">



B.方形效果


代码: <IMG src="图片" style="FILTER: Alpha(opacity=200,style=3)" width=500 height=375 ALGIN="MIDDLE">

四.透明FLAH的应用

1.常用效果



代码如下:

<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#84B98D background=图片><TBODY><TD><EMBED src=透明网址 width=500 height=375 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></embed></table></center>

注意:长和宽的设定要根据图片的实际大小来设定


2.定位透明FLASH效果

注意:这种方法由于是通过坐标的方式把透明FLASH固定到了某一点,所以在不同的环境和不同的论坛要相应调整不同的位置。定位较为麻烦,而且最大的弊病就是屏幕分辨率设置不一样,观看的效果也不一样(比如你是用分辨率1024×768做的帖子,你感觉固定的位置很好。但别人用分辨率800×600观看却偏得很远。本人建议一般不要用这种方法。

定位效果图








代码如下:

<TABLE align=center background="http://pugongyingw.51.net/image/bj/20.jpg" border=10 cellPadding=5 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD><br>
<center><table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://web.cn898.net/haoran/tp/lu/lu10.jpg width=400 height=300></td></table></center><br>
<EMBED style="LEFT: 400px; WIDTH: 400px; POSITION: absolute; TOP: 6910px; HEIGHT: 300px" align=right src=http://bg.cn898.net/3.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
</TD></TR></TBODY></TABLE>


说明:TOP: 6910px 指FLASH与帖子上边之间的距离。
LEFT: 400px 是指FLASH与帖子左边的距离
WIDTH: 400px HEIGHT: 300px 是指FLASH定位的范围宽度和高度
后面的width=400 height=300 就是指FLASH的宽和高了。


五.贴歌代码

1.背景音乐(适合 mid wma等格式)
<bgsound src=音乐网址 Loop=-1>

2.音频(适合MP3 WMA RM等很多格式)



代码如下:
<embed src=音乐网址 type=audio/x-pn-realaudio-plugin controls=ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=40>

3.视频
<embed src=视频网址 type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=400>

4.FLASH
<embed src=网址 width=400 height=400>


说明:AutoStart=true 表示是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为true

Loop=true 表示设定播放重复次数,LOOP=3表示重复3次,true表示无限次播放,FALSE播放一次即停止。

width=宽度 height=高度 可以设定控制播放器面板的大小,如果都设置为0就可以把播放器隐藏了。

六.表格

1.掌握表格的以下属性:
<tr>  表行
<th>  表头
<td>  表元(表格的具体内容)
align定义表格的对齐方式,有三个属性值center,left,right
background 定义表格的背景图案,属性值为图片的地址
bgcolor 定义表格的背景颜色,属性值是各种颜色代码
border 定义表格的边框宽度,属性值是数字
bordercolor 定义表格边框的颜色,属性值是各种颜色代码
background 定义背景图案
cellpadding 定义单元格内容与单元格边框之间的距离,属性值是数字
cellspacing 定义表格中单元格之间的距离
height 定义表格的高度,属性值是数字
width定 义表格的宽度,属性值是数字
colspan 定义合并表格的列数,属性值是数字
rowspan 定义合并表格的行数,属性值是数字

实例1表格的基本结构:<tr> 表行  <th>表头  <td> 表元(表格的具体内容)的运用

姓名 性别 年龄
王林 25


代码如下:
<table border=1>
<tr><th>姓名</th><th>性别</th><th>年龄</th>
<tr><td>王林</td><td>男</td><td>25</td>      
</table>


实例2表格的基本结构:<tr> 表行  <th>表头  <td> 表元(表格的具体内容)的运用

日期 9-11 11-13 13-14
旅游地点 青岛 黄山 杭州


代码如下:
<table border=1>
<tr><th>日期</th><td>9-11</td><td>11-13</td><td>13-14</td>
<tr><th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州</td>
</table>


实例3. 一般情况下,表格的总长度和总宽度是根据各行和各列的总和自动调整的,如果我们要直接固定表格的大小,可以使用下列方式:width和height属性分别指定表格一个固定的宽度和长度,可以用数值来表示,也可以用百分比(与整个屏幕相比的大小比例)来表示。 格与格之间的线为格间线,它的宽度可以使用

中的CELLSPACING属性加以调节.

苹果 香蕉 葡萄
200公斤 200公斤 100公斤


代码如下:
<table width=300 height=100 border=3 cellspacing=5>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>


实例4.表格内文字的对齐/布局. 表格中数据的排列方式有两种,分别是左右排列和上下排列。左右排列是以ALIGN属性来设置,而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种:居左(left)、居右(right)和居中(center);而上下排列基本上比较常用的有四种:上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。

居左 居中 居右
A B C


代码如下:
<table border=1 width="200">
<tr><th>居左</th><th>居中</th><th>居右</th>
<tr><td align=left>A</td><td align=center>B</td><td align=right>C</td>
</table>


实例5.跨多行、多列的表元
要创建跨多行、多列的表元,只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性,这两个属性的值,表明了表元中要跨越的行或列的个数。
跨多列的表元 <th colspan=#> <td colspan=#>
colspan表示跨越的列数,例如colspan=2表示这一格的宽度为两个列的宽度。
跨多行的表元 <th rowspan=#> <td rowspan=#> 
rowspan所要表示的意义是指跨越的行数,例如rowspan=2就表示这一格跨越表格两个行的高度。

值班人员
星期一 星期二 星期三
小雨 南瓜 小白


代码如下:
<table border>
<tr><th colspan=3>值班人员 </th>
<tr><th>星期一</th><th>星期二</th><th>星期三</th>
<tr><td>小雨</td><td>南瓜</td><td>小白</td>
</table>



  
值班人员 星期一 星期二星期三
阿毒 泉水 翱翔


代码如下:
<table border>
<tr><th rowspan=2>值班人员</th>
<th>星期一</th><th>星期二</th>  <th>星期三</th></tr>
<tr><td>阿毒</td><td>泉水</td><td>翱翔</td></tr>
</table>


实例6.表格的颜色:
在表格中,既可以对整个表格填入底色,也可以对任何一行、一个表元使用背景色。
表格的背景色彩   <table bgcolor=#>
行的背景色彩    <tr bgcolor=#>
表元的背景色彩   <th bgcolor=#>或 <td bgcolor=#>

彩电 冰箱 家电
A B


代码如下:
<table border=2 bgcolor=aqua><tr><th bgcolor=ffaa00>彩电</th><th bgcolor=Red>冰箱</th><th rowspan=2>家电</th><tr bgcolor=yellow><td>A</td><td>B</td></table>



HTML代码[基础篇]

size粗细 color颜色 WIDTH宽度 height高度
------------------------------------------
<br>换行 <P></P>段落 ALIGN左右对齐方式 valign上下对齐方式
--------------------------------------------------------------------------------------------------
<HR>水平线段 (size粗细 color颜色 水平线的宽度width 水平线的长度 用占屏幕宽度的百分比或象素值来表示
align 水平线的对齐方式,有LEFT RIGHT CENTER三种 noshade 线段无阴影属性,为实心线段)
--------------------------------------------------------------------------------------------------------------
文字<font 属性></font>{(属性:SIZE=取值1-7 face=字体)(粗体<B></B>.斜体<I></I>.加下划线<U></U>.中间线<S></S>

字体上一点<sup></sup> 字体下一点<sub></sub>打字机字体<TT></TT>.大型字体<BIG></BIG>.小型字体<SMALL></SMALL>.

闪烁效果<BLINK></BLINK>.强调<EM></EM>.特别强调<STRONG></STRONG>.引证举例<CITE></CITE>)

(字体:Script . Small Fonts . Roman . Comic Sans MS . Arial . Modern . MS Sans Serif) 

文字移动<marquee>内容</marquee>

方向:<marquee direction=>内容</marquee> (属性:左left右right)

方式:<marquee bihavior=>内容</marquee> (属性:一圈一圈绕着scroll走一次slide来回走alternate) 

速度: <marquee scrollamount=>内容</marquee>

延时: <marquee scrolldelay=>内容</marquee>

向上: <marquee direction=up scrollamount=3>
<center><font color=颜色 size=大小 face=字体>内容</font></marquee>

向下:<marquee direction=down scrollamount=3>
<center><font color=颜色 size=大小 face=字体>内容</font></marquee>

底色: <marquee bgcolor=颜色>内容</marquee> (属性:WIDTH宽度 height高度)
-----------------------------------------------------------------------------
位置控制<DIV ALIGN=属性></DIV>(属性=LEFT左对齐缺省值 CENTER 居中 RIGHT右对齐)
-----------------------------------------------------------------------------
无序号列表<ul></ul>条目前加<LI>

序号列表<OL></OL>条目前加<LI>(<li type=实圆disc 空圆circle 实方square>

定义性列表<DL></DL>(<DT>主要<DD>叙述主要的定义)
-----------------------------------------------
表格的基本结构

<table>...</table>  定义表格(属性width= height= border= CELLSPACING=格线间 CELLPADDING=格线内 背景色彩bgcolor=)

<caption>...</caption> 定义标题(属性top上方.bottom下方)

<tr>  定义表行 (横夸colspan=几格.竖夸rowspan=几格 背景颜色bgcolor=)

<th></th>  定义表头 (属性:背景颜色bgcolor=)

<td></td>  定义表元(表格的具体数据.属性ALIGN左右对齐方式valign上下对齐方式 top上middle中bottom下baseline基线
属性:背景颜色bgcolor=)

(背景颜色:Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua)
--------------
超级链接

文字连接<A HREF=资源地址>链接文字</A>

图片连接<A HREF=资源地址><IMG SRC=图形文件地址></A>

-------------------------------------------
图形格式

<IMG SRC=图形文件地址>(属性:width= heigth=)
--------------------------------------------
播放音乐/视频

<EMBED SRC=音乐文件地址>(属性:循环开/关LOOP=TRUE/FALSE 隐藏控制面板HIDDEN=TRUE/FALSE width= heigth=)

背景音乐

<bgsound src=音乐文件地址>(属性:循环开/关LOOP=TRUE/FALSE)

视频

<img src=1 dynsrc=2>(1指图片地址.2指视频地址.总是循环loop=infinite)(注:这个命令可以在没连接到视频时,先显示图片)


 




 

 

 

 

 

 

 

 

 

 




双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

佳人有约 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:麦子.永恒

琼icp备09005167