记事本写网页教案-HTML排版一首唐诗

 时间:2026-02-14 11:51:56

1、记事本写入如下代码,保存后,浏览器刷新显示效果

--------------------------------------------------------------------------------

<html>   

<head> 

<title>记事本写网页教案</title>

</head>   

<body>  

<h1>春晓</h1>

    春眠不觉晓,

      处处闻啼鸟。

        夜来风雨声,

          花落知多少。

</body>  

</html>

---------------------------------------------------------------------

<h1>标签表示标题,标签表示段落

由于浏览器在显示 HTML 时,会省略源代码中多余的空白字符(空格或回车等),所以唐诗的四句话连成了一条,分不开。

记事本写网页教案-HTML排版一首唐诗

2、记事本更改如下代码,保存后,浏览器刷新显示效果

--------------------------------------------------------------------------------

<html>   

<head> 

<title>记事本写网页教案</title>

</head>   

<body>  

<h1>春晓</h1>

    春眠不觉晓,<br />

      处处闻啼鸟。<br />

        夜来风雨声,<br />

          花落知多少。<br />

</body>  

</html> 

---------------------------------------------------------------------

<br />标签表示换行,相当于回车。

所以四句话就分开显示了。

记事本写网页教案-HTML排版一首唐诗

3、记事本再次更改如下代码,保存后,浏览器刷新显示效果

--------------------------------------------------------------------------------

<html>   

<head> 

<title>记事本写网页教案</title>

</head>   

<body>  

<h1>春晓</h1>

<hr />

    春眠不觉晓,<br />

      处处闻啼鸟。<br />

        夜来风雨声,<br />

          花落知多少。<br />

<hr />

</body>  

</html>   

---------------------------------------------------------------------

使用水平线 (<hr> 标签) 来分隔文章中的小节是一个好办法

可以使阅读变得容易。

记事本写网页教案-HTML排版一首唐诗

4、记事本再次更改如下代码,用<blockquote>元素代替元素保存后,浏览器刷新显示效果

--------------------------------------------------------------------------------

<html>   

<head> 

<title>记事本写网页教案</title>

</head>   

<body>  

<h1>春晓</h1>

<hr />

<blockquote>

    春眠不觉晓,<br />

      处处闻啼鸟。<br />

        夜来风雨声,<br />

          花落知多少。<br />

<blockquote>

<hr />

</body>  

</html>

---------------------------------------------------------------------

<blockquote> 元素表示被引用浏览器通常会对 <blockquote> 元素进行缩进处理。

记事本写网页教案-HTML排版一首唐诗

5、记事本再次更改如下代码,加入背景颜色,保存后,浏览器刷新显示效果

--------------------------------------------------------------------------------

<html>   

<head>  

<title>记事本写网页教案</title>

</head>   

<body  bgcolor="blue">  

<h1>春晓</h1>

<hr />

<blockquote>

    春眠不觉晓,<br />

      处处闻啼鸟。<br />

        夜来风雨声,<br />

          花落知多少。<br />

<blockquote>

<hr />

</body>  

</html>

---------------------------------------------------------------------

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

这里<body  bgcolor="blue">   表示添加蓝色背景 

记事本写网页教案-HTML排版一首唐诗

6、记事本再次更改如下代码,加入背景图片,保存后,浏览器刷新显示效果

--------------------------------------------------------------------------------

<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文件在一个文件夹。  

记事本写网页教案-HTML排版一首唐诗

  • html轮播图怎么制作
  • 如何在HTML中插入图片
  • 怎样在html网页中插入视频
  • HTML怎么添加滚动条
  • html中多个空格怎么打
  • 热门搜索
    韩国冷面的做法 胎心监护图怎么看 感恩节用英语怎么说 立方怎么算 小腹疼痛是怎么回事 怎么缩小鼻孔 为什么要减肥 老豆腐的家常做法 酸辣粉丝的做法 养生汤的做法大全