课程引入
搭建网页HTML结构，<div>标签和<span>标签都是网页开发中重要的部分。我们需要了解什么是块级标签和行内标签。在搭建网页时标签的结构是必不可少的，所以需要了解标签嵌套的一些规则。
必备基础
1、div和span与块级和行内标签
<div>和<span>标签在网页结构布局中经常被使用到。目前主流的网页布局都是使用DIV+CSS。
<div>标签：
是一个区块容器标记，<div></div>之间是一个容器，可以包含段落、表格、图片等各种HTML元素。
-块级标签：占据一行，换行。一般情况下用于搭建网页的结构、布局等。
<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>~<h6>、<p>、<form>、<hr>……
<span>标签
没有任何实际意义，为了应用样式。
-行内标签：在一行，不换行。应用在某些细节部分，做一些强调，样式的区分等
<b>、<em>、<img>、<input>、<a>、<sup>、<sub>、<textarea>、<span>……
2、标签嵌套
*都是成对标签
*块级元素可包含行内元素和某些块级元素。
*行内元素不能包含块元素，只能包含其他行内元素，块级元素不能放在<p>标签内。
*特殊规则块级元素只能包含行内元素，不能再包含块级元素。 (如h1、h2、h3、h4、h5、h6、p、dt)
*块级元素与块级元素并列、行内元素和行内元素并列。
如：<div><h1></h1><p></p></div>正确
<div><span></span><a href=””></a></div>正确
<div><span></span><h1></h1></div>错误
**img标签引入图片时，路径中使用斜杠/和反斜杠\是一样的。
3、HTML结构分析
CSS样式
·css层叠样式
·css使用方法
1.行内样式
2.内部样式
3.外部样式
·css优先级
<body>
<h1> CSS样式</h1>
<ul>
<li> <b>css层叠样式</b></li>
<li> <b>css使用方法</b>
<ol>
<li>行内样式</li>
<li>内部样式</li>
<li>外部样式</li>
</ol>
<li>
<li> <b>css优先级</b></li>
</ul>
</body>
案例实践
- 网页整体结构
在真正开发之前，我们首先需要观察和分析设计图。
-logo
-导航
-banner图
-内容
-页脚
<body>
<!--头部内容-->
<div>
<!--logo-->
<div></div>
<!--导航-->
<div></div>
<!--banner图-->
<div></div>
</div>
<!--主体内容-->
<div>
<!--文章内容-->
<div></div>
<!--链接区-->
<div></div>
</div>
<!--页脚内容-->
<div></div>
</body>