整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

超文本标记语言的段落与换行显示!

超文本标记语言的段落与换行显示!

TML 段落

段落是通过 <p> 标签定义的。

实际例子

<p>This is a paragraph</p>
<p>This is another paragraph</p>

注释:浏览器会自动地在段落的前后添加空行。(<p> 是块级元素

提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表。)

不要忘记结束标签

即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:

实际例子

<p>This is a paragraph
<p>This is another paragraph

上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释:在未来的 HTML 版本中,不允许省略结束标签。(现在开发已经不允许了)

提示:通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始,并在何处结束,不论对您还是对浏览器来说,都会使代码更容易理解。

HTML 折行(换行)

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

<p>This is<br />a para<br />graph with line breaks</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

<br> 还是 <br />

你会发现 <br> 与 <br /> 很相似。

在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。

即使 <br> 在所有浏览器中的显示都没有问题,使用 <br /> 也是更长远的保障

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。

对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

知识总结

标签 描述

<p> 定义段落。

<br /> 插入单个折行(换行)。

如果您觉得有用,麻烦点个赞,支持一下!!

欢迎提问与建议。

TML(超文本标记语言)中的元素可以分为两类:块级元素和内联元素。块级元素会自动占据一行,并且可以设置宽度和高度。内联元素不会自动占据一行,而是根据文本内容的长度自动调整宽度。块级元素可以包含其他元素,包括文本、图像、链接等。内联元素通常不包含其他元素。

1. 块级元素具有以下特点:

  • 块级元素会自动占据一行,并且可以设置宽度和高度。
  • 块级元素可以包含其他元素,包括文本、图像、链接等。
  • 块级元素可以设置背景颜色、边框、字体等样式属性。

以下是一些常见的块级元素:

  • <div>:用于定义一个块级容器,可以包含其他元素。
  • <p>:用于定义段落,通常包含文本内容。
  • <h1>到<h6>:用于定义标题,从h1到h6分别表示从大到小的标题级别。
  • <table>:用于定义表格,包含多个行和列。
  • <form>:用于定义表单,包含输入框、按钮等元素。
  • <ul>和<ol>:用于定义无序列表和有序列表,包含多个列表项。
  • <img>:用于定义图像,用于在网页中显示图片。

这些块级元素可以通过设置 CSS 样式属性来实现不同的布局和样式效果,例如设置背景颜色、边框、字体、大小、颜色等。同时,块级元素还可以通过设置 CSS 定位属性来实现定位和浮动效果,例如设置position: relative;、float: left;

2. 内联元素具有以下特点:

  • 内联元素不会自动占据一行,而是根据文本内容的长度自动调整宽度。
  • 内联元素可以设置字体、颜色、大小等样式属性。
  • 内联元素通常不包含其他元素,而是直接嵌入文本内容中。

以下是一些常见的内联元素:

  • <a>:用于定义超链接,通常用于链接到其他网页或文件。
  • <em>:用于定义强调文本,通常呈现为斜体效果。
  • <strong>:用于定义加粗文本,通常呈现为粗体效果。
  • <span>:用于定义自定义样式的文本,通常用于应用特定的 CSS 样式。
  • <img>:用于定义图像,通常用于在网页中显示图片。

这些内联元素可以通过设置 CSS 样式属性来实现不同的样式效果,例如设置字体、颜色、大小等。同时,内联元素还可以通过设置 CSS 定位属性来实现定位和浮动效果,例如设置position: relative;、float: left。

<img> 元素在 HTML 中既可以是块元素,也可以是内联元素,这取决于它的 display 属性的值。

默认情况下,<img> 元素是内联元素,它会根据文本的流动方式进行布局。这意味着如果在一行中放置了多个 <img> 元素,它们会在一行中排列,并且不会自动换行。

但是,如果将 <img> 元素的 display 属性设置为 block,那么它就会成为块元素。块元素会占据一行,并且可以设置宽度和高度。在这种情况下,多个 <img> 元素会自动换行,并且可以通过设置 margin 属性来调整它们之间的间距。

html

<img src="image.jpg" alt="图片描述" style="display: block;">

在上面的示例中,<img> 元素的 display 属性被设置为 block,这会使它成为一个块元素。你可以根据需要调整图片的宽度和高度,以及 margin 属性来控制图片之间的间距。

期,在项目开发中需要对内容的首行添加一个换行,但是设置后,再次进入设置界面发现换行丢失了,不过数据库中保存的值是正确的,首行有换行的。

众所周知,textarea中的换行是\n,html中的换行是<br>标签,但是有一点可能是你没有注意到的,就是textarea中他会忽略紧跟这 <textarea>标记的的换行,如下图所示

textarea多行文本域中的换行的小陷阱

可以看到以上两个写法在显示时是没有任何区别的,而且经过测试,提交到后台的值也是一样的,是没有换行符\r\n的。经过在IE6,7,8,9,10,11, chrome,firefox中测试,效果均一致。

PS: 但是我并没有找到有资料说明浏览器解析textarea是会忽略首行换行,包括W3C中的规范也没有看到有类似说明。