如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
记事本写网页教案-HTML格式化排版进阶
来源：互联网
2023-03-16 19:15:33 461
上次经验描述了HTML排版一首唐诗。这次，继续对这首唐诗进行格式化排版
HTML文档可以用记事本和浏览器分别打开，在记事本上修改代码，刷新浏览器后就可以看到效果，对于学习非常的方便。
0百度html在线UEditor的使用，网页教案编辑利器
工具/原料
- 电脑
- 记事本
方法/步骤
上次回顾：
记事本写入如下代码，加入背景图片，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
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文件在一个文件夹。
11记事本写网页教案-HTML排版一首唐诗
记事本改写如下代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
html>
head>
title>记事本写网页教案/title>
/head>
body background="1.jpg">
h1>春晓/h1>
hr />
pre>
春眠不觉晓，br />
处处闻啼鸟。br />
夜来风雨声，br />
花落知多少。br />
/pre>
hr />
/body>
/html>
---------------------------------------------------------------------
blockquote> 引用标签改成pre>
pre>标签被称为预格式化标签，标签内的文字保留空格和回车。
记事本添加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 属性
记事本改写如下代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
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>标签表示强调重点
记事本改写如下代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
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表示屏幕分辨率，数值越大，显示越大。
记事本改写如下代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
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表示屏幕分辨率，数值越大，显示越大。
记事本改写如下代码，保存后，浏览器刷新显示效果
--------------------------------------------------------------------------------
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 属性为元素定义了背景颜色。
注意事项
- 尽量使用HTML5的新规范，淘汰的标签和属性将来不会被支持。
- CSS可以将你需要的样式集中设置，后面会学到。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： HTML
上一篇：记事本写网页教案-对文中关键词显示解释的方法 下一篇：优化电商网站主页的小技巧
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 437 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)