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）；?：(?)；%：(%)；"：(")；数字符号：(％23)；@：(@)；:号：(:)；=：(=)； 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" οnclick="window.status='welcome to the here';"/><!--打开一个新的窗口，通过window.open()函数实现，--> <input type="button" name="openwnd" value="open window" οnclick="window.open('a.html','a',width='200',height='400');"/> <input type="button" name="closewnd" value="close window" οnclick="window.close();"/><!--使用对话框--> <input type="button" name="alert" value="alert" οnclick="window.alert('welcome');"/> <input type="button" name="confirm" value="confirm" οnclick="window.confirm('welcome');"/> <input type="button" name="prompt" value="prompt" οnclick="window.prompt('welcome','hailen');"/> use String object <input type="button" name="Stringbtn" value="String object" οnclick="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" οnclick="cDate=new Date();document.form1.dateText.value=cDate.toLocaleString();"/> use Math object <input type="button" name="MathBtn" value="use Math" οnclick="document.form1.dateText.value=6*Math.PI;"/> double click this button <input type="button" name="button1" value="Hello" οnclick="document.form1.button1.value='ok';" οndblclick="document.form1.button1.value='good';"/> <input type="button" value="start" οndblclick="document.write('Hai')"/> onkeypress event,press 'd' <input type="text" name="text1" value="try" οnkeypress="if (window.event.keyCode=='100') document.form1.text1.value='you pressed the dkey';"/> focus event <input type="text" name="text2" value="interesting" οnfοcus="document.form1.text2.value='look at';" οnblur="document.form1.text2.value='the focus is gone.';"/> onchange event <select name="select" size="4" οnchange="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" οnclick="document.form1.textloc.value=window.location;"/> history object <input type="button" name="history" value="history" οnclick="window.history.back();"/> links object <input type="button" value="change link" οnclick="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" οnmοuseοver="document.img1.src='dudubase/images/3.jpg';"οnmοuseοut="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" οnclick="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 examplelet 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>
