HTML练习

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML练习2一些基础的HTML Tag
程序：
<html>
<body>
这是一个非常简单的HTML。

</body>
</html>
结果：
这是一个非常简单的HTML。

2.2、HTML 简单段落
程序：
<html>
<body>
<p>这是第一段。

</p>
<p>这是第二段。

</p>
<p>这是第三段。

</p>
<p>在HTML里，用p来定义段落。

</p>
</body>
</html>
结果：
这是第一段。

这是第二段。

这是第三段。

在HTML里，用p来定义段落。

2,3在HTML 写多个段落
程序：
结果：
这一段在源代码里包含很多分行，但是浏览器忽略这些分行。

这一段在浏览器里包含很多空格，但是浏览器忽略多余空格。

你使用的浏览器的窗口大小决定了段落的行数。

如果你改编浏览器窗口的大小，段落的行数会因此改变。

2.4在HTML 里如何换行
程序：
<html>
<body>
<p>
要<br>在一段<br>里<br>换行<br>请使用<br>br这个Tag。

</p>
</body>
</html>
结果：
要
在一段
里
换行
请使用
br这个Tag。

2.5HTML 正文标题
程序：
<html>
<body>
<h1>这是1号标题</h1>
<h2>这是2号标题</h2>
<h3>这是3号标题</h3>
<h4>这是4号标题</h4>
<h5>这是5号标题</h5>
<h6>这是6号标题</h6>
</body>
</html>
结果：
这是1号标题
这是2号标题
这是3号标题
这是4号标题
这是5号标题
这是6号标题
2.6HTML 居中显示的标题
程序：
<html>
<body>
<h1 align="center">这是标题</h1>
<h2 align="right"> 在右边 </h2>  <h2 align="left"> 在左边 </h2>
<p>上面的标题是居中显示的。

</p>
</body>
</html>
结果：
这是标题
上面的标题是居中显示的。

2.7在HTML 里加一条横线
程序：
<html>
<body>
<p>用hr这个Tag可以在HTML文件里加一条横线。

</p>
<hr>
<p>村妇想像皇宫的生活：皇后得用金扁担挑水吧。

</p>
<hr>
<p>上课时，老师讲课渐入佳境，口沫横飞，不小心溅到第一排一个同学的脸上。

同学正准备擦去，老师看到说：“不要擦，这是知识的甘露。

”</p>
<hr>
<p>初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！……</p>
</body>
</html>
结果：
初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！……
2.8 HTML 文件的代码注释
程序：
<html>
<body>

<p>代码注释是不会显示在网页里的。

</p>
</body>
</html>
结果：
代码注释是不会显示在网页里的。

2.9 HTML背景颜色
程序：
<html>
<body bgcolor="yellow">
<h2>看，这个页面是黄色的。

</h2>
</body>
</html>
结果：
看，这个页面是黄色的。

3 HTML常用格式
3.1 HTML 常用格式Tag
程序：
<html>
<body>
<p><b>粗体用b表示。

</b></p>
<p><i>斜体用i表示。

</i></p>
<p><del>芙蓉姐姐</del>这个词当中划线表示删除。

</p>
<p><ins>想唱就唱</ins>这个词下划线插入。

</p>
<p>X<sub>2</sub>其中的2是下标</p>
<p>X<sup>2</sup>其中的2是上标</p>
<p><blockquote>好好学习，天天向上。

这句话缩进表示引用</blockquote></p> <pre>
这是
预设(preformatted)文本.
在pre这个tag里的文本保留
空格和
分行。

</pre>
<code>call getOrders</code>
<p>用code显示计算机代码，code里显示的字符是等宽字符。

</p> </body>
</html>
结果：
粗体用b表示。

斜体用i表示。

这个词当中划线表示删除。

想唱就唱这个词下划线插入。

X
其中的2是下标
2
X2其中的2是上标
好好学习，天天向上。

这句话缩进表示引用
这是
预设(preformatted)文本.
在pre这个tag里的文本保留
空格和
分行。

call getOrders
用code显示计算机代码，code里显示的字符是等宽字符。

4 HTML特殊字符显示
5 HTML利用超链接打开链接文件
5.1 如何创建HTML 超链接
程序：
<html>
<body>
<p>
<a href="humor02.html">这是一个链接</a>
</p>
<p>
<a href="" target=_blank>百度</a>
</p>
</body>
</html>
结果：
这是一个链接
百度
<HTML>
<HEAD>
<TITLE> humor02.html</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
<P>这是humor02.html。

</P>
<hr>
<P>一次教育局领导视察课间操，结束后，本应由体育老师宣布“解散”，但一时情急，忘词了，憋了半天，大喊：“撤退！”</P>
</BODY>
</HTML>
5.2 将图片作为一个超链接
程序：
<html>
<body>
<p>
你可以将一张图片作为一个链接，点击这个图片。

<a href="humor03.html">
<img src="smile.jpg" >
</a>
</p>
</body>
</html>
你可以将一张图片作为一个链接，点击这个图片。

humor03.html源代码
<HTML>
<HEAD>
<TITLE>humor03.html</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
<P>这是humor03.html。

</P>
<hr>
<p>俺碰到一个心仪已久的女孩从澡堂里出来，想套近乎，憋了半天憋出一句：“你洗澡啊，里面男的多不多啊？”</p>
</BODY>
</HTML>
5.3 在新窗口打开一个链接
程序：
<html>
<body>
<a href="humor01.html" target="_blank">一则笑话</a>
<p>
如果你将target的属性值设成_blank，你点击这个链接的时候，网页就会在一个新窗口出现。

</p>
</body>
</html>
结果：
一则笑话
humor01.html源代码
<HEAD>
<TITLE> humor01.html</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
<P>这是humor01.html。

</P>
<hr>
<P>我：老公，是不是我要什么都会给我啊？</P>
<P>LG：能实现的，尽量。

</P>
<P>我：我要天上的星星。

</P>
<P>LG：你要太阳月亮，可不好。

</P>
<P>LG：星星好说啊。

</P>
<P>我：为什么？</P>
<P>LG：你用头往墙上碰，使劲碰，几下即看到了。

</P>
</BODY>
</HTML>
如果你将target的属性值设成_blank，你点击这个链接的时候，网页就会在一个新窗口出现。

5.4 在HTML 文件里跳转
程序：
<html>
<body>
<p><a href="#C6">参见第六章</a></p>
<p><a href="#C11">参见第十一章</a></p>
<a name="C1"><h2>第1章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C2"><h2>第2章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C3"><h2>第3章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C4"><h2>第4章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C5"><h2>第5章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C6"><h2>第6章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C7"><h2>第7章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C8"><h2>第8章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C9"><h2>第9章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C10"><h2>第10章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C11"><h2>第11章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C12"><h2>第12章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C13"><h2>第13章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C14"><h2>第14章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C15"><h2>第15章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C16"><h2>第16章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
<a name="C17"><h2>第17章</h2></a>
<p>你好，你现在已经学会怎么制作网站了！</p>
</body>
</html>
结果：
参见第六章
参见第十一章
5.6 链接到一个邮箱地址
程序：
<html>
<body>
<p>这是一个最简单的邮箱地址的链接：<a href="mailto:info@">给新浪网站发信</a></p>
<p>
这个邮箱地址的链接写了subject内容：<a href="mailto:info@?subject=Hello">给新浪网站发信</a></p>
<p>这个邮箱地址链接写了to, cc, bcc, subject, body的内容：<a href="mailto:info@?cc=webmaster@&bcc=media@&subje ct=I%20like%20your%20site&body=真是个好站点！">写信给新浪</a></p>
<p><b>注:</b>空格请用%20表示。

</p>
</body>
</html>
结果：
这是一个最简单的邮箱地址的链接：给新浪网站发信
这个邮箱地址的链接写了subject内容：给新浪网站发信
这个邮箱地址链接写了to, cc, bcc, subject, body的内容：写信给新浪注:空格请用%20表示。

HTML图片(Images)
在HTML里插入图片
程序：
<html>
<body>
<p>
布啦布啦Logo图片：<img src="logo.gif">
</p>
</body>
</html>
HTML图片的说明(Alt属性)
程序：
<html>
<body>
<p>将鼠标停留在图片上，你可以看到Alt属性里写的内容。

</p>
<img src="logo.gif" alt=" Logo标志" ><br>
<img src="frjj01.jpg" alt="芙蓉姐姐照片：红配绿一台戏" >
</body>
</html>
结果：
HTML里图片的对齐方式(Align)
程序：
<html>
<body>
<p>图片的上下对齐方式：</p>
<p><img src="logo.gif" align="top">对齐方式:top</p>
<p><img src="logo.gif" align="middle">对齐方式:middle</p> <p><img src="logo.gif" align="bottom">对齐方式:bottom</p> <p>图片的左右对齐方式：</p>
<p><img src="logo.gif" align="Left">对齐方式:left</p>
<p><img src="logo.gif" align="center">对齐方式:center</p> <p><img src="logo.gif" align="right">对齐方式:right</p>
</body>
</html>
结果：
HTML的图片大小
程序：
<html>
<body>
<p>你可以使用Height和Width属性来改变图片的大小。

</p> <p><img src="smile.jpg"></p>
<p><img src="smile.jpg" width="30" height="30"></p>
<p><img src="smile.jpg" width="100" height="80"></p>
<p><img src="smile.jpg" width="300" height="300"></p>
</body>
</html>
结果：
你可以使用Height和Width属性来改变图片的大小。

HTML里加背景图片
程序：
<html>
<body background="../images/html_tutorials/background.jpg"> <h3>这个网页有背景图片哦！</h3>
<p>如果图片比页面小，图片会自动重复。

</p>
</body>
</html>
结果：
将图片作为一个超链接
程序：
<html>
<body>
<p>
你可以将一张图片作为一个链接，点击这个图片。

<a href="humor03.html"><img src="smile.jpg" ></a> </p>
</body>
</html>
结果：
你可以将一张图片作为一个链接，点击这个图片。

HTML字体(Fonts) HTML字体大小(font size)
程序：
<html>
<head><title>字体大小font size</title></head>
<body>
<p><font size="1">这段文字的字体大小值为1。

</font></p>
<p><font size="2">这段文字的字体大小值为2。

</font></p>
<p><font size="3">这段文字的字体大小值为3。

</font></p>
<p><font size="4">这段文字的字体大小值为4。

</font></p>
<p><font size="5">这段文字的字体大小值为5。

</font></p>
<p><font size="6">这段文字的字体大小值为6。

</font></p>
<p><font size="7">这段文字的字体大小值为7。

</font></p>
</body>
</html>
结果：
这段文字的字体大小值为1。

这段文字的字体大小值为2。

这段文字的字体大小值为3。

这段文字的字体大小值为4。

这段文字的字体大小值为5。

这段文字的字体大小值为6。

这段文字的字体大小值为7。

HTML字体风格(font face)
程序：
<html>
<head><title>字体风格font face</title></head>
<body>
<p>以下第一段用的是arial字体，第二段用的是courier字体，第三段用的是verdana字体。

</p>
<p><font face="arial">arial courier verdana</font></p>
<p><font face = "courier">arial courier verdana</font></p>
<p><font face="verdana">arial courier verdana</font></p>
</body>
</html>
结果：
以下第一段用的是arial字体，第二段用的是courier字体，第三段用的是verdana字体。

arial courier verdana
arial courier verdana
arial courier verdana
HTML字体颜色(font color)
程序：
<html>
<head><title>字体颜色font color</title></head>
<body>
<p>这段文字用的是缺省的字体颜色。

</p>
<p><font color="#FF0000">这段文字的字体颜色为红色。

</font></p>
<p><font color="gray">这段文字的字体颜色为灰色。

</font></p>
<p><font color="#33CC00">这段文字的字体颜色为绿色。

</font></p>
</body>
</html>
结果：
这段文字用的是缺省的字体颜色。

这段文字的字体颜色为红色。

这段文字的字体颜色为灰色。

这段文字的字体颜色为绿色。

CSS常用文本属性
文本对齐属性(text-align)
程序：
<html>
<head>
<title>文本对齐属性text-align</title>
<style type="text/css">
.p1{text-align:left}
.p2 {text-align:right}
.p3{text-align:center}
</style>
</head>
<body>
<p class = "p1">这段的本文对齐属性(text-align)值为居左。

</p>
<p class = "p2">这段的本文对齐属性(text-align)值为居右。

</p>
<p class = "p3">这段的本文对齐属性(text-align)值为居中。

</p>
</body>
</html>
结果：
这段的本文对齐属性(text-align)值为居左。

这段的本文对齐属性(text-align)值为居右。

这段的本文对齐属性(text-align)值为居中。

文本修饰属性(text-decoration)
程序：
<html>
<head>
<title>文本修饰属性text-decoration</title>
<style type="text/css">
.p1{text-decoration: none}
.p2 {text-decoration: underline}
.p3{text-decoration: line-through}
.p4 {text-decoration:overline}
</style>
</head>
<body>
<p class = "p1">文本修饰属性(text-decoration)的缺省值是none。

</p>
<p class = "p2">这段的文本修饰属性(text-decoration)值是underline。

</p>
<p class = "p3">这段的文本修饰属性(text-decoration)值是line-through。

</p>
<p class = "p4">这段的文本修饰属性(text-decoration)值是overline。

</p>
</body>
</html>
结果：
文本修饰属性(text-decoration)的缺省值是none。

这段的文本修饰属性(text-decoration)值是underline。

这段的文本修饰属性(text-decoration)值是line-through。

这段的文本修饰属性(text-decoration)值是overline。

文本缩进属性(text-indent)
程序：
<html>
<head>
<title>文本缩进属性text-indent</title>
<style type="text/css">
.p1 {text-indent: 8mm}
.d1 {width:300px}
.p2 {text-indent:50%}
</style>
</head>
<body>
<p>下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。

</p>
<p class = "p1">芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。

我总是很焦点。

我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。

”</p>
<div class = "d1">
<p class = p2>芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。

我总是很焦点。

我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。

”</p>
</div>
</body>
</html>
结果：
下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。

芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。

我总是很焦点。

我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。

”
芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。

我总是很焦点。

我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。

”
行高属性(line-height)
程序：
<html>
<head>
<title>行高属性line-height</title>
<style type="text/css">
.p1 {line-height:1cm}
.p2 {line-height:2cm}
</style>
</head>
<body>
<p class = "p1">这个段落的CSS行高属性(line-hight)值为1cm，即每行之间的距离是1厘米。

</p>
<p class = "p2">这个段落的CSS行高属性(line-hight)值为2cm，即每行之间的距离是2厘米。

</p>
</body>
</html>
结果：
这个段落的CSS行高属性(line-hight)值为1cm，即每行之间的距离是1厘米。

这个段落的CSS行高属性(line-hight)值为2cm，即每行之间的距离是2厘米。

字间距属性(letter-spacing)
程序：
<html>
<head>
<title>字间距属性letter-spacing</title>
<style type="text/css">
.p1 {letter-spacing: 3mm}
</style>
</head>
<body>
<p>这段没有设置字间距属性(letter-spacing)。

</p>
<p class = "p1">这段设定字间距属性(letter-spacing)值为3毫米。

</p>
</body>
</html>
结果：
这段没有设置字间距属性(letter-spacing)。

这段设定字间距属性
(l e t t e r-s p a c i n g)值为3毫米。

颜色属性(color)
程序：
<html>
<head>
<title>颜色属性color</title>
<style type="text/css">
.p1{color:gray}
.p2 {color:#FF0000}
.p3{color:#3300FF}
</style>
</head>
<body>
<p>这段没有设置颜色属性(color)。

</p>
<p class = "p1">这段的颜色属性(color)值是灰色。

</p> <p class = "p2">这段的颜色属性(color)值是红色。

</p> <p class = "p3">这段的颜色属性(color)值是蓝色。

</p> </body>
</html>
结果：
这段没有设置颜色属性(color)。

这段的颜色属性(color)值是灰色。

这段的颜色属性(color)值是红色。

这段的颜色属性(color)值是蓝色。

CSS字体属性字体名称属性(font-family)
程序：
<html>
<head>
<title>字体名称属性font-family</title>
<STYLE>
.s1 {font-family:Arial}
.s2 {font-family:Tahoma}
.s3 {font-family:Courier}
.s4 {font-family:Verdana}
.s5 {font-family:"Book Antiqua"}
</STYLE>
</head>
<body>
<p>The font-family value of the text is the browser default font.</p>
<p class = "s1">The fon-family value of the text is "Arial"。

</p>
<p class = "s2">The fon-family value of the text is "Tahoma"。

</</p>
<p class = "s3">The fon-family value of the text is "Courer"。

</</p>
<p class = "s4">The fon-family value of the text is "Verdana"。

</</p>
<p class = "s5">The fon-family value of the text is "Book Antiqua"。

</</p>
</body>
</html>
结果：
The font-family value of the text is the browser default font. The fon-family value of the text is "Arial"。

The fon-family value of the text is "Tahoma"。

</< p>
The fon-family value of the text is "Courer"。

</< p> The fon-family value of the text is "Verdana"。

</< p>
The fon-family value of the text is "Book Antiqua"。

</< p>
字体大小属性(font-size)
程序：
<html>
<head>
<title>字体大小属性font-size</title>
<STYLE>
BODY{font-size:10pt}
.s1 {font-size:16px}
.s2 {font-size:16pt}
.s3 {font-size:80%}
.s4 {font-size:larger}
.s5 {font-size:xx-large}
</STYLE>
</head>
<body>
<p>这段文字大小是10pt。

</p>
<p class = "s1">这段文字大小是16px。

</p>
<p class = "s2">这段文字大小是16pt。

</p>
<p class = "s3">这段文字大小是10pt的80%。

</p>
<p class = "s4">这段文字的大小比10pt大。

</p>
<p class = "s5">这段文字的大小是特大号(xx-large)。

</p>
</body>
</html>
结果：
这段文字大小是10pt。

这段文字大小是16px。

这段文字大小是16pt。

这段文字大小是10pt的80%。

这段文字的大小比10pt大。

这段文字的大小是特大号(xx-large)。

字体风格属性(font-style)
程序：
<html>
<head>
<title>字体风格属性font-style</title>
<STYLE>
.s1 {font-style:italic}
.s2 {font-style:oblique}
</STYLE>
</head>
<body>
<p>这段文字风格是normal，正常显示。

normal是字体风格属性(font-style)的缺省值。

</p> <p class = "s1">这段文字的字体风格(font-style)属性值是italic，斜体显示。

</p>
<p class = "s2">这段文字的字体风格(font-style)属性值是oblique，斜体显示。

</p>
</body>
</html>
结果：
这段文字风格是normal，正常显示。

normal是字体风格属性(font-style)的缺省值。

这段文字的字体风格(font-style)属性值是italic，斜体显示。

这段文字的字体风格(font-style)属性值是oblique，斜体显示。

字体浓淡属性(font-weight)
程序：
<html>
<head>
<title>字体浓淡属性font-weight</title>
</head>
<body>
<p>这段文字没有设浓淡属性。

<p>
<p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。

<p>
<p style = "font-weight:lighter">这段文字字体的浓淡属性(font-weight)值是lighter。

<p> <p style = "font-weight:200">这段文字字体的浓淡属性值(font-weight)是200。

<p>
<p style = "font-weight:800">这段文字字体的浓淡属性值(font-weight)是800。

<p>
</body>
</html>
结果：
这段文字没有设浓淡属性。

这段文字字体的浓淡属性(font-weight)值是bold。

这段文字字体的浓淡属性(font-weight)值是lighter。

这段文字字体的浓淡属性值(font-weight)是200。

这段文字字体的浓淡属性值(font-weight)是800。

字体变量属性(font-variant)
程序：
<html>
<head>
<title>字体变量属性font-variant</title>
<STYLE>
.s1 {font-variant:small-caps}
</STYLE>
</head>
<body>
<p>字体变量(font-variant)属性有两个值，一个是缺省值normal，另外一个是small-caps。

下面这段文字的字体变量属性(font-variant)是small-caps。

</p>
<p class = "s1">The font-variant value of the text is "small-caps". </p>
</body>
</html>
结果：
字体变量(font-variant)属性有两个值，一个是缺省值normal，另外一个是small-caps。

下面这段文字的字体变量属性(font-variant)是small-caps。

T HE FONT-VARIANT VALUE OF THE TEXT IS "SMALL-CAPS".
字体属性(font)
程序：
<html>
<head>
<title>字体属性font</title>
<STYLE>
.s1 {font:italic normal bold 11pt Arial}
.s2 {font:normal small-caps normal 14pt Courier}
</STYLE>
</head>
<body>
<p class = "s1">这段文字的字体风格(font-style)属性值是italic，字体变量(font-variant)属性值是normal，字体浓淡(font-weight)属性值是bold，字体大小(font-size)属性值是11pt，字体名称(font-family)属性值是Arial。

</p>
<p class = "s2">这段文字的字体风格(font-style)属性值是normal，字体变量(font-variant)属性值是small-caps，字体浓淡(font-weight)属性值是normal，字体大小(font-size)属性值是14pt，字体名称(font-family)属性值是Courier。

</p>
</html>
结果：
这段文字的字体风格(font-style)属性值是italic，字体变量(font-variant)属性值是normal，字体浓淡(font-weight)属性值是bold，字体大小(font-size)属性值是11pt，字体名称(font-family)属性值是Arial。

这段文字的字体风格(FONT-STYLE)属性值是NORMAL，字体变量(FONT-VARIANT)属性值是SMALL-CAPS，字体浓淡(FONT-WEIGHT)属性值是NORMAL，字体大小(FONT-SIZE)属性值是14PT，字体名称(FONT-FAMILY)属性值是C OURIER。

HTML背景颜色
程序：
<html>
<body bgcolor="yellow">
<h2>看，这个页面是黄色的。

</h2>
</body>
</html>
结果：
看，这个页面是黄色的。

HTML里加背景图片
程序：
<html>
<body background="background.jpg">
<h3>这个网页有背景图片哦！</h3>
<p>如果图片比页面小，图片会自动重复。

</p>
</html>
结果：
Marquee实例
1. 文字来回滚动：
代码：
<MARQUEE scrollAmount=3 behavior=alternate>文字来回滚动</MARQUEE>
2. 向右移动的竖排文字：
代码：
<MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=3 scrollDelay=0 direction=up width=250 height=150>
<P align=left>向右移动的竖排文字</SPAN><BR>向右移动的竖排文字<BR>向右移动的竖排文字<BR>向右移动的竖排文字</P></MARQUEE>
3. 向上移动的文字：
代码：
<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=3 direction=up>向上移动的文字<BR>向上移动的文字</MARQUEE>
4. 向下移动的文字：
代码：
<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=3 direction=down>向下移动的文字<BR>向下移动的文字</MARQUEE>
5. 从右向左滚动：
代码：
<MARQUEE scrollAmount=2>从右向左滚动</MARQUEE>
6. 从左向右滚动：
代码：
<MARQUEE scrollAmount=2 direction=right>从左向右滚动</MARQUEE>
7. 上下反弹：
代码：
<MARQUEE style="WIDTH: 700px; HEIGHT: 150px" scrollAmount=2 direction=up behavior=alternate>上下反弹</MARQUEE>
8. 从左向右文字波浪式移动：
代码：
<MARQUEE style="WIDTH: 80%; HEIGHT: 100px" scrollAmount=2 direction=up behavior=alternate width="80%">
<MARQUEE direction=right>从左向右文字波浪式移动</MARQUEE></MARQUEE>
9. 文字来回波浪式移动：
代码：
<MARQUEE style="WIDTH: 80%; HEIGHT: 100px" scrollAmount=2 direction=up behavior=alternate width="80%">
<MARQUEE direction=right behavior=alternate>文字来回波浪式移动</MARQUEE></MARQUEE>
10. 躲躲字，跑给你追：
代码：
<MARQUEE behavior=alternate><MARQUEE scrollAmount=5 width=150>躲躲字，跑给你追</MARQUEE></MARQUEE>
11. 原地跳动的文字：
代码：
<MARQUEE direction=up behavior=alternate width=60 height=120>祝</MARQUEE><MARQUEE direction=up behavior=alternate width=60 height=80>大</MARQUEE><MARQUEE direction=up behavior=alternate width=60 height=120>家</MARQUEE><MARQUEE direction=up behavior=alternate width=60 height=80>永</MARQUEE><MARQUEE direction=up behavior=alternate width=60 height=120>远</MARQUEE><MARQUEE direction=up behavior=alternate width=60 height=80>幸</MARQUEE><MARQUEE direction=up behavior=alternate width=60 height=120>福</MARQUEE>
12. 波浪字：
代码：
<MARQUEE style="FILTER: wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)" scrollAmount=2 scrollDelay=65 direction=up behavior=alternate height=120><CENTER>波浪字<BR>波浪字</CENTER></MARQUEE>
13. 由中间向两边移动的文字：
代码：
<P align=center><FONT color=#ee110e size=7 face=宋体>
<MARQUEE height=50 width=600>欢迎光临 </MARQUEE></FONT></MARQUEE><FONT color=#ee110e size=7 face=宋体><FONT color=#ee1111 size=7 face=宋体>
<MARQUEE direction=right height=50 width=600>欢迎光临</MARQUEE></FONT></MARQUEE></FONT></FONT></P>
<P align=center><FONT color=#ee110e size=7 face=宋体>
14. 由上下向中间移动的字体：
代码：
<P align=center>
<MARQUEE style="WIDTH: 510px; HEIGHT: 60px" direction=down height=60 scrollAmount=2>
<CENTER><FONT color=#ff0000 size=5 face=隶书><B>祝你快乐</B></FONT></CENTER></B></MARQUEE></P>
<CENTER><MARQUEE style="WIDTH: 513px; HEIGHT: 60px" direction=up height=60 scrollAmount=2>
<CENTER><FONT color=#ff0000 size=5 face=隶书><B>祝你快乐。