<html>
<head>
<title>我的第一个 HTML 页面 </title>
</head>
<body bgcolor="9999CC"
>
<p> body
元素的内容会显示在浏览器中 。</p>
<p>title
元素的内容不会显示在浏览器的标题栏中。</p>
<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>
<p>
这个段落
在源代码
中
包含 许多行
但是
浏览器
忽略了 它们。
并且多个空格会只显示一个空格。
</p>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
<p>
春眠不觉晓，<br />
处处闻啼鸟。<br />夜来风雨声，<br
/>花落知多少。<br />
</p>
<p>折行的方法是加 br/></p>
<h1>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 />
<h1 align="center">This is heading
1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。
align 设置排列方式：center\left\right；<br
/><br />
hr / >可设置为换行！<br
/><br />
bgcolor 可以设置背景色 ( "9999CC"
)<br /><br
/>
pre> pre
/> 可预留空格
</p><hr
/>
<b>b : This text is bold</b><br />
<strong>strong : This text is strong</strong><br />
<big>big : This text is big</big><br />
<em>em : This text is emphasized</em><br />
<i>i: This text is italic</i><br />
<small>small: This text is small</small><br />
subscript: This text contains
<sub>subscript</sub><br
/>
superscript : This text contains
<sup>superscript</sup>
<pre><big>
这是
预格式文本。
它保留了
空格
和换行。</big>
</pre><hr
/>
<code>Computer
code</code><br
/>
<kbd>Keyboard
input</kbd><br
/>
<tt>Teletype
text</tt><br
/>
<samp>Sample
text</samp><br
/>
<var>Computer
variable</var><br
/>
<p><b>注释：</b>这些标签常用于显示计算机/编程代码。</p><hr />
<h2>唐老鸭的地址：</h2>
<address>
Donald Duck<br />
BOX 555<br />
Disneyland<br />
USA<br />
</address>
<hr />
<abbr
title="ZHAODENG">ZhaoD.</abbr>
<br />
<acronym title="中国地质大学 （ 北京
）">中国地质大学
</acronym>
<hr />
<p>如果您的浏览器支持 bi-directional override
(bdo)，下一行会从右向左输出 (rtl)Here is some Hebrew text !<br
/>
bdo dir="rtl"> -->
bdo dir
：可以设置文字方向
<br />
</p>
<bdo dir="rtl">Here is some Hebrew
text</bdo>
<hr />
这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是短的引用：
<q>这是短的引用。</q>
<p>使用 blockquote 元素的话，浏览器会插入换行和外边距，而
q 元素不会有任何特殊的呈现。</p>
<hr />
<p>一打有
<del>二十</del>
<ins>十二</ins>
件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
<hr />
<p><a href="http://www.w3school.com.cn/">本文本
是一个指向 W3C
中的一个页面的链接。</a>
是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本
是一个指向万维网上的页面的链接。</a>
是一个指向万维网上的页面的链接。</p>
<hr />
<p>您也可以使用图像来作链接：<a
href="http://www.w3school.com.cn/">
<img border="0" src="eg_buttonnext.gif"
/></a>
</p>
<hr />
<a href="http://www.w3school.com.cn/"
target="_blank">Visit
W3School!</a>
<p>如果把链接的 target 属性设置为
"_blank"，该链接会在新窗口中打开。</p>
<hr
/><p>
<a href="#pos">查看 Chapter
4。</a>
</p>
<h2>Chapter
1</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 2
</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 3
</h2>
<p>This chapter explains ba bla
bla</p>
<h2><a
name="pos">
Chapter 4
</a></h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 5
</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 6
</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
7</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
8</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
9</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
10</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
11</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
12</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
13</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
14</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
15</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
16</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
17</h2>
<p>This chapter explains ba bla
bla</p>
<hr />
<p>被锁在框架中了吗？</p>
<a href="http://www.w3school.com.cn/"
target="_top">请点击这里！</a>
<hr />
<p>这是邮件链接：
<a href="mailto:[email protected]?subject=Hello
again">发送邮件</a>
</p>
<p>
这是另一个 mailto 链接：
<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer
Party&body=You are invited to a big summer
party!">发送邮件！</a>
</p>
<p><b>注意：</b>应该使用
来替换单词之间的空格，这样浏览器就可以正确地显示文本了。<br
/>
邮件格式为： mailto: add_email <br
/>
cc= 后为收件人的邮箱 ；&bcc= 后为密件抄送人的邮箱地址
；&subject= 后面为邮件主题 ；&body= 后为邮件内容
。
</p>
<hr />
<p>使用三份不同的文档制作一个垂直/水平框架。
noframes> 调整框架的大小
</p>
<frameset cols="25%,50%,25%">
<frame
src="/example/html/frame_a.html">
<frame
src="/example/html/frame_b.html">
<frame
src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
<p>混合框架
</p>
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame
src="/example/html/frame_b.html">
<frame
src="/example/html/frame_c.html">
</frameset>
</frameset>
<hr />
<p>制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为
"contents.htm" 的文件包含三个链接。</p>
<frameset cols="120,*">
<frame
src="/example/html/html_contents.html">
<frame
src="/example/html/frame_a.html"
name="showframe">
</frameset>
<hr /><hr
/>
<p>每个表格由 table
标签开始。</p>
<p>每个表格行由 tr
标签开始。</p>
<p>每个表格数据由 td
标签开始。</p>
<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>带有粗的边框：</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>这个表格没有边框：</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>Bill
Gates</td>
<td>555 77
854</td>
<td>555 77
855</td>
</tr>
</table>
<h4>垂直的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill
Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77
854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77
855</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td>Some
text</td>
<td>Some
text</td>
</tr>
<tr>
<td></td>
<td>Some
text</td>
</tr>
</table>
<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。我们的技巧是在单元中插入一个 no-breaking 空格。no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>
<table border="1">
<tr>
<td>Some
text</td>
<td>Some
text</td>
</tr>
<tr>
<td> </td>
<td>Some
text</td>
</tr>
</table>
<h4>这个表格有一个标题，以及粗边框：</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th
colspan="2">电话</th>
</tr>
<tr>
<td>Bill
Gates</td>
<td>555 77
854</td>
<td>555 77
855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill
Gates</td>
</tr>
<tr>
<th
rowspan="2">电话</th>
<td>555 77
854</td>
</tr>
<tr>
<td>555 77
855</td>
</tr>
</table>
<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>
<h4>没有
cellpadding：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有
cellpadding：</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>没有
cellspacing：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有
cellspacing：</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景颜色：</h4>
<table border="1"
bgcolor="blue">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<p>align 设置 格式
</p>
<table width="400" border="1">
<tr>
<th
align="left">消费项目....</th>
<th
align="right">一月</th>
<th
align="right">二月</th>
</tr>
<tr>
<td
align="left">衣服</td>
<td
align="right">$241.10</td>
<td
align="right">$50.20</td>
</tr>
<tr>
<td
align="left">化妆品</td>
<td
align="right">$30.00</td>
<td
align="right">$44.45</td>
</tr>
<tr>
<td
align="left">食物</td>
<td
align="right">$730.40</td>
<td
align="right">$650.00</td>
</tr>
<tr>
<th
align="left">总计</th>
<th
align="right">$1001.50</th>
<th
align="right">$744.65</th>
</tr>
</table>
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一个有序列表：</h4>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<hr />
<p>type="disc"
circle square 设置项目符号
</p>
<h4>Disc
项目符号列表：</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Circle
项目符号列表：</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Square
项目符号列表：</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<hr />
<h4>数字列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<hr />
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<hr />
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ...
...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ...
...</dd>
</dl>
<hr /><hr
/>
<form>
用户：
<input type="text" name="user">
<br />
密码：<input type="password"
name="password"><br
/>
男性：<input type="radio" checked="checked"
name="Sex" value="male" /><br
/>
女性：<input type="radio" name="Sex" value="female"
/><br />
<select name="cars">
<option
value="中国地质大学">中国地质大学</option>
<option
value="北京语言大学">北京语言大学</option>
<option
value="清华大学">清华大学</option>
<option
value="北京大学">北京大学</option>
</select><br
/>
我喜欢自行车：<input type="checkbox"
name="Bike"><br
/>
我喜欢汽车：<input type="checkbox"
name="Car"><br />
</form>
<p>请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。</p>
<hr />
<textarea cols="30" rows="5">
领先的 Web 技术教程 - 全部免费
在w3school，你可以找到你所需要的所有的网站建设教程。
从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和WAP。
</textarea>
<p>您无法对本例进行编辑，因为我们的在线编辑器使用
textarea 进行输入，
而浏览器不允许 textarea 中存在另一个
textarea。</p>
<hr />
<form>
<input type="button" value="Hello
world!">
</form>
<hr />
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>