前台设计——常用HTML代码（持续更新）

前段时间参与老师的一个侧重于前台项目，深入了解点前台的知识，下面是关于HTML常用代码的汇总。

一、文字标记

基本代码如下：

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

具体调整方案：

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

a.字体大小 <font size=#>..........</font> #=1~7；数字愈大字也愈大  常用字体   为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等

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

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

2.粗体字 <b>..........</b>或者<STRONG>..........</STRONG>

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

4.分段标记 <p>

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

5.区隔标记 <DIV>

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

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

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

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

6.分隔线 <hr>

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

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

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

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

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

e.实心分隔线 <hr noshade>

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

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

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

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

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

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

e.<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</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标签里的文字在移动时，MOUSE移动上时，文字静止不动，离开后继续移动

<marquee aligh=center direction=up behavior=scroll height=97 hspace=3 

scrollamount=1 Scrolldelay=60 width=150 VSpace=2 loop=-1 onmouseover='this.stop()'

 onmouseout='this.start()'>

<!-- 此处加入公告内容  -->

</marquee>

    

二、图片标记

<P align=center><img src="http://cry.shidabbs.com/home/bbsjc/images/hanxing2.gif" 

width=180 height=152 border=0></p>

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="说明文字">

三、表格相关

 

<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> 即我们做帖子时的背景,<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定义合并表格的行数，属性值是数字

 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=欲合并栏位数>

四、歌曲标记

在这组代码中，不必管它是mms.http.rtsp，下面的代码: 只要看尾缀是asf、wma、wmv、wmv、rm都可适用

说明：一般用来插入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">

常用属性如下：

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

五.透明FLASH的使用

 

常用代码如下：

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

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

七.html添加超链接

     <ahref="http://www.baidu.com">百度</a>

     <ahref="http://blog.csdn.net" target="_blank">

     _blank --在新窗口中打开链接

   _parent --在父窗体中打开链接

   _self --在当前窗体打开链接,此为默认值

   _top --在当前窗体打开链接，并替换当前的整个窗体(框架页)

  一个对应的框架页的名称 --在对应框架页中打开

八.展开收起效果的实现

<precode_snippet_id="296108"snippet_file_name="blog_20140422_3_900675" name="code"class="html"><!DOCTYPE html>

<html>

<head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

                 .content{

                          width: 300px;

                          position: relative;

                          padding-right: 20px;

                 }

                 .content a.handle{

                          display: block;

                          width: 0;

                          font: normal 0/0"";

                          height: 0;

                          padding: 0;

                          border-top: 8px solid#fff;

                          border-right: 8pxsolid #fff;

                          border-bottom: 8pxsolid #000;

                          border-left: 8px solid#fff;

                          position: absolute;

                          right: 0;

                          top: 0;

                          margin-top: -4px;

                 }

                 .content a.handle.toggle{

                          border-top: 8px solid#000;

                          border-bottom: 8pxsolid #fff;

                          margin-top: 4px;

                 }

         </style>

</head>

<body>

<pclass="content">

         <span id="inner">人民日报：某省招商团在香港一顿早餐人均1000元·环球时报记者提问加拿大总理被拒 发生推拉场面·北京空中别墅假山解体 15日自行拆除期限将至·河南摔婴警察案后首次公开露面 否认曾被关禁闭·“中石化女处长牛郎门”炮制者被拘·国外科学家发现母体遗传基因影响人体衰老进程</span>

         <a class="handle"href="javascript:;" id="handle">收起</a>

</p>

<scripttype="text/javascript">

         var t = document.getElementById("inner"),

                 txt = t.innerHTML,

                 txt_short=txt.substring(0,18);

         document.getElementById("handle").onclick= function(){

                 if( this.innerHTML == "收起" ){

                          t.innerHTML =txt_short;

                          this.innerHTML ="展开";

                          this.className ="handle toggle";

                 }else{

                          t.innerHTML = txt;

                          this.innerHTML ="收起";

                          this.className ="handle";

                 }

         };

         document.getElementById("handle").onclick();       

</script>

</body>

</html>

九、显示微信公共账号

</div><div id="custom_column_27929431" class="panel">

<ul class="panel_head"><span>我的公众微信号</span></ul>

<ul class="panel_body">

<img src="http://img.my.csdn.net/uploads/201312/14/1387018257_2046.jpg" style="width:180px;height:160px"/>

</ul>