HTML標簽以及各個標簽屬性大全（網頁制作必備）

<metahttp-equiv="Windows-Target"content="_top">

<NOBR> 取消換行和<br>相反

總類（所有HTML文件都有的

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

文件類型 <HTML></HTML> 放在檔案的開頭與結尾）

文件主題 <TITLE></TITLE> 必須放在「文頭」區塊內）

文頭 <HEA D></HEA D> 描述性資料，像是「主題」）

文體 <BODY></BODY> 文件本體）

結構性定義（由瀏覽器控制的顯示風格）

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

標題<H?></H?>表示從16有六層選擇）數值越高字越小

標題對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>左對齊、居中對齊、右對齊

區分<P></P>

區分對齊<PALIGN=LEFT|RIGHT|CENTER|JUSTIFY></P>左對齊、右對齊、居中對齊、兩端對齊

引文區塊<BLOCKQUOTE></BLOCKQUOTE>通常會內縮）

斜體 <EM></EM>

加粗 <SPONG></SPONG>

引文 <CITE></CITE>通常會以斜體顯示）

碼<CODE></CODE>顯示原始碼之用）

樣本<SA MP></SA MP>

表示一段用戶應該對其沒有什么其他解釋的文本。要從正常的上下文抽取這些字符時，通常要用到這個標簽。

并不經常使用，只在要從正常上下文中將某些短字符序列提取出來，對其加以強調，才使用這個標簽

鍵盤輸入<KBD></KBD>

變數<VA R></VA R>

定義<DFN></DFN>有些瀏覽器不提供）

地址<A DDRESS></A DDRESS>

3.0大字<BIG></BIG>

3.0小字<SMA LL></SMA LL>

與外觀相關的標簽（作者自訂的表現方式）

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

加粗<B></B>

斜體<I></I>

3.0底線<U></U>尚有些瀏覽器不提供）

3.0刪除線 <S></S>尚有些瀏覽器不提供）

3.0下標 <SUB></SUB>

3.0上標 <SUP></SUP>

打字機體<TT></TT>用單空格字型顯示）

預定格式<PRE></PRE>保留文件中空格的大小）

預定格式的寬度<PREWIDTH=?></PRE>以字元計算）

N1.0+向中看齊<CENTER></CENTER>文字與圖片都可以）

N1.0閃耀<BLINK></BLINK>有史以來最被嘲弄的標簽）

N1.0字體大小<FONTSIZE=?></FONT>從17

N1.0改變字體大小<FONTSIZE=+|-?></FONT>

N1.0基本字體大小<BA SEFONTSIZE=?>從17;內定為3

N2.0字體顏色<FONTCOLOR="#$$$$$$"></FONT>

連結與圖形

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

鏈接 <A HREF="URL"></A >

連結到錨點<A HREF="URL#***"></A >如果錨點在另一個檔案）

<A HREF="#***"></A >如果錨點目前的檔案）

N2.0連結到目的視框<A HREF="URL"TA RGET="***"></A >

設定錨點<A NA ME="***"></A >

圖形 <IMGSRC="URL">

圖形看齊方式<IMGSRC="URL"ALIGN=TOP|BOTTOM|MIDDLE>

取代文字 <IMGSRC="URL"ALT="***">如果沒有辦法顯示圖形則顯示此文字）

點選圖<IMGSRC="URL"ISMA P>需要CGI程式）

N2.0點選圖 <IMGSRC="URL"USEMA P="URL">

N2.0地圖 <MA PNA ME="***"></MA P>描述地圖）

N2.0段落 <A REA SHA PE="RECT"COORDS=",,,"HREF="URL"|NOHREF>

3.0大小 <IMGSRC="URL"WIDTH="?"HEIGHT="?">以pixel為單位：px

N1.0圖形邊緣 <IMGSRC="URL"BORDER=?>以pixel為單位）

N1.0圖形邊緣空間 <IMGSRC="URL"HSPA CE=?VSPA CE=?>以pixel為單位）

N1.0低解析度圖形 <IMGSRC="URL"LOWSRC="URL">

N1.1用戶端拉 <META HTTP-EQUIV="Refresh"CONTENT="?;URL=URL">使用端自動更新

N2.0內嵌物件 <EMBEDSRC="URL">將物件插入頁面）

N2.0內嵌物件大小 <EMBEDSRC="URL"WIDTH="?"HEIGHT="?">

分隔

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

段落 <P>通常是兩個return

3.0段落 <P></P>新定義成容器型標簽）

3.0文字看齊方式 <PALIGN=LEFT|CENTER|RIGHT></P>

換行 <BR>一個return

N1.0文字部份看齊方式<BRCLEA R=LEFT|RIGHT|A LL>與圖形合用時）

橫線 <HR>

N1.0橫線對齊 <HRALIGN=LEFT|RIGHT|CENTER>

N1.0橫線厚度 <HRSIZE=?>以pixel為單位）

N1.0橫線寬度 <HRWIDTH=?>以pixel為單位）

N1.0橫線比率寬度 <HRWIDTH=%>以頁寬為100%

N1.0實線 <HRNOSHA DE>沒有立體效果）

N1.0不可換行 <NOBR></NOBR>不換行）

N1.0可換行處 <WBR>如果需要，可在此斷行）

列舉（可以巢狀列舉）

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

無次序式列舉<UL><LI></UL><LI>放在每一項前）

N1.0公布式列舉 <ULTYPE=DISC|CIRCLE|SQUA RE>定義全部的列舉項）

<LITYPE=DISC|CIRCLE|SQUA RE>定義這個及其後的列舉項）

有次序式列舉<OL><LI></OL><LI>放在每一項前）

N1.0數標型態 <OLTYPE=A |a|I|i|1>定義全部的列舉項）

<LITYPE=A |a|I|i|1>定義這個及其後的列舉項）

N1.0起始數字 <OLVA LUE=?>定義全部的列舉項）

<LIVA LUE=?>定義這個及其後的列舉項）

定義式列舉 <DL><DT><DD></DL><DT>項目,<DD>定義）

表單式列舉 <MENU><LI></MENU><LI>放在每一項前）

目錄式列舉 <DIR><LI></DIR><LI>放在每一項前）

背景與顏色

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

3.0重復排列的背景 <BODYBA CKGROUND="URL">

N1.1+背景顏色 <BODYBGCOLOR="#$$$$$$">依序為紅、綠、藍）

N1.1+文字顏色 <BODYTEXT="#$$$$$$">

N1.1+連結顏色 <BODYLINK="#$$$$$$">

N1.1+看過的連結 <BODYVLINK="#$$$$$$">

N1.1使用中的連結 <BODYALINK="#$$$$$$">

特殊字元（以下標簽需用小寫）

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

特別符號 &#?;其中 ?代表 ISO8859-1編碼）

<<>>&&""

注冊商標TM?

N1.0+注冊商標TM®

著作權符號 ?

N1.0+著作權符號 ©

表單（通常需要與CGI程式配合）

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

定義表單 <FORMACTION="URL"METHOD=GET|POST></FORM>

N2.0上傳檔案 <FORMENCTYPE="multipart/form-data></FORM>

欄位名稱 <INPUTNA ME="***">

欄位內定值 <INPUTVA LUE="***">

已選定 <INPUTCHECKED>適用於checkbox與 radiobox

欄位寬度 <INPUTSIZE=?>以字元數為單位）

最長字數 <INPUTMA XLENGTH=?>以字元數為單位）

下拉式選單 <SELECT></SELECT>

下拉式選單名稱 <SELECTNA ME="***"></SELECT>

選單項目數量 <SELECTSIZE=?></SELECT>

多選式選單 <SELECTMULTIPLE>多選）

選項 <OPTION>

內定選項 <OPTIONSELECTED>

文字輸入區 <TEXTA REA ROWS=?COLS=?></TEXTA REA >

輸入區名稱 <TEXTA REA NA ME="***"></TEXTA REA >

N2.0輸入區換行方式 <TEXTA REA WRA P=OFF|VIRTUA L|PHYSICA L></TEXTA REA >

表格

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

3.0定義表格 <TA BLE></TA BLE>

3.0表格框線 <TA BLEBORDER></TA BLE>有或沒有）

N1.1表格框線 <TA BLEBORDER=?></TA BLE>可以設定數值）

N1.1儲存格左右留白 <TA BLECELLSPA CING=?>

N1.1儲存格上下留白 <TA BLECELLPA DDING=?>

N1.1表格寬度 <TA BLEWIDTH=?>以pixel為單位）

N1.1寬度比率 <TA BLEWIDTH=%>頁寬為100%

3.0表格列<P></P>

3.0表格列內容看齊 <PALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0儲存格<TD></TD>須與列并用）

3.0儲存格內容看齊 <TDALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0不換行 <TDNOWRA P>

N3.0儲存格背景顏色 <TDBGCOLOR=#$$$$$$>

3.0儲存格橫向連接 <TDCOLSPA N=?>

3.0儲存格縱向連接 <TDROWSPA N=?>

N1.1儲存格寬度 <TDWIDTH=?>以pixel為單位）

N1.1儲存格寬度比率 <TDWIDTH=%>頁寬為100%

3.0表格標題 <TH></TH>跟<TD>一樣，不過會對中并加粗）

3.0表格標題對齊 <THALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0表格標題不換行 <THNOWRA P>

3.0表格標題占幾欄 <THCOLSPA N=?>

3.0表格標題占幾列 <THROWSPA N=?>

N1.1表格標題寬度 <THWIDTH=?>以pixel為單位）

N1.1表格標題比率寬度<THWIDTH=%>頁寬為100%

3.0表格抬頭 <CA PTION></CA PTION>

3.0表格抬頭看齊 <CA PTIONALIGN=TOP|BOTTOM>表格之上/之下）

視框（定義與控制螢幕上的特定區域）

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

N2.0視框格式總定義 <FRA MESET></FRA MESET>取代<BODY>

N2.0視框行長度分配 <FRA MESETROWS=,,,></FRA MESET>pixel或 %

N2.0視框行長度分配 <FRA MESETROWS=*></FRA MESET>*=相對大小）

N2.0視框欄寬度分配 <FRA MESETCOLS=,,,></FRA MESET>pixel或 %

N2.0視框欄寬度分配 <FRA MESETCOLS=*></FRA MESET>*=相對大小）

N2.0定義個別視框 <FRA ME>定義個別視框）

N2.0個別視框內容 <FRA MESRC="URL">

N2.0個別視框名稱 <FRA MENA ME="***"|_blank|_self|_parent|_top>

N2.0邊緣寬度 <FRA MEMA RGINWIDTH=?>「左」與「右」邊界）

N2.0邊緣高度 <FRA MEMA RGINHEIGHT=?>「天頂」與「地底」邊界）

N2.0卷動條 <FRA MESCROLLING="YES|NO|A UTO">

N2.0不可改變大小 <FRA MENORESIZE>

N2.0無視框時的內容 <NOFRA MES></NOFRA MES>如果瀏覽器不提供視框功能的話）

雜項

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

說明 瀏覽器不會顯示）

檔案型態聲明 <!DOCTYPEHTMLPUBLIC"-//IETF//DTDHTML2.0//EN">

3.0檔案型態聲明 <!DOCTYPEHTMLPUBLIC"-//W3O//DTDW3HTML3.0//EN">

可搜尋 <ISINDEX>指示可搜尋的索引項）

N1.0提示 <ISINDEXPROMPT="***">要求輸入的提示文字）

送出搜尋條件 <A HREF="URL?***"></a>其中的問號不是數字，而是「問號」）

基本檔案的URL<BA SEHREF="URL">必須放在「文頭」區段內）

N2.0基本視窗名稱 <BA SETA RGET="***">必須放在「文頭」區段內）

相關性 <LINKREV="***"REL="***"HREF="URL">必須放在「文頭」區段內）

背景資訊 <META >必須放在「文頭」區段內）

HTML標簽

HTML標簽通常是英文詞匯的全稱（如塊引用:blockquot或縮略語（如“p代表Paragragh但它與一般文本有區別，因為它放在單書名號里。故Paragragh標簽是<p>,塊引用標簽是<blockquote>有些標簽說明頁面如何被格式化（例如，<p>開始一個新段落）其他則說明這些詞如何顯示(<b>使文字變粗)還有一些其他標簽提供在頁面上不顯示的信息－例如標題。

關于標簽，需要記住的成雙出現的每當使用一個標簽－如<blockquote>,則必須以另一個標簽</blockquote>將它關閉。注意“blockquot前的斜杠，那就是關閉標簽與打開標簽的區別。

基本HTML頁面以<html>標簽開始，以</html>結束。之間，整個頁面有兩部分－標題和正文。

標題詞－夾在<head>和</head>標簽之間－這個詞語在打開頁面時出現在屏幕底部最小化的窗口。正文則夾在<body>和</body>之間－即所有頁面的內容所在頁面上顯示的任何東西都包含在這兩個標簽之中。

那么讓我建立一個簡單的范例吧，非常容易的第一步，當然是要建立一個新的文本文件（記住，如果你使用比較復雜的文字處理器，就應該用“純文本”或“普通文本”來保存）將它命名為“xxxx.html隨便你起一個什么名字,但記住,要用英文)

然后你可以用瀏覽器將它打開，會看見最簡單的自己做的頁面。

.<html></html>

2.<head></head>

3.<body></body>

4.<title></title>

Html英文 HyperTextMarkupLanguag縮寫，中文意思是超文本標志語言”用它編寫的文件(文檔)擴展名是.html或.htm可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫字板或 FrontPagEditor等編輯工具來編寫Html文件。Html語言使用標志對的方法編寫文件，既簡單又方便，通常使用<標志名></標志名>來表示標志的開始和結束(例如<html></html>標志對)因此在Html文檔中這樣的標志對都必須是成對使用的此教程中，先講一下Html基本標志：

1.<html></html>

<html>標志用于Html文檔的最前邊，用來標識Html文檔的開始。而</html>標志恰恰相反，放在Html文檔的最后邊，用來標識Html文檔的結束，兩個標志必須一塊使用。

2.<head></head>

<head>和</head>構成Html文檔的開頭部分，此標志對之間可以使用<title></title><script></script>等等標志對，這些標志對都是描述Html文檔相關信息的標志對，<head></head>標志對之間的內容是不會在瀏覽器的框內顯示出來的兩個標志必須一塊使用。

3.<body></body>

<body></body>Html文檔的主體部分，此標志對之間可包含<p></p><h1></h1><br><hr>等等眾多的標志，所定義的文本、圖像等將會在瀏覽器的框內顯示出來。兩個標志必須一塊使用。<body>標志中還可以有以下屬性：屬性

用途

示例

<bodibgcolor="#rrggbb">設置背景顏色。<bodibgcolor="red">紅色背景

<boditext="#rrggbb">設置文本顏色。<boditext="#0000ff">藍色文本

<bodilink="#rrggbb">設置鏈接顏色。<bodilink="blue">鏈接為藍色

<bodivlink="#rrggbb">設置已使用的鏈接的顏色。<bodivlink="#ff0000">

<bodialink="#rrggbb">設置正在被擊中的鏈接的顏色。<bodialink="yellow">

說明:以上各個屬性可以結合使用，如<bodibgcolor="red"text="#0000ff">引號內的rrggbb用六個十六進制數表示的RGB即紅、綠、藍三色的組合)顏色，如#ff0000對應的紅色。此外，還可以使用Html語言所給定的常量名來表示顏色：BlackWhiteGreenMaroonOliveNaviPurplGraiYellowLimeAguaFuchsiaSilverRedBlue和Teal如<boditext="Blue">表示<body></body>標志對中的文本使用藍色顯示在瀏覽器的框內。

4.<title></title>

使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊藍色部分顯示的文本信息，那些信息一般是網頁的主題”要將您的網頁的主題顯示到瀏覽器的頂部其實很簡單，只要在<title></title>標志對之間加入您要顯示的文本即可。注意：<title></title>標志對只能放在<head></head>標志對之間。

下面是一個綜合的例子，仔細閱讀，您便可以了解以上各個標志對在一個Html文檔中的布局或所使用的位置。

例1Html文檔中基本標志的使用

<html>

<head>

<title>顯示在瀏覽器最上邊藍色條中的文本</title>

</head>

<bodibgcolor="red"text="blue">

</body>

</html>

1.<p></p>

2.<br>

3.<blockquote></blockquote>

4.<dl></dl><dt></dt><dd></dd>

5.<ol></ol><ul></ul><li></li>

6.<div></div>

上一個教程中我講了Html文檔的基本標志，但我還不知道怎樣在瀏覽器中顯示文本之類的東西，這正是教程二中將要談到學習之前，必須強調一下，這個教程中所講的格式標志統統都是用于<body></body>標志對之間的

1.<p></p>

<p></p>標志對是用來創建一個段落，此標志對之間加入的文本將按照段落的格式顯示在瀏覽器上。另外，<p>標志還可以使用align屬性，用來說明對齊方式，語法是<palign=""></p>align可以是Left左對齊)Center居中)和Right右對齊)三個值中的任何一個。如<palign="Center"></p>表示標志對中的文本使用居中的對齊方式。

2.<br>

<br>一個很簡單的標志，沒有結束標志，因為它用來創建一個回車換行，這么一說我想您該會使用了吧。<br>使用上還有一定的技巧，如果您把<br>加在<p></p>標志對的外邊，將創建一個大的回車換行，即<br>前邊和后邊的文本的行與行之間的距離比較大，若放在<p></p>里邊則<br>前邊和后邊的文本的行與行之間的距離將比較小，您不妨試試看。

3.<blockquote></blockquote>

<blockquote></blockquote>標志對之間加入的文本將會在瀏覽器中按兩邊縮進的方式顯示出來。

4.<dl></dl><dt></dt><dd></dd>

<dl></dl>用來創建一個普通的列表，<dt></dt>用來創建列表中的上層項目，<dd></dd>用來創建列表中最下層項目，<dt></dt>和<dd></dd>都必須放在<dl></dl>標志對之間。看一下下邊的例子您就會明白了

例2創建一個普通列表

<html>

<head>

<title>一個普通列表</title>

</head>

<boditext="blue">

<dl>

</dl>

</body>

</html>

此例在瀏覽器中的顯示如下:

中國城市

北京

上海

廣州

美國城市

華盛頓

芝加哥

紐約

5.<ol></ol><ul></ul><li></li>

<ol></ol>標志對用來創建一個標有數字的列表；<ul></ul>標志對用來創建一個標有圓點的列表；<li></li>標志對只能在<ol></ol>或<ul></ul>標志對之間使用，此標志對用來創建一個列表項，若<li></li>放在<ol></ol>之間則每個列表項加上一個數字，若在<ul></ul>之間則每個列表項加上一個圓點。請看下邊的例子：

例3標有數字或圓點的列表

<html>

<head>

</head>

<boditext="blue">

<ol>

</ol>

<ul>

</ul>

</body>

</html>

此例在瀏覽器中的顯示如下:

中國城市

北京

上海

廣州

美國城市

華盛頓

芝加哥

紐約

6.<div></div>

<div></div>標志對用來排版大塊Html段落，也用于格式化表，此標志對的用法與<p></p>標志對非常相似，同樣有align對齊方式屬性，讀者可以自己試試看。

html標簽的用法=======================================================================================

一、基本概念：

網頁、網站、瀏覽器、IE/NetScape

HTML超文本標記語言，什么是超文本、什么是標記語言。

HTML內容怎樣顯示出來。

二、HTML語法：

三、<body>一些屬性：

什么是屬性：

text:設定整個網頁中文字的色彩

link:用于設定一般超鏈接文本的顯示色彩

alink:用于設定鼠標移動到超鏈接上并按下鼠標是超文本的顯示色彩

vlink:設置訪問過的超鏈接的色彩

background:設定背景圖片，可以是絕對路徑也可以是相對路徑。

bgcolor:用戶設定背景色，當已設定background時這個屬性會失去作用

leftmargin:左邊距

topmargin:上邊距

四、注釋與特殊字符：

注釋的內容不會被顯示出來

注釋不能被嵌套。

注冊符號

版權符號

"TM

空格

五、格式標簽

<p></p>:用來創建一個段落,可以用align屬生來設置段落的對齊方式

<br/>:單標記直接在>前加一個“/表示結束標記，顯示一個換行

<center></center>:對之間的圖形或文本在水平方向居中顯示

<marquee></marquee>:移動圖片或文本。direct屬性：內容的移動方向（left,right,down,up;behavior指定內容的移動行為（scroll,alternate,slid

<dl></dl><dt></dt><dd></dd>用來創建一個普通列表。

<ol></ol><ul></ul><li></li>:<ol></ol>創建一個標有數字的列表;<ul></ul>對創建的列表標有一個圓點;<li></li>只能在<ol></ol>或<ul></ul>之間使用，表示列表項

<pre></pre>:對文本進行預格式處理

六、文本標簽：

<h1></h1>......<h6></h6>:把文本以標題方式顯示。

<b></b><i></i><u></u>:分別對應粗體，斜體，下劃線

<sub></sub><sup></sup>:分別對應下上標的顯示

<cite></cite>:引用方式的字體，通常是斜體

<em></em>:顯示需要強調的文本，通常是斜體加粗

<strong></strong>:用來顯示加重文本，通常是加粗顯示

<font></font>:對字體、字號、顏色進行改變。face屬性：字體;Size屬生：大小; Color屬生：色彩

七、圖像標簽：

<img/>

src屬性：必不可少，用來設置圖像文件所在位置。

alt屬性：當鼠標移到圖像上顯示的提示文本，當圖像無法顯示時，所顯示的代替文字

align屬性：設置圖像與周圍文本的對齊方式。top,bottom,left,right

border屬性：設置圖像的邊框寬度

width和height設置圖像的長寬高

<hr/>:HTML文檔中加入一條水平線。

size:線的粗細

color:線的色彩

width:線的長度

noshade:陰影顯示

八、超鏈接標簽：

通一資源定位符：URL;

如：http://www.sina.com

http所使用的協議;www.sina.net要訪問的主機名;80端口號

<ahref=""></a>:把中間標記的內容作為超鏈接顯示，href內容作為超連接點擊后轉向的頁面。

如：<ahref="http://www.sina.com">新浪網</a>

<ahref=http://www.jungjaehyung.com/uploadfile/2024/0807/20240807023517594.gif"></a>

href屬性是不可少的

target屬性：指明在瀏覽器的哪個窗口打開新頁面。

<aname="">錨點標記，同一網頁中設置多個錨點便于超鏈接的瀏覽。

如：<ahref="#標記１">跳轉到第一個標記上</a>

mailto:打開電子郵件:

<ahref="mailto:ldc_5588@163.comsubject=hello&body=您好">聯系我</a>

九、<mapname=""></map>圖像地圖將一個圖像分成多個部分，各部分分別指向不同的鏈接。

<areashape="形狀"coords="坐標"href="url">給圖像分塊

shape屬性可以是以下幾種形狀：

rect:矩形，此時的coord為矩形的左上角個右下角的坐標

poly:多邊形，此時的coord為多邊形的各個頂點

circle:圓，此時coord為圓習坐標及半徑

如：

<imgsrc="chinagif"usemap="mymap"/>

<mapname=mymap>

<areashape="rect"href="a.html"coords="140,20,280,60">

<areashape="poly"href="b.html"coords="100,100,180,80,200,400">

<areashape="circle"href="c.html"coords="10,100,60">

</map>

十、表格標簽：<table></table><tr></tr><td></td>

這三個標簽的層次結構：

<table></table>定義一個表格的開始和結束

<tr></tr>定義一行的開始和結束

<td></td>定義一個單元格的開始和結束

<table></table>屬性：

bgcolor:設置表格的背景色彩

border:設置表格的邊框的寬度

bordercolor:設置表格邊框色彩

bordercolorlight:設置表格邊框明亮部分的色彩

bordercolordark:設置表格邊框昏暗部分的色彩

cellspacing:設置單元格之間的間隔

cellpad設置單元格內部的內容與邊框的間隔

width:表格的寬度

height:表格的高度

align:整行單元格的內容水平對齊方式left,center,right

valign:整行單元格的內容豎直對齊方式topmiddle,bottom

bgcolor:設置這一行的色彩

width:單元格的寬度（大小）

height:單元格的高度

align:單元格內部內容的水平對齊方式

valign:單元格內部內容的豎直對齊方式

colspan:設置一個單元格跨占的列數

rowspan:設置一個單元格跨占的行數

nowrap:禁止單元格內的內容自動換行

<th></th>與<td></td>類似只不過里面顯示的內容是黑體居中的

十一、框架標簽<frameset></frameset><frame></frame>

什么是框架：將一個窗口分割成多部分，每一部分顯示一個獨立的頁面。

框架只是分割窗口。

<frameset></frameset>定義一個框架集：

rows:將窗口豎直拆分時窗口的大小比例

cols:將窗口水平拆分窗口的大小比例

<frame></frame>定義一個具體的框架窗口：

src:要顯示網頁的ＵＲＬ

name:框架窗口的名子

taget:該框架中的超鏈接默認的打開窗口_blank,_parent,_self,_top

scrolling:否在框架邊上出現滾動條yes,no,auto

noresize:禁止用戶拖動分隔線來調整框架的大小,直接將該屬生放入就可以了

name:框架窗口的名子

src:框架窗口中所顯示的新的網頁

十二、表單標簽：

什么時表單？

<form></form>:定義表單的開始和結束位置<略講>

action:處理表單內容的服務器程序的ＵＲＬ

method:提交給服務器處理表單信息的方式

get:將表單信息以ＵＲＬ參數的形式附在actionＵＲＬ后面

set:將表單信息以ＨＴＴＰ消息實體發送給ＷＥＢ服務器

target:設置服務器返回結果顯示的窗口

title:當鼠標放在表單上的時候以黃色的泡泡進行提示

<inputtype="submit">定義一個提交按鈕

action:指定ＵＲＬ所指定的服務器程序

value:按鈕上的文字

<inputtype="reset">:定義一個重新填寫的按鈕。

value:按鈕上的文字

<inputtype="text">:定義一個單行文本框

size:輸入區域的寬度，以字符個數為單位

value:文本框的內容

maxlength:用戶能夠輸入的最大字符串長度

readonly:屬性存在時，文本框可以獲得焦點，但用戶不能更改里面的內容。

disable:屬性存在時，文本框不能獲得焦點，也不能更改里面的內容。

<inputtype="checkbox">:定義一個復選框

name:復選框的名，同一組復選框用同一個名子

checked:該復選框是否被選中

value:指定復選框被選中時，這個復選框的后臺值

<inputtype="radio">:定義一個單選按鈕

name:單選按鈕的名，同一組單選按鈕用同一個名子

value:指定單選按鈕被選中時，這個單選按鈕的后臺值

<inputtype="hidden">表單上添加一個隱式的字段的元素，瀏覽器不會顯示這個字段

name:名子

value:值

當表單提交的時候會以name=valu形式提交到服務器上去。

<inputtype="button">:表單上定義一個普通的按鈕，這個按鈕通常與某個腳本代碼下關聯

<inputtype="password">:表單上定義一個密碼輸入區域.

<inputtype="file">:用來從本機向服務器傳文件

<inputtype="image">:表單上創建一個圖像元素。

圖像的源文件由src屬性來指定，沒有valu屬性。

圖像元素在某些情況下可以代替submit按鈕來使用

單擊圖像元時就會將表單信息和單擊處的x,y值一起發送到服務器

<select></select>創建一個下拉列表框或可以復選的列表框。

size:設置列表框中可見選項的數目。默認值是１，這時顯示的下拉列表框。

mutipl屬性：這是一個不且賦值的屬性，定義列表框是否可以多選。

列表框中定義各項是用<option></option>來實現的

<option></option>為列表框中添加項目

value:項目的后臺值

selected:指定項目是否被選定

<textarea></textarea>創建一個可輸入多行文本的文本框

cols:文本框的列數

rows:文本框的列數

十三、分區標簽：

<div></div>:區域標簽，層

<span></span>:區域標簽

十四、頭元素:

<base>標簽：用于指定網頁中超鏈接的基準地址。網頁中所有超鏈接的相對地址都以該地址為基準地址。

該標簽只能放在<head></head>標簽之間。

如：<basehref="http://www.sina.com/image"target="_blank">

name屬性主要用于在網頁中加入一些關于網頁的描述信息，例如，網頁的關鍵字，網頁的描述信息等

http-equiv屬性主要用于在HTML文檔中模擬HTTP頭。

什么是HTTP頭？

通過訪問網頁時，服務器除了返回網頁文件本身的內容（也就是瀏覽器中用查看源文件能看到東西）之外，還在返回網頁文件內容之前，傳送一部分被稱為HTTP頭的內容給瀏覽器，這部分肉容是瀏覽器的查看源文件中看不到HTTP頭的內容相當于服務器發送給瀏覽器的一些暗號指令，通知瀏覽器查看該網頁時應使用的字符編碼、否本地緩存、網頁的期時間、否間隔一定時間以后刷新頁面或跳到其它頁面等。

name屬性的設置：

Keywords:網頁的關鍵字，以便于在搜索引擎中進行收集信息。

<metaname="keywords"content="軟件工程師培訓,清華IT,華育國際">

Descript網頁描述信，以便于搜索。

Gener用于編輯此頁所用的工具名，content中填入所用的網頁編輯軟件。

Author用于說明網頁的作者，content中填入作者的姓名。

http-equiv屬性設置：

Content-Type:用于說明網頁內容的類型以及文本內容所使用的字符集編碼。

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

Refresh:告訴瀏覽器定時自動刷新網頁

<metahttp-equiv="Content-Type"content="1;url=http://www.sina.com.cn">

通知瀏覽器過一秒后跳轉到新浪網上去。

Expires:用于設定網頁的期時間。為了提高效率，瀏覽器可以被設置成緩存以前訪問的頁面，當再次訪問該頁面時，瀏覽器不會再去服務器上訪問，而是直接在本地緩存中讀到如果將其Content設為0則禁止瀏覽器使用緩存頁面。

<metahttp_equiv="Expires"content=""Mon,12,May,200700:00:00GMT>

Windows-Target:強制頁面在某個窗口顯示。例如要防止別人把你網頁作為frame頁面調用：

級元素：使用時，會自動換行的元素，可以包含行內元素和其他塊級元素，可以設置寬，高，上下左右邊距，默認 css 屬性 display 的值為 block

塊級元素常用的有哪些

div // 塊，經常用來布局的塊，類似箱子
h1-h6 // 標題，肯定是會換行的啦
p // 段落，我們寫文章，段落也是換行處理的
ul,ol,li // 列表，總不希望你寫的列表，表格還跟其他東西摻雜一起吧，
from // 表單，輸入框總希望能夠單獨是一塊獨立的
table // 表格，表格要整潔，總希望獨立出來
hr // 水平分割線，既然要分割，那也是要換行處理吧
pre // 預格式化文本，代碼按照我們手動編排好的順序輸出，你總不希望他還不給你行吧，不然就沒意義了
footer // 段尾，類似寫作文結尾，都是另起一行
article // 文章內容，看書的時候，文章內容都會在合適的位置給換行處理
canvas // 繪制圖形
address // 地址

行內元素：不會自動換行，不可以設置寬高，只能設置左右邊距，默認 css 屬性 display 的值為 inline

塊級元素常用的有哪些？

b // 加粗
big // 定義大字號
i //斜體
small // 小號文本
abbr // 定義縮寫，有些國際詞語是有縮寫的
acronym // 定義只取首字母的縮寫
cite // 引用，文章內容的某一句話可能是引用其他名人說的
code // 定義計算機代碼
dfn // 定義一個定義項目
em // 定義強調的本文
kbd // 定義鍵盤文本
strong // 定義重要的文本
samp // 定義樣本文本。
var // 定義變量
a // 錨點，內容里經常會有幾個關鍵詞，可以點擊過去查閱更多詳細信息
bdo
br // 換行
object // 內嵌對象
q // 短的引用
script
span // 普通文檔的節
sub // 定義下標文本
sup // 定義上標文本
button // 按鈕，
input // 控件
label // input 元素定義標注
select // 定義選擇列表，看起來很多，實際上占位就我們選擇的那一個
textarea // 定義一個多行的文本輸入控件

行內塊級元素，擁有行內元素的特性，不換行，也擁有塊級元素的特性：既可以設置寬高也可以設置上下左右邊距，默認 css 屬性 display 的值為 inline-block

常見行內塊級元素:

img // 圖片
video // 視頻
audio // 音頻
map // 圖像映射

塊級元素和行內元素如何轉換

塊級元素變成行內元素

display: inline;

行內元素變成塊級元素

display: block;

塊級元素、行內元素變成行內塊元素

display: inline-block;

其他

a 標簽只允許嵌套非 a 標簽的 inline 類型元素。
這么多，不要為難自己死記硬背，記住常用的，用常識去記住就可以啦，面試考你的時候，記不住的，用常識去推理，基本都正確。

.結構性定義

文件類型 <HTML></HTML> （放在檔案的開頭與結尾）

文件主題 <TITLE></TITLE> （必須放在「文頭」區塊內）

文頭 <HEAD></HEAD> （描述性資料，像是「主題」）

文體 <BODY></BODY> （文件本體）

（由瀏覽器控制的顯示風格）

標題 <H?></H?> （從1到6，有六層選擇）

標題的對齊 <H? ALIGN=LEFT|CENTER|RIGHT></H?>

區分 <DIV></DIV>

區分的對齊 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文區塊 <BLOCKQUOTE></BLOCKQUOTE> （通常會內縮）

強調 <EM></EM> （通常會以斜體顯示）

特別強調 <STRONG></STRONG> （通常會以加粗顯示）

引文 <CITE></CITE> （通常會以斜體顯示）

碼 <CODE></CODE> （顯示原始碼之用）

樣本 <SAMP></SAMP>

鍵盤輸入 <KBD></KBD>

變數 <VAR></VAR>

定義 <DFN></DFN> （有些瀏覽器不提供）

地址 <ADDRESS></ADDRESS>

大字 <BIG></BIG>

小字 <SMALL></SMALL>

與外觀相關的標簽（作者自訂的表現方式）

加粗 <B></B>

斜體 <I></I>

底線 <U></U> （尚有些瀏覽器不提供）

刪除線 <S></S> （尚有些瀏覽器不提供）

下標 <SUB></SUB>

上標 <SUP></SUP>

打字機體 <TT></TT> （用單空格字型顯示）

預定格式 <PRE></PRE> （保留文件中空格的大小）

預定格式的寬度 <PRE WIDTH=?></PRE>（以字元計算）

向中看齊 <CENTER></CENTER> （文字與圖片都可以）

閃耀 <BLINK></BLINK> （有史以來最被嘲弄的標簽）

字體大小 <FONT SIZE=?></FONT>（從1到7）

改變字體大小 <FONT SIZE=+|-?></FONT>

基本字體大小 <BASEFONT SIZE=?> （從1到7; 內定為3）

字體顏色 <FONT COLOR="#$$$$$$"></FONT>

說明  （瀏覽器不會顯示）

body {

scrollbar-face-color: #330033;

scrollbar-shadow-color: #FFFFFF;

scrollbar-highlight-color: #FFFFFF;

scrollbar-3dlight-color: #FFFFFF;

scrollbar-darkshadow-color: #FFFFFF;

scrollbar-track-color: #330033;

scrollbar-arrow-color: #FFFFFF;

}

</style>

將上面的代碼放在葉子代碼的<head></head>之間,顏色可根據自己的需要修改。

滾動條的代碼意思如下：

Scrollbar-Face-Color為滾動條表面顏色設定；

Scrollbar-Track-Color為滾動條底板顏色設定；

Scrollbar-Darkshadow為滾動條下邊和右邊邊沿顏色設定；

Scrollbar-Highlight-Color為滾動條上斜面和左斜面顏色設定；

Scrollbar-Shadow-Color為滾動條下斜面和右斜面顏色設定；

Scrollbar-3Dlight-Color為滾動條上邊和左邊的邊沿顏色設定；

Scrollbar-Arrow-Color為滾動條兩端箭頭顏色設定。

<!> 跑馬燈

<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=30>...</marquee>設定捲動距離

<marquee scrolldelay=300>...</marquee>設定捲動時間

1)貼圖：<img src="圖片地址">

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

3)在新窗口打開連接：<a href="相關地址" target="_blank">寫上要寫的字</a>

4)移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>

5)字體加粗：<b>寫上你想寫的字</b>

6)字體斜體：<i>寫上你想寫的字</i>

7)字體下劃線: <u>寫上你想寫的字</u>

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

9)字體加大: <big>寫上你想寫的字</big>

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

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

15)貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

16)換行：<br>

17)段落：<p>段落</p>

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

19)換帖子背景：<body background="背景圖片地址">

20)固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" body

bgproperties=fixed>

21)定制帖子背景顏色：<body bgcolor="#value">(value值見10)

22)帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>

23)貼網頁：<iframe. src="相關地址" width="寬度" height="高度"></iframe>

1、店鋪音樂代碼:音樂網址" loop="-1">

2、圖片制作代碼：＜img src="這里放圖片地址"＞

3、公告圖片代碼：＜img border="0" src="這里放圖片地址" /＞或＜img src="這里放圖片地址"/＞

4、懸浮掛飾代碼：＜img src="這里放圖片地址" style="left:20px; position: relative; top:0px" /＞

5、商品分類代碼:＜img src="這里放圖片地址"/＞

6、字體大小代碼:＜font size="2"＞這里放要處理的文字，可用3、4、5等設置大小＜/font＞

7、字體顏色代碼:＜font color="red"＞這里放要處理的文字，可以換成blue,yellow等＜/font＞

8、文字鏈接代碼:＜a href="網頁地址"＞鏈接的文字，在分類欄里用時鏈接的網頁地址必須縮短＜/a＞

9、移動文字代碼:＜marquee＞從右到左移動的文字＜/marquee＞

10、背景音樂代碼：＜bgsound loop="-1" src="這里放音樂地址"＞＜/bgsound＞

11、圖片附加音樂代碼：＜img border=0 src="這里放圖片地址" dynsrc="這里放音樂地址"＞

12、浮動圖片代碼:＜img alt="1" height="150" src="這里放圖片地址"/＞

公告圖片的代碼：公告掛飾：店鋪分類代碼:背景音樂代碼：換行代碼

計數器代碼顏色代碼：

1白色 #FFFFFF

2紅色#FF0000

3綠色#00FF00

4藍色#0000FF

5牡丹紅#FF00FF

6青色 #00FFFF

7黃色#FFFF00

8黑色#000000

9海藍#70DB93

10巧克力色#5C3317

11藍紫色 #9F5F9F

12黃銅色#B5A642

13亮金色#D9D919

14棕色#A67D3D

15青銅色 #8C7853

162號青銅色 #A67D3D

17士官服藍色 #5F9F9F

18冷銅色 #D98719

19銅色 #B87333

20珊瑚紅 #FF7F00

21紫藍色 #42426F

22深棕 #5C4033

23深綠 #2F4F2F

24深銅綠色 #4A766E

25深橄欖綠 #4F4F2F

26深蘭花色 #9932CD

27深紫色 #871F78

28深石板藍 #6B238E

29深鉛灰色 #2F4F4F

30深棕褐色 #97694F

32深綠松石色 #7093DB

33暗木色 #855E42

34淡灰色 #545454

35土灰玫瑰紅色 #856363

36長石色 #D19275

37火磚色#8E2323

38森林綠 #238E23

39金色 #CD7F32

40鮮黃色 #DBDB70

41灰色 #C0C0C0

42銅綠色 #527F76

43青黃色 #93DB70

44獵人綠 #215E21

45印度紅 #4E2F2F

46土黃色 #9F9F5F

47淺藍色 #C0D9D9

48淺灰色 #A8A8A8

49淺鋼藍色 #8F8FBD

59淺木色 #E9C2A6

60石灰綠色 #32CD32

61桔黃色 #E47833

62褐紅色 #8E236B

63中海藍色 #32CD99

64中藍色 #3232CD

65中森林綠 #6B8E23

66中鮮黃色 #EAEAAE

67中蘭花色 #9370DB

68中海綠色 #426F42

69中石板藍色 #7F00FF

70中春綠色 #7FFF00

71中綠松石色 #70DBDB

72中紫紅色 #DB7093

73中木色 #A68064

74深藏青色 #2F2F4F

75海軍藍 #23238E

76霓虹籃 #4D4DFF

77霓虹粉紅 #FF6EC7

78新深藏青色 #00009C

79新棕褐色 #EBC79E

80暗金黃色 #CFB53B

81橙色 #FF7F00

82橙紅色 #FF2400

83淡紫色 #DB70DB

84淺綠色 #8FBC8F

85粉紅色 #BC8F8F

86李子色 #EAADEA

87石英色 #D9D9F3

88艷藍色 #5959AB

89鮭魚色 #6F4242

90猩紅色 #BC1717

91海綠色 #238E68

92半甜巧克力色 #6B4226

93赭色 #8E6B23

94銀色 #E6E8FA

95天藍 #3299CC

96石板藍 #007FFF

97艷粉紅色 #FF1CAE

98春綠色 #00FF7F

99鋼藍色 #236B8E

100亮天藍色 #38B0DE

101棕褐色 #DB9370

102紫紅色 #D8BFD8

103石板藍色 #ADEAEA

104濃深棕色 #5C4033

105淡淺灰色 #CDCDCD

106紫羅蘭色 #4F2F4F

107紫羅蘭紅色 #CC3299

108麥黃色#D8D8BF

109黃綠色 #99CC32

簡單常用HTML代碼大全（修改網頁必備）

網頁常用HTML代碼大全

超鏈接，用的最多：

點擊在當前頁打開網站

<a >這是我的網站</a>

效果：這是我的網站

點擊彈出網站

<a target="_blank">這是我的網站</a>

<br>這個是向下一行，比如

歡迎光臨我的網站<br>希望開心

演示效果就是：

歡迎光臨我的網站

希望開心

<p>向下一大行，比如

歡迎光臨我的網站<p>希望開心

演示效果就是：

歡迎光臨我的網站

希望開心

<b>這是粗體字

比如 <b >我的網站</ b>

演示效果：我的網站

我的網站這是字體的顏色BLUE是藍，RED是紅

演示

忽視右鍵

<body >

或

如何幾秒后轉到別的頁面？

<META. HTTP-EQUIV="Refresh" C>

點擊關閉窗口

<a href="javascript.:top.window.close();">點擊關閉窗口</a>！

請問如何去掉主頁右面的滾動條？

如何做到讓一個網頁自動關閉.

<html>

<head>

</object>

</head>

<body >

這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>

如何在不刷新頁面的情況下刷新css?

<style>

button{ color:#000000;}

</style>

<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為紅色</button>

請問如何讓網頁自動刷新？

在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新，你可以更改為任意值。

如何讓頁面自動刷新？

方法一，用refresh

HTML 代碼片段如下:

<head>

</head>

5表示刷新時間

[Ctrl+A 全部選擇提示:你可先修改部分代碼，再按運行]

方法二，使用setTimeout控制

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

</script>

如何讓超鏈接沒有下劃線

在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：

a { text-decoration: none}

--> </style>

請問如何去掉IE的上下滾動條？

</body>

怎樣才能把RealPlayer文件在網頁做一個試聽連接？

如何用html實現瀏覽器上后退按鈕的功能？

或者

請問怎么在網頁中改變鼠標的箭頭形狀？

HTML 代碼片段如下:

<body>

<a href="#" style="cursor: crosshair ">crosshair </a><br>

<a href="#" style="cursor: default ">default </a><br>

<a href="#" style="cursor: e-resize ">e-resize </a><br>

<a href="#" style="cursor: ne-resize ">ne-resize </a><br>

<a href="#" style="cursor: nw-resize">nw-resize</a><br>

<a href="#" style="cursor: n-resize">n-resize</a><br>

<a href="#" style="cursor: se-resize">se-resize</a><br>

<a href="#" style="cursor: sw-resize">sw-resize</a><br>

<a href="#" style="cursor: s-resize">s-resize</a><br>

<a href="#" style="cursor: w-resize">w-resize</a><br>

</body>

怎樣不使用頁面的緩存？即每一次打開頁面時不是調用緩存中的東西

<META. HTTP-EQUIV="

ragma" C>

頁面打開時自動彈出一個窗口的代碼怎么寫？

HTML 代碼片段如下:

<html>

<head>

<title>Untitled Document</title>

<!--

function MM_openBrWindow(theURL,winName,features) { //v2.0

　window.open(theURL,winName,features);

}

//-->

</script>

</head>

</body>

</html>

如何讓我的頁面出現一個會講話的小人？Merlin

HTML 代碼片段如下:

<HTML>

<HEAD>

<META. http-equiv=Content-Type c>

</HEAD>

<BODY>

<p><OBJECT id=sims classid=CLSID

45FD31B-5C6E-11D1-9EC1-00C04FD7081F>

　</OBJECT>

var MerlinID;

var MerlinACS;

sims.Connected = true;

MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS);

Merlin = sims.Characters.Character(MerlinID);

Merlin.Show();

Merlin.Play("Surprised");

Merlin.Speak("大家好");

Merlin.Play("GestureLeft");

Merlin.Think("我是默林！");

Merlin.Play("

leased");

Merlin.Think("可愛嗎？");

Merlin.Play("GestureDown");

Merlin.Speak("哈哈！");

Merlin.Hide();

function LoadLocalAgent(CharID, CharACS){

LoadReq = sims.Characters.Load(CharID, CharACS);

return(true);

}

</SCRIPT>

</p>

<p>看此效果必須裝有office2000！！！</p>

</BODY>

</HTML>

在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

HTML 代碼片段如下:

<STYLE>

body　 {background-image:url(logo.gif);

background-repeat:no-repeat; background-position:center }

</STYLE>

</head>

</body>

</html>

[Ctrl+A 全部選擇提示:你可先修改部分代碼，再按運行]

background-repeat:no-repeat; 是讓背景圖不占滿整個頁面

body bgproperties="fixed" 是拉動scroll時背景圖不動

文本輸入框什么屬性能實現不可輸入？

HTML 代碼片段如下:

或者

如何禁止自己的頁面在別人的框架里打開？

把以下代碼加至你的<head>區

if (window.top!=self){

window.top.location=self.location

}

</script>

如何實現首頁全屏幕顯示？

HTML 代碼片段如下:

<html>

<body><script. language="<B style="color:black;background-color:#A0FFFF">javascript</B>">

var coolw=642

var coolh=400

var coolhuang=window.open("http://www.51js.com","coolhuang","width="+coolw+",height="+coolh+",

fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")

window.close()

</script></body></html>

如何監聽一個窗口被關閉了？

HTML 代碼片段如下:

<body >

如何禁止Ctrl+N？

HTML 代碼片段如下:

如何把頁面加入用戶的收藏夾？

HTML 代碼片段如下:

<a href="<B style="color:black;background-color:#A0FFFF">javascript</B>:window.external.AddFavorite(‘‘‘‘http://www.51js.com‘‘‘‘,‘‘‘‘無憂腳本‘‘‘‘)">收藏無憂腳本</a>

如何在我的頁面中加入背景音樂？

IE: <bgsound src="*.mid" loop=infinite>

NS:<embed src="*.mid" autostart=true hidden=true loop=true>

*.mid你的背景音樂的midi格式文件

關于頁面轉換效果

或

說明：Transition=23是隨機效果，另可以選0-22任一數字固定某個效果

如何設定打開頁面的大小

HTML 代碼片段如下:

怎樣雙擊滾屏，單擊停止？

HTML 代碼片段如下:

<html>

<head>

</head>

<body>

var currentpos,timer;

function initialize()

{

timer=setInterval("scrollwindow()",10);

}

function sc(){

clearInterval(timer);

}

function scrollwindow()

{

currentpos=document.body.scrollTop;

window.scroll(0,++currentpos);

if (currentpos != document.body.scrollTop)

sc();

}

document.onmousedown=sc

document.ondblclick=initialize

</script>

</body>

</html>

如何讓body中的文字不被選中？

HTML 代碼片段如下:

如何讓彈出的窗口不能關閉？

在新開的窗口中加入如下代碼

</body>

如何讓瀏覽器在保存頁面時保存失敗？

HTML 代碼片段如下:

<<B style="color:black;background-color:#ffff66">IFRAME</B> SRC="*.html">

</<B style="color:black;background-color:#ffff66">IFRAME</B>>

</NOSCRIPT>

表單中如何用圖片按鈕實現 reset?

<html>

<head>

function aaa(){

document.forms[0].reset()

}

</script>

</head>

<body>

<form>

</form>

</body></html>

進入網頁時彈出的信息對話框

<body >

關閉窗口后彈出對話框

<body >

告別提示

只要你肯干,沒有什么不能成功的.

1。忽視右鍵

或

2。加入背景音樂

　 IE:<bgsound src="*.mid" loop=infinite>

　 NS:<embed src="*.mid" autostart=true hidden=true loop=true>

　 </embed>

　 *.mid你的背景音樂的midi格式文件

3。簡單的window.open方法

　 <a href="#"

　 nclick="javascript:window.open(文件路徑/文件名,newwindow,

　 toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,

　 width=400,height=300);">文字或圖片</a>

參數解釋：

　 <SCRIPT. LANGUAGE="javascript"> js腳本開始；

　 window.open 彈出新窗口的命令；

文件路徑/文件名彈出窗口的文件名；

　 newwindow 彈出窗口的名字（不是文件名），非必須，可用空代替；

　 width=400 窗口寬度；

　 height=300 窗口高度；

　 top=0 窗口距離屏幕上方的象素值；

　 left=0 窗口距離屏幕左側的象素值；

　 toolbar=no 是否顯示工具欄，yes為顯示；

　 menubar，scrollbars 表示菜單欄和滾動欄。

　 resizable=no 是否允許改變窗口大小，yes為允許；

　 location=no 是否顯示地址欄，yes為允許；

　 status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；

　 </SCRIPT> js腳本結束

4。簡單的頁面加密

　 <script. LANGUAGE="javascript">

<!--

　 function loopy(){

var sWord ="";

while(sWord!="login"){sWord=prompt("請輸入你的登陸密碼");}

alert("登陸成功！");

　 }

　 loopy()

　 //-->

　 </script>

5。拉動頁面時背景圖不動

　 <style>

　 body{background-image:url(logo.gif);

　 background-repeat:no-repeat;background-position:center}

　 </style>

6。讓瀏覽器在保存頁面時保存失敗

7。隨機替換圖片

　 document.write(<img src="img/+parseInt(Math.random()*(5))

　 +.gif"height="40" width="50">

　 </script>

圖片文件名為0.gif 1.gif 2.gif 3.gif 4.gif

8。窗口定時關閉

先將如下代碼網頁文件的區：

　 <script. language="javascript">

　 function closeit() { setTimeout("self.close()",10000) //毫秒 }

　 </script>

然后再在<body>標內加入如：<body nload="closeit()">

9。網頁自動關閉

　 <html>

　 <head>

　 <object id=closes type="application/x-oleobject"

　 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

　 </object>

　 </head>

這個窗口會在10秒過后自動關閉,而且不會出現提示.

　 </body>

　 </html>

10。網頁自動刷新

在head部記入

　 <META. HTTP-EQUIV="Refresh" content="20">

其中20為20秒后自動刷新，你可以更改為任意值。

11。網頁自動轉頁

　 <META. HTTP-EQUIV="Refresh" CONTENT="時間(秒);URL=地址">

12。保持layer在最前面，而不被Iframe、Object所覆蓋

在Layer中再插Iframe. 或 Object 設z-Index值

　 <div z-Index:2><object xxx></object> ＃前面

　 <div z-Index:1><object xxx></object> ＃后面

　 <div id="Layer2" style="position:absolute; top:40;width:400px;

　 height:95px;z-index:2"> height=100% width=100%>

　 <iframe. width=0 height=0></iframe>

　 </div>

　 <div id="Layer1" style="position:absolute; top:50;width:200px;

　 height:115px;z-index:1">

　 <iframe. height=100% width=100%></iframe>

　 </div>

13。返回上一頁

　 <a href=javascript:history.back(1)>『返回上一頁』</a>

14。關閉窗口

15。關于iframe的透明背景

　 <IFRAME. ID="iFrame1" SRC="iframe.htm"

　 allowTransparency="true"

　 style="background-color: green"></IFRAME>

16. ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵

<table border ncontextmenu=return(false)><td>no</table> 可用于Table

17. <body nselectstart="return false"> 取消選取、防止復制

18.onpaste="return false" 不準粘貼

19.oncopy="return false;" ncut="return false;" 防止復制

20. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標

21. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標

22. <input style="ime-mode:disabled"> 關閉輸入法

23. 永遠都會帶著框架

if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網頁

// --></script>

24. 防止被人frame.

<SCRIPT. LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

25. 網頁將不能被另存為

26. 查看網頁源代碼

<input type=button value=查看網頁源代碼

onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">

27.刪除時確認

28.屏蔽功能鍵Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift鍵!"); //可以換成ALT　CTRL

}

document.onkeydown=look;

</script>

29. 網頁不會被緩存

<META. HTTP-EQUIV="pragma" CONTENT="no-cache">

<META. HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

<META. HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

或者<META. HTTP-EQUIV="expires" CONTENT="0">

30.怎樣讓表單沒有凹凸感？

或 <input type=text style="border-left:none; border-right:none; border -top:none; border-bottom: 1 solid #000000"></textarea>

31.不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

32.怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？

33.電子郵件處理提交表單

<form. name="form1" method="post" action="mailt****@***.com" enctype="text/plain">

</form>

34.在打開的子窗口刷新父窗口的代碼里如何寫？

window.opener.location.reload()

35.如何設定打開頁面的大小

打開頁面的位置<body nload="top.moveBy(300,200);">

36.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<STYLE>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

37. 檢查一段字符串是否全由數字組成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

38. 獲得一個窗口的大小

document.body.clientWidth; document.body.clientHeight

39. 怎么判斷是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

else alert("全是字符");

40.TEXTAREA自適應文字行數的多少

</textarea>

41. 日期減去天數等于第二個日期

function cc(dd,dadd)

{

//可以加上錯誤處理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

} cc("12/23/2002",2)

</script>

42. 選擇了哪一個Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="style" checked>Style.

<INPUT name="radio1" type="radio" value="barcode">Barcode

</BODY></HTML>

43.腳本永不出錯

<SCRIPT. LANGUAGE="JavaScript">

</SCRIPT>

44.ENTER鍵可以讓光標移到下一個輸入框

45. 檢測某個網站的鏈接速度：

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

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="www.njcatv.net"

autourl[2]="javacool.3322.net"

autourl[3]="www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]="www.cctv.com"

function butt(){

document.write("<form. name=autof>")

for(var i=1;i<autourl.length;i++)

document.write("<input type=text name=txt"+i+" size=10 value=測試中

……> =》<input type=text

name=url"+i+" size=40> =》<input type=button value=GO

onclick=window.open(this.form.url"+i+".value)><br>")

document.write("<input type=submit value=刷新></form>")

}

butt()

function auto(url){

document.forms[0]["url"+b].value=url

if(tim>200)

{document.forms[0]["txt"+b].value="鏈接超時"}

else

{document.forms[0]["txt"+b].value="時間"+tim/10+"秒"} b++ }

function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 nerror=auto("http://"+autourl+"")>")}

run()</script>

46. 各種樣式的光標

auto ：標準光標

default ：標準箭頭

hand ：手形光標

wait ：等待光標

text ：I形光標

vertical-text ：水平I形光標

no-drop ：不可拖動光標

not-allowed ：無效光標

help ：?幫助光標

all-scroll ：三角方向標

move ：移動標

crosshair ：十字標

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

47、禁止鼠標右鍵，把Demo的圖片全都設為表格的背景，表格的大小與圖片的大小一樣。這樣做看起來是一樣的，主要是防止鼠標經過圖片時會出現另存的按鈕。禁止鼠標右鍵的代碼很簡單：<script. LANGUAGE="JavaScript"> function click() { if (event.button==2) {alert('呵呵，不好意思，你甭想使用右鍵下載圖片：）'); } } document.onmousedown=click</script>

1. 怎樣定義網頁語言( 字符集)?

----在制作網頁過程中, 你首先要定義網頁語言, 以便訪問者瀏覽器自動設置語言, 而我們用所見即所得的HTML 工具時, 都沒有注意到這個問題, 因為它是默認設置。要設置的語言可以在HTML 代碼狀態下找到:

$#@60; meta http －equiv="Content Type" content="text/html; charset=gb2312" $#@62;

----把charset=gb2312 改換成其它語言代碼即可, 比如英文:charset=en.

2. 怎樣防止別人把你的網頁放到框架里?

----因為框架（frame）的緣故, 有許多人把別人的網頁放置到自己的框架里, 使之成為自己的一頁。如果你要防止別人這樣做, 可以加入下列JavaScript 代碼即可, 它會自動監測, 然后跳出別人的框架。

$#@60; script language="javascript" $#@62;

？?if (self != top) { top.location = self.location; }

$#@60; /script $#@62;

3. 怎樣設置字體?

----在制作網頁過程中, 大家都喜歡使用漂亮的字體。但是, 如果訪客瀏覽器沒有安裝同樣的字體，看到你的網頁會是很普通的字體。如何防止這種情況出現呢? 大家知道字體設置的標簽是Font, 而它有個屬性是Face, 該屬性是定義字體的, 你可以這樣設置:, 訪客的瀏覽器就會按照Face 定義的字體順序設置已安裝的字體。目前動態主頁有種技術, 可以把字體信息用向量格式存儲, 然后利用訪客本身機器含有的公共信息庫把字體快速的組裝起來, 這樣, 就不用擔心訪客是否安裝有某種字體了。

4. 怎樣在網頁中加入注釋?

----在共同開發網頁中, 加入注釋是防止分工被搞混淆或者注釋某段代碼特殊的含加入注釋的格式是:

$#@60; ! －－ Microsoft FrontPage 3.0 －－ $#@62;。

5. 怎樣測試瀏覽器并自動裝入所需要的網頁?

----目前微軟和網景的瀏覽器并不能完全兼容所有網頁, 有的在某種瀏覽器里非常漂亮, 而用其它瀏覽器查看時卻一團糟。如果你需要測試瀏覽器, 可以加入以下JavaScript 代碼并保存單獨一個網頁:

$#@60; script LANGUAGE="JavaScript" $#@62;

function TestBrowser(){

ie = ((navigator.appName ==

"Microsoft Internet Explorer") ＆＆

(parseInt(navigator.appVersion) $#@62;= 3 ))

ns = ((navigator.appName == "Netscape") ＆＆

(parseInt(navigator.appVersion) $#@62;= 3 ))

if (ns) {

setTimeout(location.href="nn4.htm",10);

} else {

setTimeout(location.href="ie4.htm",10);

}

$#@60; /script $#@62;

實例請參考:

http://www.netease.com/～tiantao/test.htm

6. 怎樣讓鏈接沒有下劃線?

----只要在加入以下代碼, 所有鏈接就都沒有下劃線了:

$#@60; style type="text/css" $#@62;

$#@60; ! －－

A{text －transform: none;

text －decoration: none ;}

a:hover { text －decoration:underline }

－－ $#@62;

$#@60; /style $#@62;

7. 怎樣在網頁中加入E-mail 鏈接并顯示預定的主題?

A HREF=mailto:lovett@163.net?subject=test

8. 怎樣讓背景圖像不滾動?

----Internet Explorer 瀏覽器支持一個Body 屬性Bgproperties, 它可以讓背景不滾動。

$#@60; Body Background="c98.gif" Bgproperties="fixed" $#@62;

9. 怎樣評定網頁的級別?

----在IE4.0 瀏覽器中, 有一項功能是過濾網站的, 一些受限制的網站被過濾掉, 而該網站必須被RSAC( 美國娛樂委員會) 評定了級別IE4.0 才能過濾, 如果你要評級可以在網頁中加入以下代碼:

$#@60; meta http －equiv="PICS －Label"????

content=(PICS －1.1 "http://www.rsac.org/ratingsv01.html"

？?l gen true comment "RSACi North America Server"

？?for "http://youHostname"

？?on "1998.11.26GMT08:15 ?0500"

？?r (n 0 s 0 v 0 l 0))$#@62;

10. 怎樣定義本網頁的關鍵字?

----在網頁中加入關鍵字, 可以供某些搜索站臺機器人的使用, 它們會利用該關鍵字為你的網站做索引, 這樣, 當別人用關鍵字搜索網站時, 如果你的網頁包含該關鍵字, 那么就可以被列出了, 定義本網頁關鍵字, 可以加入以下代碼:

----$#@60; meta name="Keywords" content="china,enterprise,business,net" $#@62;

----Content 所包含的就是關鍵字, 你可以自行設置。

----這里有個技巧, 你可以重復某一個單詞, 這樣可以提高自己網站的排行位置, 如:

----$#@60; meta name="Keywords" CONTENT="china,china,china,china" $#@62;

11. 怎樣鏈接本網頁的對象?

----有時鏈接發生在一個網頁里, 比如頁面上半部分列出了目錄, 下部分就列出了內容, 而單擊目錄任何一個項目都可以跳到指定部分, 可以在要被鏈接的內容部分設置如下方式:

$#@60; A NAME=" ＃t1" $#@62;$#@60; /A $#@62;

而要鏈接到以上設置的部分, 可以如下編制:

$#@60; A HREF="index.htm ＃t1" $#@62;t1$#@60; /A $#@62;

12. 怎樣為不支持框架結構的瀏覽器指定內容?

----為了防止不支持框架結構的瀏覽器訪問你的網頁, 可以在你的網頁中加入以下內容:

$#@60; body $#@62;

$#@60; noframes $#@62;

本網頁是框架結構, 請下載新的瀏覽器瀏覽

$#@60; /noframes $#@62;

$#@60; /body $#@62;

13. 怎樣刪除表格邊框?

----有時需要刪除表格的邊框, 你可以把Border 設置為如下代碼:

$#@60; body $#@62;

$#@60; table border="0" width="100 ％" $#@62;

$#@60; tr $#@62;

$#@60; td width="100 ％" $#@62;$#@60; /td $#@62;

$#@60; /tr $#@62;

$#@60; /table $#@62;

$#@60; /body $#@62;

14. 怎樣隱藏在狀態欄里出現的LINK 信息?

----大家知道, 當你指向一個鏈接時, 該鏈接的信息會出現在瀏覽器狀態欄里, 如果需要隱藏信息, 可以如下設置:

$#@60; a onMouseOver="window.status=none ;

return true" $#@62;test$#@60; /a $#@62;

15. 怎樣在網頁中加入多媒體文件?

----有些多媒體文件無需其他程序就可以播放, 而有許多多媒體文件需要外部程序的幫助, 當瀏覽器下載不支持的格式時會調用外部程序。如果瀏覽器沒有安裝這種外部程序, 那么瀏覽器會自動去下載；如果你需要加入多媒體格式, 可設置如下代碼:

$#@60; EMBED SRC="tt.ram" AUTOSTART="TRUE" LOOP="2" WIDTH="80" HEIGHT="30" $#@62;

----對于不支持EMBED 標簽的瀏覽器, 可以改用標簽。

16. 怎樣在網頁中加入電子郵件表單提交?

----表單提交需要CGI 程序的支持, 但你也可以利用E ？mail 提交, 當你設計好表單后, 把Action 內容加入郵件地址即可, 如下:

form method="POST" action="mailto:lovett@163.net" ENCTYPE="text/plain"$#@62;

17. 怎樣隱藏熱訊分析的圖標?

----熱訊分析是許多網友使用的服務, 它能幫助你分析網站的流量, 如果你想隱藏該服務圖標, 可以把服務代碼中的 width=88 height=31 都改為1 即可。

18. 怎樣在網頁中加入最后修改日期?

----在中加入以下代碼即可:

$#@60; Script Language="Java Script" $#@62;

document.write

(" 最后修改日期" ＋document.lastModified);

$#@60; /Script $#@62;

在線咨詢

上一篇：第11天｜16天搞定前端，CSS的圓角邊框，讓人賞心悅目
下一篇：XML HttpRequest 最佳實踐詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML標簽以及各個標簽屬性大全（網頁制作必備）

級元素：使用時，會自動換行的元素，可以包含行內元素和其他塊級元素，可以設置寬，高，上下左右邊距，默認 css 屬性 display 的值為 block

行內元素：不會自動換行，不可以設置寬高，只能設置左右邊距，默認 css 屬性 display 的值為 inline

行內塊級元素，擁有行內元素的特性，不換行，也擁有塊級元素的特性：既可以設置寬高也可以設置上下左右邊距，默認 css 屬性 display 的值為 inline-block

塊級元素和行內元素如何轉換

其他

您的項目需求