记事本写网页教案-HTML格式化排版进阶
1、上次回顾：
记事本写入如下代码，加入背景图片，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
<html>
<head>
<title>记事本写网页教案</title>
</head>
<body background="1.jpg">
<h1>春晓</h1>
<hr />
<blockquote>
春眠不觉晓，<br />
处处闻啼鸟。<br />
夜来风雨声，<br />
花落知多少。<br />
<blockquote>
<hr />
</body>
</html>
---------------------------------------------------------------------
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
这里<body background="1.jpg"> 表示添加背景图片，地址为1.jpg
也就是.html文件和.jpg文件在一个文件夹。
2、记事本改写如下代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
<html>
<head>
<title>记事本写网页教案</title>
</head>
<body background="1.jpg">
<h1>春晓</h1>
<hr />
<pre>
春眠不觉晓，<br />
处处闻啼鸟。<br />
夜来风雨声，<br />
花落知多少。<br />
</pre>
<hr />
</body>
</html>
---------------------------------------------------------------------
<blockquote> 引用标签改成<pre>
<pre>标签被称为预格式化标签，标签内的文字保留空格和回车。
3、记事本添加style="text-align:center"代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
<html>
<head>
<title>记事本写网页教案</title>
</head>
<body background="1.jpg">
<h1 style="text-align:center">春晓</h1>
<hr />
<pre style="text-align:center">
春眠不觉晓，<br />
处处闻啼鸟。<br />
夜来风雨声，<br />
花落知多少。<br />
</pre>
<hr />
</body>
</html>
---------------------------------------------------------------------
style="text-align:center" 这段属性代码表示居中对齐。
style="text-align:center"是HTML5最新的规范：
style 属性淘汰了旧的 <font> 标签
style 属性淘汰了旧的 "align" 属性
style 属性淘汰了“旧的” bgcolor 属性
4、记事本改写如下代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
<html>
<head>
<title>记事本写网页教案</title>
</head>
<body background="1.jpg">
<h1 style="text-align:center">春晓</h1>
<hr />
<pre style="text-align:center">
<b> 春眠不觉晓，</b>
<strong> 处处闻啼鸟。</strong>
<big>夜来风雨声，</big>
<em> 花落知多少。</em>
</pre>
<hr />
</body>
</html>
---------------------------------------------------------------------
<b>标签表示加粗加黑
<strong>标签表示加黑
<big>标签表示字体变大
<em>标签表示强调重点
5、记事本改写如下代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
<html>
<head>
<title>记事本写网页教案</title>
</head>
<body background="1.jpg">
<h1 style="text-align:center">春晓</h1>
<hr />
<pre style="text-align:center">
<b style="font-family:arial;color:red;font-size:20px;"> 春眠不觉晓，</b>
<strong> 处处闻啼鸟。</strong>
<big>夜来风雨声，</big>
<em> 花落知多少。</em>
</pre>
<hr />
</body>
</html>
---------------------------------------------------------------------
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
20px表示屏幕分辨率，数值越大，显示越大。
6、记事本改写如下代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
<html>
<head>
<title>记事本写网页教案</title>
</head>
<body background="1.jpg">
<h1 style="text-align:center">春晓</h1>
<hr />
<pre style="text-align:center">
<b style="font-family:arial;color:red;font-size:20px;"> 春眠不觉晓，</b>
<strong style="font-family:verdana;color:blue;font-size:30px;"> 处处闻啼鸟。</strong>
<big>夜来风雨声，</big>
<em> 花落知多少。</em>
</pre>
<hr />
</body>
</html>
---------------------------------------------------------------------
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
30px表示屏幕分辨率，数值越大，显示越大。
7、记事本改写如下代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
<html>
<head>
<title>记事本写网页教案</title>
</head>
<body background="1.jpg">
<h1 style="text-align:center">春晓</h1>
<hr />
<pre style="text-align:center">
<b style="font-family:arial;color:red;font-size:20px;"> 春眠不觉晓，</b>
<strong style="font-family:verdana;color:blue;font-size:30px;"> 处处闻啼鸟。</strong>
<big style="background-color:green">夜来风雨声，</big>
<em style="background-color:yellow"> 花落知多少。</em>
</pre>
<hr />
</body>
</html>
---------------------------------------------------------------------
style 属性淘汰了“旧的” bgcolor 属性。
background-color 属性为元素定义了背景颜色。
