码农教程 - 一技在手,衣食无忧! tools

HTML 块和行内元素

❮ 上一节 下一节 ❯

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

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

块级元素

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

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

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

这个<p>元素定义 HTML 文档中的一个段落。

这个<div>元素定义 HTML 文档中的一个分区或一个部分。

<p> 元素是块级元素。

<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> 元素一个段落。

示例

<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> 元素

这个<div>element 通常用作其他 HTML 元素的容器。

这个<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>
亲自试一试 »

章节总结

  • 块级元素始终从新行开始并占据可用的全部宽度
  • 内联元素不会从新行开始，它只占用必要的宽度
  • 这个<div>element 是块级的，通常用作其他 HTML 元素的容器
  • 这个<span>元素是一个内联容器，用于标记文本的一部分或文档的一部分

HTML练习

通过练习测试一下

练习:

命名一个 HTML 块元素。


开始练习

HTML标签

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

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


❮ 上一节 下一节 ❯