|
主题设置

卡片式面板通常用于非白色背景色的主体内

段落标签

段落通过 <p> 标签定义,其结束标签为 </p>

段落示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>笔记本代码(bjbcode.com)</title>
	</head>
	<body>
		<p>这是一个段落</p>
		<p>这是另一个段落</p>
		<p>这是一个没有结束标签的段落
	</body>
</html>
尝试一下

示例解析

  • 段落属于块级元素,所以每个段落独占一行。
  • 当一行显示不下段落内容时,文字会自动换行。
  • 实例中第三个段落没有结束标签,大多数浏览器都能正确显示,但千万不要依赖这种做法,因为忘记结束标签会产生意想不到的结果和错误。错误示例
在未来的 HTML 版本中,不允许省略结束标签。

段落换行

当页面中的一行显示不下段落里所有内容时,通常段落会自动进行换行。

但如果你想提前换行,则可以使用 <br /> 标签。

<br /> 标签定义一个换行符:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>段落换行</title>
	</head>
	<body>
		<h1>静夜思</h1>
		<p>床前明月光,<br />疑似地上霜。<br />举头望明月,<br />低头思故乡。</p>
	</body>
</html>
尝试一下

忽略空格和换行

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

因为当页面显示时,浏览器会自动移除代码中多余的空格、空行、换行(不是换行符),并将所有连续的空格、空行都显示为一个空格。

下面的例子中,浏览器会忽略多余的空格和换行:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>忽略空格和换行</title>
	</head>
	<body>
		<h1>静夜思</h1>
		<p>床前明月光,
			疑似地上霜。
				举头望明月,
					低头思故乡。</p>
	</body>
</html>
尝试一下

不要忘记结束标签

如果忘记了结束标签,现在大多数的 Web 浏览器也能够正确的显示 HTML,这是因为能容忍小毛病是它们一直以来的设计目标。

但我们依然要保证使用有效、合适的文档,而不是依靠浏览器的内建错误处理机制来正确的显示它们,因为忘记使用结束标签会产生不可预料的结果或错误。

比如下面的例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>忘记结束标签</title>
	</head>
	<body>
		<h1>我的第一个标题
		<p>我的第一个段落。
	</body>
</html>
尝试一下

段落拓展

  • 根据 HTML 规范,<p> 元素不能包含块级元素,比如 <ul> 元素等。