??? HTML、JavaScript、css雖然很簡單，但使用過程中，總會因為遺忘部分語法而在網絡中四處奔波查找，趁此閑時，做一個“所見即所得”的HTML參考，以備以后查找。
??? 包括HTML、JavaScript、css的主要語法參考，使用時可以將該內容拷貝，另存為html文件，看取效果，拷貝所需
<html>
<head>
? <!--定義網頁中所有鏈接的基本URL-->
?<base href='>
?<!--meta添加網頁不顯示的信息，可被搜索引擎使用-->
?<meta http-equiv='reply-to' content='dudu@126.com'/>
?<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
?<meta name='author' content='dudu'/>
?<meta name='copyright' content='copyright 2005,AiYu'/>
?<!--設置頁面過去時間，形式為格林威治時間-->
?<meta name='expires' content='Mon,11 October 2005 08:00:00 GMT'/>
?<!--使頁面緩存失效-->
?<meta name='pragma' content='no-cache'/>
?<!--設置允許搜索引擎抓取頁面, 不允許抓取，應設為none-->
?<meta name='robots' content='all,follow'/>
?<!--定時自動刷新頁面，50秒后跳轉到sohu文首-->
?<!--meta http-equiv='refresh' contents='5;url=news.sohu.com.cn'/-->
</head>
<body bgcolor='blue' link='green' alink='orange' vlink='red'>
?<!--該處的鏈接相對與http://127.0.0.1:8080-->
?<!--如果一個URL包含了協議，那么基本值將被忽略-->
?<!--a href='index.html'>index</a-->
<br>
<pre>
css example
<!--選擇器：由樣式定義的一種特殊的標志符號
??? 定義樣式：首先必須列出選擇器，然后在一對括號之間列出所有的樣式限制和標準
用冒號:分隔樣式限制和樣式標準，用分號分隔獨立的樣式限制和樣式標準
例：h1{color:red;text-align:center},這里h1是選擇器
??? 加入樣式定義有3中方法：
?1>作為外部文件：樣式表可以通過<link>標識符看到，文件名應為.csss
??<link rel='stylesheet' type='text/css' href='external.css'/>
??rel:指明外部文件是一種樣式表，應被設為styllesheet
??type:為外部文件定義MINE類型，應用設為text/css
?2>嵌入網頁中：使用閉合的<style>標識符,這些標識符可以被放置在<head>標識符中
??<style>
???p first{color:red}
???p second{color:blue}
??</style>
??<p class='first'>
??<p class='second'>
?3>內聯：樣式表可被包含在具有style屬性的單一標識符里
??<h1 style=''color:blue'>
將樣式運用在特定的文字：
??? 1><div>標識：一般用于大段文字，有點類似<p>,并且可以包含<align>
????2><spin>標識:一般用于小段文字
-->
</pre>
<pre>
form example
<!--form標記不能嵌套，每一對form標記必須獨立于所有其他的form標記而存在-->
<!--get方法將數據放在URL的末尾轉送給服務器，post方法將表單數據作為HTTP請求的一部分傳給服務器-->
<!--可以將表單結果發送大E-mail,在action中使用mailto:-->
<form action='mailto:pingnet@126.com' method='post'>
?<!--點擊submit按鈕，數據發送給action屬性所指定的URL-->
?<button name='send' type='submit'>submit</button>
?<!--點擊reset按鈕，清除索引文本域并且將所有其他的表單元素復位-->
?<button name='reset' type='reset'>reset</button>?
?<label tabindex='1'>label:
?<!--文本域，size屬性：設置文本域的寬度；maxlength屬性：設置用戶可以輸入一個文本域中的最大字符個數，默認不限制字符個數-->
?<input type='text' name='tt' value='enter something' readonly='yes' size='20' maxlength='20' tabindex='2'/>
?<input type='password' name='pwd' value='dudutu' readonly='yes' size='20' maxlength='20' tabindex='3' disabled='disabled'/>
?</label>
?<!--textarea的wrap屬性：默認所有文本保持在一行，如果設置為soft(virtual)，則會包裝文本，但文仍然按照一行的格式傳給服務器，
?如果設置為hard(physical)，則將換行符也發送給服務器，文本域大寫不收瀏覽器窗口大小限制。
?textarea name='info' rows='1' cols='2' readonly='yes'>
??? he he
?<textarea-->
?<input type='checkbox' name='genre' value='drama'/>drama
?<input type='checkbox' name='genre' value='comedy' checked/>comedy
?<input type='checkbox' name='genre' value='romance'/>romance?
?<!--如果沒有一個<input>標記包含checked屬性，那么沒有任何收音機按鈕在初始時被選中-->
?<input type='radio' name='price' value='6'/>$6
?<input type='radio' name='price' value='8'/>$8?
?<input type='radio' name='price' value='9' checked/>$9?
?<!--創建圖像按鈕：使用<input>標記，并且將type屬性設置為image,同時可以加入src屬性-->
?<!--fieldset標記將多個元素分組到一個域容器中，legend標記用來標注域容器-->
?<fieldset>
?<legend>NameField</legend>
?<label>image button:<input type='image' name='imagebutton' src='dudubase/images/arrow_down.png'></label>
?<input type='hidden' name='date' value='Augest,2005'/>
?<!--select標記：size屬性指定可見的列表，第一個selected屬性的<option>標記所對應的選項，在該列表初始顯示時將被選中，
?如果由若干個<option>標記包含了selected屬性，那么最后一個包含了selected屬性的<option>標記在初始化時被選中，
?<select>標記可以包含multiple屬性，運行用戶多項選擇，為了多選，需要按ctl或shift,如果包含multple,那么任何<option>可以包含selected屬性
?-->
?<select name='view' size='2'>
??<option>theater</option>
??<option selected>drive-in</option>
??<option>television</option>????
?</select>
?</fieldset>
?<!--使用tabindex屬性控制Tab鍵的次序，tabindex可以用于button,input,select和textarea標記中-->
?<!--通過disabled屬性可以使表單元素失效-->
?<!--URL編碼：URL和表單數據傳遞到服務器時，它是經過編碼處理的，當URL編碼時，空格被轉換為加號（＋），
?其他可能引起問題的字符用一個百分號（％）跟隨一個16進制的ASCII指來標識，這告訴瀏覽器將該字符替換為特點的符號
?&:（％26）；?：(%3F)；%：(%25)；'：(%22)；數字符號：(％23)；@：(%40)；:號：(%3A)；=：(%3D)；
?URL編碼將URL表示成服務器可以識別并且容易解釋的一種形式
?-->
</form>
</pre>
<pre>
javaScript example
<!--JavaScript是大小寫敏感的-->
<!--使用cookie,document.cookie對象-->
<script language='javascript>
?if(navigator.appName.indexOf('Microsoft')!=-1)
?{
??document.write('you are using microsoft innternnet eploree brower');
?}
?else if(navigator.appName.indexof('Netscape')!=-1)
?{
??document.write('you are using Netscape's communicator brower');
?}
?function makeCookie()
?{
??if(!cookie)
??{
???Name = prompt('please enter your name');
???document.cookie='Name' + Name + ',';
???NameStart = document.cookie.indexOf('=');
???NameEnd = document.cookie.indexOf(';');
???document.write('hello' +
????document.cookie.substring(NameStart + NameEnd));
??}
?}
</script>
<!--產生隨機數-->
<script language=''javasript>
?QuoteArray=new Array(
??'neither can I',
??'so you thought about it',
??'yes,I have',
??'I am glad',
??'you had realizee that',
??'I come to that conciusioon');
?RandomNo=Math.floor(QuoteArray.length*Math.random());
?document.write('<b>'+QuoteArray[RandomNo]+'</b>');
</script>
<!--document.write函數可以將文本輸出到瀏覽器-->
<script language='javascript'>
?document.write('<h1>Welcome to here</h1>');
</script>
?<a href='>
<form name='form1'>
<!--在瀏覽器窗口狀態欄上顯示文本-->
?<input type='button' name='statusTxt' value='status text'
?onclick='window.status='welcome to the here';'/>
<!--打開一個新的窗口，通過window.open()函數實現，-->?
?<input type='button' name='openwnd' value='open window'
?onclick='window.open('a.html','a',width='200',height='400');'/>
?<input type='button' name='closewnd' value='close window'
?onclick='window.close();'/>
<!--使用對話框-->?
?<input type='button' name='alert' value='alert'
?onclick='window.alert('welcome');'/>
?<input type='button' name='confirm' value='confirm'
?onclick='window.confirm('welcome');'/>
?<input type='button' name='prompt' value='prompt'
?onclick='window.prompt('welcome','hailen');'/>?
?use String object
?<input type='button' name='Stringbtn' value='String object'
?onclick='document.form1.dateText.value=document.form1.text2.value.toUpperCase();'/>
?use Date object
?<input type='text' name='dateText' size='80'>
?<input type='button' name='DateBtn' value='get date'
?onclick='cDate=new Date();document.form1.dateText.value=cDate.toLocaleString();'/>
?use Math object
?<input type='button' name='MathBtn' value='use Math'
?onclick='document.form1.dateText.value=6*Math.PI;'/>
?double click this button
?<input type='button' name='button1' value='Hello'
?onclick='document.form1.button1.value='ok';'
?ondblclick='document.form1.button1.value='good';'/>
?<input type='button' value='start' ondblclick='document.write('Hai')'/>
?
?onkeypress event,press 'd'
?<input type='text' name='text1' value='try'
?onkeypress='if (window.event.keyCode=='100')
?document.form1.text1.value='you pressed the dkey';'/>
?
?focus event
?<input type='text' name='text2' value='interesting'
?onfocus='document.form1.text2.value='look at';'
?onblur='document.form1.text2.value='the focus is gone.';'/>
?
?onchange event
?<select name='select' size='4'
?onchange='document.form1.text3.value='it is there';'>
??<option>rasoerry</option>
??<option>chocolate</option>
??<option>pralines</option>
??<option>strawberry</option>
?</select>
?<input type='text' name='text3' value='wait'/>
?
?location object
?<input type='text' name='textloc' size='80'>
?<input type='button' name='btnloc' value='location'
?onclick='document.form1.textloc.value=window.location;'/>
?history object
?<input type='button' name='history' value='history'
?onclick='window.history.back();'/>
?links object
?<input type='button' value='change link'
?onclick='document.links[0]./>
</form>
move mouse under this picture
<img name='img1' width='300' height='200' src='dudubase/images/2.jpg' onmouseover='document.img1.src='dudubase/images/3.jpg';'
onmouseout='document.img1.src='dudubase/images/4.jpg';'/>
invoke method
<script type='text/javascript'>
?function changebg()
?{
??alert('ha ha');
?}
</script>
?<input type='button' name='button5' value='Hello'
?onclick='changebg();'/>
<!--可以將腳本文件放在一個單獨的文件中，用法：<script type='text/javascript' src=''>-->?
<!--
文檔對象模型是用來引用一個網頁上所有不同的元素的一種結構
父對象是window,window對象包括處理瀏覽器窗口的各種對象。
document對象是window的子對象，document對象包括組成網頁的所有元素
location對象是window的子對象，它標識了目前網頁的URL,它包括一個reload()方法，可用來重載當前的網頁
history對象能夠復制瀏覽器的“前進”和“后退”按鈕，以實現在已經查看的網頁之間切換,
history對象包含，back()方法使前一個裝載的網頁呈現在瀏覽器
forward()方法顯示下一個網頁，go()方法可帶一個數字參數，可正可負，能向前或向后瀏覽歷史列表中的網頁，document.history.go(-2)
links對象保存了包含在網頁上的所有鏈接
-->
</pre>
<pre>
midea example
<a href='dudubase/images/Trumpet1.wav'>Trumpet1.wav</a>
<object data='dudubase/images/Trumpet1.wav' type='audio/wav'>
play sound with object
</object>
<!--添加背景音樂，bgsound標記，該標記只在IE下有效,將loop屬性設為infinite,背景樂將無限循環，直到點擊瀏覽器“停止”按鈕-->
<!--bgsound src='dudubase/images/NBOOK_01.MID' loop='2'/-->
<a href='dudubase/images/8gamma.avi'>8gamma.avi</a>
<object data='dudubase/images/8gamma.avi' type='video/avi'>
play avi with object
</object>
</pre>
<pre>
framework example
<!--
使用時frameset標記代替body標記
<frameset rows='25%,25%,50%'>
?<frame name='left' src='left.html' frameborder='0'? noresize/>
?<frame name='middle' src='middle.html' marginheight='50'/>
?<frame name='right' src='right.html'/>
</frameset>
<frame/>中，src屬性指定幀中顯示的內容，name屬性指定一個可以被其他網頁元素引用的名稱
在frameset開始標記中，可以用象素指定幀的實際寬度，而不用比例，
<frameset cols='200,*'>
此時，只需鍵人數值并刪除％號，*代表需要填充剩余空間的幀
設置frameborder=0可以刪除幀的邊框
marginwidth和marginheight可以設置幀中頁面的空白
在frame標記中添加noresize屬性可以避免幀被改動
在frame標記中添加scrolling屬性可以控制幀窗口出現的滾動條，yes:顯示滾動條；no:不顯示滾動條；auto：在需要的時候顯示滾動條
幀可以嵌套，即frameset中再嵌套frameset
幀的目標：默認當點擊連接時，被連接的網頁在連接所在的幀中被顯示。在<a>標記中加入target屬性，指定連接目標，沒有個目標需要和一個已經命名的幀向匹配，如果沒有匹配的幀，則新開一個窗口，顯示網頁。
特殊的target屬性：_blank:網頁在一個沒有任何幀的新瀏覽器顯示；_self:網頁在當前幀顯示；_prent：網頁在父幀中顯示；_top；網頁在沒由任何幀的頁面顯示。
-->
</pre>
<pre>
table example
<!--表格邊框border的值是邊框寬度的象素個數,默認表格是不顯示邊框的-->
<!--rules屬性控制單元格之間邊框的顯示方式，取指為：all,none,groups,rows和cols,默認none,all將顯示
?所有邊框，和border相同，rows,cols只顯示行或邊框
?width屬性以象素或占瀏覽器窗口的百分率來設定
?文字環繞設置align屬性
?通過用th代替tr可以向表格添加標題,使文字粗體顯示
?Cellpadding屬性在單元格文字和單元格邊緣加入空格
?Cellspacing屬性在每個單元格之間加入空格
?rowspan和colspan可以實現跨多行的單元格
?caption屬性添加表格標題
?thead,tbody,tfoot可以將表格行分為多個部分
?colgroup和col可以將列分為多個部分
-->
<table border='1' width='40%' bgcolor='orange' cellspacing='10' cellpadding='10'>
?<caption align='bottom'>title of the table</caption>
?<thead bgcolor='yellow'>
?<tr>
??<th width='100' height='5' colspan='2'>1 unit</th>
??<td>2 units</td>
?</tr>
?</thead>
?<tr>
??<td align='center' valign='bottom' bgcolor='blue' rowspan='2'>4 units</td>
??<th>5 units</th>
??<td>6 units</td>
?</tr>
?<tr>
??<td>8 units</td>
?</tr>
</table>
</pre>
<pre>
image example
<a href='mailto:dudu@126.com?subject=Hello from web&body=email dudu'><img src='/dudubase/images/1.jpg' width='300' height='200' align='right' vspace='10' hspace='20' border='5' alt='picture description'/></a>
<map name='fany'>
?<area shape='rect' coords='10,2,90,70' href='mailto:dudu@126.com?subject=Hello from web&body=email dudu' alt='img map'/>
?<area shape='poly' coords='20,20,80,80' href='mailto:dudu@126.com?subject=Hello from web&body=email dudu' alt='img map'/>
?<area shape='rect' coords='30,30,70,90' href='mailto:dudu@126.com?subject=Hello from web&body=email dudu' alt='img map'/>
</map>
<img src='/dudubase/images/a.jpg' width='100' height='100' align='right' border='2' usemap='#fany'/>
<!--使用vspace和hspace，可以定義在文字和圖像之間的空格數目，它以象素為單位-->
</pre>
<pre>
<!--連接可以是完全的或者是相對的，完全的指：http://www.news.sohu.com,相對連接指在同一個目錄
或子目錄中定位，子目錄通過“/'符合和子目錄來確定，還能夠在當前目錄上使用兩點和'/'來確定目錄
-->
<a href='>
<a href='edu.html'>edu.html</a>
<a href='../car.html'>../car.html</a>
<a href='mailto:dudu@126.com?subject=Hello from web&body=email dudu'>email dudu</a>
<a href='file://e:|img/img/fans/0107_1024[1].jpg'>img</a>
<a href='ftp://ftp.dudu.com'>dudu ftp</a>
<!--名稱連接,由于被struts控制，在次無效-->
<a href='#a'>a</a>
<a href='#b'>b</a>
<a href='#c'>c</a>
<a name='a'/>autobiographically
<a name='b'/>bacteriologically
<a name='c'/>characteristically
</pre>
<!--改變文字尺寸-->
<pre>
<!--basefont設置默認的字體尺寸、顏色和網頁面貌-->
<font color='red'>font example</font>
<basefont size='2' color='blue' face='arial'/>
<font size='+2' color='orange'>H</font><font size='-2'>a</font><font size='2'>i</font><br>
<font face='Arial'>Arial font</font>
<font face='Book Antiqua'>Book Antiqua font</font>
<font face='Bookman old Style>Bookman ole Sytlefont</font>
<font face='Century'>Century</font>
<font face='schoolbook'>schoolbook font</font>
<font face='Courier'>Courier</font>
<font face='New Garamond'>New Garamond font</font>
<font face='Times New Roman'>Times New Roman</font>
<font face='Verdana'>Verdana</font>
<b>blank</b>
<i>line</i>
<u>under line</u>
<strike>middle line 1</strike>
<s>middle line 2</s>
a<sub>2</sub>
h<sup>3</sup>
<tt>typist font</tt>
<em>emphasize<em>
<strong>emphasize<strong>
<blockquote>blockquote</blockquote>
<acronym>acronym</acronym>
<cite>cite</cite>
<address>address</address>
<ins cite='aa.html' datetime='2005-8-16T14:20:00MST'>inserted text</ins>
<del>delete text</del>
<big>big font</big>
<p>
<small>small font</small>
<!-- 一個網頁中必須包含body標記，但如果一個網頁被分為多個幀的話，將不使用body標記，而換為frameset標記-->
<!--若瀏覽器遇到幾個連續的空格，它會刪除其他空格而只保留一個空格，可以使用pre標記保持所有的空格-->
<pre>
? tag pre example
???? It is easy
???? but like anything ,
<p>
???? you need to work on it.
</pre>
<!--添加標題-->
caption example
<h1 align='center'>big</h1>
<h2 align='left'>bigger</h2>
<h3 align='middle'>bigest</h3>
<h4 align='right'>small</h4>
<h5 aling='justify'>smaller</h5>
<h6>smallest</h6>
<!--使用水平分割線劃分段落,noshade：不會掩蓋文段格式-->
line example
let me try it on<hr align='center' width='50'>
<hr noshade/>
<hr size='5%' width='10%' align='center'>
<hr size='5' width='10' align='center'>
sign code
<code>#include <stdio.h><br>
<var>int a</var>
main()
{
?printf('enter number!');
}
</code>
<kbd>s</kbd>
<samp>n=123</samp>
</pre>
<pre>
<!--ol中的type包括1、a、A、i、I-->
enmark exampel
<ol start='5'>
?<li/>Aladdin
?<li/>Herclules
?<li/>Peter
</ol>
<ol type='disc'>
?<li/>Aladdin
?<li/>Herclules
?<li/>Peter
</ol>
<!--ul用來構建無序的列表，type包括disc(圓盤)、square(方形)、circle(圓圈)-->
<ul type='circle'>
?<li/>Aladdin
?<li/>Herclules
?<li/>Peter
</ul>
<ol type='a'>
?<li/>Aladdin
?<li/>Herclules
?<li/>Peter
</ol>
<ol type='I'>
?<li value='2'/>Aladdin
?<li value='4'/>Herclules
?<li value='6'/>Peter
</ol>
<ol>
?<li/>Aladdin
??<ul type='circle'>
???<li/>Aladdin
???<li/>Herclules
??</ul>
?<li/>Herclules
??<ul type='circle'>
???<li/>Aladdin
???<li/>Herclules
??</ul>?
?<li/>Peter
??<ul type='circle'>
???<li/>Aladdin
???<li/>Herclules
??</ul>?
</ol>
<!--自定義列表-->
<dl>
?<dt/>html
??<dd/>Hyper Text Markup Language
?<dt/>xml
??<dd/>Extended Markup Language
?<dt/>sgml
??<dd/>ha ha??
</dl>
</pre>
</body>
</html>