Html 简明教程
HTML - Paragraphs
HTML 段落是块级元素，用于构建和格式化网页上的文本内容。段落基本上是单词和标点符号的集合。它允许我们将文本信息以连贯且可读的方式组织和呈现。 * HTML p tag* 用于创建段落元素。
HTML Paragraphs are a block-level elements, used to structure and format text content on a webpage. A paragraph is basically a collection of words and punctuations together. It allows us to organize and present textual information in a coherent and readable manner. HTML p tag is used to creat a paragraph element.
Reason to use Paragraphs
段落通常在文本上方和下方创建空格，将其与周围内容分隔开。它们可以用 CSS 设置样式以控制字体大小、颜色、对齐方式和间距等方面。在 Web 开发中，段落对于有效地传达信息、实现清晰的通信并增强网站上的整体用户体验起着至关重要的作用。
Paragraphs typically create space above and below the text, separating it from surrounding content. They can be styled using CSS to control aspects such as font size, colour, alignment, and spacing. In web development, paragraphs play a crucial role in conveying information effectively, enabling clear communication, and enhancing the overall user experience on a website.
尝试单击图标运行按钮，以运行以下 HTML 代码并查看输出。
Try to click the icon run button to run the following HTML code to see the output.
Examples of HTML Paragraph
在这些示例中，我们将看到段落的使用。在 HTML 中，我们可以将段落与其他各种 HTML 标记和元素结合使用，以增强段落的外观。这些组合允许您控制文本格式、间距等。
In these examples we will see the usage of paragraph. In HTML, we can enhance the appearance of paragraphs by combining them with various other HTML tags and elements. These combinations allow you to control text formatting, spacing, and more.
Paragrapgh using p tag
-
HTML <p> tag* 用于创建段落，无论如何将文本保存在 p 标记中，它都将始终使文本以简单形式显示。
HTML <p> tag is used to create a paragraph, it does not matter how you kept the text inside the p tag it will always make the text in a simple form.
<!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* 用于在段落中插入换行符以控制文本布局。
HTML <br> tag is used to insert line breaks within a paragraph to control the text layout.
<!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* 提供层次结构，可与段落一起使用。
HTML <h1> to <h6> tags provide a hierarchical structure and can be used alongside paragraphs.
<!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* 可以用于在描述之后需要元素列表的地方。可以在段落中合并列表以组织内容。
HTML <li> tag can be used where a list of element required after a desccription. Lists can be incorporated within paragraphs for content organization.
<!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 <a> tag can insert links within paragraphs.
<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 <span> tag can be used to style any particular text or word.
<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 <img> tag is used to embed images within paragraphs, like we did before each examples code where we wants you to run the code.
<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 <abbr> tag helps define abbreviations or acronyms.
<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 <cite> tag specifies citations and references within paragraphs.
<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”和行高。例如，放大文本并更改其颜色。
You can use CSS to change the appearance of text within <p> tags. Common CSS properties for styling paragraphs include 'font-size', 'color', and line height. For example, to make text larger and change its color.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<p>This is a styled paragraph. </p>
</body>
</html>Applying Classes
你还可以将类应用于段落，以获得独特的样式。在你的 CSS 中定义一个类，并在 HTML 中使用它。
You can also apply classes to paragraphs for unique styles. Define a class in your CSS and use it in your HTML.
<!DOCTYPE html>
<html>
<head>
<style>
.special {
font-size: 24px;
color: #007bff;
}
</style>
</head>
<body>
<p class="special">This is a special paragraph.</p>
</body>
</html>Inline Styles
或者，你可以在 HTML 中直接使用内联样式来设置各个段落样式。
Alternatively, you can use inline styles directly in the HTML to style individual paragraphs.
<!DOCTYPE html>
<html>
<body>
<p style="font-size: 20px; color: green;">This paragraph has inline styles.</p>
</body>
</html>CSS 提供对段落样式的广泛控制，帮助你在网页上创建视觉吸引人和格式良好的文本。
CSS provides extensive control over paragraph styles, allowing you to create visually appealing and well-formatted text on your web page.