显示模式转换总结

目录

一、块元素

二、行内元素

三、行内块元素

---

一、块元素

特征：1、独占一行 2、可设置宽高 

在HTML中，块级元素会新起一行，并尽可能撑满其父元素的宽度。以下是一些常见的块级元素

<div>：最常用的块级元素，用于对页面布局进行组织和结构化。

<p>：段落元素，用于包含一段文本内容。

<h1> 到 <h6>：标题元素，用于表示不同级别的标题，<h1> 级别最高，<h6> 级别最低。

<ol> 和 <ul>：有序列表和无序列表元素，分别用于创建带编号和不带编号的列表。

<li>：列表项元素，通常包含在 <ol> 或 <ul> 中。

<dl>、<dt> 和 <dd>：定义列表元素，用于创建术语和定义列表。

<form>：表单元素，用于创建HTML表单，收集用户输入。

<table>、<thead>、<tbody>、<tfoot>、<tr>、<th> 和 <td>：表格相关元素，用于创建和展示表格数据。

<fieldset>：将表单中的一部分元素分组。

<blockquote>：块引用元素，用于表示从其他来源引用的内容。

<hr>：水平线元素，用于在页面上创建一条水平线。

<header>、<footer>、<nav>、<section> 和 <article>：HTML5引入的语义化标签，用于定义页面的不同部分，提高页面的可访问性和SEO效果。

<aside>：表示页面内容之外的内容，通常用于侧边栏或广告等。

<figure> 和 <figcaption>：用于表示图像、图表、照片等媒体内容及其标题或说明。

二、行内元素

 特征：1、共处一行 2、不可以设置过宽高 

在HTML中，行内元素不会打断文本的行进，它们只占据内容本身的宽度，并且不会在其前后生成“换行”。以下是一些常见的行内元素：

<span>：用于对文本中的一部分进行组合或应用样式。

<a>：超链接元素，用于创建到其他页面或资源的链接。

<img>：图像元素，用于在文档中嵌入图像。

<br>：换行元素，虽然它本身是一个空元素，但它在视觉上会产生换行效果。

<input>：输入元素，用于创建表单输入字段，如文本框、复选框、单选按钮等。

<textarea>：多行文本输入元素，用于创建多行文本输入框。

<label>：标签元素，用于定义表单控件的描述或说明。

<select> 和 <option>：下拉列表元素，用于创建下拉选择框和其中的选项。

<button>：按钮元素，用于创建可点击的按钮。

<strong> 和 <b>：强调文本元素，通常显示为粗体。

<em> 和 <i>：强调文本元素，通常显示为斜体。

<u>：下划线文本元素。

<s> 和 <del>：表示文本不再准确或不再相关，通常显示为带有删除线的文本。

<ins>：表示文本是后插入的，通常显示为带有下划线的文本。

<sub> 和 <sup>：下标和上标文本元素。

<q>：短引用元素，用于表示内联引用。

<cite>：引用标题元素，用于表示引用作品的标题。

<code>：代码元素，用于表示程序代码。

<kbd>：键盘输入元素，用于表示用户键盘输入的内容。

<samp>：计算机代码样本元素，用于表示计算机程序的输出。

<var>：变量元素，用于表示变量或公式中的部分。

<abbr>：缩写元素，用于表示缩写词或首字母缩写。

<dfn>：定义元素，用于表示术语的定义。

<time>：日期和时间元素，用于表示日期或时间。

<ruby>、<rt>、<rp>：用于表示东亚语言的注音或发音注释。

需要注意的是，虽然这些元素在HTML中被定义为行内元素，但它们的行为可能会受到CSS样式的影响而发生改变。

此外，随着HTML标准的不断发展和演变，未来可能会有更多的行内元素被引入。因此，在实际开发中，建议查阅

最新的HTML规范以获取最准确的信息。

三、行内块元素

特征：1、共处一行 2、可设置宽高

在HTML中，行内块元素（Inline-block elements）是一种特殊的元素类型，它们既具有行内元素的特性（即不会打断文本的行进），

又具有块级元素的特性（即可以设置宽度、高度、内外边距等）。然而，HTML规范本身并没有明确列出“所有的行内块元素”，

因为任何元素都可以通过CSS的display属性设置为inline-block来变成行内块元素。

不过，有一些HTML元素在默认情况下表现为行内块元素，或者在某些上下文中以行内块的方式呈现。这些元素通常具有一些特殊的用途或行为。

以下是一些常见的默认行为或常见用法上表现为行内块元素的HTML元素：

<img>：图像元素，在大多数情况下表现为行内块元素，可以设置宽度和高度，且不会打断文本行。

<input>：输入元素（除了type="checkbox"和type="radio"等特殊情况），用于创建表单输入字段。

<button>：按钮元素，用于创建可点击的按钮。

<select>：下拉列表元素，虽然其整体表现为块级元素，但其内部的<option>元素在视觉上表现为行内块元素。

<textarea>：多行文本输入元素，虽然其整体表现为块级元素，但在视觉上它的内容表现为行内块。

<label>：标签元素，虽然它本身是一个行内元素，但经常与块级或行内块元素一起使用来布局表单。

请注意，这些元素在某些上下文中可能表现为其他类型的显示方式（例如，通过CSS改变了它们的display属性）。

此外，随着HTML和CSS的不断发展，可能会有更多的元素或组件以行内块的方式呈现。

如果你想要将任何元素设置为行内块元素，你可以使用CSS的display属性，如下所示：

将上述CSS规则应用到任何HTML元素上，都会使该元素以行内块的方式呈现。