【前端学习整理】HTML（4）：块级、内联元素与网页的布局

网页布局直接影响到网站的外观，所以一个好的网站，页面布局的设计非常重要。

div

span

<h2>什么是块级、内联</h2>
<div>这是一个块级元素</div>
<div>这是一个块级元素</div>
<div>这是一个块级元素</div>
<span>这是一个内联元素</span>
<span>这是一个内联元素</span>
<span>这是一个内联元素</span>
<hr/>
<div>
<span>这是一个嵌入在块级元素里的内联元素</span>
<span>这是一个嵌入在块级元素里的内联元素</span>
<span>这是一个嵌入在块级元素里的内联元素</span>
</div>

浏览器显示效果如下

下面写一个简单的网页大区域例子

<h2>什么是布局</h2>
<p>网页布局直接影响到网站的外观，所以一个好的网站，页面布局的设计非常重要。以下为简单布局:</p>
<div>
<h1 style="width:100%;height:50px;text-align: center;background: greenyellow;margin:0">我来组成标题</h1>
<ul style="list-style:none;width:10%;padding: 0;text-align: center;float:left;margin:0">
<li style="background: aqua;">第一列</li>
<li style="background: aqua;">第二列</li>
<li style="background: aqua;">第三列</li>
<li style="background: aqua;">第四列</li>
</ul>
<div style="float:left;width:90%;height:84px;background: #D2CEDF;">我是文章内容:
<p>style属性内容为CSS内容，用于给HTML元素设置样式属性。CSS后续进行学习。</p>
</div>
<div style="width:100%;height:30px;background: #FFA500;clear: both;">我在块级标签的底部，我也是一个块级标签</div>
</div>

浏览器显示效果如下

笔记
1.块级元素在浏览器中默认以新的一行来开始，并且独占一行，从左开始计算大小，之后的块级元素默认向下排列。常见的块级标签有：ul、h1、p、div等等。
2.内联元素不会以新的一行开始，从左向右依次堆叠。内联元素可以被包裹在块级元素内。内联元素有：a、b、img、span等等。
3.在常见的页面布局中，一般用块级元素作为容器，包裹其他内容形成一个区块(块级标签内可以包裹块级元素也可以包裹内联元素)。
4.

<div>

元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div>

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
5.HTML

<span>

元素是内联元素，可用作文本的容器

<span>

元素也没有特定的含义