網頁代碼:標記語言,跑馬燈效果,字型效果,區斷標記,連結格式,貼圖與音樂,表格語法

所謂的網頁代碼，就是指在網頁製作過程中需要用到的一些特殊的“語言”，設計人員通過對這些“語言”進行組織編排製作出網頁，然後由瀏覽器對代碼進行“翻譯”後才是我們最終看到的效果。

製作網頁時常用的代碼有HTML，JavaScript，ASP，PHP，CGI等，其中超文本標記語言（標準通用標記語言下的一個套用、外語簡稱：HTML）是最基礎的網頁代碼。

基本介紹

中文名：網頁代碼
定義：網頁製作過程需用的特殊“語言”
常用代碼：HTML，JavaScript，ASP，PHP等
基礎代碼：超文本標記語言
代碼最佳化：對程式代碼進行等價變換
程式代碼分類：目標代碼、中間代碼

標記語言,跑馬燈效果,字型效果,區斷標記,連結格式,貼圖與音樂,表格語法,分割視窗,結構性定義,連結與圖形,分隔,背景與顏色,表格,相關資料,

標記語言

下面主要講述的就是HTML代碼的一些簡單使用：

<!--這是壹條注釋，且不會呈現在渲染器或者網路瀏覽器之上。-->

跑馬燈效果

<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>設定捲動距離

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

註：在HTML5中廢棄了只有部分瀏覽器支持的marquee標籤其它還包括applet、bgsound、blink、等標籤。

字型效果

<h1>...</h1>標題字(最大 )

<h6>...</h6>標題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強調)

<i>...</i>斜體字

<em>...</em>斜體字(強調)

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字型

<xmp>...</xmp>固定寬度字型(在檔案中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字型(不執行標記符號)

<listing>...</listing> 固定寬度小字型

<font color=00ff00>...</font>字型顏色

<font size=1>...</font>最小字型

<font style ='font-size:100 px'>...</font>無限增大

<FONT FACE> 任意指定所用的字形

<BASEFONT SIZE> 更改預設字形大小

<BIG> 顯示大字型

<BLINK> 閃爍的文字

<BR> 換行

區斷標記

<hr>水平線

<hr size='9'>水平線(設定大小)

<hr width='80%'>水平線(設定寬度)

<hr color='ff0000'>水平線(設定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

連結格式

<base href=地址>(預設好連結路徑)

<a href=地址></a>外部連結

<a href=地址 target='_blank'></a>外部連結(另開新視窗)

<a href=地址 target='_top'></a>外部連結(全視窗連結)

<a href=地址 target='頁框名'></a>外部連結(在指定頁框連結)

<A HREF TARGET> 指定超級連結的分割視窗

<A HREF=#錨的名稱> 指定錨名稱的超級連結

<A HREF> 指定超級連結

<A NAME=錨的名稱> 被連結點的名稱

<ADDRESS>....</ADDRESS> 用來顯示電子信箱地址

貼圖與音樂

<img src=圖片地址>貼圖

<img src=圖片地址 width='180'>設定圖片寬度

<img src=圖片地址 height='30'>設定圖片高度

<img src=圖片地址 alt='提示文字'>設定圖片提示文字

<img src=圖片地址' border='1'>設定圖片框線

<bgsound src=MID音樂檔案地址>背景音樂設定

表格語法

<table align=left>...</table>表格位置,置左

<table align=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址

<table border=框線大小>...</table>設定表格框線大小(使用數字)

<table bgcolor=顏色碼>...</table>設定表格的背景顏色

<table borderclor=顏色碼>...</table>設定表格框線的顏色

<table borderclordark=顏色碼>...</table>設定表格暗框線的顏色

<table borderclorlight=顏色碼>...</table>設定表格亮框線的顏色

<table cellpadding=參數>...</table>指定內容與格線線之間的間距(使用數字)

<table cellspacing=參數>...</table>指定格線線與格線線之間的距離(使用數字)

<table cols=參數>...</table>指定表格的欄數

<table frame=參數>...</table>設定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數字)

<table height=高度>...</table>指定表格的高度大小(使用數字)

<td colspan=參數>...</td>指定儲存格合併欄的欄數(使用數字)

<td rowspan=參數>...</td>指定儲存格合併列的列數(使用數字)

<CAPTION>...</CAPTION> 為表格加上標題

<TABLE BORDER=n> 調整表格的寬線高度

<TABLE CELLPADDING> 調整數據域位之邊界

<TABLE CELLSPACING> 調整表格線的寬度

<iframevspace="0"hspace="0"scrolling="no"frameborder="0"id="clip"name="clip"width="600"height="322"src="http://top.baidu.com/clip?b=507&hd_h_info=1&p_name=%E5%89%B5%E7%B6%AD%E5%B0%88%E6%B3%A8%E5%81%A5%E5%BA%B7%E7%A7%91%E6%8A%80&hd_border=1&hd_h=1&hd_meshline=1&col=2&hd_searches=1&line=20"></iframe>

<TABLE HEIGHT> 調整表格的高度

<TABLE WIDTH> 調整表格的寬度

<TABLE>...</TABLE> 產生表格的卷標

<TD ALIGN> 調整表格欄位之左右對齊

<TD BGCOLOR> 設定表格欄位之背景顏色

<TD COLSPAN ROWSPAN> 表格欄位的合併

<TD NOWRAP> 設定表格欄位不換行

<TD VALIGN> 調整表格欄位之上下對齊

<TD WIDTH> 調整表格欄位寬度

<TD>...</TD> 定義表格的數據域位

分割視窗

<frameset cols=\"20%,*\">左右分割,將左框線架分割大小為20%右框線架的大小瀏覽器會自動調整

<frameset rows=\"20%,*\">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整

<frameset cols=\"20%,*\">分割左右兩個框架

<frameset cols=\"20%,*,20%\">分割左中右三個框架

<frameset rows=\"20%,*,20%\">分割上中下三個框架

<FRAME MARGINHEIGHT> 設定視窗的上下邊界

<FRAME MARGINWIDTH> 設定視窗的左右邊界

<FRAME NAME> 為分割視窗命名

<FRAME NORESIZE> 鎖住分割視窗的大小

<FRAME SCROLLING> 設定分割視窗的滾動條

<FRAME SRC> 將HTML檔案加入視窗

<FRAMESET COLS> 將視窗分割成左右的子視窗

<FRAMESET ROWS> 將視窗分割成上下的子視窗

<FRAMESET>...</FRAMESET> 劃分分割視窗

<CAPTION ALIGN> 設定表格標題位置

<CENTER> 向中對齊

<CITE>...<CITE> 用於引經據典的文字

<CODE>...</CODE> 用於列出一段程式代碼

<COMMENT>...</COMMENT> 加上批註

<DD> 設定定義列表的項目解說

<DFN>...</DFN> 顯示\"定義\"文字

<DIR>...</DIR> 列表文字卷標

<DL>...</DL> 設定定義列表的卷標

<DT> 設定定義列表的項目

<EM> 強調之用

結構性定義

檔案類型<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>

連結與圖形

連結<A href='/URL'></A>

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

<A HREF='#***'></A> （如果錨點現有檔案）

連結到目的視框<A href='/URL' TARGET='***'></A>

設定錨點<A NAME='***'></A>

圖形<IMG src='/URL'>

圖形看齊方式<IMG src='/URL' ALIGN=TOP|BOTTOM|MIDDLE>

圖形看齊方式<IMG src='/URL'

取代文字<IMG src='/URL' ALT='***'> （如果沒有辦法顯示圖形則顯示此文字）

點選圖<IMG src='/URL' ISMAP> （需要CGI程式）

N2.0 點選圖<IMG src='/URL' USEMAP='URL'>

N2.0 地圖<MAP NAME='***'></MAP>（描述地圖）

N2.0 段落<AREA SHAPE='RECT' COORDS=',,,' href='/URL'|NOHREF>

3.0 大小<IMG src='/URL' WIDTH='?' HEIGHT='?'>（以pixels為單位）N1.0 圖形邊緣<IMG src='/URL' BORDER=?> （以pixels為單位）

N1.0 圖形邊緣空間<IMG src='/URL' HSPACE=? VSPACE=?> （以pixels為單位）

N1.0 低解析度圖形<IMG src='/URL' LOWsrc='/URL'>

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

N2.0 內嵌物件<EMBED src='/URL'> （將物件插入頁面）

N2.0 內嵌物件大小<EMBED src='/URL' WIDTH='?' HEIGHT='?'>

分隔

段落<P> （通常是兩個return）

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

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

換行<BR> （一個return）

N1.0 文字部份看齊方式<BR CLEAR=LEFT|RIGHT|ALL>（與圖形合用時）

橫線<HR>

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

N1.0 橫線厚度<HR SIZE=?> （以pixels為單位）

N1.0 橫線寬度<HR WIDTH=?> （以pixels為單位）

N1.0 橫線比率寬度<HR WIDTH=%> （以頁寬為100%）

N1.0 實線<HR NOSHADE> （沒有立體效果）

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

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

列舉（可以巢狀列舉）

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

N1.0 公布式列舉<UL TYPE=DISC|CIRCLE|SQUARE>（定義全部的列舉項）

<LI TYPE=DISC|CIRCLE|SQUARE>（定義這個及其後的列舉項）

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

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

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

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

<LI value=?> （定義這個及其後的列舉項）

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

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

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

背景與顏色

3.0 重複排列的背景<BODY background='/URL'>

N1.1+ 背景顏色<BODY BGCOLOR='#$$$$$$'> （依序為紅、綠、藍）

N1.1+ 文字顏色<BODY TEXT='#$$$$$$'>

N1.1+ 連結顏色<BODY LINK='#$$$$$$'>

N1.1+ 看過的連結<BODY VLINK='#$$$$$$'>

N1.1 使用中的連結<BODY ALINK='#$$$$$$'>

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

特別符號&#?; （其中? 代表ISO 8859-1 的編碼）

< < > > & & ' '

註冊商標TM ?

N1.0+ 註冊商標TM ?

著作權符號?

N1.0+ 著作權符號?

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

定義表單<FORM ACTION='URL' METHOD=GET|POST></FORM>

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

欄位名稱<INPUT NAME='***'>

欄位內定值<INPUT value='***'>

已選定<INPUT CHECKED> （適用於checkboxes與radio boxes）

欄位寬度<INPUT SIZE=?> （以字元數為單位）

最長字數<INPUT MAXLENGTH=?> （以字元數為單位）

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

下拉式選單名稱<SELECT NAME='***'></SELECT>

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

多選式選單<SELECT MULTIPLE> （多選）

選項<OPTION>

內定選項<OPTION SELECTED>

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

輸入區名稱<TEXTAREA NAME='***'></TEXTAREA>

N2.0 輸入區換行方式<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>

表格

3.0 定義表格<TABLE></TABLE>

3.0 表格框線<TABLE BORDER></TABLE> （有或沒有）

N1.1 表格框線<TABLE BORDER=?></TABLE>（可以設定數值）

N1.1 儲存格左右留白<TABLE CELLSPACING=?>

N1.1 儲存格上下留白<TABLE CELLPADDING=?>

N1.1 表格寬度<TABLE WIDTH=?> （以pixels為單位）

N1.1 寬度比率<TABLE WIDTH=%> （頁寬為100%）

3.0 表格列<TR></TR>

3.0表格列內容看齊<TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

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

3.0 儲存格內容看齊<TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

3.0 不換行<TD NOWRAP>

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

3.0 儲存格橫向連線<TD COLSPAN=?>

3.0 儲存格縱向連線<TD ROWSPAN=?>

N1.1 儲存格寬度<TD WIDTH=?> （以pixels為單位）

N1.1 儲存格寬度比率<TD WIDTH=%> （頁寬為100%）

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

3.0 表格標題對齊<TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

3.0 表格標題不換行<TH NOWRAP>

3.0 表格標題占幾欄<TH COLSPAN=?>

3.0 表格標題占幾列<TH ROWSPAN=?>

N1.1 表格標題寬度<TH WIDTH=?> （以pixels為單位）

N1.1 表格標題比率寬度<TH WIDTH=%> （頁寬為100%）

3.0 表格抬頭<CAPTION></CAPTION>

3.0表格抬頭看齊<CAPTION ALIGN=TOP|BOTTOM>（在表格之上/之下）

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

N2.0 視框格式總定義<FRAMESET></FRAMESET> （取代<BODY>）

N2.0 視框行長度分配<FRAMESET ROWS=,,,></FRAMESET>（pixels 或%）

N2.0 視框行長度分配<FRAMESET ROWS=*></FRAMESET> （* = 相對大小）

N2.0 視框欄寬度分配<FRAMESET COLS=,,,></FRAMESET>（pixels 或%）

N2.0 視框欄寬度分配<FRAMESET COLS=*></FRAMESET> （* =相對大小）

N2.0 定義個別視框<FRAME> （定義個別視框）

N2.0 個別視框內容<FRAME src='/URL'>

N2.0 個別視框名稱<FRAME NAME='***'|_blank|_self|_parent|_top>

N2.0 邊緣寬度<FRAME MARGINWIDTH=?> （「左」與「右」邊界）

N2.0 邊緣高度<FRAME MARGINHEIGHT=?> （「天頂」與「地底」邊界）

N2.0 捲動條<FRAME SCROLLING='YES|NO|AUTO'>

N2.0 不可改變大小<FRAME NORESIZE>

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

網頁代碼