一个简单的 HTML 文件
这个例子是一个很简单的 HTML 文件，使用了尽可能少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
04 | <title>我的第一个 HTML 页面</title> |
08 | <p>body 元素的内容会显示在浏览器中。</p> |
09 | <p>title 元素的内容会显示在浏览器的标题栏中。</p> |
简单的段落
此例演示：段落元素中的文字如何被浏览器显示。
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
更多的段落
本例演示段落元素的某些缺省的行为。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>
<p>
这个段落
在源代码 中
包含 许多行
但是 浏览器
忽略了 它们。
</p>
<p>
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
</p>
</body>
</html>
01 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
25 | 段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。 |
“诗歌”问题
本例演示 HTML 格式化的某些问题。
<html>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>
14 | <p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p> |
折行
本例演示在 HTML 文档中折行的使用。
<html>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>
</body>
</html>
06 | To break<br />lines<br />in a<br />paragraph,<br />use the br tag. |
标题
本例演示在 HTML 文档中显示标题的标签。
<html>
<body>
<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>
</body>
</html>
05 | <h1>This is heading 1</h1> |
06 | <h2>This is heading 2</h2> |
07 | <h3>This is heading 3</h3> |
08 | <h4>This is heading 4</h4> |
09 | <h5>This is heading 5</h5> |
10 | <h6>This is heading 6</h6> |
12 | <p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p> |
居中排列的标题
本例演示一个居中排列的标题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
</body>
</html>
01 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
08 | <h1 align="center">This is heading 1</h1> |
10 | <p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p> |
水平线
本例演示如何插入水平线。
<html>
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
隐藏的注释
本例演示如何在 HTML 源代码中插入隐藏的注释。
<html>
<body>
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
</body>
</html>
背景颜色
本例演示如何为 HTML 页面添加背景颜色。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body>
</html>
03 | <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
04 | <meta http-equiv="Content-Language" content="zh-cn" /> |
07 | <body bgcolor="yellow"> |