幕客前端基础入门-搭建网页结构

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><!--错误写法-->