<html>
<head><title>网页学习</title></head>
<!--
<body bgcolor="green">
-->
<body background="eg_background.jpg">
<script type="text/javascript">
<!--
document.write("Hello JavaScript!")
//-->
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<br />
<script type="text/vbscript">
document.write("Hello VBScript!")
</script>
<br />
<iframe src="daohang.html" width="1200" height="200"></iframe>
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
<form action="./form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<!-- 按钮 -->
<form>
<input type="button" value="Hello world!">
</form>
<!-- 文本域
<form>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</form>
-->
<!-- 下拉列表 -->
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<!--
<option value="fiat" selected="selected">Fiat</option>
-->
<option value="audi">Audi</option>
</select>
</form>
<!-- 单选框 -->
<form>
男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</form>
<!-- 复选框 -->
<form>
我喜欢自行车：
<input type="checkbox" name="Bike">
<br />
我喜欢汽车：
<input type="checkbox" name="Car">
</form>
<!-- div 布局-->
<p> 使用div HTML布局</p>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
<br />
<p> 使用表格 HTML布局</p>
<!-- 使用表格 布局-->
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>
<!-- 无序列表
<ul type="square" type="circle" type="disc">
-->
<ul type="circle">
<li>Coffee</li>
<li>Milk</li>
</ul>
<!-- 有序列表无序列表
<ul type="1" type="A" type="a" type="I" type="i">
-->
<ol type="A" >
<li>Coffee</li>
<li>Milk</li>
</ol>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<!-- 表格 -->
<h4>两行三列表格</h4>
<table width="300" height="100" border="1" cellpadding="10" bgcolor="red">
<caption>My table</caption>
<tr>
<th> </th>
<th bgcolor="blue">姓名</th>
<th>性别</th>
</tr>
<tr>
<th>1</th>
<td bgcolor="green">王五</td> <!-- table data -->
<td>男</td>
</tr>
<tr>
<th>2</th>
<td align="right">李花</td>
<td>女</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
<h1 align="center"> This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
<hr />
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
<a href="http://www.w3school.com.cn" style="text-decoration:none">This is a link</a>
<br />
<br />
<img src="eg_w3school.gif" width="300" height="100" />
<br />
<!--
<a href="lastpage.html" target="_blank">
-->
<a href="lastpage.html"">
<img border="0" src="eg_buttonnext.gif" width="200" height="100" />
</a>
<br />
<p>
动态图：
<img src="eg_cute.gif" width="50" height="50" />
</p>
<br />
<p>
动态图：
<img src="eg_cute.gif" align="middle" width="50" height="50" />
</p>
<br />
<p>
动态图：
<img src="eg_cute.gif" align="top" width="50" height="50" alt="test"/>
</p>
<br />
<img
src="eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="rect"
coords="0,0,110,260"
href ="sun.html"
target ="_blank"
alt="Sun" />
<br />
<a href="index.html">
<img src="eg_planets.jpg" ismap />
</a>
<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
<br />
<p>
这是另一个 mailto 链接：
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
</p>
<br />
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized 着重文字</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
<br />
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
<br />
<!-- 缩略 -->
</address><abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
</body>
</html>
联系客服
