Inline elements - [ HTML 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

예배 규칙서 찾다

Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

문자

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

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

行内元素与块级元素对比

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

.highlight { background-color:#ee3;}

行内

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

The following span is an inline element;its background has been colored to display both the beginning and end ofthe inline element's influence.

在此示例中,

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

块级别

现在,让我们将该更改为块级元素,如

The following div is an

block-level element;

its background has been colored to display both the beginning and end ofthe block-level element's influence.

使用与之前相同的CSS呈现，我们得到：

看到区别了吗？

元素完全更改文本的布局, 将其拆分为三段: 在

之前的文本, 然后是

的文本, 最后是后面的文本

。

更改元素级别

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

概念差异

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

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

行内元素列表

以下元素默认为内联：