HTML基础3：利用段落和换行符组织页面

约定不等于承诺〃 2023-05-30 06:11 86阅读 0赞

浏览器在显示HTML文件的<body>标签内容时，它将忽略换行符或者单词之间的空格。此外，当文本到达浏览器窗口边缘时，它将自动换到下一行，而不管在原始的HTML文件中换行符出现在什么位置。

<!DOCTYPE html>
    
    <html lang="en">
      <head>
        <title>The Advertising Agency Song</title>
      </head>
    
      <body>
        <p>
          When your client's hopping mad, put his picture in the ad. If he still should prove refractory, add a picture of his factory. </p> <hr> <p> When your client's hopping mad,<br>
          put his picture in the ad.
        </p>
        <p>
          If he still should prove refractory,<br>
          add a picture of his factory.
        </p>
      </body>
    </html>

输出：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyNDIzNA_size_16_color_FFFFFF_t_70]  
可以看到，当把文本包围在<p></p>标签之中，就假定结束标签之后有一个换行符，并且该标签内的文本会忽略原始文本的换行与空格，但可以利用<br>标签在段落内强制换行。除此还发现，利用<hr>标签插入水平标线也会导致自动换行。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyNDIzNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107182910769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyNDIzNA==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，86人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML基础3：利用段落和换行符组织页面

浏览器在显示HTML文件的<body>标签内容时，它将忽略换行符或者单词之间的空格。此外，当文本到达浏览器窗口边缘时，它将自动换到下一行，而不管在原始的HTML文件中换行符出现

约定不等于承诺〃/ 2023年05月30日 06:11/ 0 赞/ 87 阅读

相关 html段落中加空格,HTML 段落

HTML 段落 HTML 可以将文档分割为若干段落。 HTML 段落段落是通过标签定义的。这是一个段落这是另一个段落注意：浏览器会自动地在段落的前后添加

系统管理员/ 2022年10月05日 15:59/ 0 赞/ 225 阅读

相关（html入门）HTML 属性+标签+段落

HTML 属性属性为 HTML 元素提供附加信息。 HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比

柔情只为你懂/ 2022年09月02日 12:45/ 0 赞/ 212 阅读

相关如何在HTML页面中保留空格和换行符

我们知道，在浏览器对HTML页面进行渲染显示的时候，会对HTML文件中的空格和换行符进行处理，这样我们原来写在HTML文件中的格式化就可能起不到效果，尤其是在我们想展示结构化程

忘是亡心i/ 2022年08月21日 11:58/ 0 赞/ 222 阅读

相关 HTML HTML 段落 (stage1-14)

基础篇-HTML 段落 HTML 可以将文档分割为若干段落。 1.HTML段落段落是通过 `<p>` 标签定义的。实例： <p>这是一个段落 <

布满荆棘的人生/ 2022年06月02日 01:46/ 0 赞/ 217 阅读

相关 HTML 基础之段落标签(
) 学习笔记

文档段落：注释：  1. 在<body> </body>里面写文字，则可显示想要显示的文章。 2. 在<head

冷不防/ 2022年04月23日 10:08/ 0 赞/ 301 阅读

相关 HTML示例05---段落

一块块砖瓦组合就形成了高楼大厦，一行行文字组合就形成了段落篇章。在实际的文本编码中，输入完一段文字后，按下键盘上的<Enter>健就生成了一个段落，但是在HTML5中需要通过标

蔚落/ 2022年03月18日 20:07/ 0 赞/ 278 阅读

相关 HTML_01 —— 标题和段落

主标题：<title> 里面放主标题的内容</title> 标题：<h1>里面写标题的内容</h1> 注意：标题只有h1--h6 ，没有h7

素颜马尾好姑娘i/ 2021年12月14日 08:11/ 0 赞/ 292 阅读

相关 HTML学习笔记6-HTML段落

一、HTML段落 HTML段落是通过<p>标签定义的，具体代码如下 <!DOCTYPE html> <html lang="en"> <head>

你的名字/ 2021年11月05日 13:14/ 0 赞/ 298 阅读

相关前端基础之——网页文本与段落信息组织（二）

上一章讲到了初识HTML的格式，这一章了解一下网页文本与段落信息组织本文主要讲解：文本基本标记标题元素标记段落元素标记文本的间隔和布局水平分割线元素标记

一时失言乱红尘/ 2021年09月22日 07:42/ 0 赞/ 261 阅读