Html 简明教程
HTML - Paragraphs
HTML 段落是块级元素，用于构建和格式化网页上的文本内容。段落基本上是单词和标点符号的集合。它允许我们将文本信息以连贯且可读的方式组织和呈现。 * HTML p tag* 用于创建段落元素。
Reason to use Paragraphs
段落通常在文本上方和下方创建空格，将其与周围内容分隔开。它们可以用 CSS 设置样式以控制字体大小、颜色、对齐方式和间距等方面。在 Web 开发中，段落对于有效地传达信息、实现清晰的通信并增强网站上的整体用户体验起着至关重要的作用。
尝试单击图标运行按钮，以运行以下 HTML 代码并查看输出。
Examples of HTML Paragraph
在这些示例中，我们将看到段落的使用。在 HTML 中，我们可以将段落与其他各种 HTML 标记和元素结合使用，以增强段落的外观。这些组合允许您控制文本格式、间距等。
Paragrapgh using p tag
-
HTML <p> tag* 用于创建段落，无论如何将文本保存在 p 标记中，它都将始终使文本以简单形式显示。
<!DOCTYPE html>
<html>
<head>
<title>HTML Paragraphs</title>
</head>
<body>
<!-- HTML p Tag used -->
<p>This is real time online HTML Editor</p>
</body>
</html>Line Breaks with Paragrapgh
-
HTML <br> tag* 用于在段落中插入换行符以控制文本布局。
<!DOCTYPE html>
<html>
<head>
<title>Enhancing Paragraphs </title>
</head>
<body>
<p>This is a paragraph with a <br> line break. </p>
</body>
</html>Headings with Paragraphs
-
HTML <h1> to <h6> tags* 提供层次结构，可与段落一起使用。
<!DOCTYPE html>
<html>
<head>
<title>Enhancing Paragraphs </title>
</head>
<body>
<h1>Main Heading</h1>
<p> This is a paragraph beneath the main heading. </p>
</body>
</html>Lists with Paragraphs
-
HTML <li> tag* 可以用于在描述之后需要元素列表的地方。可以在段落中合并列表以组织内容。
<!DOCTYPE html>
<html>
<head>
<title>Enhancing Paragraphs </title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<p> This is a paragraph following an unordered list. </p>
</body>
</html>Emphasis within Paragraphs
<!DOCTYPE html>
<html>
<head>
<title>Enhancing Paragraphs </title>
</head>
<body>
<p> This is a <em> paragraph </em> with <strong> emphasized </strong> text. </p>
</body>
</html>Links within Paragraphs
-
HTML <a> tag* 可以插入段落中的链接。
<html>
<head>
<title>Enhancing Paragraphs </title>
</head>
<body>
<p>Visit our website <a href="https://www.tutorialspoint.com">here </a>. </p>
</body>
</html>Inline Styles within Paragraphs
-
HTML <span> tag* 可用于设置任何特定文本或单词的样式。
<html>
<head>
<title>Enhancing Paragraphs </title>
</head>
<body>
<p>This is a <span style="color: blue;">blue</span> text within a paragraph. </p>
</body>
</html>Images within Paragraphs
-
HTML <img> tag* 用于在段落中嵌入图像，就像我们在每个示例代码之前进行操作一样，要求你运行该代码。
<html>
<head>
<title>Enhancing Paragraphs </title>
</head>
<body>
<p> Here's an image: <img src="\html\images\test.png" alt="Example Image"> </p>
</body>
</html>Superscript and Subscript within Paragraphs
<html>
<head>
<title>Enhancing Paragraphs </title>
</head>
<body>
<p> H<sub>2</sub>O is the chemical formula for water. 2<sup>3</sup> equals 8.</p>
</body>
</html>Abbreviations within Paragraphs
-
HTML <abbr>* 标签有助于定义缩写或首字母缩略词。
<html>
<head>
<title>Enhancing Paragraphs </title>
</head>
<body>
<p> <abbr title="Hypertext Markup Language">HTML</abbr> is used for web development.</p>
</body>
</html>Citations within Paragraphs
-
HTML <cite> tag* 指定段落中的引用和参考文献。
<html>
<head>
<title>Enhancing Paragraphs </title>
</head>
<body>
<p> The book <cite>War and Peace </cite> is a classic novel. </p>
</body>
</html>Style paragraph with CSS
你可以使用 CSS 来更改 <p> 标签中文本的外观。用于设置段落样式的常用 CSS 属性包括“font-size”、“color”和行高。例如，放大文本并更改其颜色。
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<p>This is a styled paragraph. </p>
</body>
</html>