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

飞龙在天网易博客

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

 
 
 

日志

 
 

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表示↓。

