HTML代码实际应用讲解

凤栖坞 2010-03-18

展开全文

贴歌代码

1.背景音乐（适合　mid wma等格式）

2.音频（适合MP3 WMA RM等很多格式）

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

3.视频

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

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

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

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

4. 播放器颜色

六.表格

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

实例1

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

/P>

姓名	性别	年龄
小小	女	25

代码如下： <table border=1> <tr><th>姓名</th><th>性别</th><th>年龄</th> <tr><td>小小</td><td>女</td><td>25</td> </table>

实例2

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

/P>

日期	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属性加以调节

/P>

love	music	friend
100	100	100

代码如下： <table width=300 height=100 border=3 cellspacing=5> <tr><th>love</th><th>music</th><th>friend</th> <tr><td>100</td><td>100</td><td>100</td> </table>

实例4.

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

/P>

居左	居中	居右
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就表示这一格跨越表格两个行的高度。

/P>

安排
星期一	星期二	星期三
蝴蝶	随风	路过

代码如下： <table border> <tr><th colspan=3>安排 </th> <tr><th>星期一</th><th>星期二</th><th>星期三</th> <tr><td>蝴蝶</td><td>随风</td><td>路过</td> </table>

/P>

安排	星期一	星期二	星期三
安排	蝴蝶	随风	路过

代码如下： <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=pink><tr><th bgcolor=green>音乐</th><th bgcolor=Red>欣赏</th><th rowspan=2>顶顶</th><tr bgcolor=yellow><td>A</td><td>B</td></table>

以前介绍过几个播放器今天再给大家补充几个（这个不是自己写的是转来的原作者卡卡）

以前经常有人会问我如何在页面中加入播放器？可以在编辑时点击插入播放器而无需用到HTML代码。但是，千篇一律的款式是不是会让人久而生厌呢？其实，要想让你自己的网页变得生动，一款漂亮的，合乎页面整体设计的播放器就显得极其重要了。现在卡卡为你推荐一些漂亮的播放器，你只需复制代码放入你的文章里，就可以使用了。

一、几款最常用的播放器

代码如下

(EMBED src="歌曲地址" width=300 height=50 type=audio/mpeg loop="-1" autostart="FALSE" volume="0")

代码如下

(EMBED style="FILTER: invert()" src="歌曲地址" width=300 height=50 type=audio/mpeg volume="0" autostart="TRUE" loop="true")

代码如下

(EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=05 type=audio/mpeg loop="-1" autostart="false" volume="0")

代码如下

(EMBED style="FILTER: GRAY()" src="歌曲地址" width=300 height=45 type=audio/mpeg loop="-1" autostart="true" volume="0")

重要提示：

1 复制时务必将（EMBED。。。）前后的括号（）替换成<>。这点非常重要。

2 WIDTH代表播放器宽度，HEIGHT代表高度，后面的数值可依自己喜好进行调整。

3 AUTOSTART="TRUE" 这里TRUE代表自动播放，如果换成FALSE则代表手动播放。

二、装饰美化你的播放器

有了基本的款式后，我们就可以根据自己的想象力，巧用HTML的表格，根据自己的图片素材，装饰美化自己的播放器啦。只要你有足够的创意，调整代码，就可以得到各式各样的播放器。这里卡卡抛砖引玉先介绍几款。

首先我们可以为黑色播放器加上一个边缘

(中间绿底的部分为原黑色播放器代码)

当然也可以为蓝色播放器加上粉色边缘

(中间粉底部分为原蓝色播放器代码)

代码如下

还可以将播放器置于一个单独的表格里，并加上表格的透明特效，播放器上的花纹就是表格的底图。(中间紫底部分的为原蓝色播放器代码)

代码如下:

<TABLE borderColor=#4f3256 align=center background=http://image8.360doc.com/DownloadImg/2010/03/1812/2587233_1.png border=1>

<TBODY>

<TR>

<TD style="FILTER: alpha (opacity=50,style=3)">

<P align=center> <EMBED src=歌曲地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></P></TD></TR></TBODY></TABLE>

还可以利用动态的GIF背景做成动态播放器

(中间蓝底部分为原来的灰色播放器代码

代码如下:

<TABLE borderColor=#dee4fe cellSpacing=3 cellPadding=0 background=http://www./UploadFile/2004-12/2004123023101352.gif border=2>

<TBODY>

<TR>

<TD>

<TABLE align=center border=0>

<TBODY>

<TR>

<TD style="FILTER: alpha (opacity=60,style=3)">

<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="-1"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY> </TABLE>

甚至还可以将动态背景只在播放器底部运行

中间棕底字体为原灰色播放器代码

代码如下

<TABLE height=40 cellSpacing=0 cellPadding=0 width=300 background=http://bbs./UploadFile/2005-4/20054302075888035.gif border=1>

<TBODY>

<TR>

<TD>

<TABLE style="FILTER: Chroma (Color='#000000')" height=40 cellSpacing=0 cellPadding=0 width=300 border=0>

<TBODY>

<TR>

<TD>

<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300 height=40 type=audio/mpeg loop="-1" autostart="false" volume="0"></P></TD></TR></TBODY></TABLE></TD>< /TR></TBODY></TABLE>