注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飞龙在天网易博客

祝各位来访朋友永远开心快乐!

 
 
 

日志

 
 

html代码基础汇编  

2016-11-25 20:44:01|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自梦中人 《html代码基础汇编》
梦中人の梦工场欢迎朋友的光临交流

一、html代码介绍

 HTML的英语全称为Hyper Text Markup Language,中文意思是超文本标识语言(简称为:超文本语言)也叫WEB语言。它是计算机语言的最基础、最简单的部分。我们知道计算机最基本的识别文字(也叫语言)就是26个英文字母+10个阿拉伯数字+部分标点符号。论坛上的HTML音画制做是不借助任何软件的,所以就必须使用HTML语言(部分网站及专业论坛是不开放HTML设置的)

   初学者一打开HTML制式,看到的往往是一堆代码,即便不晕也是丈二和尚,往往会在这个时期放弃学习,实际上你只要摸上规律,找到窍门,它的组成是有定律的、是固定的.

HTML是一种用来制作超文本文档的简单标签语言,不是程序语言.一张音画贴,是用若于条文字、表格、定位、移动和链接等HTML标签编辑而成的。与普通文档不同,它可以加入文字、图片、声音、动画、影视等内容,可以从一个文件跳转到另一个文件,与世界各地主机的文件连接,通过WWW浏览器显示出效果。它的特点是用一对小尖括弧(“<  和  >")作为标签。所谓标签,就是它采用了一系列的指令符号来控制输出的效果,这些指令符号用“<标签名字 属性>”来表示。而且大部份是成对的双标签,即首标签和尾标签。
 HTML代码是标签语言.仅有一个指令的标签, 只须一个标签名称的语句就可以,如贴图代码:
 <img src="图片地址">

一条标签有多条指令时,除标签名称外还要有各项属性内容与属值等多个语句.比如:
<标签名字 第一属性=参数 第二属性=参数.....>内容</尾标签>

如:

<font style=font:60pt  face=隶书 color=ff0000>
       梦中人の梦工场
      </font>
◇代码的第一行 首标签名  属性内容依次是:字号大小  什么字体 字的颜色
◇代码的第二行     文字内容
◇代码的第三行  尾标签
◇字号代码原是:size=1-7.这里用的是CSS样式定义字体:style=font: 可以最大限度地设置字号.
  如果在这组代码前面加一个移动始标签<marquee>,在后面加一个尾标签</marquee>,这几个字就能移动了。

<marquee>

<font style=font:60pt  face=隶书 color=ff0000>
       梦中人の梦工场
      </font>
      </marquee>

梦中人の梦工场


  ◇标签属性内容可以有几个至十多个几十个不等.
  ◇标签属性内容必须与标签名称相关语句:如文字标签应用字体、字号和颜色等指令.表格标签应用宽度、高度、背景、边线厚度和边线颜色等指令.

 
        
再如制作网页或音画贴,要使用表格标签进行表格设置.例如要做一张宽500高300蓝色边框青色背景图框,代码如下:
<TABLE width=500 height=260 bgColor=#00FF00 border=5 bordercolor="#0000ff">
<TR>
<TD>
</TD></TR></TBODY></TABLE>


  
说明:
  ◇第一行代码是表格首标签,内有宽、高、背景和边线四个属性内容及属值.
  ◇第二行代码是表格的列.
  ◇第三行代码是表格的行,(1列和1行构成一个单元格).
  ◇第四行代码是表格的全部尾标签.


这里先介绍一些基础的只有一个或几个标签的html语句代码:

 二、代码语句基础

1、贴图:<img src="图片地址">

2、加入连接:<a href="所要连接的相关地址">写上你想写的字</a>

3、在新窗口打开连接:<a href="相关地址" target="_blank">写上要写的字</a>

 4、用图片链接代码(1):

       <A href="链接的网址" target=_blank><IMG src="图片地址" border=0></A>

    用图片链接代码(2)可以加上你的说明文字:

<A href="http://ysh6766.blog.163.com/连接地址" target=_blank><IMG height=400 alt="

点击图片即可进入梦中人梦工场(你的说明文字)"

src="http://img1.bimg.126.net/photo/NuwSRqK-

Qvn68X9_FgeuiQ==/327355397915660697.jpg 图片地址" width=300> </A>   

5、字体加粗:<b>写上你想写的字</b>

6、字体斜体:<i>写上你想写的字</i>

7、字体下划线: <u>写上你想写的字</u>

8、字体删除线: <s>写上你想写的字</s>

9、字体加大: <big>写上你想写的字</big>

10、字体控制大小:<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大,h5最小)

或者<font size=?></font> 设置字体大小,从1到7

11、设置、更改字体颜色:<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间

12、消除连接的下划线:<a href="相关地址" style="text-decoration:none">写上你想写的字</a>

13、贴音乐:<embed src="音乐地址" width="宽度" height="高度" autostart=false> 

14、贴flash基础码: <embed src="flash地址" width="宽度" height="高度">

贴Flash动画代码2:

<TABLE align=center><EMBED src=Flash动画地址 width=500 height=400 type=application/x-shockwave-flash wmode="transparent"></EMBED></TABLE>  

15、贴影视文件:<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover> 

16、换行:<br>

17、段落:<p>段落</p>

 18、文字的对齐方向 <p align="#"> #号可为 left:表向左对齐(预设值) center:表向中对齐 right:表向右对齐 P.S.<p align="#">之后的文字都会以所设的对齐方式显示,直到出现另一个<p align="#">改变其对齐方向,遇到<hr>或<h#>标签时会自动设回预设的向左对齐。

19、分隔线 <hr>
a.分隔线的粗细 <hr size=点数>
b.分隔线的宽度 <hr size=点数或百分比>
c.分隔线对齐方向 <hr align="#">
     #号可为 left:表向左对齐(预设值) center:表向中对齐 right:表向右对齐
d.分隔线的颜色 <hr color=#rrggbb>
e.实心分隔线 <hr noshade>  

20、换帖子背景:<body background="背景图片地址">

21、固定帖子背景不随滚动条滚动:<body background="背景图片地址" body

bgproperties=fixed>

22、定制帖子背景颜色:<body bgcolor="#value">(value值见10)

23、帖子背景音乐:<bgsound="背景音乐地址" loop=infinite>

24、贴网页1:<iframe src="相关地址" width="宽度" height="高度"></iframe> 

贴网页2:<p align="center"><IFRAME style="WIDTH: 644px; HEIGHT: 478px" src="http://www.meisen531.com/uploadpic/2006081417282322886.htm" frameBorder=0 scrolling=noshade></IFRAME></p>

用时换下黄色地址就行了

       25、区隔标记 <DIV>

     <DIV>称为区隔标记。作用:设定字、画、表格等的摆放位置。
   <DIV>应用于 Style Sheet(式样表)方面会更显威力,它最终目的是给设计者

    另一种组织能力,有 Class ; Style ; title ; ID 等属性。。
    以 <DIV align="center"> 为例:

      align="center"
      可选值:center ; left ; right 。决定字、画、表格等居中、靠左或靠右。
       <DIV align="center"> 的作用和居中标记 <CENTER>一样。。
     注:其实常用跟<p>标签的效果差不多,但是功能比<p>相对强一些。。。 

     26、居中对齐 <center>..........</center> 跟<p align="center">........</p>,<DIV align="center">........<DIV>效果基本是一样的。。。

    


 

三、移动文字的基本代码:

文字移动标记<MARQUEE>..........</MARQUEE>

  <marquee>...</marquee>普通移动   

  <marquee behavior=slide>...</marquee>移动   

  <marquee behavior=scroll>...</marquee>预设卷动   

  <marquee behavior=alternate>...</marquee>来回移动    

  <marquee direction=down>...</marquee>向下移动   

  <marquee direction=up>...</marquee>向上移动   

  <marquee direction=right></marquee>向右移动     

  <marquee direction=left></marquee>向左移动   

  <marquee loop=2>...</marquee>移动次数   

  <marquee width=180>...</marquee>设定宽度   

  <marquee height=30>...</marquee>设定高度   

  <marquee bgcolor=FF0000>...</marquee>设定背景颜色   

  <marquee scrollamount=2>...</marquee>设定移动速度数值   

  <marquee scrolldelay=200>...</marquee>设定移动时间 

    <marquee scrolldelay=300 scrollamount=100>插入文字</marquee>移动停顿

    <body background="背景图片地址" body bgproperties=fixed>固定背景不随滚动条滚动

     <marquee 属性=属性值> 滚动内容 </marquee>

     移动速度指令是:scrollAmount=#    #最小为1,速度为最慢;数字越大移动的越快。
     字符移动每步的延时:scrolldelay=#    属性值为数字, #最小为1, 数值越大速度越大,反之亦然。
     移动方向指令是:direction=#          up向上、down向下、left向左、right向右。
     属性值为scroll:文字单向移动,side:移动到边界停止,alternate:到边界后反向移动;
     align,对齐方式,其属性值为center,left,right,top, middle, bottom,分别表示居中,左对齐,     右对齐,对齐上沿、中间、下沿;
     bgcolor,移动字符的背景色,属性值为颜色代码,可以是rrggbb 16 进制数码,r=red,g=green,     b=blue,也就是色彩中的三原色,也可是预定义色彩;
     loop,移动字符的循环次数,属性值为数字,若未指定则循环不止(infinite);
     width及height,文字高度和宽度,以象素为单位,属性值为数字;
     hspace字符左右留白长度,属性值为数字;
     vspace字符上下留白长度,属性值为数字;
scrollamount字符的移动速度,属性值为数字,数值越大速度越大,反之亦然;

 

     常用的代码语句:

1、左到右代码(走马灯):<marquee>写上你想写的字</marquee>

2、可以控制速度的代码<marquee direction=up scrollamount=3>插入文字</marquee> 

3、带有框的移动文字代码:<marquee direction=up behavior=scroll width=400 height=150 scrolldelay=80 scrollamount=1>插入文字(图片等)</marquee>

移动代码各参数详解:

       1)direction=移动方向,表示向上(up),向下(down),向左(left),向右(right); 

2)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,

建议设为1~3比较好。

3)width和height,表示滚动区域的大小,width是宽度,height是高度。

特别是在做垂直滚动的时候,一定要设height的值。

4)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

5)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。

通常scrollDelay是不需要设置的。

6)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate

(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动) 

基本形式<marquee behavior= alternate>插入文字</marquee> 

说明:behavior=alternate  左右来回走;

      behavior=scroll  从右往左重复着;

      behavior=slide  从右往左只走一次。 

 

4、给滚动字幕加超链接的代码。这跟平时的超链接是完全一样的。只要在文字外

面加上<a href=***>和</a>就可以了。

代码是:

<marquee scrollAmount=2 width=300>

<a href=http://ysh6766.blog.163.com/>梦中人梦工场</a></marquee>,

点击“梦中人梦工场”就可以进入了.

梦中人梦工场

    5、交替移动效果代码:

<marquee scrollAmount=2 width=300 behavior=alternate>欢迎您来到梦工场

</marquee>

    6、向右移动代码:<marquee scrollAmount=2 width=300 direction=right>

欢迎您来到梦工场</marquee>   

    7、向上移动代码:<marquee scrollAmount=2 height=100 direction=up>

欢迎您来到梦工场</marquee>   

    8、向下移动代码:<marquee scrollAmount=2 height=100 direction=down>

欢迎您来到梦工场</marquee>

    9、多行向上移动代码:<MARQUEE scrollAmount=2  direction=up

behavior=alternate height=200><MARQUEE scrollAmount=2 direction=up

 height=100>锄禾日当午,<br>汗滴禾下土:<br>谁知盘中餐,<br>

粒粒皆辛苦。</MARQUEE></MARQUEE>

  锄禾日当午,
         汗滴禾下土:
         谁知盘中餐,
         粒粒皆辛苦。

 

  10、有底色移动文字的代码 

<font color="#ff0000"><marquee direction="left" style=

"background: #FFCC00" >你的文字</marquee></font> 

 说明:color="#ff0000" 文字颜色;

       background: #FFCC00 背景颜色; 

       behavior=slide 从右往左只走一次。 

滚动红色字特效代码

<marquee width="650" height="60"><font color="red">

请输入你想要的文字</font></a></marquee>

  11、带虚线边框移动文字的代码 

<marquee style="border:1px dotted #CC0066 ">你的文字</marquee> 

 

 12、文字向两边分开移动的代码 

<FONT color=#00F5FF face=隶书 size=7><MARQUEE height=50

 width=240>祝您浏览快乐

</FONT></MARQUEE><FONT color=#C0FF3E face=隶书 size=7>

<MARQUEE direction=right

height=50 width=240>乐快览浏您祝</MARQUEE></FONT></FONT> 

说明:在用这种效果时,文字移动范围的宽width的取值很重要,两段

文字移动范转的width取值和一定要小于背景层width。

 

  13、文字上下跳跃移动的代码 

<MARQUEE behavior=alternate direction=up height=150 scrollAmount=5>

<MARQUEE

behavior=altrnate scrollAmount=2 width=460 <IMG>

 <FONT color=red face=楷体_gb2312

size=7>欢迎光临我的博客</FONT></MARQUEE></MARQUE></MARQUEE>

 

   14、图片上加飘动文字特效代码

<table align=center border=3 bordercolor="#CD5C5C" width=520

 height=350><td background=http://img1.bimg.126.net/photo/NuwSRqK-Qvn68X9_FgeuiQ==/327355397915660697.jpg><marquee behavior=alternate scrollamount=3

direction=down height=350><marquee behavior=alternate scrollamount=3

width=500><img   src=http://img10.bimg.126.net/photo/kLQt4UKrIsePFYvtiQPMxQ==/2857815438543782364.jpg><font color=red size=6><b>请输入你想要的文字

</b><img  src=http://img10.bimg.126.net/photo/kLQt4UKrIsePFYvtiQPMxQ==/2857815438543782364.jpg></font></marquee></table><br>

效果:

html代码基础汇编 - 梦中人  - 梦中人の梦工场请输入你想要的文字 html代码基础汇编 - 梦中人  - 梦中人の梦工场

15、飘动的字特效代码

<P align=center>

<MARQUEE scrollAmount=12 direction=center behavior=alternate>

<MARQUEE direction=up behavior=alternate width=400 height=400>

<P align=center><IMG

src="http://members12.tsukaeru.net/rose/0sozai/2cut/ico/50-01/s012.gif">

</P><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=000000);

WIDTH: 160%;

COLOR: #4d4dff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">

请输入你想要的文字</FONT></MARQUEE></MARQUEE></P>

 


 四  、特效字体代码

1、一般大字体的代码  

<P align=center><font style=font:40pt  face=隶书 color=#ff0000>

插入文字</font> 

说明:align=文字位置 表示字体居中(center),居右(right),

居左(left);

font:40pt 数值越大文字就越大;face=字体  常用字体为:宋体、黑体、

楷体.、仿宋、新宋体、细明体等;

 color=颜色代码。

  2、文字竖向排列的代码 

<DIV style="LAYOUT-FLOW: vertical-ideographic">

<P>你的文字

<P>你的文字</P></DIV>  

 3、带尾晕文字的代码 

<CENTER><FONT color=#0099ff style="FILTER: blur(add=1,

direction=40,

strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; ;

LINE-HEIGHT: 150%;

WIDTH: 450px">

欢迎光临梦中人の梦工场</FONT></CENTER> 

4、抛射字体代码:

<DIV align=center>
<DIV style="FILTER: shadow(color=#00FFff, strength=40); WIDTH: 750px;

 HEIGHT: 100px"><FONT style="FONT-WEIGHT: normal;

FONT-SIZE: 50pt; LINE-HEIGHT:

normal; FONT-STYLE: normal; FONT-VARIANT: normal">
<P style="TEXT-JUSTIFY: inter-ideograph; TEXT-ALIGN: justify"

 align=center><FONT

 color=#ff00ff><FONT align="center"><FONT face=楷体_GB2312>

欢迎光临梦中人の梦工场</FONT></FONT>

说明:FONT-SIZE: 30pt  数值越大文字就越大 ,放在日志的最后最好 

 5、空心文字的代码 

<CENTER><FONT style="COLOR: #e4dc9b; FILTER: shadow(color=black);

FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%;

 WIDTH: 100%">

<B>欢迎光临梦中人の梦工场</B></FONT></CENTER> 

说明:FONT-SIZE: 30pt  数值越大文字就越大  

 

6、凹体文字的代码 

<DIV style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px;

FONT-SIZE: 15px; PADDING-BOTTOM: 20px; OVERFLOW:

hidden; WIDTH: 300px; LINE-HEIGHT: 18px;

PADDING-TOP: 20px; BACKGROUND-COLOR: #eeeeee;

 WORD-WRAP: break-word">

<FONT disabled>我凹下去了吧?<BR>你不想试试吗?</A></FONT> </DIV> 

   7、带尾晕的移动文字代码:

<MARQUEE style="FILTER: shadow(color=#00FF33, strength=8);

WIDTH: 715px;

HEIGHT: 106px" scrollAmount=10 DIV><FONT style="LINE-HEIGHT: normal;

FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 40pt;

FONT-WEIGHT: normal" color=#33ffff face=华文彩云>带着盈盈思念,

带着温馨祈愿,远方的你是否无恙?在这个思念的季节里。

真心祝愿你开心快乐!</FONT> <BR></MARQUEE>

效果: 带着盈盈思念,带着温馨祈愿,远方的你是否无恙?在这个思念的季节里。真心祝愿你开心快乐!

 8、表格文字的代码 

<div align="center">

<table cellspacing="1" cellpadding="0" width="50%" bgcolor="#FF0000"

border="0"><tbody>

 

<tr bgcolor="#FFFFFF" height="20">
 
        <td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

 

<tr bgcolor="#FFFFFF" height="20">

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>
 
    <tr bgcolor="#FFFFFF" height="20">
     <td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>


    
<tr bgcolor="#FFFFFF" height="20">

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>
 
     <tr bgcolor="#FFFFFF" height="20">

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>
 
<tr bgcolor="#FFFFFF" height="20">

</tr></table></div>

 

说明:1)每排几个表格内容,可根据自己的需要或版面要求任意设置,

只要在<tr bgcolor="#FFFFFF" height="20">的后面增加或减少

<td><div align="center">表格内容</div></td>即可;

     2)文字及细线条的颜色bgcolor="#FF0000"也可根据自己的需要进行更改。

表格代码语法:

     width="400" 表格宽度,接受绝对值(如 80)及相对值(如 80%)。
     border="1" 表格边框的厚度。
     cellspacing="2" 表格格线的厚度
     align="CENTER" 表格的摆放位置(水平),可选值为: left, right, center
     valign="TOP". 表格里内容的对齐方式(垂直),可选值为: top, middle, bottom。
     background="myweb.gif" 表格的背景图片,与 bgcolor 不要同用。
     bgcolor="#0000FF" 表格的底色,与 background 不要同用
     bordercolor="#CF0000" 表格边框颜色
     bordercolorlight="#00FF00" 表格边框向光部分的颜色 
     bordercolordark="#00FFFF" 表格边框背光部分的颜色,

      使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
      cols="2" 表格栏位数目,只是让浏览器在下载表格时先画出整个表格而已。

<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)   

<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)   

<table cols=参数>...</table>指定表格的栏数   

<table frame=参数>...</table>设定表格外框线的显示方式   

<table width=宽度>...</table>指定表格的宽度大小(使用数字)   

<table height=高度>...</table>指定表格的高度大小(使用数字)   

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)   

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)   

<!>分割窗口   

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整   

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整   

<frameset cols="20%,*">分割左右两个框架   

<frameset cols="20%,*,20%">分割左中右三个框架   

<分割上下两个框架   

<frameset rows="20%,*,20%">分割上中下三个框架      

  插入文字总说明 

1、调整字体大小:

文字前添加:<font size=#> ,文字后添加</font>,其中 #=1, 2, 3, 4, 5, 6, 7 ;

从1到7表示字体由小到大,从这些数字里选择合适的一个代替#即可,可逐个

试试,观察效果最后选定。如果想文字再大,可以试用css语句

style="FONT-SIZE: 400pt"

替换size=字号语句,其中400t 可以换,如换成500t,文字可达到无限大.

但是有一些论坛不支持这种特效代码,必须先试后用. 

2、调整字体色彩:文字前添加<font color=#>,文字后添加</font> ,

其中#=Black,

Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White,

Green, Purple, Silver, Yellow, Aqua 等不同的色彩,可从它们当中选择

满意的一种色彩代替#即可,逐个试试观察效果最后选定。  

10、 带框文字特效代码

<font color=#02B452

style="border-color=#FF0000;border-top-style:outset;

border-bottom-style:out

set;border-right-style:outset;border-left-style:outset">修改你要的字</font>

提示:这些符号是边框类型(修改代码中可修改,不过建议上下左右边框

用同一种效果)

double 表示边框样式为:双线

groove 表示边框样式为:3D凹槽状

dotted 表示边框样式为:点线

inset 表示边框样式为:3D内嵌边框

outset 表示边框样式为:3D外嵌边框

ridge 表示边框样式为:3D凸脊状

dashed 表示边框样式为:虚线

solid 表示边框样式为:实线

 


五、图片代码基础 

1.基本代码

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

2.给图片加边框

<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00>

<tr><td>

<img src=图片网址 width=600 height=407></td></tr></table>

图片代码说明:

<img src="name"> 添加一个图像
       <img src="name" align=?> 排列对齐一个图像:左中右或上中下
       <img src="name" border=?> 设置围绕一个图像的边框的大小

border="6" 表格边框的厚度

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

cellPadding=1 表格格线内厚度

borderColor=#841A00 边框色彩

table></table> 创建一个表格

<tr></tr> 开始表格中的每一行

<td></td> 开始一行中的每一个格子

3,留言贴图片
   <P align=center><A href="
http://ysh6766.blog.163.com" target=_blank>

<IMG alt=梦中人拜访朋友 src="图片地址+"></A></P> 

4、图片朦胧效果

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>

C.椭圆效果

代码: <IMG src="图片" style="filter:Alpha(opacity=100,

finishOpacity=0,style=2)" width=500 height=375>

5、几种特殊效果

黑白效果:  <center><img src="图片网址" style="filter:'gray'"></center>

X光效果(底片):<center><img src="图片网址" style="filter:'xray'"></center>

浮雕效果:  <center>

<img src="图片网址" style="filter:progid:DXImageTransform.Microsoft.Emboss()">

</center>

上下颠倒: <center><img src="图片网址" style="filter:flipv">

左右颠倒  <center><img src="图片网址" style="filter:fliph"></center>

色彩颠倒:  <center><img src="图片网址" style="filter:invert"></center>

粒状阴影:  <center>

<img src="图片网址" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)"></center>

水波效果:(风吹)<center>

<img src="图片网址" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>

静态倒影<P align=center><IMG height=高度 src="图片地址" width=宽度><BR>

<IMG style="FILTER: wave
(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()"

height=高度 src="图片地址" width=宽度> </p>

6、图片显示的友情链接代码

<marquee behavior="scroll" direction=right width="100%" 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>

<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>

<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>

<a target="cont" href="对方地址"><img src="对方图片" width="100"

 height="100"  border="0"></a></marquee>


 

六、图片移动代码 

1.向左移动 代码:

<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src="

http://img.bimg.126.net/photo/uru9ytC86wKpeUsqtG2JdA==/2012264608505334824.jpg">

<img border="0" src="

http://img.bimg.126.net/photo/Pel3OoE6weQoTBYoI-ShOw==/4587760645407682725.jpg">  

<imgborder="0"

src="  

http://img.bimg.126.net/photo/ch6UGzaL0wSdp6e4anBZwA==/4835740099889524772.jpg">

</marquee>

2、向右移动

<marquee direction=right> <img border="0"src="  

http://img.bimg.126.net/photo/ch6UGzaL0wSdp6e4anBZwA==/4835740099889524772.jpg">

 <img border="0"src="http://img.bimg.126.net/photo/Pel3OoE6weQoTBYoI-ShOw==/4587760645407682725.jpg "> </font></marquee>

3、向下移动:

<marquee direction=down scrollamount=5><center><font color=0000ff

size=5 face=华文行楷><b>向下移动</b></font><br>

<img src=

"http://img.bimg.126.net/photo/ch6UGzaL0wSdp6e4anBZwA==/4835740099889524772.jpg"  width=90 height=90></marquee>

4、来回移动
<marquee width=100% behavior=alternate scrollamount=10>

<img src=

http://img.bimg.126.net/photo/ch6UGzaL0wSdp6e4anBZwA==/4835740099889524772.jpg

</font></marquee>

5.从下往上滚动代码:

<marquee align=center direction=up scrollamount=1 scrolldelay=3

valign=middle behavior="scroll">

<img border="0" src=

" http://img.bimg.126.net/photo/zLZSw_yU5XsJtoRbNw-LAw==/1474928877964258075.jpg">

<img border="0" src=

" http://img.bimg.126.net/photo/zLZSw_yU5XsJtoRbNw-LAw==/1474928877964258075.jpg">

</marquee>

6、从上下向中间移动代码:

 <MARQUEE scrollAmount=2 direction=down><DIV align=center>

<IMG src=

"http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br>

<IMG src=

"http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br>

<IMG src=

"http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br>

 <IMG src=

"http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br>

<IMG src=

"http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br>

</DIV> </MARQUEE> <MARQUEE style=" FILTER: flipv(enabled=1)" scrollAmount=2 direction=down>

 <DIV align=center><IMG src="http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br> <IMG src="http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br> <IMG src="http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br> <IMG src="http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br> <IMG src="http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br></DIV>

</MARQUEE>

7、从中间向上下移动代码:

<DIV align=center> <MARQUEE scrollAmount=2 direction=up><DIV align=center><IMG src="http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br><IMG src="http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br> <IMG src="http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br> <IMG src=“http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg“><br><br> <IMG src="http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br></DIV>

</MARQUEE> <MARQUEE style="FILTER: flipv(enabled=1)" scrollAmount=2 direction=up> <DIV align=center><IMG src="

http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br>

<IMG src=

"http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br>

 <IMG src=

"http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br>

 <IMG src=

"http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br>

<IMG  src=

"http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg==/2254896038429471197.jpg"><br><br></DIV>

</MARQUEE> 

8、对开移动代码

<TABLE cellSpacing=0 cellPadding=0 width=500 align=center border=0>

<TBODY> <TR> <TD align=middle> <MARQUEE scrollAmount=1

scrollDelay=100 direction=right width=120>

<IMG src="

http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg

==/2254896038429471197.jpg">

</MARQUEE></TD> <TD align=middle> <MARQUEE scrollAmount=1 scrollDelay=100 width=120>

<IMG src="

http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg

==/2254896038429471197.jpg">

</MARQUEE></TD>

<TD align=middle>

 <MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=120>

<IMG src="

http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg

==/2254896038429471197.jpg">

</MARQUEE></TD>

<TD align=middle>

<MARQUEE scrollAmount=1 scrollDelay=100 width=120>

<IMG src="

http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg

==/2254896038429471197.jpg">

</MARQUEE></TD></TR>

 

9、中间向两边移动:

 

 

 

    <center><br>

<marquee width=220 height=350>

<img    src=http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg

==/2254896038429471197.jpg  width=90 height=150></marquee>

<marquee  direction=right width=220 height=350>

<img  src=http://img.bimg.126.net/photo/kN1qKB3eNmMSkYBM1ftVhg

==/2254896038429471197.jpg  width=90  height=150> </marquee>

</font></center>

注: 各参数详解:

a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,

建议设为1~3比较好。

b)width和height,表示滚动区域的大小,width是宽度,height是高度。

特别是在做垂直滚动的时候,一定要设height的值。

c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。

通常scrollDelay是不需要设置的。

e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate

(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)


七、贴flash代码

1、贴flash基础代码1: <embed src="flash地址" width="宽度" height="高度">

贴Flash基础代码2:

<TABLE align=center><EMBED src=Flash动画地址 width=500 height=400 type=application/x-shockwave-flash wmode="transparent"></EMBED></TABLE>

2、加边框贴flash的代码

<TABLE height=300 cellSpacing=0 cellPadding=0 width=400 background=http://olcf.16789.net/domName/olcf/200642812224314758.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src= 
http://podmedia.imhb.cn/uploadpodmedia/2008/7/6/2008070613033_41877.swf      width=400 height=300 type=application/x- tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent" shockwave-flash> </P></TD></TR></TBODY></TABLE>

     3、图片加3层flash的代码

 
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=6 width=6 align=center>
<TBODY>
<TR>
<TD>
<P style="TEXT-INDENT: 2em" align=center>
<TABLE border=0>
<TBODY>
<TR>
<TD width=580 background=http://img8.bimg.126.net/photo/lPBnWjJve6T31EIikEw3-A==/2325546257584720989.jpg  
 height=300>
<P></P>
<P style="TEXT-INDENT: 2em"><EMBED style="FLOAT: right " align=right  src=http://xuanfei.cctv118.com/2009fla/161.swf width=100 height=100 type=application/octet-stream quality="high" wmode="transparent"></EMBED> <EMBED align=right src=http://imgfree.21cn.com/free/flash/16.swf width=580 height=300 type=application/octet-stream quality="high" wmode="transparent"></EMBED> <EMBED style="DISPLAY: block; TEXT-ALIGN: center" align=right src=http://webftp.bbs.hnol.net/shuchang/015fengye/09122019306376538d1ab1432c.swf width=580 height=300 type=application/octet-stream quality="high" wmode="transparent"></EMBED></P></TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE>

效果:

4、图片做背景+FLASH
 举例:加框有一层FLASH的图片
<TABLE height=300 cellSpacing=0 cellPadding=0 width=400

background=http://olcf.16789.net/domName/olcf/200642812224314758.jpg border=1

bortercolor="#000000"><TBODY><TR><TD>
<P align=center><EMBED src=http://imgfree.21cn.com/free/flash/4.swf width=400 height=300

 type=application/x-

shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash">

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

       
  5、FLASH为背景发表文章的方法

<CENTER><EMBED style="LEFT: 10px; ; TOP: -70px" align=right

src=http://imgfree.21cn.com/free/flash/100.swf width=700 height=400

type=application/x-shockwave-flash

quality="high" wmode="transparent"></CENTER>你的文章


<CENTER><EMBED style="RIGHT: 10px; ; TOP: -70px" align=right

src=http://imgfree.21cn.com/free/flash/69.swf width=500 height=500

type=application/x-shockwave-flash

wmode="transparent" quality="high" ;></CENTER>

补充说明:代码中RIGHT: 10px,TOP: -70px为透明flash的位置。10px表示10像素。
只要改变数值,就能改变flash的位置了。
width=1095 height=1198 表示flash的大小。

6、图片加透明FLASH加移动的文字

<P align=center><TABLE height=350 cellSpacing=3 borderColorDark=#fff000 cellPadding=0 width=500 borderColorLight=#fff000 background=http://www.ruiheda.com/bbs/UploadFile/2005-12/2005123121365067340.jpg border=12><TBODY><TR><TD><EMBED

align=right src=http://s5.edmin.cn/a/eadd996d8be6bb3a2af6849c5bc5e557.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;> <BR><P align=center><MARQUEE scrollAmount=2 direction=up width=500 height=250><CENTER><FONT face=隶书 color=#ff00ff size=6>祝新年快乐!<BR></FONT></CENTER></MARQUEE></P></TD></TR>

</TBODY></TABLE>


   
八、给日志作封面的技术

将日记写完未发表前,在面板下面点击《其他设置》,在出现的《摘要》里(大方框中)将下面的代码粘贴进去:

<A href="该篇日记的地址" target=_blank><IMG  src="要使用的图片的地址" ></A>

1.用你的日记地址替换代码中的该篇日记的地址;用图片地址替换要使用的图片的地址。

2.该篇日记的地址要在日记发表后才能取得,在你的电脑最上面的地址栏中;

3.图片地址的取得,选中你要用的图片用右键点击图片,在弹出框中点击属性,

在新的弹出框中的地址栏里面复制地址。回来将地址粘贴到【要使用的图片的地址】上。

4.发表日记该图片就会在首页显示。当然,你需要将你的“日志设置”,选择“摘要”显示.

九、首页语音代码 

<EMBED  style="FILTER: alpha(opacity=0,style=3)" src="http://www.trueme.net/bb_midi/welcome.wav" width=0 height=0 type="audio/mpeg" loop="0" autostart="true" showstatusbar="1" volume="0"></EMBEDv>  

说明 :代码可放在首页任何一块模块中所有代码的最后,不需专门的自定义模块。对放入该模块中原有代码内容也不会有任何响。成功后,打开首页就会听到美女甜甜的“欢迎光临”。

十、音乐播放器代码

一).帖歌时不隐藏播放器

1、自动播放

<embed src="网址" height="300" width="450" autostart="true" loop="true"> 

2、点击后播放

<embed src="网址" height="300" width="450" autostart="false">

二}.帖歌时隐藏播放器且自动播放:

<embed src="背景音乐网址" hidden="true" autostart="true" loop="true">

三}.不必管它是mms.http.rtsp,只要看尾缀是asf、wma、wmv、wmv、rm都可适用下面的代码:


<EMBED height=200 src=音乐文件地址 type=audio/x-pn-realaudio-plugin width=200 autostart="true" controls="IMAGEWINDOW,ControlPanel,StatusBar" console="Clip1"></EMBED>

说明:一般用来插入mp3 rm ra ram asf mid 等音乐文件,如果要隐藏播放器,把width和height的数值改成0或者1就可以了。


1.EMBED src=歌曲地址 volume="100" width=39 height=18 hidden="FALSE" autostart="fault" type="audio/x-pn-realaudio-plugin" controls="PlayButton">

2.EMBED src="歌曲地址" width="39" height="18" autostart="true" hidden="false" loop="infinite" align="middle" volume="100" type="audio/x-pn-realaudio-plugin" controls="PlayButton" autostart="true">

常用属性如下:  

autostart=true
是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。

loop="true"
是否自动反复播放。true 是, false 否。
可设置播放次数,用具体数字代替即可,比如我希望它播放两次,则loop="2"  loop="-1" 表示无限次循环播放。

HIDDEN="true"
是否完全隐藏控制画面,true 为是,no 为否 (内定)。

STARTTIME="分:秒"
设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。

VOLUME="0-100"
设定音量的大小,数值是0到100之间。内定则为使用系统本身的设定

WIDTH="整数" 和 HIGH="整数"
设定控制面板的高度和宽度。(若 HIDDEN="no")

ALIGN="center"

设定控制面板和旁边文字的对齐方式,其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom >

CONTROLS="smallconsole"
设定控制面板的外观。预设值是 console。
console 一般正常面板   
smallconsole 较小的面板   
playbutton 只显示播放按钮   
pausecutton 只显示暂停按钮   
stopbutton 只显示停止按钮   
volumelever 只显示音量调节按钮

四、随机播放音乐的背景音乐代码:每刷新一次,变换一种音乐。

<script src="http://www.zzsky.cn/code/bgmusic/bgmusic.js"></script>

 

十一、贴视频

网易博客提供了两种添加视频的方法:一种是直接插入视频,另一种是添加视频代码。两种方法的效果是一样的。对于添加视频代码的方法,几乎适用于一切支持网页(HTML)代码的博客和自助式网站。视频可以加在日志里,也可以加在首页上。详细内容请看视频,这里只作简单介绍。

如果在日志里插入视频,那么点击右上角的小电视图标,弹出一个添加音乐、视频的对话框将视频地址粘贴过来即可,然后单击“高级选项”,添入视频的宽度和高度,56视频的宽为450、高为390。最后选择在日志中的位置并单击“确定”。

如果在日志里添加视频代码,那么点击左下角的“<>”的小方块。进入显示HTML代码的状态,然后把5代码粘贴过来就OK了。以下是代码:

<embed src=视频网址 type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,

StatusBar AutoStart=true Loop=true  width=400 height=400> 

设置和音乐一样"true"为自动播放,"false"为不自动播放,宽度width和高度height都可以自定义。

十二、访问者停留时间代码

<P style="TEXT-INDENT: 2em" align=center>您在这里已经停留了 </P>
<P style="TEXT-INDENT: 2em" align=center><IMG title="" border=0 alt="" src="
http://img.blog.163.com/photo/R4935mmpwKINkWFxUNW0Bw==/481885160129066671.jpg"> <IMG title="" border=0 alt="" src="http://img.blog.163.com/photo/iQ3i5ki6kZ43B4MGBifLFA==/448108162923778954.jpg"> <IMG title="" border=0 alt="" src="http://img.blog.163.com/photo/9wwg3OA6DHVDLK-lmHd-dw==/468655836223662317.jpg"> <IMG title="" border=0 alt="" src="http://img.blog.163.com/photo/wT4M7HsN9k5VWuj0vv53Qg==/455989462271682251.jpg"> <IMG title="" border=0 alt="" src="http://img.blog.163.com/photo/PdrmXNWHr7lWnaDwffVOiA==/1151514129723468709.jpg"> 


您在这里已经停留了

html代码基础汇编 - 梦中人  - 梦中人の梦工场 html代码基础汇编 - 梦中人  - 梦中人の梦工场 html代码基础汇编 - 梦中人  - 梦中人の梦工场 html代码基础汇编 - 梦中人  - 梦中人の梦工场 html代码基础汇编 - 梦中人  - 梦中人の梦工场 
          返回首页            下一页   

 动画百鸟园  

 博客顶栏动态图片     

      博客顶栏图片(人物)       

   博客素材和实用代码汇总     

 博客技巧、素材、和现成精品代码       更多代码    

  代码效果在线运行检测

  评论这张
 
阅读(25)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017