| 块级元素 | 内联元素 |
| 独占一行 | 只占自身大小 |
| 可设置width、height属性 | width、height属性无效 |
| 可包含行内元素、其他块级元素 | 包含内联元素不包含块级元素 |
常见块级元素：
div、h1~h6、form、hr、p、table、ul、ol等
内联元素（行内元素）：
a、b、em、i、span、strong等
行内块级元素（特点：不换行、能够识别宽高）
button、img、input等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--块级元素-->
<h1>标题</h1>
<p>段落</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<!--内联元素-->
<a href="#">超链接</a>
<span>内容</span>
<em>注重语气</em>
<!--行内块级元素-->
<img src="../超文本链接/p2831307612.jpg" alt="" width="300px">
</body>
</html>
div：容器元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>头部标签</header>
<nav>导航标签</nav>
<section>定义文档中的节。如章节、页眉、页脚</section>
<aside>侧边栏</aside>
<footer>脚部</footer>
<article>一个独立完整的相关内容块</article>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
