非常教程

HTML参考手册

其他 | Miscellaneous

Inline elements

在 HTML 中, 行内元素是那些只占用定义元素的标记所限定的空间, 而不是破坏内容的流。在本文中, 我们将检查 HTML 内联元素以及它们与块级元素的区别。

行内元素不会在新行上开始, 只需要尽可能多的宽度。

行内元素与块级元素对比

这是最容易用一个简单的例子来证明。首先,我们将使用一些简单的CSS:

.highlight {
  background-color:#ee3;
}

行内

首先,让我们看看下面的示例,它演示了一个内联元素:

<p>The following span is an <span class="highlight">inline element</span>;
its background has been colored to display both the beginning and end of
the inline element's influence.</p>

在此示例中, <p> (段落) 块级元素包含一些文本。在该文本中, 是一个 <span> 元素, 它是一个内联元素。由于<span>元素是内联的,因此该段落正确呈现为单个完整的文本流,如下所述:

块级别

现在,让我们将该<span>更改为块级元素,如<div>:

<p>The following div is an <div class="highlight">block-level element;</div>
its background has been colored to display both the beginning and end of
the block-level element's influence.</p>

使用与之前相同的CSS呈现,我们得到:

看到区别了吗?<div> 元素完全更改文本的布局, 将其拆分为三段: 在 <div> 之前的文本, 然后是 <div> 的文本, 最后是后面的文本 <div>。

更改元素级别

您可以使用 "CSS 显示" 属性更改元素的级别。内嵌块, 通过将显示的值从 "内联" 更改为 "block", 可以告诉浏览器在块框中而不是在内联框中呈现内联元素。它不一定会使元素呈现出与原来的内嵌块完全一样的效果, 因此请务必查看结果。

概念差异

简而言之,下面是内联和块级元素之间的基本概念差异:

内容模型。通常,内联元素可能只包含数据和其他内联元素。您不能将块元素放在内联元素中.FormattingBy默认情况下,内联元素不会强制在文档流中开始一个新行。另一方面,块元素通常会导致换行(虽然像往常一样,这可以使用CSS进行更改)。

行内元素列表

以下元素默认为内联:

<a> <b> <big> <i> <small> <tt> <abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <strong> <samp> <time> <var> <bdo> <br> <img> <map> <object> <q> <script> <span> <sub> <sup> <button> <input> <label> <select> <textarea>

HTML

超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。