Base-Jsp-2-HTML参考 - 王朝网络

HTML、JavaScript、css虽然很简单，但使用过程中，总会因为遗忘部分语法而在网络中四处奔波查找，趁此闲时，做一个“所见即所得”的HTML参考，以备以后查找。

包括HTML、JavaScript、css的主要语法参考，使用时可以将该内容拷贝，另存为html文件，看取效果，拷贝所需

<html>

<head>

</head>

<br>

<pre>

css example

<!--选择器：由样式定义的一种特殊的标志符号

定义样式：首先必须列出选择器，然后在一对括号之间列出所有的样式限制和标准

用冒号:分隔样式限制和样式标准，用分号分隔独立的样式限制和样式标准

例：h1{color:red;text-align:center},这里h1是选择器

加入样式定义有3中方法：

1>作为外部文件：样式表可以通过<link>标识符看到，文件名应为.csss

rel:指明外部文件是一种样式表，应被设为styllesheet

type:为外部文件定义MINE类型，应用设为text/css

2>嵌入网页中：使用闭合的<style>标识符,这些标识符可以被放置在<head>标识符中

<style>

p first{color:red}

p second{color:blue}

</style>

3>内联：样式表可被包含在具有style属性的单一标识符里

将样式运用在特定的文字：1><div>标识：一般用于大段文字，有点类似<p>,并且可以包含<align>

2><spin>标识:一般用于小段文字

-->

</pre>

<pre>

form example

<button name="send" type="submit">submit</button>

<button name="reset" type="reset">reset</button>

<label tabindex="1">label:

</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 type="radio" name="price" value="6"/>$6

<input type="radio" name="price" value="8"/>$8

<input type="radio" name="price" value="9" checked/>$9

<legend>NameField</legend>

<label>image button:<input type="image" name="imagebutton" src="dudubase/images/arrow_down.png"></label>

<!--select标记：size属性指定可见的列表，第一个selected属性的<option>标记所对应的选项，在该列表初始显示时将被选中，

如果由若干个<option>标记包含了selected属性，那么最后一个包含了selected属性的<option>标记在初始化时被选中，

<select>标记可以包含multiple属性，运行用户多项选择，为了多选，需要按ctl或shift,如果包含multple,那么任何<option>可以包含selected属性

-->

<option>theater</option>

<option selected>drive-in</option>

<option>television</option>

</select>

</fieldset>

<!--URL编码：URL和表单数据传递到服务器时，它是经过编码处理的，当URL编码时，空格被转换为加号（＋），

其他可能引起问题的字符用一个百分号（％）跟随一个16进制的ASCII指来标识，这告诉浏览器将该字符替换为特点的符号

&:（％26）；?：(%3F)；%：(%25)；"：(%22)；数字符号：(％23)；@：(%40)；:号：(%3A)；=：(%3D)；

URL编码将URL表示成服务器可以识别并且容易解释的一种形式

-->

</form>

</pre>

<pre>

javaScript example

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>

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('<h1>Welcome to here</h1>');

</script>

<input type="button" name="statusTxt" value="status text"

onclick="window.status='welcome to the here';"/>

<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="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';"/>

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>

location object

<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

function changebg()

{

alert("ha ha");

}

</script>

<input type="button" name="button5" value="Hello"

onclick="changebg();"/>

<!--

文档对象模型是用来引用一个网页上所有不同的元素的一种结构

父对象是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>

play sound with object

</object>

<a href="dudubase/images/8gamma.avi">8gamma.avi</a>

play avi with object

</object>

</pre>

<pre>

framework example

<!--

使用时frameset标记代替body标记

</frameset>

<frame/>中，src属性指定帧中显示的内容，name属性指定一个可以被其他网页元素引用的名称

在frameset开始标记中，可以用象素指定帧的实际宽度，而不用比例，

此时，只需键人数值并删除％号，*代表需要填充剩余空间的帧

设置frameborder=0可以删除帧的边框

marginwidth和marginheight可以设置帧中页面的空白

在frame标记中添加noresize属性可以避免帧被改动

在frame标记中添加scrolling属性可以控制帧窗口出现的滚动条，yes:显示滚动条；no:不显示滚动条；auto：在需要的时候显示滚动条

帧可以嵌套，即frameset中再嵌套frameset

帧的目标：默认当点击连接时，被连接的网页在连接所在的帧中被显示。在<a>标记中加入target属性，指定连接目标，没有个目标需要和一个已经命名的帧向匹配，如果没有匹配的帧，则新开一个窗口，显示网页。

特殊的target属性：_blank:网页在一个没有任何帧的新浏览器显示；_self:网页在当前帧显示；_prent：网页在父帧中显示；_top；网页在没由任何帧的页面显示。

-->

</pre>

<pre>

table example

<!--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可以将列分为多个部分

-->

<caption align="bottom">title of the table</caption>

<tr>

<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

</map>

</pre>

<pre>

<!--连接可以是完全的或者是相对的，完全的指：http://www.news.sohu.com,相对连接指在同一个目录

或子目录中定位，子目录通过“/"符合和子目录来确定，还能够在当前目录上使用两点和"/"来确定目录

-->

<a href="mailto:dudu@126.com?subject=Hello from web&body=email dudu">email dudu</a>

<a name="a"/>autobiographically

<a name="b"/>bacteriologically

<a name="c"/>characteristically

</pre>

<pre>

<font color="red">font example</font>

<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>

<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>

<address>address</address>

<ins cite="aa.html" datetime="2005-8-16T14:20:00MST">inserted text</ins>

<del>delete text</del>

<p>

<small>small font</small>

<pre>

tag pre example

It is easy

but like anything ,

<p>

you need to work on it.

</pre>

caption example

<h2 align="left">bigger</h2>

<h3 align="middle">bigest</h3>

<h4 align="right">small</h4>

<h5 aling="justify">smaller</h5>

<h6>smallest</h6>

line example

let me try it on<hr align="center" width="50">

sign code

<code>#include <stdio.h><br>

main()

{

printf("enter number!");

}

</code>

</pre>

<pre>

enmark exampel

<li/>Aladdin

<li/>Herclules

<li/>Peter

</ol>

<li/>Aladdin

<li/>Herclules

<li/>Peter

</ol>

<li/>Aladdin

<li/>Herclules

<li/>Peter

</ul>

<li/>Aladdin

<li/>Herclules

<li/>Peter

</ol>

<li value="2"/>Aladdin

<li value="4"/>Herclules

<li value="6"/>Peter

</ol>

<ol>

<li/>Aladdin

<li/>Aladdin

<li/>Herclules

</ul>

<li/>Herclules

<li/>Aladdin

<li/>Herclules

</ul>

<li/>Peter

<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>