HTML 块级元素、行内元素和行内块级元素

一、块级元素、行内元素和行内块级元素

在 HTML 5 标准前，HTML 中的元素可以分为块级元素、行内元素（又称行级元素）和行内块级元素三种类型，它们的主要区别在于它们在文档流中所占据的空间和如何与其他元素相互作用。

1、块级元素

块级元素（block element）特点：

在默认情况下，会新起一行。
块级元素可以包含行内元素和其他块级元素。
可以设置宽度、高度、内边距、边框和外边距等盒模型属性。

常见的 HTML 块级元素包括：

<p>：用于表示段落。
<h1> - <h6>：用于表示标题，h1 是最高级别的标题。
<ul>、<ol>、<li>：用于创建无序列表和有序列表。
<div>：用于分组和布局页面元素。
<table>、<tr>、<td>等：用于创建表格。
<hr>：用于创建水平线。
<pre>：用于展示预格式化的文本，其中的空格、回车等会保留在输出结果中。

由于块级元素会占据一整行，因此通常用于分隔和布局页面的不同区域，可以设置宽度和高度等盒模型属性，从而实现复杂的布局效果。

2、行内元素

行内元素（inline element）特点：

默认情况下，不会以新行开始，其内容会在同一行上显示，直到到达该行的末尾才会换行显示。
一般情况下，行内元素只能包含数据和其他行内元素。
默认情况下，无法设置宽度和高度，除非将 display 设为除 inline 之外的某个值。

常见的 HTML 行内元素包括：

<a>：用于创建超链接。
<span>：用于包含文本和其他行内元素，可以用于实现文本的样式和布局效果。
<b>、<i>、<u>、<strong>、<em>、<small>、<sup>、<sub>等：用于对文本进行修饰和强调。
<br>：用于强制换行。
<code>、<var>、<kbd>等：用于表示计算机代码和用户输入。
<q>、<cite>、<blockquote>等：用于表示引用和短文本块。

由于行内元素在默认情况下不会开始新行，因此通常用于文本内容和内联元素的排列和布局。但是行内元素无法设置宽度和高度等盒模型属性，其宽度和高度都是由它们所包含的内容决定的，因此不能实现像块级元素那样的复杂布局效果。

3、行内块级元素

行内块级元素（inline-block）特点：

行内块级元素与行内元素类似（即在默认情况下，不会以新行开始），
可以包含其他行内块级元素或行内元素。
宽度和高度是可以设置的，不需要将 display 设为除 inline 之外的某个值。

常见的 HTML 行内块级元素包括：

<img>：用于插入图片，可以通过设置其宽度和高度来控制图片的大小，但是在默认情况下，它是一个行内块级元素。
<button>：用于创建按钮。
<input>：用于创建输入框和表单元素。
<select>：用于创建下拉菜单。
<textarea>：用于创建多行文本输入框。
<label>：用于创建表单标签。

通过将行内块级元素设置为 display: inline-block;，可以将其布局在一行中，并允许设置其宽度、高度、内边距和外边距等样式属性，从而实现更加灵活的布局效果。

二、按用途分类

HTML中有多种不同类型的元素，这些元素可以用来表示文本、图像、视频、链接、表格、表单、页面结构等不同的内容和结构。以下是HTML中常见的元素类型：

文本元素： <h1> ~ <h6>、<p>，<span>用于文本的展示。
超链接元素： <a>，用于创建链接到其他页面或文档。
多媒体元素： <img>、<video>、<audio>、<picture>、<source>，用于插入图像、视频和音频。
列表元素： <ul>、<ol>、<li>，用于表示无序列表、有序列表和列表项。
表格元素： <table>、<tr>、<th>、<td>，用于表示表格和表格的行和单元格。
表单元素： <form>、<input>、<button>、<textarea>、<select>等，用于创建表单，包括文本框、单选按钮、复选框、下拉框等。
框架元素： <iframe>，用于嵌入其他网页或文档。
头部元素： <head>、<meta>、<title>等，用于定义文档的头部信息，如标题、关键字、描述、作者、字符编码等。
分区元素： <div>、<section>、<article>、<nav>、<aside>等，用于组织和划分文档内容的区块。
样式类元素： <link>、<style>，用于连接外部样式表或内部样式表。
脚本元素： <script>，用于嵌入JavaScript代码。
区块级别的元素： <header>、<main>、<footer>等，用于标识文档中的不同区域。

这些元素不仅构成了 HTML 文档的基本结构，而且可以结合 CSS 和 JavaScript 等技术，实现更加丰富和复杂的页面效果和交互行为。

HTML 块级元素、行内元素和行内块级元素相关推荐

block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
html 指定对象为块元素,html内联（行内）元素、块级（块状）元素和行内块元素分类...
HTML可以将元素分类方式分为内联(行内)元素.块级(块状)元素和行内块元素三种. 注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如自定义的元素等),自定义元素浏览器默认解析为内 ...
在html中列表是块元素还是,HTML基础知识4-列表及表单的写法、块级元素和内联（行内）元素的区别...
一.有序列表.无序列表.自定义列表如何使用?写个简单的例子.三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如何嵌套? 1.简单例子如下: Document div.div1 { backgr ...
HTML行内元素/行级元素/内联元素/行标签/内联标签/行内标签/行元素
文章目录行内元素的特点行内元素清单可变元素列表 inline element. 也叫行级元素.内联元素. 行内元素默认设置宽度是不起作用,需设置 display:inline-block 或者 ...
为什么span，label，是行级元素，div，p等等是块级元素
这期的问题非常有意思,我们一直说span,label,a都是行元素,div,p还有h1~h5是块级元素等等,但是你有想过为什么吗?别告诉我这是大家约定俗成的东西,实际上,他还真的不是. 先知道啥是行级 ...
html常见的块元素与内联（行内）元素用法说明
html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身 ...
web前端入门到实战：html常见的块元素与内联（行内）元素用法说明
html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身 ...
html标签的显示模式（块级标签，行内标签，行内块标签）（转）
html标签的显示模式(块级标签,行内标签,行内块标签) 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用, ...
html5行级标签,8、html5哪些标签时块级、行内、行内块？2021-01-30
一.块级标签 div.p.h1-h6.form.ul.ol.dl.dt.dd.li.table.tr.td.th.hr.blockquote.address.table.menu.pre HTML5: ...
为什么有些内联（行内）元素可以设置宽高？
为什么有些内联(行内)元素如img.input可以设置宽高? 在说明之前我们先来了解一些定义. 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示. 宽 ...

HTML 块级元素、行内元素和行内块级元素

HTML 块级元素、行内元素和行内块级元素相关推荐

最新文章

热门文章