基本介紹
- 中文名：網頁代碼
- 定義：網頁製作過程需用的特殊“語言”
- 常用代碼：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'
ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
取代文字<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 TYPE='TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET'>
欄位名稱<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>（如果瀏覽器不提供視框功能的話）
