一个简单的 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" > |