【前端面经】HTML 的块级元素、行内元素有哪些？区别是什么？

块级元素、行内元素及其区别

块级元素（Block-level Elements）

• <div>： 定义文档中的分区或节。
• <p>： 表示一段文本。
• <h1> - <h6>： 定义标题1到标题6。
• <ul>，<ol>，<li>： 定义无序列表、有序列表和列表项。
• <form>： 定义表单。
• <header>，<nav>，<main>，<footer>，<article>，<aside>，<section>： 定义网页结构的语义化标签。
• <table, <tr>, <td>： 定义表格。
• …

行内元素（Inline Element）

• <span>： 用于对文档中的行内元素进行组合。
• <a>： 定义超链接。
• <img>： 定义图像。
• <strong>，<b>： 定义粗体文本。
• <em>，<i>： 定义斜体文本。
• <input>，<button>，<select>，<textarea>： 定义表单元素。

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

特性	块级元素	行内元素
显示方式	独占一行	与其他元素在同一行
宽度	可以设置宽度，默认父元素宽度	默认由内容决定，设置宽度无效
高度	可以设置高度	设置高度无效
margin	上下左右均有效	左右有效，上下无效
padding	上下左右均有效	左右有效，上下无效
其他		可以通过 line-height 设置行高