轻松上手HTML：标题和段落元素
- 前端
- 2024-05-31
- 357热度
- 0评论
标题和段落
标题和段落元素属于“块元素”，“块元素”在网页中的效果是该元素的内容对于其前后元素的内容都另起一行。因此，每个标题和段落元素在网页中都单独占一行。例如下面的HTML文档。
<html>
<head>
<title>送杜少府之任蜀州</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h3>送杜少府之任蜀州</h3>
<hr>
<p>城阙辅三秦，风烟望五津。</p>
<p>与君离别意，同是宦游人。</p>
<p>海内存知己，天涯若比邻。</p>
<p>无为在歧路，儿女共沾巾。</p>
</body>
</html>
下图是浏览器的显示效果，从浏览器显示效果可以看出，标题元素h3的内容显示为黑体并加粗，起到强调文本的作用，并且单独占一行；段落元素p的内容没有加粗，字体也不是黑体，内容也单独占一行。在网页文件中，标题和段落是常用元素，网页中的标题和段落元素与文章中的标题和段落意义是相同的，标题对段落内容的概括和总结，段落是对标题的展开叙述。
在上面的网页文档中，诗的每一句都放置在段落元素（p）的起始标签和结束标签内，可以让诗的每一句都占一行。如果将诗的内容都放置在一个段落元素（p）的起始标签和结束标签内，诗的内容将显示到一行中。
<body>
<h3>送杜少府之任蜀州</h3>
<hr>
<p>
城阙辅三秦，风烟望五津。
与君离别意，同是宦游人。
海内存知己，天涯若比邻。
无为在歧路，儿女共沾巾。
</p>
</body>
从下图显示效果可以看出，诗的内容显示到一行中，当浏览器窗口不足以显示所有内容时，浏览器会将内容自动换行显示。虽然在网页文件中已经对诗句进行了换行和空格缩进处理，但在浏览器中都是无效的。
HTML的pre元素可以定义预格式化的文本，在pre元素的起始标签和结束标签内的文本通常会保留空格和换行符，并且文本中的英文字符都统一用等宽字体，以便文本对齐。
<body>
<h3>送杜少府之任蜀州</h3>
<hr>
<pre>
城阙辅三秦，风烟望五津。
与君离别意，同是宦游人。
海内存知己，天涯若比邻。
无为在歧路，儿女共沾巾。
</pre>
</body>
从下图显示效果可以看出，在pre元素起始标签和结束标签的内容，保留了文本预定义的格式，在文本中的空格和换行符都保留了下来。
值的注意的是，pre元素一般只用于网页中显示诗句、程序代码等需要使用空格和换行符来排版的文字内容，而不应该将它用于一般内容的排版。根据HTML设计规范，网页的排版应尽可能使用CSS（Cascading Style Sheets，控制网页显示格式的语言）。后面的课程会专门讲述CSS语言。
下面再介绍一下标题和段落元素的语法及使用方法。
标题类元素
标题类元素主要有h1、h2、h3、h4、h5和h6六种元素，用于满足显示不同标题的需要。“h”是header（标题）的简写，数字1~6表示标题的级 别，h1的标题最大，h6的标题最小。例如下面的网页文档定义了这六类标题。
<html>
<head>
<title>HTML标题类元素</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
从下图显示效果可以看出，一级标题h1字体尺寸最大，六级标题h6字体尺寸最小。
段落元素p和pre
段落p元素是英文单词paragraph（段落）的简写，p元素内一般包含一个文本段落，浏览器会自动在p元素前后进行换行。p元素起始标签和结束标签内的文本内容空格和换行符都将被浏览器忽略。
pre元素是performatted的简写，pre元素与p元素基本相同，唯一的区别是pre元素内文本内容将保留空格和换行符，并且文本内容中的英文字符统一使用等宽字体，以便对齐。
