像報紙排版一樣，很多時候需要把平面劃分為多個塊，網(wǎng)頁也是一樣，這里就看一下，怎么在頁面中劃分區(qū)塊。

HTML <div> 和<span>
HTML 可以通過 <div> 和 <span>將元素組合起來。

一、HTML 塊級元素

大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束）。
實例: <h1>, <p>, <ul>, <table>

二、HTML 內(nèi)聯(lián)元素

內(nèi)聯(lián)元素在顯示時通常不會以新行開始。
實例: <b>, <td>, <a>, <img>
HTML中的塊級元素指的是在渲染時以塊的形式顯示的元素。
以下是一些常見的HTML塊級元素：

1. <div>：用于創(chuàng)建一個分隔的塊級區(qū)域，常用于布局和樣式的分離。
2. <p>：用于段落文本。
3. <h1> - <h6>：用于標題，其中<h1>表示最高級別的標題，<h6>表示最低級別的標題。
4. <ul>：用于創(chuàng)建無序列表。
5. <ol>：用于創(chuàng)建有序列表。
6. <li>：用于列表項，必須位于<ul>或<ol>內(nèi)部。
7. <table>：用于創(chuàng)建表格。
8. <thead>：用于定義表格的表頭部分。
9. <tbody>：用于定義表格的主體部分。
10. <tr>：用于定義表格的一行。
11. <th>：用于定義表格的表頭單元格。
12. <td>：用于定義表格的數(shù)據(jù)單元格。
13. <form>：用于創(chuàng)建表單。
14. <fieldset>：用于將相關表單元素分組。
15. <legend>：用于為元素定義標題。
16. <blockquote>：用于引用長段落的文本。
17. <address>：用于定義聯(lián)系信息。
18. <pre>：保留空白字符和換行符的格式化文本。
19. <figure>：用于包含獨立的內(nèi)容，如圖像或表格。
20. <figcaption>：用于為<figure>元素定義標題。

這只是一些常見的塊級元素，還有其他塊級元素，如<article>、<section>、<nav>、<header>等等。

三、HTML <div> 元素

HTML <div> 元素是塊級元素，它可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。
如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設置樣式屬性。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。

四、HTML <span> 元素

HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。

五、HTML<article>元素

用于定義獨立的、完整的、與頁面內(nèi)容無關的文章內(nèi)容。是HTML5新增元素。
<article>元素應該包含一片完整的、獨立于頁面的文章內(nèi)容，例如一篇新聞報道、一篇博客文章等。這些內(nèi)容可以作為獨立的實體進行分發(fā)，例如通過RSS訂閱或社交媒體分享。
<article>元素可以包含標題、摘要、作者、發(fā)布日期等信息。它可以包含其他HTML元素，如段落(<p>)、標題(<h1>-<h6>)、圖片(<img>)、列表(<ul>、<ol>)等，以展示完整的文章內(nèi)容。

<article><h2>Article Title</h2><p>Article content goes here...</p><p>Another paragraph...</p>
</article>

六、<article>元素和<div>元素的區(qū)別與聯(lián)系

注意：<article>元素應該是獨立的，即使嵌套在其他元素中，也應該具有自己的完整語義。
元素是HTML文檔中的構(gòu)建塊，用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。在HTML中，有許多不同類型的元素，每個元素都有特定的功能和用途。
其中兩個常見的元素是"<article>"和"<div>"。
"<article>"元素用于定義一個獨立的內(nèi)容塊，通常表示一篇文章或一個獨立的主題。它可以包含標題、內(nèi)容、作者等信息。一個網(wǎng)頁可以包含多個"<article>"元素，每個元素獨立顯示。
"<div>"元素是一個通用的容器元素，用于將多個元素組合在一起或為它們提供樣式。它沒有特定的含義或語義，僅用于布局和組織目的。"<div>"元素可以用于分組相關的內(nèi)容，設置樣式，或創(chuàng)建網(wǎng)頁布局的不同區(qū)域。
"<article>"元素和"<div>"元素之間的關系是，"<article>"元素通?？梢园鄠€"<div>"元素作為其子元素。這樣可以將文章分為不同的部分或塊，并使用"<div>"元素對每個部分進行樣式設置或布局。
另外，"<div>"元素也可以存在于除了"<article>"元素以外的其他元素中，用于創(chuàng)建更復雜的布局或組織結(jié)構(gòu)。
總的來說，"<article>"元素表示一個獨立的內(nèi)容塊，而"<div>"元素是一個通用的容器元素，用于組合和布局其他元素。它們之間可以互相嵌套，以創(chuàng)建更具結(jié)構(gòu)和樣式的網(wǎng)頁。

小結(jié)

熟練掌握區(qū)塊劃分的各種方法，才能滿足制作網(wǎng)頁的實際需要。