html 内联元素和html 块级元素概述及区别

HTML元素分为两种类型：内联元素和块级元素。

HTML内联元素

HTML内联元素（Inline Element）是指元素在页面中以行内的方式显示，并且只占用必要的宽度。
常见的内联元素有：<a>、<span>、<img>、<i>等。

区别：

1. 内联元素不会造成文本换行，而是在一行内按照从左到右的顺序依次展示。而块级元素通常会默认占据一整行。
2. 内联元素的高度、宽度都是由其内容自动撑开的，无法直接设置。
3. 内联元素与其他内联元素会自动排列在同一行，而块级元素会自动排列在不同行。

示例1：

<p>今天天气真不错，<strong>太阳</strong>晒的我好舒服！</p>

以上代码中的<p>元素是一个块级元素，而<strong>是内联元素。在浏览器中展示出来，<p>元素会占据一整行，而<strong>元素则直接跟在“今天天气真不错，”后面。

示例2：

<a href="https://www.google.com">Google</a>

以上代码中的<a>元素是内联元素，它将该文本包装在锚标记中，使其可以作为超链接使用。在浏览器中展示出来，<a>元素会以行内方式展示，只占用所需宽度。

HTML块级元素

HTML块级元素（Block Element）是指元素在页面中以块的方式显示，并且会独占一行。
常见的块级元素有：<div>、<h1>~<h6>、<p>、<ul>、<li>等。

区别：

1. 块级元素会独占一行，会主动换行，而内联元素则不会。
2. 块级元素宽度为100%，也就是会占满整个可视范围；而内联元素的宽度则由内容决定，无法设置。
3. 块级元素可以容纳内联元素和其他块级元素，而内联元素只能容纳其他内联元素。

示例1：

<div>
  <h2>欢迎来到我的博客！</h2>
  <p>这是我的第一篇博客，很开心能够和大家分享。</p>
</div>

以上代码中的<div>是块级元素，它包含了一个<h2>标题和一个<p>段落，所有这两个元素会自动排列在不同的行上。

示例2：

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

以上代码中的<ul>是一个块级元素，它包含了三个<li>元素，每个<li>元素包含一个标记。在浏览器中，<ul>元素会按垂直方向自动排列每个<li>元素，形成一个无序列表。