HTML、JavaScript、css虽然很简单，但使用过程中，总会因为遗忘部分语法而在网络中四处奔波查找，趁此闲时，做一个“所见即所得”的HTML参考，以备以后查找。
包括HTML、JavaScript、css的主要语法参考，使用时可以将该内容拷贝，另存为html文件，看取效果，拷贝所需
<html>
<head>
<!--定义网页中所有链接的基本URL-->
<base href='http://127.0.0.1:8080'/>
<!--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='http://news.sohu.com'>link#1</a>
<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].href='http://www.microsoft.com';'/>
</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='http://www.news.sohu.com'>http://www.news.sohu.com</a>
<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>