尚硅谷web前端工程师1000集学习笔记16
程序员文章站
2024-03-23 13:59:52
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：[email protected]
时间：2020-02-11
描述：块元素和内联元素
div就是一个块元素，所谓块元素就是会独占一行的元素，
无论它的内容有多少，它都会独占一行。
p h1 h2 h3...都是块元素
div这个标签没有任何语义，就是一个纯粹的块元素，
并且不会为它里边的元素设置任何的默认样式，
div元素主要用来对页面进行布局的
span是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：
a img iframe span
span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式。
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
<div>
<span> </span>
</div>
a元素可以包含任意元素,但是除了它本身
p元素不可以包含任何其他的块元素
-->
<p>
<span>p元素中放了一个内联元素span，是可以的</span>
</p>
<a href="#">
<div style="background-color:darkcyan;width: 200px;">
我是一个div
</div>
</a>
<div style="background-color: red;width: 200px;">
我是一个div
</div>
<div style="background-color: yellow ;width: 200px;">
我是一个div
</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<hr />
<span>我是一个span标签</span>
<span>我是一个span标签</span>
<span >可以用span选中文字设置样式</span>
</body>
</html>