Base-Jsp-8-HTML参考

最新推荐文章于 2024-05-07 22:37:05 发布

原创最新推荐文章于 2024-05-07 22:37:05 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #button #object #浏览器 #javascript #microsoft

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

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

<body bgcolor="blue" link="green" alink="orange" vlink="red">



<br>
<pre>
css example

</pre>
<pre>
form example



<form action="mailto:pingnet@126.com" method="post">

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

<button name="reset" type="reset">reset</button>
<label tabindex="1">label:

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

<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


<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 name="view" size="2">
  <option>theater</option>
  <option selected>drive-in</option>
  <option>television</option>
</select>
</fieldset>



</form>
</pre>
<pre>
javaScript example


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

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

<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();"/>


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

<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


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

</pre>
<pre>

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

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

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


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

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>

enmark exampel
<ol start="5">
<li/>Aladdin
<li/>Herclules
<li/>Peter
</ol>
<ol type="disc">
<li/>Aladdin
<li/>Herclules
<li/>Peter
</ol>

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