首页 > HTML 实例

HTML 基础标签实例

发表于2015-05-27 14:16:49| 1250次阅读| 来源webkfa| 作者哈哈

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

相关文章

相关文章

在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京 ICP 证 14034497 号