行内元素和块级元素有哪些

1. 什么是行内元素和块级元素？

在了解行内元素和块级元素之前，先要了解什么是HTML标签。HTML标签是用于告诉浏览器如何显示页面的标记语言，在HTML中，标签分为两类：块级元素和行内元素。

块级元素是指那些在页面中以块的形式显示，并且自动换行的元素。块级元素一般用于页面布局，可以容纳其他元素。

行内元素是指那些不会导致文本换行，并且始终在一行上显示的元素。行内元素一般用于向文本中添加修饰性的元素。

以下是常见的块级元素和行内元素:

  <div></div>  // 块级元素
  <h1></h1>   // 块级元素
  <p></p>    // 块级元素
  <ul></ul>   // 块级元素
  
  <span></span>  // 行内元素
  <a></a>      // 行内元素
  <img>             // 行内元素
  <input>           // 行内元素

2. 块级元素和行内元素的区别

2.1. 显示方式的区别

块级元素和行内元素的最大区别在于它们的显示方式。块级元素以块的形式显示，会自动占据一行，并且会在该元素下创建一个新的块。而行内元素不会在本身之前或之后创建新的块，会始终在同一行内显示，不会导致文本换行。

2.2. 宽度和高度的区别

块级元素的默认宽度是其父元素的100%，高度会根据其子元素的高度自动扩展。而对于行内元素来说，宽度和高度是由其内容决定的，不能直接设置。

2.3. 种类的区别

3. 常见的块级元素和行内元素

3.1. 块级元素

3.1.1. <div>

<div>是HTML中最常用的块级元素，它是网页中最重要的一个容器。<div>可以容纳其他块级元素和行内元素，并且可以用CSS来设置其宽度、高度、边框、背景等属性。

  <div>
    <h1>这是一个标题</h1>
    <p>这是一些文本</p>
  </div>

3.1.2. <ul> 、<li>

<ul> 和 <li> 通常与 <ol> 一起被用于创建列表。<ul> 是无序列表，<ol> 是有序列表。

  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>

3.1.3. <p>

<p>是用来显示文本段落的元素。它是用来显示一段话的完整内容，但在该元素后面默认不会产生换行符，所以需要外部­换行。

  <p>这是一段文本。</p>
  <p>这是另一段文本。</p>

3.2. 行内元素

3.2.1. <a>

<a> 是用于添加链接到文本或图像的一个元素，它可以用来链接到其他页面或同一页面的锚点。

  <p>请访问 <a href="https://www.example.com">https://www.example.com</a></p>

3.2.2. <span>

<span> 通常用于对文本的一部分进行样式设置。一般结合CSS一起使用。

  <p>这是一段 <span style="color:red">红色字体</span></p>

3.2.3. <img>

<img>是用于在页面中插入图片的元素。

  <img src="image.jpg" alt="图片">

4. 总结

在HTML中，块级元素的作用是用于页面布局，行内元素通常用于修饰文本。了解每个元素的具体作用和使用场景，有助于我们更好地使用HTML来创建网页。