<html> </html>   标志着html文件的开始与结束

<head> </head>  头部标志符

<title> </title>  网页的标题

<boby> </boby> 构成web的主体

1. background   定义网页的背景图案

2. bgcolor   背景色（默认 白）

3. text   文字颜色（默认 黑）

4. link   超链接颜色（默认 蓝）

5. alink  当前被选中的超链接颜色（默认 红）

6. vlink  已被访问过的超链接颜色（默认 紫）

<font> </font>  标志符可以控制字符的样式

1. face 设置文字的字体效果

2. color  设置文字颜色

3. size  设置字体大小

<b></b>   粗体             <strike></strike>  删除线

<big></big>  大字体   <sub></sub>  下标

<i></i>  斜体                 <sup></sup>  上标

<s></s>  删除线           <u></u>  下划线

<small></small>  小字体

<hn></hn>  设置文件中的标题       nj   1~6的数字

<p></p>  (paragraph)划分段落

<pre></pre>  预格式化标志符

<hr>   换行并绘制一条水平线（没有结束标志符）

1. width   水平线长度

2. size   水平线粗细

3. noshade   无阴影

4. align   水平线的对齐方式（left   center   right)

5. color   水平线颜色

<br>   强制换行(没有结束标志符)

<ol>

<li>......</li>

<li>......</li>

.......

</ol>  设置有序列表   li可是1.2.3....或a.b.c....或A.B.C...或i.ii.iii.....或I.II.III....

(两个属性:type  start)

<ul>

<li>......</li>

<li>......</li>

......

</ul>   无序列表 (一个属性:type   disc实心圆 circle空心圆 square方框)

<a></a>  实现超链接

1. href   定义超链接所指向的文档的URL

2. target   目标窗口

3. name   锚名称 （该属性一般在创建页面内超链接时使用)

<a href="/URL"> </a>  使用a标志符创建超链接时，可以使用相对路径（同一网站内的文件），也可以使用绝对路径（指向本站点以外的文件)

<a > </a>

.....

<a href="#锚点名称"> </a>   创建网面内超链接逻辑上分为两步，首先定义锚点，然后再创建指向锚点的超链接

<a href="mailto:电子邮箱地址"> </a>  指向电子邮箱的超链接

<img>  插入图像

1. src   设置被引用的图像文件所在的位置

2. alt   设置图像的简单文字说明

3. width,  height    设置图像的宽度与高度

4. align   对齐方式(left,right,top,bottom,middle)

5. border   边框宽度

6.hspace ,vspace   定义了图像与周围元素的水平和垂直间距

<map >

<area>

<area>

......

</map>

<img src="/"usemap="#图像映射名称"> <map></map>   定义了图像映射的区域

                img通过usemap可以确定与所建立的图像映射区域的关系

                area定义图像不同区域与不同文档之间建立链接

    1. shape   形状(rect矩形 circle圆 poly多边形)

     2. coords   坐标

     3. target   目标窗口

     4. alt   替换文字

<table>

<caption> </caption>

<tr>

<th> </th><th> </th>......

</tr>

<tr>

<td> </td><td> </td>......

</tr>

<tr>

<td> </td><td> </td>

</tr>

......

</table>   table标记符定义表格 caption定义表格标题 tr标记符定义表格的行   th,td标志符定义表格的单元格 th定义表头单元格

table  可以创建一个新的表格

1. width (宽), height (高)

2. border (边框)

3. bgcolor (背景颜色)

4. align (对齐方式left right center)

5. cellpadding (填充距)

6. cellspacing (单元格间距)

7. rules  (分隔线   none无分隔线 groups在行列之间有   rows只有行分隔线   cols只有列 all所有)

8. frame  (边框 void无边框 above只显示顶部边框 below只显示底部边框 hsides只显示顶，底部边框   vsides只显示左右边框 lhs显示左边框 rhs显示右 box显示所有)

<tr> </tr>表行

1. align   对齐方式(left center right)

2. valign   垂直对齐方式 (top middle bottom baseline)

3. bgcolor   背景颜色

<td></td>  表格数据

1. width  (宽), height  (高)

2. align  (对齐方式 left right center)

3. valign    (top middle bottom)

4. bgcolor   背景颜色

5. rowspan   单元表的行数

6. colspan   单元表的列数

<frameset>

<frame>

<frame>

......

<frame>

</frameset>   frameset是将窗口分割成若干个子窗口，子窗口数取决于frame的个数

<frame>   标记符来标识子窗口(无结果符)

1. name

2. src  (源) 设置框架内容的URL

3. frameborder  (框架边框)

4. marginwidth   (框架的左右边距)

5. marginheight  (框架的上下边距)

6. scrolling  (是否显示滚动条 auto自动 yes显示   no不显示)

7. noresize  (不允许调整框架的尺寸)

<a herf="目标文件"target="目标框架名">超链接内容</a>

1. _top   表示将超链接的目标文件装入整个浏览器窗口

2. _self   表示将超链接的目标文件装入当前框架，以取代该框架中正在显示的文件

3. _blank   表示将超链接的目标文件装入一个新的浏览窗口

4. _parent   表示将超链接的目标文件装入当前框架的父框架

<iframe></iframe>  定义了一个页面内的框架

1. src  (源) 设置框架内容的URL

2. name

3. width,height

4. align   (top middle bottom)

5. frameborder  (框架边框)

6. marginwidth  (框架左右边框),  marginheight  (框架上下边框)

7. scrolling  (是否显示滚动条 auto yes no)

<form></form>  表单

1. method  (方法) 定义表单的提交方式

2. action  (动作) 指定表单所对应的处理程序

<input>   定义了一个用于用户输入的表单元素(无结束标记符)

1. name  标识表单元素

2. type  指定表单元素的类型(text文本 password密码 checkbox复选框 radio单选框 submit提交按钮 reset重置按钮)

<input type="text">  将type指定为text,在浏览器中显示一个文本输入框，供用户输入信息

1. value   (初始值)

2. size   (尺寸)

3. maxlength  (输入文本的最大字符数)

<input type="password">  密码文本框

例:<form>

密码:<input type="password"size="10"maxlength="15">

</form>

<input type="checkbox">复选框

例:<from>

<p>你的爱好:</P>

<input type="checkbox"value="music"checked>音乐

<input type="checkbox"value="sports">体育

<input type="checkbox"value="other">其它

</form>

<input type="radio">单选框

例:<form>

<p>公司的人数:</p>

<p><input type="radio">少于10人</p>

<p><input type="radio"checked>10人至100人</p>

<p><input type="radio">100人以上</p>

</form>

<input type="submit">提交按钮

<form>

<input type="submit"value="提交">

</form>

<input type="reset">重置按钮

<input type="image">图像提交按钮

<input type="file">

<input type="buttom">

<input type="hidden">

<textarea> </textarea>  定义一个用于用户多行输入的表单元素

1. name   指定文本域的名称

2. rows   指定文本域的高度

3. cols   指定文本域的宽度

<select>

<option></option>

<option></option>

......

<option></option>

</select>   定义了一个选项列表表单元素

1. name   指定选取项列表的名称

2. size   指定列表选项显示时一次显示选项的数目

3. multiple  使用该属性可以允许多重选择

4. value   指定当该选项被选中并提交后，浏览器传给服务器的数据

5. selected   指定哪一个选项在默认状态下是选中状态

<label></label>  选中该控件

<marquee></marquee>  创建一些滚动字幕

1.direction  (方向 left right up down)

2.behavior  (行为   scroll绕圈滚动 slide只滚一次 alternate来回滚动)

3.loop   (循环)

4.scrollamount  (滚动的速度)

5.scrolldelay  (滚动延时)

6.align  (对齐方式 top middle bottom)

7.bgcolor

8.height,width

9.hspace,vspace  (垂直和水平间距)

<applet>

<param>

<param>

......

</applet>   applet用来在网页中插入一个Java小应用程序对象

1. code  (源代码) 指定Java小应用程序的源代码文件(.class文件)

2. name

3. width,height

4. align

param  用来定义Java小应用程序中的参数

1.name

2.value  (值)给变量赋值

3.valuetype  (值类型 data表示value指定的值将作为一个字符串传递的对象

        ref  表示value指定的值是一个URL

        object  表示value指定的值是一个指向同一文档中一个object的标志符)

4. type  (类型)当valuetype属性的值设置为ref时，此属性指定了URL所代表资源的内容类型

<object>

<param>

<param>

......

</object>   object可以定义很多种不同的多媒体文件

1. classid: 该属性指定了浏览器中用来播放相应多媒体对象的控件ID

2.codebase :定义多媒体文件相对位置的根目录

3.codetype:  指定当下载由classid所指定的对象时使用的数据内容的类型

4.data:  定义多媒体文件的位置

5.type:定义多媒体文件的类型

6.width,height

selector{property1:value1;property2:value2......}  selector 表示需要应用式样的对象

                    property  表示由css标准定义的样式属性

                    value  表示样式赂性的值

例:h2{text-align:center;font-family:楷体_gb2312}

selector.classname{property1:value1;......} 标记符类

.classname{property:value;......} 通用类

#IDname{property:value;......}用户定义ID

虚类

a:link或:link 当超链接末被访问过时，超链接的显示方式

a:visited或:visited 当超链接已经被访问过时，超链接的显示方式

a:active或:active当超链接当前为选中姿态时，超链接的显示方式

a:hover或:hover 当鼠标指针悬停在超链接上时，超链接的显示方式

例:   a:link{color:blue}

长度单位

1.em:它所代表的长度是当前字体中m字母的宽度

2.ex:它所代表的长度是当前字体中x字母的高度

3.px:像素，它是相对于计算机屏幕的分辨率来定义的

in:英寸，1in=2.54cm 1cm=10mm

pt:点,1点=1/72in   pc:帕 1帕=12点

font-family(字体族)

font-family:字体名称 | 字体族名称

例：   p{font-family:黑体，宋体，serif}

font-style(字体风格)

font-style:字体风格名称

例:   p{font-style:oblique}

font-size (字体大小)

font-size:绝对大小 | 相对大小 | 百分比

font-variant(字体变形)

font-varient:字体变形值

1.normal(普通)

2.small-caps(小型大写字母)

font-weight(字体加粗)

font-weight:字体加粗值

1.normal(普通)

2.bold(加粗)

3.bolder(更粗)

4.lighter(更细)

letter-spacing(字符间距)

letter-spacing:数值

text-decoration(文字修饰)

text-decoration:文字修饰效果

1.none 无

2.underline 下划线

3.overline 上划线

4.line-through 删除线

5.bink 闪烁

text-transform(文本转换)

text-transform:文本转换方式

1.none 无

2.capitalize 使所有单词的第一个字母大写

3.uppercase 使所有单词字母都大写

4.lowercase 使所有单词字母都小写

text-align(文本对齐方式)

text-align:对齐方式

1.left

2.right

3.justify 可调整

text-indent(文本缩放)

text-indent:缩放的数值

line-height(行高)

line-height:数值

margin(页边距)

margin:数值

padding(填充距)

padding:数值

例： table{padding:2cm 3cm 5cm}上填充距2cm,左右填充距为3cm,下填充距5cm

border-style(边框样式)

border-style:边框样式

1.none

2.dotted 点线

3.dashed 虚线

4.solid 实线

5.double

6.groove 凹线

7.ridge 凸线

8.inset 内陷

9.outset 外凸

border-color(边框颜色)

border-color: 颜色值

border-width(边框宽度)

border-width:数值

1.thin 细

2.medium 中

3.thick 宽

border(边框)

border:边框样式|边框宽度|边框颜色

常用的HTML代码

 

一、文字标记

基本代码如下：

<P align=center><FONT color=#0066ff face=隶书 size=5>插入文字</FONT></P>

align=center　表示字体居中，可选值为居右（right）居左（left）

color=颜色代码

face=字体　常用字体为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等

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

1.字体变化 <font>..........</font>

a.字体大小 <font size=#>..........</font> #=1~7；数字愈大字也愈大

b.指定字型 <font face="字体名称">..........</font>

c.文字颜色 <font color=#rrggbb>..........</font>

              rr：表红色（red）色码

              gg：表绿色（green）色码

              bb：表蓝色（blue）色码

              rrggbb也可用6位颜色代码数字

2.粗体字 <b>..........</b>

3 字体加粗<STRONG>..........</STRONG>和<b>标签差不多的效果

4.换行（也称回车） <br>

5.分段标记 <p>

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

6.区隔标记 <DIV>

<DIV>称为区隔标记。作用：设定字、画、表格等的摆放位置。

<DIV>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织 能力，有 Class ; Style ; title ; ID 等属性。。

以 <DIV align="center"> 为例：

align="center"

可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。

<DIV align="center"> 的作用和居中标记 <CENTER>一样。。

注：其实常用跟<p>标签的效果差不多，但是功能比<p>相对强一些。。。

7.分隔线 <hr>

a.分隔线的粗细 <hr size=点数>

b.分隔线的宽度 <hr size=点数或百分比>

c.分隔线对齐方向 <hr align="#">

     #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐

d.分隔线的颜色 <hr color=#rrggbb>

e.实心分隔线 <hr noshade>

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

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

     <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字符的移动速度，属性值为数字，数值越大速度越大，反之亦然；

     常用指令举例：<MARQUEE scrollAmount=3 direction=up>..........</MARQUEE>

a.<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=center>啦啦啦，我会移动耶！</marquee>

b.<marquee direction=left>啦啦啦，我从右向左移！</marquee>

啦啦啦，我从右向左移！

c.<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee>

啦啦啦，我一圈一圈绕着走！

d.<marquee behavior=alternate>啦啦啦，我来回走耶！</marquee>

啦啦啦，我来回走耶！

e.<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

啦啦啦，我走一步，停一停！

二、图片标记

1.插入图片 <img src="图形文件名">

2.设定图框 -- border <img src="图形文件名" border=点数>

3.设定图形大小 -- width、height <img src="图形文件名" width=宽度点数 height=高度点数>

4.设定图形上下左右留空 -- vspace、hspace <img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数>

5.图形附注 <img src="图形文件名" alt="说明文字">

例1：

<img src="http://cry.shidabbs.com/home/bbsjc/images/hanxing2.gif" width=180 height=152 border=0>

例2：

<P align=center><img src="http://cry.shidabbs.com/home/bbsjc/images/hanxing2.gif" width=180 height=152 border=0></p>

三、表格相关(我们做帖子背景主要就是表格)

例1：

源代码如下：

<TABLE align=center background="帖子背景图" border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 width="100%"><TBODY><TR><TD>

帖子内容，文字或图片..... </TD></TR></TBODY></TABLE>

1.定义表格 <TABLE> 即我们做帖子时的背景。

2.定义列 <tr> <tr>标志对用来创建表格中的每一行。

3.定义栏位 i.<td>：<td>标志对用来创建表格中一行中的每一个格子，

                       此标志对也只有放在<tr></tr>标志对之间才是有效的，

           ii.<th>：<th>标志对用来设置表格头，通常是黑体居中文字。

a.水平位置 -- align <th align="#">

                  #号可为 left：向左对齐  center：向中对齐 right：向右对齐

b.垂直位置 -- align <th align="#"> #号可为

       top：向上对齐 middle：向中对齐    bottom：向下对齐

c.栏位宽度 -- width     <th width=点数或百分比>

d.栏位垂直合并 -- rowspan    <th rowspan=欲合并栏位数>

e.栏位横向合并 -- colspan      <th colspan=欲合并栏位数>

四、表格的主要属性

例：

<TABLE> 的参数设定（常用）：

<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

1. <table>标记的主要属性

    align定义表格的对齐方式，有三个属性值center，left，right

    background定义表格的背景图案，属性值为图片的地址

    bgcolor定义表格的背景颜色，属性值是各种颜色代码

    border定义表格的边框宽度，属性值是数字

    bordercolor定义表格边框的颜色，属性值是各种颜色代码

    cellpadding定义单元格内容与单元格边框之间的距离，属性值是数字

    cellspacing定义表格中单元格之间的距离

    height定义表格的高度，属性值是数字-----接受绝对值（如 500）及相对值（如 100%）。

    width定义表格的宽度，属性值是数字-----接受绝对值（如 400）及相对值（如 80%）。

    bordercolorlight 表格边框向光部分的颜色

    bordercolordark 表格边框背光部分的颜色，

    使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效,即不能同时使用。

2. <tr>标记，表格是由多行与多列组成的，<tr>标记用来定义表格的一行，他的属性极其属性值定义的是表格中的该行，其主要属性与属性值如下：

    align定义对齐方式，属性值与上同

    background定义背景图案 bgcolor定义背景色

3. <td>标记。用<td>标记概况起来的内容表示表格的单元。其主要属性与属性值和<table>标记的一样，补充两个合并列和行的代码：

    colspan定义合并表格的列数，属性值是数字

    rowspan定义合并表格的行数，属性值是数字

五、歌曲标记:

常用格试如下：

<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="center" volume="100" type="audio/x-pn-realaudio-plugin" controls="PlayButton" autostart="true">

常用属性如下：

src="your.mid"

设定 midi 档案及路径，可以是相对或绝对。

autostart=true

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

loop="true"

是否自动反复播放。LOOP=2 表示重复两次，true 是， false 否。

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 只显示音量调节按钮

例一：

<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>

作为背景音乐来播放，隐藏了播放器。

例二：

<EMBED SRC="midi.mid" loop=true width=145 height=60>

出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。

六.透明FLASH的使用

例：

<TABLE align=center background=http://cry.shidabbs.com/home/bbsjc/images/xin2005.gif border=0 cellPadding=0 cellSpacing=0 height=153 width=244 table>

<TBODY>

<TR>

<TD><EMBED height=143 pluginspage=http://www.macromedia.com/go/getflashplayer src=http://cry.shidabbs.com/home/bbsjc/images/32.swf type=application/x-shockwave-flash width=234 wmode="transparent" quality="high"></EMBED>

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

2层

<EMBED align=right src=http://lain1978.com/collection/flash/fly.swf width=300 height=375 type=application/octet-stream ; quality="high" wmode="transparent" dth="300"><EMBED align=right src=http://www.qtqy.com.cn/flash/hd2.swf width=300 height=375 type=application/octet-stream dth="300" wmode="transparent" quality="high" ;;></EMBED>

常用代码如下：

<P align=center><IMG border=0 height=180 src="产生效果的图片URL地址" width=350></P>

<EMBED style=" ; HEIGHT: 300px" align=right src="透明FLASH连接地址" width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

说明：TOP: 后面的width=400 height=3000 就是指FLASH的宽和高了。

      在使用这种格式时要反复的调整定位距离大小才能达到满意的效果 :)

      align=right 相对背景图片右对齐。。。

注意事项：

大家一定发现这个style标签了吧。。。

这个是做一些特效，如，滤镜效果，文字特效，所用到的标记即CSS（Cascading Stylesheets，层叠样式表）

Style属性可以应用在<meta>标签中，更可广泛应用在<div> <table> <tr> <td> <body> <center> <img> <input> <font> <form> <frame> <label><EMBED><map>等标签中，发贴时注意要将自动修正的勾号去掉,否则效果也出不来。。。

（1） table，tr，td 称为HTML的标签，以双标签的形式出现，所谓双标签，也就是有一个<table>就有一个对应的</table>与之对应，同样适用于其他的双标签。

如：

<TABLE><TBODY><TR><TD><TABLE><TBODY><TR><TD>内容</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

有多少<TABLE><TBODY><TR><TD>打头就得有多少</TD></TR></TBODY></TABLE>收尾，否则就会出错，其他标签适用。。。

（2）全屏效果。

把下列代码加到第一层表格的代码中：style="LEFT: -180px; ; TOP: 90px"

效果如下：

<TABLE style="LEFT: -180px; ; TOP: 80px" cellSpacing=10 align=center background=http://cry.shidabbs.com/home/bbsjc/images/jcbj01.jpg border=0><TR><TD>

这里插入帖子内容。

</td></tr></table>

注：LEFT: -180px 左距，数值越大与左边距离越大。WIDTH: 800px 帖子宽度，一般全屏都是800像素。TOP: 90px" 上距 数值越大与IE上面的距离越大。其中数值都可以自行修改。

（3）我们在HTML模式下编好了帖子，先换到Design先察看，然后点击预览，如无异常即可发帖子，切记将HTML模式旁边的自动修正前面的那个勾勾掉，否则一些特效就出不来，甚至会出现乱码。。。