HTML 块和内联元素

每个 HTML 元素都有一个默认显示值，具体取决于类型 元素是。

两个最常见的显示值是块和内联。

块级元素

块级元素总是从新行开始，浏览器 自动在元素前后添加一些空格（边距）。

块级元素始终占用可用的全部宽度 （尽可能向左和向右伸展）。

两个常用的块元素是： 和 .<p>``<div>

该元素定义了 HTML 文档。<p>

该元素定义一个除法 或 HTML 文档中的某个部分。<div>

<p>Hello World</p>  
<div>Hello World</div>

尝试一下 »

以下是 HTML 中的块级元素：

[<address>] [<article>] [<aside>] [<blockquote>] [<canvas>] [<dd>]

[<div>] [<dl>] [<dt>] [<fieldset>] [<figcaption>] [<figure>]

[<footer>] [<form>] [<h1>-<h6>] [<header>] [<hr>] [<li>]

[<main>] [<nav>] [<noscript>] [<ol>] [<p>] [<pre>]

[<section>] [<table>] [<tfoot>] [<ul>] [<video>]

内联元素

内联元素不会从新行开始。

内联元素仅占用所需的宽度。

这是一个。

<span>Hello World</span>

尝试一下 »

以下是 HTML 中的内联元素：

[<a>] [<abbr>] [<acronym>] [<b>] [<bdo>] [<big>]

[<br>] [<button>] [<cite>] [<code>] [<dfn>] [<em>]

[<i>] [<img>] [<input>] [<kbd>] [<label>] [<map>]

[<object>] [<output>] [<q>] [<samp>] [<script>] [<select>]

[<small>] [<span>] [<strong>] [<sub>] [<sup>] [<textarea>]

[<time>] [<tt>] [<var>]

注意： 内联元素不能包含块级 元素！

<div> 元素

该元素是 通常用作其他 HTML 元素的容器。<div>

该元素没有必需的属性，但 和 是通用的。<div>``style``class``id

当与 CSS 一起使用时，该元素可用于设置 内容：<div>

<div style="background-color:black;color:white;padding:20px;">  
  <h2>London</h2>  
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>  

</div>

尝试一下 »

您将在[下一章]中了解有关该元素的更多信息。<div>

<span> 元素

该元素是 用于标记文本的一部分或文档的一部分的内联容器。<span>

该元素没有必需的属性，但 和 是通用的。<span>``style``class``id

当与 CSS 一起使用时，该元素可用于设置文本部分的样式：<span>

<p>My mother has <span style="color:blue;font-weight:bold;">blue/span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>

尝试一下 »

本章小结

• 块级元素总是从新行开始并占用完整的 可用宽度
• 内联元素不会从新行开始，它只占用 根据需要增加宽度
• 该元素是块级的 并且经常用作其他 HTML 元素的容器<div>
• 该元素是内联的 用于标记文本的一部分或文档的一部分的容器<span>

HTML标签

Tag	Description
[<div>]	Defines a section in a document (block-level)
[<span>]	Defines a section in a document (inline)

有关所有可用 HTML 标记的完整列表，请访问我们的 [HTML 标记参考]。