HTML文本格式元素

时间:2020-01-09 10:34:42  来源:igfitidea点击:

HTML包含一些用于格式化HTML页面中的文本格式的元素。例如,存在用于标记标题,段落,粗体,斜体,带下划线的文本等元素。此文本着眼于这些HTML元素。

如今,HTML文本元素的大部分视觉样式都是通过CSS完成的。但是,我们仍然使用HTML元素来标记文本元素的结构。例如,标记段落,标题等。

h1至h6元素

<h1>至<h6>元素用于文档标题。标题可以是页面,段落,章等的标题。<h1>元素定义文档的主要标题。 <h2>元素定义的标题小于<h1>等。<h6>元素可用作最不重要的标题。

标题元素通常以比HTML文档中其余文本更大的字体显示。

标题元素在HTML代码中的外观如下:

<h1> heading 1 </h1>
    <h2> heading 2 </h2>
    <h3> heading 3 </h3>
    <h4> heading 4 </h4>
    <h5> heading 5 </h5>
    <h6> heading 6 </h6>

以下是使用<h1>和<h2>元素的示例文档:

<html>
<body>

<h1>The Big Problem</h1>

<p>
  The big problem consists of two smaller problems.
  Problem 1 and problem 2. Both are covered in more detail
  in the following sections.
</p>

<h2>Problem 1</h2>

<p>
    Problem 1 is about...
</p>

<h2>Problem 2</h2>

<p>
    Problem 2 is about...
</p>

</body>
</html>

即使HTML具有6个标题级别,我们通常也只会使用2个或者3个级别。如果我们使用更多,它很容易使读者感到困惑。

p元素

<p>元素标记HTML文档中的文本段落。一个段落包含多个彼此相关的句子。紧随其后的两个段落将显示,并在其之间留有空格以标记不同的段落。这是一个例子:

<p> paragraph1 </p>
<p> paragraph2 </p>

br元素

<br>元素可用于强制自动换行,例如在两个段落之间,或者在一个段落中的一行之后。 <br>元素不需要结束标签,因为它是一个空元素。这是一个例子:

<p>
    line 1
    <br>
    line2
    </p>

hr元素

<hr>元素创建一个水平标尺,可用于分隔网页的不同垂直部分。紧随其后的两个段落之间带有<hr>元素,它们之间将显示一条水平线。这是一个例子:

<p> paragraph1 </p>
<hr>
<p> paragraph2 </p>

与<br>元素一样,<hr>元素是一个空元素,不需要结束标记。

b元素

<b>元素将文本标记为粗体。这是一个例子:

Text in <b> bold </b>

i元素

<i>元素将文本标记为斜体。这是一个HTML示例:

This text is in <i>italic</i>.

strong元素

<strong>元素用于标记要显示的文本。实际上,效果类似于<b>元素,尽管浏览器可以区分这两个元素的效果。这是一个例子:

This text is <strong> strong</strong>.

big元素

<big>元素用于将要显示的文本标记为大于默认文本大小。这是一个HTML示例:

This text is <big> big text</big>.

em元素

<em>元素将要显示的文本标记为强调。在实践中,效果类似于<i>元素的效果,尽管浏览器可能会区分这两个元素的效果。这是一个例子:

This text is <em>emphasized</em>.

代码元素

<code>元素用于标记要使用单色字体(例如Courier)显示的文本块。 <code>元素通常用于显示编程代码。这是一个例子:

<code> computer code </code>

子元素

<sub>元素将文本标记为以较小的字符(下标)显示。这是一个例子:

<p> This is <sub> subscript </sub>. </p>

sup元素

<sup>元素将文本标记为以较小的字符显示,但从文本基线抬起。这是一个例子:

<p> This is <sup>superscript </sup> </p>

del元素

<del>元素将文本标记为已删除,这意味着将其中显示一行。这是一个例子:

This is <del>deleted</del>

pre元素

" pre"元素像" code"元素一样,用单色空格字体格式化文本,但是" pre"元素显示我们其中编写的换行符。通常,换行符会被忽略,或者显示为空格。这是一个HTML示例:

<pre>
    This is text inside a pre
    and line breaks are preserved
    just like in a normal text document.
</pre>

samp元素

" samp"元素用于在HTML文档中显示计算机的输出。 " samp"元素还使用单声道空格字体设置文本格式。换行符的处理方式与HTML中的其他方式一样。因此," samp"元素实际上类似于" code"元素。

这是一个HTML示例:

<samp>
    This text is inside a
    samp element
    line 2
    line 3
</samp>