幕客前端基础入门-搭建网页结构
1.块级标签与行内标签
由于表格代码不便于维护，且不够灵活。所以网页布局一般是div+css
div标签：是一个区块容器标签。<div></div>之间是一个容器，可以包含段落、表格、图片等各种html元素。
span标签：没有任何意义，为了应用样式。
<p>使用div标签</p>
<div><img src="coner.jpeg" width="50">曹魏</div>
<div><img src="coner.jpeg" width="50">孙吴</div>
<div><img src="coner.jpeg" width="50px">蜀汉</div>
<p>使用span标签</p>
<span><img src="icon.jpeg" width="50">曹丕</span>
<span><img src="icon.jpeg" width="50">孙权</span>
<span><img src="icon.jpeg" width="50">刘备</span>
| 标签 | 说明 | 示例 |
| 块级标签 | 占据一行，换行。如<div>用来搭建网页的结构布局和承载一些内容 | <div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>~<h6>、<p>、<form>、<hr>... |
| 行内标签 | 在一行，不换行。如<span>用于某些细节的处理 | <b>、<em>、<img>、<input>、<a>、<sup>、<sub>、<textarea>、<span>... |
2. 标签嵌套规则
| 规则 | 示例 |
| 块级元素可包含行内元素和某些块级元素 | 如<div><h1></h1>< a href=""></a></div> |
| 行内元素不能包含块元素，只能其他行内元素 | 如<a href="" ><h1></h1><div></div></a><--错误--> <span><em></em></span><--正确--> |
| 块级元素不能放在<p>标签内 | <p><div>1111</div><h1>2222</h1></p> 如上，浏览器会将div和h1之外生成2个p段落 <p></p><div>1111</div><h1>2222</h1><p></p> |
| 特殊块级元素只能包含行内元素，不能再包含块级元素,如<h1>~<h6>、<p>、<dt> | |
| 块级元素与块级元素并列，行内元素与行内元素并列 | <div><h1></h1><p></p></div><!--正确--> <div><h1>666</h1><span></span></div><!--错误写法--> |
