div标签
是一个区块容器标记,
之间是一个容器,可以包含段落、表格、图片等各种HTML元素。
span标签
没有实际意义,为了应用样式.
HTML标签分类
- 块级标签:占据一行,换行
<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>
<h1>~<h6>、<p>、<form>、<hr>.....
- 行内标签:在一行,不换行
<b>、<em>、<img>、<input>、<a>、<sup>、
<sub>、<textarea>、<span/>
标签嵌套规则
- 块级元素可包含行内元素和某些块级元素
- 行内元素不能包含块元素,只能包含其他行内元素
- 块级元素不能放在
标签内
- 特殊块级元素只能包含行内元素,不能在包含块级元素如:h1、h2、h3、h4、h5、h6、p、dt。
- 块级元素与块元素并列,行内元素和行内元素并列
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--div标签-->
<div><img src="images/1-kobe.jfif" height="100" width="100"/>Kobe</div>
<div><img src="images/2-curry.jfif"height="100" width="100"/>Curry</div>
<div><img src="images/3-james.jfif"height="100" width="100"/>James</div><br/>
<!--span标签-->
<span><img src="images/1-kobe.jfif" height="100" width="100"/>Kobe</span>
<span><img src="images/2-curry.jfif"height="100" width="100"/>Curry</span>
<span><img src="images/3-james.jfif"height="100" width="100"/>James</span>
<!--标签嵌套规则-->
<!--块级元素可包含行内元素和某些块级元素-->
<div><h2></h2><a href="https://www.baidu.com/"></a></div>
<!--行内元素不能包含块元素,只能包含其他行内元素-->
<!--<a href=""><h1></h1><div></div></a>-->
<span><em></em></span><!--正确-->
<!--块级元素不能放在<p>标签内-->
<!--<p><div>1111</div><h1>2222</h1></p>--> <!--错误-->
<!--特殊块级元素只能包含行内元素,不能再包含块级元素
如:h1、h2、h3、h4、h5、h6、p、dt-->
<!--块级元素与块元素并列,行内元素和行内元素并列-->
<div><h1></h1><p></p></div><!--正确-->
<div><span></span><a href=""></a></div><!--正确-->
<div><h1>666</h1><span>888</span></div><!--错误-->
</body>
</html>
执行结果