Html語言代碼標記知識

06-07

好多朋友都剛接觸博客，很多都不會，看著別人漂亮的博客非常羨慕。雖然很多博友在自己的博客里介紹了怎樣製作博客，其實無非就是些代碼翻來覆去的用，至於怎麼用就是差別。要想建好自己的博客，就要先學習Html標示基本知識。下面我把整理的Html標示基本代碼介紹給大家，供大家學習與參考。

一、基本標示代碼

1、<htm>………. </htm> 標記整個文檔

2、<head>……….</head> 標記初始信息,如標題、腳本，主要標記頁頭。包含6種命令：

（1）title 描述文檔名稱、定義網頁標題（字元不能超過60個）

（2）lsindex 表明可對文檔進行檢索

（3）base 顯示文檔的原始URL

（4）Nexted 建立唯一的文檔標示

（5）link 顯示與其他文檔的關係

（6）meta 鑲入任何附加信息

如：<HTML.>

<Head>

</Head>

</HTML.>（1）title 描述文檔名稱、定義網頁標題（字元不能超過60個）

（2）lsindex 表明可對文檔進行檢索

（3）base 顯示文檔的原始URL

（4）Nexted 建立唯一的文檔標示

（5）link 顯示與其他文檔的關係

（6）meta 鑲入任何附加信息

如：<HTML.>

<Head>

</Head>

</HTML.>

3、Body 標記正文。

由<Body>起到</Body>止正文結束。如：

<HTML.>

<Head>

</Head>

</HTML.>

如：<body>指令的屬性

【1】背景顏色 -- bgcolor <body bgcolor=#rrggbb>

【2】背景圖案 -- background <body background="圖形文件名">

【3】設定背景圖案不會捲動 -- bgproperties <body bgproperties=fixed>

【4】文件內容文字的顏色 -- text <body text=#rrggbb>

【5】超連結文字顏色 -- link <body link=#rrggbb>

【6】正被選取的超連結文字顏色 -- vlink <body vlink=#rrggbb>

【7】已連結過的超連結文字顏色 -- alink <body alink=#rrggbb>

4、Hn 標記文檔正文標題

（n=1—6）代表文檔標題級別H1最小，H6最大。

<HTML.>

<Head>

</Head>

</HTML.>

5、Font

(1)、字元標記

< Font>與Face,Size,Color組合指定字體.

如:<Font Face=」Arial,Sans」, Size=」4」, Color=」red」>文字</Font>

（2）、物理字元標記

〈B〉：粗體字〈I〉斜體字〈U〉下劃線

〈SUP〉上標〈SUB〉下標

（3）段落標記

段落標記採用單個標記，沒有結束符，〈BR〉產生回車鍵，〈P〉產生回車和一個空行。

（4）、段落對齊

1 .align 標記對齊屬性，一般有：left左對齊，right右對齊，center居中對齊，justify兩端對齊。

利用align屬性設置的對齊方式只對當前行有效。

<HTML.>

<Head>

</Head>

<Body>

〈p align=left正文第一行〉

〈p align=left正文第二行〉

〈p align=left正文第三行〉

</Body>

</HTML.>

2 .DIV 對齊方式標記,如果有多個段落使用相同的對齊方式,可以不必每一行都用align標記屬性,而用DIV標記,將所需的段落括起來,然後再在DIV中用align設置需要的對齊方式.如:

<HTML.>

<Head>

</Head>

<Body>

<P>正文第一行

〈P>正文第二行

〈P>正文第三行

〈p>正文第三行

</DIV>

</Body>

</HTML.>

3 .Hr 水平標尺標記,<Hr>作用是在標記處在屏幕內劃一條水平線.如:

<HTML.>

<Head>

</Head>

<Body>

<Hr>

<P>正文第一行

〈P>正文第二行

〈P>正文第三行

〈p>正文第三行

</DIV>

</Body>

</HTML.>

這樣就實現了:

正文標題

正文第一行

正文第二行

正文第三行

正文第四行

如：

【1】分隔線的粗細 <hr size=點數>

【2】分隔線的寬度 <hr size=點數或百分比>

【3】分隔線對齊方向 <hr align="#">

#號可為 left：表向左對齊（預設值） center：表向中對齊 right：表向右對齊

【4】分隔線的顏色 <hr color=#rrggbb>

【5】實心分隔線 <hr noshade>

4. width、height標示圖片或文擋的寬度和高度。

6、音樂文件標示

src：音樂文件的URL；

hidden：=true為不可見，=false反之；

type：指定音頻類型；

LOOP：是否循環播放，注意其值置於小角雙引號中；

AUTOSTART：是否自動播放，其值同上

7、貼音樂代碼：

2midi,asf,wma,asx類型的背景音樂代碼：

8、加入連接：

<a href="所要連接的相關地址">寫上你想寫的字</a>

9、在新窗口打開連接：

<a href="相關地址" target="_blank">寫上要寫的字</a>

10、貼flash:

11、貼影視文件：

12、換帖子背景：

13、固定帖子背景不隨滾動條滾動：

14、定製帖子背景顏色：

<body bgcolor="#value">(value值見10)

15、帖子背景音樂：

<bgsound="背景音樂地址" loop=infinite>

二、博客代碼基礎

（一）基本代碼

1、貼圖及圖片效果：

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

（6）.預載圖片

<img src="高解析度圖形文件名" lowsrc="低解析度圖形文件名"> P.S.兩個圖的圖形大小最好一致;

（7）.影像地圖（Image Map） <img src="圖形文件名" usemap="#圖的名稱"> <map name="圖的名稱">

【1】定義形狀 -- shape

shape=rect：矩形 shape=circle：圓形 shape=poly：多邊形

【2】定義區域 -- coords

a.矩形：必須使用四個數字，前兩個數字為左上角座標，後兩個數字為右下角座標

例：<area shape=rect coords=100,50,200,75 href="URL">

b.圓形：必須使用三個數字，前兩個數字為圓心的座標，最後一個數字為半徑長度

例：<area shape=circle coords=85,155,30 href="URL">

c.任意圖形（多邊形）：將圖形之每一轉折點座標依序填入

例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"

圖片的濾鏡效果

準備:插入圖片後進入"代碼"模式,找到插入的圖片代碼域,對其進行修改.

找到相應的代碼.為:

1.透明效果

格式:

涉及到的屬性:修改數值對應即可

opacity:開始處的透明度

finishOpacity:結束處的透明度

style:0,平均透明 1,線狀透明 2,圓形透明 3,菱形透明

2.翻轉效果

左右翻轉格式:

上下翻轉格式:

3.變調效果

灰調格式:

4.X光效果:

色彩對換:

5.邊框效果

發光:(color為發光顏色代碼,strength是發光強度,濾鏡寬=圖寬+發光強度x2

濾鏡高=圖高+發光強度x2+10)

投影:(color為發光顏色代碼,direction方向(只能是45度的倍數如:45,90,135,180,225,270,315度),濾鏡寬=圖寬+25) 濾鏡高=圖高40)

陰影:(color為發光顏色代碼,offX水平位移offY垂直位移(可正可負),濾鏡寬=圖寬+水平位移絕對值+10,濾鏡高=圖高+垂直位移絕對值+20)

模糊:(direction方向(只能是45度的倍數如:45,90,135,180,225,270,315度),濾鏡寬=圖寬+15,濾鏡高=圖高+30)

波形:(freq頻率(>0)strength振幅強度(>0)lightstrength波峰強度(0~100愈高越黑)phase起始相位(0~100),濾鏡寬=圖寬+振幅強度x2

濾鏡高=圖高+振幅強度x2+10)

6.圖片加特效的具體添加部位：

<TBODY>

<TR>

7.文章的背景圖代碼：

在圖片左邊、右邊插入文字：把圖片放在文字的左邊----------<P><IMG height=201 src="圖片連接地址" width_=154 align=left border=0><FONT face=Arial> 文字<BR> </FONT><BR clear=left></P>

把圖片放在右邊-----------------<P><IMG height=201 src="圖片連接地址" width_=154 align=right border=0><FONT face=Arial> 文字<BR> </FONT><BR clear=left></P>

8.把掛件貼在博客里

注意的是這個代碼是帶濾鏡效果的,就是說會將圖片反過來,如果不想帶濾鏡,那麼將代碼里的style="FILTER: FlipH"這段代碼去掉就可以.代碼里的所有RIGHT是管掛件在左或右的,全改LEFT或RIGHT就可以了.TOP:200PX管上下位置.

使用方法與背景音樂,滑鼠的方法一樣,控制面版,新建空白版,勾上源代碼,複製進去代碼,確定.再添加進首頁,調整位置!

9.多幅帶連接的圖片移動：

<marquee scrollamount="1" scrolldelay="60" direction="up" width_="200"

height="230"><div align="center"><a

href="連接的網頁地址" target="_blank"><img

src="圖片的地址" width_="200" border="0" /></a> <a

href="連接的網頁地址" target="_blank"><img

src="圖片的地址" width_="200" border="0" /></a> <a

href="連接的網頁地址" target="_blank"><img

src="圖片的地址" width_="200" border="0" /></a> <a

href="連接的網頁地址" target="_blank"><img

src="圖片的地址" width_="200" border="0" /></a>

......

動作如下：用法只將代碼中direction="up"引號中的文字換成下面的動作代碼簡稱就行。

方法：［例］direction="slide"

slide滑動

scroll預設捲動

alternate來回捲動

down向下捲動

up向上捲動

right向右捲動

left向左捲動

width_=180設定寬度

height=30設定高度

10.虛化圖片代碼:

<TBODY>

<TR>

11.加框有一層FLASH的圖片

<TBODY>

<TR>

<TD>

貼一層Flash的效果：

代碼如下：

<TBODY>

<TR>

貼兩層透明Flash的效果，代碼如下：

貼三層透明Flash效果，代碼如下：

<EMBEDalign=right src=http://imgfree.21cn.com/free/flash/4.swf width_=450 height=300 type=application/x-shockwave-flash wmode="transparent" quality="high">

2、文字效果

移動字體

移動速度指令是: 最小為1，速度為最慢；數字越大移動的越快。

移動方向指令是：direction=# up向上、down向下、left向左、right向右。

指令舉例：<MARQUEE scrollAmount=3 direction=up>..........</MARQUEE>

走馬燈：

<marquee >寫上你想寫的字</marquee>

字體加粗：

<b>寫上你想寫的字</b>

字體斜體：

<i>寫上你想寫的字</i>

字體下劃線:

<u>寫上你想寫的字</u>字體刪除線: <s>寫上你想寫的字</s>

字體加大:

<big>寫上你想寫的字</big>

字體控制大小：

字體變化 <font>..........</font>

<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)

【1】字體大小 <font size=#>..........</font> #=1~7；數字愈大字也愈大

【2】指定字型 <font face="字體名稱">..........</font>

【3】標題文字 <h#>..........</h#> #=1~6；h1為最大字，h6為最小字

更改字體顏色：文字顏色 <font color=#rrggbb>..........</font>

rr：表紅色（red）色碼

gg：表綠色（green）色碼

bb：表藍色（blue）色碼

rrggbb也可用6位顏色代碼數字

<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進位)之間

換行：<br>

段落：<p>段落</p>

原始文字樣式：<pre>正文</pre>

消除連接的下劃線：

<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

文字的對齊方向 <p align="#"> #號可為 left：表向左對齊（預設值） center：表向中對齊 right：表向右對齊 P.S.<p align="#">之後的文字都會以所設的對齊方式顯示，直到出現另一個<p align="#">改變其對齊方向，遇到<hr>或<h#>標籤時會自動設回預設的向左對齊。

文字效果代碼：

文字從背景中飛出來而且不影響本來的頁面

把如下代碼加入<body>區域中

// scroller message

var message="歡迎光臨！請多提意見記得經常來看看呀你一定會有收穫的 "

// fonts. Add as many fonts as you like.

var messagefont=new Array("Arial Black","Verdana","Impact","Comic Sans MS")

// fontcolors. Add as many fontcolors as you like.

var messagecolor=new Array("red","olive","888888","purple")

// horizontal and vertical position of scroller (pixels)

var positionleft=200

var positiontop=10

</SCRIPT>

var timer

var marginright=0

var i_fadestrength=5

var i_message=0

var i_messagecolor=0

var i_messagefont=0

var step=1

var maxfontsize=220

var fontsizefactor=maxfontsize/100

var content

var textboxwidth_=0

var bodywidth_=0

message=message.split(" ")

function setmessage() {if (i_message>=message.length) {i_message=0}

if (i_messagecolor>=messagecolor.length) {i_messagecolor=0}

if (i_messagefont>=messagefont.length) {i_messagefont=0}

content="<nobr><font color="+messagecolor[i_messagecolor]+" face="+messagefont[i_messagefont]+">"+message[i_message]+"</font><nobr>"

textbox.innerHTML=content

i_message++

i_messagecolor++

i_messagefont++

timer=setTimeout("resizemessage()",500)}

function resizemessage()

{if (i_fadestrength<120)

{textbox.filters.alpha.opacity=Math.floor(100-i_fadestrength)

document.all.textbox.style.fontSize=i_fadestrength*fontsizefactor

document.all.textbox.style.posLeft=positionleft-(Math.floor(i_fadestrength/1.1*fontsizefactor))

document.all.textbox.style.posTop=positiontop

document.all.textbox.style.width_=bodywidth-document.all.textbox.style.posLeft-5

document.all.textbox.style.overflowX="hidden"

document.all.textbox.style.visibility="visible" step+=1.5 i_fadestrength+=step timer=setTimeout("resizemessage()",50)}

else {clearTimeout(timer) i_fadestrength=0; step=1; setmessage()}}

if (document.all)

{document.write("<DIV style=";font-family:Verdana;filter:alpha(opacity=0);"></DIV>")

document.write("<DIV style=";">")}

if (document.all) {bodywidth_=document.body.clientWidth-5 setmessage()}

</SCRIPT>

光暈效果文字代碼

<DIV style="FILTER: glow(color=#ff6600,strength=6); COLOR: #000000; HEIGHT: 10px"><FONT size=5>要輸入的文字</FONT></DIV>

滾動字代碼

<marquee border="0" align="middle" scrolldelay="120">要輸入的文字</marquee>

由中間向兩邊移動的文字

<MARQUEE width_=200 height=50>填入由中間向兩邊移動的文字和圖像</FONT></MARQUEE><FONT face=華文彩雲 color=#ee110e size=5><FONT face=華文彩雲 color=#ee1111 size=5>

<MARQUEE direction=right width_=200 height=50>填入由中間向兩邊移動的文字和圖像</FONT></MARQUEE></FONT></FONT></P></FONT>

文字左向右移動

<DIV imgzoom" scrollAmount=2 direction=right><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=隸書 color=#00ff00>要寫的文字</FONT></MARQUEE>

文字向下移動

<MARQUEE scrollAmount=2 direction=down><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=隸書 color=#00ff00>要寫的文字</FONT></MARQUEE>

文字向上移動

<MARQUEE scrollAmount=2 direction=up><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=隸書 color=#00ff00>要寫的文字</FONT></MARQUEE>

文字跳舞

滾動字代碼

<marquee border="0" align="middle" scrolldelay="120">要輸入的文字</marquee>

發光文字代碼：

<table style="FILTER: glow(color=#6699FF,direction=2)"><font color=#ffffff size=2>要修改的文字</font></table>

其中color是陰影的顏色，可以配合網頁色調改變，direction是設置陰影的強度，font color是原字體的顏色。

浮雕的文字：

<table style="FILTER: dropshadow(color=#6699FF, offx=1, offy=1, positive=1);"><font color=#ffffff>要修改的文字</font></table>

其中color是陰影的顏色，可以配合網頁色調改變，positive是設置陰影的強度，offx和offy是設置的陰影和文字的距離，font color是原字體的顏色。

陰影的文字：

<table style="FILTER: dropshadow(color=#cccccc, offx=2, offy=2, positive=2);"><font color=#6CABE7 size=2>要修改的文字</font></table>

插入表格

border：邊框大小，0為不顯示邊框

bordercolor：邊框顏色

bgcolor：表格背景顏色

tr：添加行

td：添加列

字在圖片上向上移動的代碼:

<TBODY>

<TR>

<CENTER><FONT style="FONT-SIZE: 20pt" face=華文新魏 color=#ffff00><B><BR>如水的夜色慢慢襲上來<BR>柔和的燈光<BR>散發出曖昧和誘惑<BR>CD里播放的是古箏曲<BR>凄美絕美纏綿悱惻的<BR>愛情故事<BR>正娓娓向我們道來<BR>如泣如訴<BR>在這靜靜的夜空<BR>如流蘇般瀰漫<BR>心情也隨著樂曲跌跎起伏<BR><BR>博客教材在這裡謝謝大家對我的支持<BR><BR></B></FONT></CENTER></MARQUEE></TD></TR></TOBDY></TBODY></TABLE>

字在虛化的圖片上向上移動的代碼

<TBODY>

<TR>

<CENTER><FONT style="FONT-SIZE: 20pt" face=華文新魏 color=#ffff00><B><BR>如水的夜色慢慢襲上來<BR>柔和的燈光<BR>散發出曖昧和誘惑<BR>CD里播放的是古箏曲<BR>凄美絕美纏綿悱惻的<BR>愛情故事<BR>正娓娓向我們道來<BR>如泣如訴<BR>在這靜靜的夜空<BR>如流蘇般瀰漫<BR>心情也隨著樂曲跌跎起伏<BR><BR>延華天光歡迎您<BR><BR></B></FONT></CENTER></MARQUEE></TD></TR></TBODY></TABLE>

字在虛化的圖片上移動並且有透明flash的代碼

<TBODY>

<TR>

<CENTER><FONT style="FONT-SIZE: 20pt" face=華文新魏 color=#00ff00><B><BR>如水的夜色慢慢襲上來<BR>柔和的燈光<BR>散發出曖昧和誘惑<BR>CD里播放的是古箏曲<BR>凄美絕美纏綿悱惻的<BR>愛情故事<BR>正娓娓向我們道來<BR>如泣如訴<BR>在這靜靜的夜空<BR>如流蘇般瀰漫<BR>心情也隨著樂曲跌跎起伏<BR><BR>延華天光歡迎您<BR><BR></B></FONT></CENTER></MARQUEE></TD></TR></TBODY></TABLE>

（二）製作滾動字幕

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(幻燈片效果，指的是滾動一次，然後停止滾動)

1.上下滾動：

代碼：<MARQUEE style="FONT-SIZE: 12px; WIDTH: 132px; COLOR: rgb(34,34,221); LINE-HEIGHT: 17px; HEIGHT: 125px" scrollAmount=1 scrollDelay=1 direction=up height=125>這裡是文字<BR></MARQUEE>

2.左右滾動：

代碼：<marquee direction="left" scrollamount="1" scrolldelay="10" border="0" width_=500 >

3.七彩文字背景

代碼：<TABLE style=" HEIGHT: 140px" align=center background=http://99927.com/client/zcsl/200644152842607.GIF border=0>

<TBODY>

<TR>

<P><FONT style="FONT-SIZE: 38pt" face=華文行楷 color=#336699 size=7><B>要寫的文字</B></FONT></P>

4.圖片插入文字特效代碼

<TBODY>

<TR>

<TD>

<MARQUEE scrollAmount=3 behavior=alternate width_=750><IMG src="https://www.getit01.com/getimg_360.php?url=http://99927.com/client/zcsl/200644162842796.GIF"><FONT face=華文行楷 color=#800080 size=30><B><FONT face=楷體_GB2312 color=#00ffff>要寫的文字</FONT><IMG src="https://www.getit01.com/getimg_360.php?url=http://99927.com/client/zcsl/200644162842796.GIF"></B></FONT></MARQUEE>

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

5.帶背景的往上浮動字：

<TBODY>

<TR>

</DIV></DIV></TD></TR></TBODY></TABLE></CENTER>

6.用圖片做背景+字+FLASH+音樂

<TBODY>

<TR>

<TD><EMBED src=http://imgfree.21cn.com/free/flash/6.swf width_=490 height=755 type=application/x-shockwave-flash

WMODE="transparent" MENU="false" QUALITY="high"></EMBED></TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<DIV style="FILTER: glow(color=#66ffff strength=5); WIDTH: 90%; COLOR: white"><FONT style="FONT-SIZE: 24pt; FONT-

FAMILY: 華文新魏" color=#ffff66><B>我心為誰動我心為誰痛我心為誰把真愛奉送我心為誰動我心為誰痛我心為誰把傷心淚拋在風

中雨中讓情和情相擁讓心和心相通讓剎那交織的眼神留住美麗的彩虹讓真愛能永恆讓美夢化成真讓生命刻劃的表情綻放燦爛的笑容笑

容我心為誰動我心為誰痛我心為誰把真愛奉送我心為誰動我心為誰痛我心為誰把傷心淚拋在風中雨中讓血和血相容讓心和心相通讓巨

龍滾滾涌動著沉默的暴風讓壯志在我胸讓浩氣架長空讓一輪紅日隨我動試問天下誰與我爭雄 </B></FONT></DIV>[wma]

http://www.sh-web.cn/mp3/heart.wma[/wma]</TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></DIV>

（三）添加播放器

1、不使用播放器代碼： <BGSOUND src="音樂文件地址" loop=infinite>

代碼說明：藍色部分為音樂文件的地址，由於此代碼不使用播放器，所以可以加入文章中的源代碼後，變成某個文章的背景音樂。

2、Windows Media Player:

代碼：<DIV><OBJECT height=185 width_=179 classid=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6><PARAM VALUE="音樂文件地址"><PARAM VALUE="infinite"><PARAM VALUE="1"><PARAM VALUE="50"><PARAM VALUE="full"><PARAM VALUE="1"></OBJECT></DIV>

代碼說明：藍色部分為音樂文件的地址，綠色的數字表示是否自動播放，更改為"0"時不會自動播放，"1"的時候是自動播放。

3、透明播放器代碼

<TBODY>

<TR>

4.萬能播放器代碼

代碼說明：紫色部分為音樂文件的地址，藍色數字聞為重複播放次數，可替換成你想要的數字，如果需要改成永久循環可以修改為"infinite"。

5、歌曲代碼:

在這組代碼中，不必管它是mms.http.rtsp，只要看尾綴是asf、wma、wmv、wmv、rm都可適用下面的代碼:

1. 手動播放:

2. 打開頁面自動播放:

----------------------------------------------------------------

套用代碼:

<font face="華文彩雲" size="6" color="#FFFFFF">歌曲或音樂名稱</font><br><br>

</td></tr>

</table>

</div>

簡易套用代碼詳解:

<div align="center">是定義帖子居中;

這其中的border="1"是定義表格邊線的寬度,定義為0則無邊線;width_="90%" height="403"分別定義背景圖表格的寬度和高度.如果背景圖是一張大圖,可以這樣定義:width_=圖片寬度 height=圖片高度

<p align="center"><br><br><br><font face="華文彩雲" size="6" color="#FFFFFF">歌曲或音樂名稱</font><br><br>

<p align="center">是定義文字居中的，<br>是回行代碼，加幾個就會空幾行。<font face="華文彩雲" size="6" color="#FFFFFF">是定義文字屬性的。face="華文彩雲"是定義字體，你可以把字體換成隸書、宋體等。size="6"是定義字型大小的，數字越大字越大，如果不定義，默認是2號字。color="#FFFFFF"是定義字體顏色的。全部字體顏色的代碼在妙手飾圖區有人發過，你可以找來改。

第一個括弧里的代碼仍然是定義圖片和文字居中的。<img src="圖片地址">是插入圖片代碼。<font color="#FFFFFF" size=3>介紹文字</font>是定義這段文字的。如果想改變字體顏色 color、字型大小size，只需要改動=後邊的值即可。

這一段是插入播放器代碼，因為我插的是特殊的播放器，style="FILTER: xray()" 是特殊代碼。「src=音樂地址」是插入音樂文件的地址。width_=250 height=30分別定義播放器的寬度和高度(如果把寬和高都設成零則為隱藏,並且只能自動播放)。autostart="true" loop="-1"是定義音樂播放方式的，autostart="true"是設定手動或自動播放，「true」或「1」是自動播放，「false」或「0」是手動播放；loop="-1"是播放次數，「true」或「1」表示重複播放，「false」「-1」或「0」是只播放一次。

<br><br><br></td></tr></table></div>回行代碼和與前面對應的固定代碼。

<br><br><br></td></tr></table></div>回行代碼和與前面對應的固定代碼。

（四）訪問者停留時間計數器

編輯-排版-模塊-添加自定義HTML 然後把 <p align=center>您在這裡停留了代碼123.....貼上：

代碼1.</p><p align=center><IMG height=20 src="https://www.getit01.com/getimg_360.php?url=http://album.sina.com.cn/pic/4723cdbf020002uq" width_=15><IMG height=20 src="https://www.getit01.com/getimg_360.php?url=http://album.sina.com.cn/pic/4723cdbf020002up" width_=15> 分 <IMG height=20 src="https://www.getit01.com/getimg_360.php?url=http://album.sina.com.cn/pic/4723cdbf020002uo" width_=15><IMG height=20 src="https://www.getit01.com/getimg_360.php?url=http://album.sina.com.cn/pic/4723cdbf020002un" width_=15> 秒</p> 複製上去

代碼2. <DIV align=center><IMG height=73 src="https://www.getit01.com/getimg_360.php?url=http://album.sina.com.cn/pic/4723cdbf020002ub" width_=32 border=0><IMG height=73 src="https://www.getit01.com/getimg_360.php?url=http://album.sina.com.cn/pic/4723cdbf020002uc" width_=88 border=0><BR><IMG height=47 src="https://www.getit01.com/getimg_360.php?url=http://album.sina.com.cn/pic/4723cdbf020002ud" width_=32 border=0><IMG height=47 src="https://www.getit01.com/getimg_360.php?url=http://album.sina.com.cn/pic/4723cdbf020002ue" width_=88 border=0></DIV><BR>

代碼3.<P><IMG src="https://www.getit01.com/getimg_360.php?url=http://img451.imageshack.us/img451/5681/17sw.gif" border=0 width_="67" height="70">

代碼4.<IMG src="https://www.getit01.com/getimg_360.php?url=http://img451.imageshack.us/img451/2654/26mf.gif" border=0 width_="33" height="70">

代碼5.<IMG src="https://www.getit01.com/getimg_360.php?url=http://img451.imageshack.us/img451/7677/38qp.gif" border=0 width_="33" height="70">

<代碼6.IMG src="https://www.getit01.com/getimg_360.php?url=http://img451.imageshack.us/img451/4378/42zs.gif" border=0 width_="85" height="70"></P>

其中的"您在偶滴家家停留了:" 等等)

（五）友情連接

編輯-排版-模塊-添加自定義HTML 然後把<marquee behavior="scroll" direction=right width_="90%" height="100" scrollamount="2" scrolldelay="30" ><a target="cont" href="對方地址"><img src="對方圖片" width_="100" height="100" border="0"></a></marquee> 複製上去就行了.

要想加多個的話就把<a target="cont" href="對方地址"><img src="對方圖片" width_="100" height="100" border="0"></a> 加在最後那個</marquee>的前面

其中的 direction= 是圖片移動方向 up、 down、 right 、left 任意添寫

（六）首頁flaish與日誌里的flaish

1、首頁flaish: 找到flaish地址後點編輯-排版-模塊-添加自定義html- 點 Flash複製進去就行了這個很簡單

2、日誌里的flaish: 好多朋友多說為什麼我把代碼粘貼到日誌里但就是顯示不出flaish呢? 我現在就告訴你因為你忘記點下面那個 <代碼> 了必須先點一下代碼後再複製上去.

日誌里flaish的代碼是:

（七）在你的博客上添加QQ

代碼 <a target=blank href=tencent://message/?uin=405542906&Site=你的博克網址&Menu=yes><img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ號碼:1 alt="點擊這裡給我發消息"></a>

（八）個性名片

<table ><tr><td style="padding: 2px;"><img style="border: 1px solid rgb(153, 153, 153); width: 140px; height: 140px;"

src=頭像圖片地址></td><td valign="top"><table ><tr><td><img src="/style/common/gg.gif"></td></tr><tr><td><div style="font-weight: bold;font-size:16px;"><a href="郵箱地址">你的名字</a></div></td></tr><tr><td><div>年齡,星座</div></td></tr><tr><td><div>詳細地址</div>

（九）顯示來訪者IP地址

（十）日誌如何分類列表歸檔

原來常看到別人的日誌分類列表歸檔，還有網站鏈接等，感到好博客的左邊部分。其方法如下：

第一步：登錄你的博客，進入「編輯我的博客」狀態；

第二步：點擊博客首頁標題導航欄「收藏；

第三步：點擊左下方的「個性列表」；

第四步：點擊「創建」；

第五步：在「個性列表」框內填寫上你的分類目錄，如「我的日誌」、「博客代碼」等；

第六步：點擊「添加項目」，在下方的「項目」一欄填寫上你的文章的標題，在「地址」一欄填寫上上面那篇文章在你博客中的網路地址，「描述」一項可不填，但有時需要輸入一任意字元，然後擦除，再點擊「確定」注意：為方便順利起見，請在這步時，你重新再打開一個你的同一個博客，在剛打開的博客里複製日誌名稱、粘貼,複製網路地址、粘貼。

第七步：點擊右上角「編輯或瀏覽我的博客」裡面的「排版設置」、「內容模塊」，在自「定義模塊」里點擊你新創建的那個分類目錄瀏覽你的博客，已經大功告成了。另：如果要鏈接別人的博客，鏈接你認為好的網站，鏈接你在網上閱讀了的好文章，方法參照（五）友情鏈接即可。

（十一）表格式導航欄代碼

<tbody>

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

十二、博客3D魔方像冊

首先登陸這個網站:http://www.picturetrail.com/註冊用戶.

這個網站是全英文的,進入網站後,在網頁的左上有一個"Sign up for free"的鏈接,點擊進入，進入註冊頁面,下一步填寫你自己的信息。

第一欄:選擇一個用戶名(不可以是已有的,填了後可以點後面括弧里的提示,檢測是否已被別人用了)

第二欄:設置密碼.

第三欄:再次輸入設置的密碼

第四欄:填寫你的e-mail地址

第五欄:填寫你所在地的郵政編碼

下面六七兩欄是附加信息,分別填寫你的出生年份(只是年份),和選擇性別.

填完所有的註冊信息,點擊最下面的提交按鈕.然後又跳到一個頁面,上面顯示"LAST STEP - FREE Sponsor Offers!"這是註冊的最後一步,下面會有兩個選項,一般都點"no"就可以了，再點下面的提交按鈕,就算註冊完成。

註冊完,進入了相冊管理頁面,出現的是上傳照片的頁面,第一欄是選擇一次性上傳的照片張數,第二欄可以不用去管它,下面的就是選擇你電腦上的照片上傳了，選定了你要傳的照片後,點下面的"Upload Pics Now!"。

上傳完照片後,出現的頁面,點擊右邊的"Creat a Photo Flik"鏈接.進入相冊製作合成頁面.

選擇你的喜歡的一款3D相冊,然後點最下面的"Continue"按鈕.

下面是選擇你所傳的相片,一般超過你的最大選擇張數會出現提示對話框.選擇好相片後,同樣點最下面的"Continue"按鈕,進入最後階段.

最後畫面進入相冊合成預覽畫面，在預覽效果相冊下面回有"Size Shown: Medium"這個小欄目，調節相冊大小,和畫面切換速度，選擇完後,可以點下面的"Redisplay",刷新最下面的"Photo Flicks Posting Code",即:相冊的腳本代碼，一切OK後,就可以把腳本代碼複製,粘貼到你的博客自定義HTML了。

下邊是直接拿出來的代碼，希望你能也做出漂亮的相冊。

大家只要把圖片地址換成你想要的圖片，想要什麼樣式的就把FLASH地址改了就可以了，而且最下邊提供了個通用的代碼,可以讓你自己添加修改的.

第一種：

<EMBEDpluginspage=http://www.macromedia.com/go/getflashplayer align=middle src=http://flash.picturetrail.com/pflicks/m_acrobatcube.swf width_=200 height=200 type=application/x-shockwave-flash FLASHVARS="img1=http://www.blog.163.com/photo/Mpi7ARKnIfBkceKm3Es8Hg==/4272508671491056318.jpg&type=2&op=0.jpg&img2=http://www.blog.163.com/photo/M_nHBYN5LzzArWiuXMSvQA==/4272508671491056314.jpg&type=2&op=0.jpg&img3=http://www.blog.163.com/photo/gnemeww5MmyM4ClXBvc21Q==/4272508671491056310.jpg&type=2&op=0.jpg&img4=http://www.blog.163.com/photo/xFgfw0o0p4UTyFAW0_mv8A==/593067775929357209.jpg&img5=http://www.blog.163.com/photo/TLw++o4mDkA6KXPswArlJQ==/593067775929357194.jpg&img6=http://www.blog.163.com/photo/Vtt3vGfeUUZI0479tEgm_A==/1770759078486746773.jpg&type=2&op=0.jpg&faceopacity=80&backopacity=100&cubecroptofit=1&enlargecroptofit=0&test=1" WMODE="transparent" LOOP="false" QUALITY="high" BGCOLOR="#FFFFFF" >

第二種：<embed src="https://www.getit01.com/getimg_360.php?url=http://flash.picturetrail.com/pflicks/boxes_r.swf" loop="false" quality="high" FlashVars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&ptdim=50.10&ptxy=450.16&hue=3&img1=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649183.jpg&img2=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649179.jpg&img3=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649202.jpg&img4=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649204.jpg&img5=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649198.jpg&img6=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649186.jpg&img7=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649190.jpg&img8=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649192.jpg&img9=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649193.jpg" wmode="transparent" bgcolor="#ffffff" width_="360" height="380" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

第三種：<embed src="https://www.getit01.com/getimg_360.php?url=http://flash.picturetrail.com/pflicks/m_bookhorizontal_r.swf" FlashVars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&ptdim=50.10&ptxy=400.16&img1=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649179.jpg&img2=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649202.jpg&img3=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649204.jpg&img4=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649198.jpg&img5=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649190.jpg&img6=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649192.jpg&img7=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649193.jpg&img8=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649196.jpg" loop="false" quality="high" bgcolor="#ffffff" width_="400" height="290" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

第四種：<embed src="https://www.getit01.com/getimg_360.php?url=http://flash.picturetrail.com/pflicks/l_cube_r.swf" loop="false" quality="high" FlashVars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&ptdim=50.10&ptxy=284.16&img1=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649179.jpg&img2=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649202.jpg&img3=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649204.jpg&img4=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649190.jpg" wmode="transparent" bgcolor="#ffffff" width_="400" height="300" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

第五種：<embed src="https://www.getit01.com/getimg_360.php?url=http://flash.picturetrail.com/pflicks/l_puzzle_r.swf" loop="false" quality="high" FlashVars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&ptdim=50.10&ptxy=400.16&auto=1&wait=4&img1=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649179.jpg&img2=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649202.jpg&img3=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649204.jpg&img4=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649198.jpg&img5=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649190.jpg&img6=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649192.jpg&img7=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649193.jpg&img8=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649196.jpg" wmode="transparent" bgcolor="#ffffff" width_="400" height="360" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

第六種：<embed src="https://www.getit01.com/getimg_360.php?url=http://flash.picturetrail.com/pflicks/l_geometric_r.swf" loop="false" quality="high" FlashVars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&ptdim=50.10&ptxy=400.16&auto=1&wait=4&img1=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649183.jpg&img2=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649179.jpg&img3=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649202.jpg&img4=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649204.jpg&img5=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649190.jpg&img6=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649192.jpg&img7=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649193.jpg&img8=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649196.jpg" wmode="transparent" bgcolor="#ffffff" width_="400" height="320" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

第七種：<embed src="https://www.getit01.com/getimg_360.php?url=http://flash.picturetrail.com/pflicks/l_kscope_r.swf" loop="false" quality="high" FlashVars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&ptdim=50.10&ptxy=300.16&auto=1&wait=4&img1=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649179.jpg&img2=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649202.jpg&img3=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649204.jpg&img4=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649198.jpg&img5=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649190.jpg&img6=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649192.jpg&img7=http://pic20.picturetrail.com:80/VOL1604/6811463/13084308/193649193.jpg" wmode="transparent" bgcolor="#ffffff" width_="300" height="320" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

第八種：

下邊著個是通用的代碼

大家只要把上面的圖片地址換成你想要的圖片，想要什麼樣式的就把FLASH地址改了就可以了.FLASH地址在上邊那些代碼中能找到.

代碼如下：

<tr>

</tr>

</table></center>

將代碼粘貼到源代碼框，然後即可在圖片上寫文字，背景圖會隨著文字的增長而自動增長。

（十三）、表格相關

1.表格標題

表格標題位置 -- align

<caption align="#"> #號可為 top：表標題置於表格上方（預設值）

bottom：表標題置於表格下方

2.定義列 <tr>

3.定義欄位

《1》<td>：靠左對齊

《2》<th>：靠中對齊ⅱ粗體

【1】水平位置 -- align <th align="#">

#號可為 left：向左對齊 center：向中對齊 right：向右對齊

【2】垂直位置 -- align <th align="#"> #號可為

top：向上對齊 middle：向中對齊 bottom：向下對齊

【3】欄位寬度 -- width <th width_=點數或百分比>

【4】欄位垂直合併 -- rowspan <th rowspan=欲合併欄位數>

【5】欄位橫向合併 -- colspan <th colspan=欲合併欄位數>

4、表格的主要屬性

【1】. <table>標記的主要屬性

align定義表格的對齊方式，有三個屬性值center，left，right

background定義表格的背景圖案，屬性值為圖片的地址

bgcolor定義表格的背景顏色，屬性值是各種顏色代碼

border定義表格的邊框寬度，屬性值是數字

bordercolor定義表格邊框的顏色，屬性值是各種顏色代碼

cellpadding定義單元格內容與單元格邊框之間的距離，屬性值是數字

cellspacing定義表格中單元格之間的距離

height定義表格的高度，屬性值是數字

width定義表格的寬度，屬性值是數字

【2】. <tr>標記，表格是由多行與多列組成的，<tr>標記用來定義表格的一行，他的屬性極其屬性值定義的是表格中的該行，其主要屬性與屬性值如下：

align定義對齊方式，屬性值與上同

background定義背景圖案 bgcolor定義背景色

【3】. <td>標記。用<td>標記概況起來的內容表示表格的單元。其主要屬性與屬性值和<table>標記的一樣，補充兩個合併列和行的代碼：

colspan定義合併表格的列數，屬性值是數字

rowspan定義合併表格的行數，屬性值是數字

（十四）、FRAME

1、分割視窗指令 <frameset>..........</frameset>

【1】垂直（上下）分割 -- rows

<frameset rows=#> #號可為點數：

如欲分割為100,200,300三個視窗，則<frameset rows=100,200,300>；

亦可以*號代表，如<frameset rows=*,500,*>

百分比：如<frameset rows=30%,70%>，各項總和最好為100%;

【2】水平（左右）分割 -- cols <frameset cols=點數或百分比>

2、指定視窗內容 -- <frame>

【1】指定視窗的文件名稱 -- src <frame src=HTML檔名>

【2】定義視窗的名稱 -- name

<frame

【3】設定文件與上下邊框的距離 -- marginheight

【4】設定文件與左右邊框的距離 -- marginwidth

【5】設定分割視窗捲軸 -- scrolling

<frame scrolling=#> #號可為 yes：固定出現捲軸

no：不出現捲軸

auto：自動判斷文件大小需不需要捲軸（預設值）

【6】鎖住分割視窗的大小 -- noresize <frame noresize>

以上內容是有本人有有關書籍和網路中網友的博客中整理歸納,主要是為了更多的網友了解HTML知識,把博客做的更靚,延華天光希望對網友有所幫助,多提意見!