[ 點(diǎn)擊 ?? 關(guān)注「 全棧工程師修煉指南」公眾號(hào) ]

設(shè)為「?? 星標(biāo)」帶你從基礎(chǔ)入門 到 全棧實(shí)踐 再到 放棄學(xué)習(xí)！
涉及 網(wǎng)絡(luò)安全運(yùn)維、應(yīng)用開發(fā)、物聯(lián)網(wǎng)IOT、學(xué)習(xí)路徑 、個(gè)人感悟 等知識(shí)分享。

希望各位看友多多支持【關(guān)注、點(diǎn)贊、評(píng)論、收藏、投幣】，助力每一個(gè)夢(mèng)想。

【WeiyiGeek Blog's - 花開堪折直須折，莫待無(wú)花空折枝 】
作者主頁(yè): 【 https://weiyigeek.top 】
博客地址: 【 https://blog.weiyigeek.top 】
作者答疑學(xué)習(xí)交流群：歡迎各位志同道合的朋友一起學(xué)習(xí)交流【點(diǎn)擊 ?? 加入交流群】, 或者關(guān)注公眾號(hào)回復(fù)【學(xué)習(xí)交流群】。

---

---

首發(fā)地址: https://mp.weixin.qq.com/s/-eQkOAMhvmimixlK1KrM3A

---

0x00 前言簡(jiǎn)述

本章節(jié)，主要介紹HTML布局與區(qū)塊的元素介紹, 比如頭部，中部，尾部以及行內(nèi)區(qū)塊與行外區(qū)塊等，具體講解如下述所示。

網(wǎng)頁(yè)布局, 對(duì)改善網(wǎng)站的外觀非常重要,請(qǐng)慎重設(shè)計(jì)您的網(wǎng)頁(yè)布局。在HTML中雖然我們可以使用table標(biāo)簽來(lái)設(shè)計(jì)出漂亮的布局，但是table標(biāo)簽是不建議作為布局工具使用的(表格不是布局工具)。

網(wǎng)站布局, 大多數(shù)網(wǎng)站會(huì)把內(nèi)容安排到多個(gè)列中（就像雜志或報(bào)紙那樣），可以使用 <div> 或者 <table> 元素來(lái)創(chuàng)建多列，CSS 用于對(duì)元素進(jìn)行定位，或者為頁(yè)面創(chuàng)建背景以及色彩豐富的外觀。

1.本節(jié)標(biāo)簽一覽

<div> : 定義文檔中的節(jié)
<header> New : 定義一個(gè)文檔頭部
<nav> New : 定義導(dǎo)航鏈接的部分
<section> New : 定義了文檔的某個(gè)區(qū)域
<article> New : 定義一個(gè)文章內(nèi)容
<main>: 定義文檔的主體部分。
<aside> New : 定義其所處內(nèi)容之外的內(nèi)容。
<footer> New : 定義一個(gè)文檔底部
<figcaption> : 定義 figure 元素的標(biāo)題。
<figure> : 定義媒介內(nèi)容的分組，以及它們的標(biāo)題。
<summary> New : 定義一個(gè)可見(jiàn)的標(biāo)題,當(dāng)用戶點(diǎn)擊標(biāo)題時(shí)會(huì)顯示出詳細(xì)信息。
<details> New : 定義了用戶可見(jiàn)的或者隱藏的需求的補(bǔ)充細(xì)節(jié)。

2.塊元素與內(nèi)聯(lián)元素

描述: 大多數(shù) HTML 元素被定義為塊級(jí)元素譯為 block level element 或內(nèi) 聯(lián)元素 inline element。

區(qū)別:

• 塊級(jí)元素在瀏覽器顯示時(shí)，通常會(huì)以新行來(lái)開始（和結(jié)束）。
• 內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開始。

屬于塊元素的標(biāo)簽: <h1>, <p>, <ul>, <table>, <div>
屬于內(nèi)聯(lián)元素的標(biāo)簽: <b>, <td>, <a>, <img>

溫馨提示: HTML 可以通過(guò) <div> 和 <span> 將元素組合起來(lái)。

0x01 樣式布局區(qū)塊

div 標(biāo)簽

描述: 該標(biāo)簽定義 HTML 文檔中的一個(gè)分隔區(qū)塊或者一個(gè)區(qū)域部分(division/section)，常用于組合塊級(jí)元素，以便通過(guò) CSS 來(lái)對(duì)這些元素進(jìn)行格式化。
前面講述到，div元素它屬于塊級(jí)元素，瀏覽器會(huì)在其前后顯示折行（會(huì)換行）。

樣式: 如果與 CSS 一同使用，<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性，用 id 或 class 來(lái)標(biāo)記 <div>，那么該標(biāo)簽的作用會(huì)變得更加有效，但不必為每一個(gè) <div> 都加上類或 id，雖然這樣做也有一定的好處, 可以對(duì)同一個(gè) <div> 元素應(yīng)用 class 或 id 屬性，但是更常見(jiàn)的情況是只應(yīng)用其中一種。

其兩者的主要差異 class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標(biāo)識(shí)單獨(dú)的唯一的元素。

示例:

<!-- 示例1.區(qū)塊元素包含額外元素-->
<div style="color:#00FF00;background-color:black">    
  <h3>This is a header title</h3>
  <p>This is a paragraph.</p>
</div>

<!-- 示例2.設(shè)置id并使用樣式來(lái)引用，建議style元素設(shè)置type屬性。 -->
<style type="text/css"> 
#testdiv{
	color:#00ff00;
	background-color:black;
}
</style>
<h1> Div 區(qū)塊元素 </h1>
<h6>這里不包含在區(qū)塊Element里面</h6>
<p>這里也不包含在區(qū)塊Element里面</p>
<div id="testdiv">
	<h6>包含在Div區(qū)塊Element里面</h6>
	<p>包含在Div區(qū)塊Element里面</p>
</div>

<!-- 示例3.設(shè)置class名稱，并使用名稱對(duì)應(yīng)綁定。 -->
<style type="text/css"> 
.news{
	color:green;
	border-color:#000;
	border-width:1px;
	border-style:solid;
}
</style>
<div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
</div>
<div class="news">
  <h2>News headline 2</h2>
  <p>some text. some text. some text...</p>
</div>

<!-- 示例4.使用 CSS 將樣式應(yīng)用于<div>，從而創(chuàng)建一個(gè)陰影框 -->
<style>
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
</style>
<div class="shadowbox">
  <p>這里可以是任何內(nèi)容，比如 \<p\>, \<table\>，一切由你作主！</p>
</div>

擴(kuò)展實(shí)踐: 使用DIV布局網(wǎng)站，它常用作布局工具，因?yàn)槟軌蜉p松地通過(guò) CSS 對(duì)其進(jìn)行定位，下述例子使用了四個(gè) <div>元素來(lái)創(chuàng)建多列布局。

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>

<div id="header"><h1>中國(guó)城市，City China</h1></div>
<div id="nav">
  北京<br>
  上海<br>
  廣東<br>
  深圳<br>
  重慶<br>
</div>
<div id="section">
  <h2>重慶市</h2>
  <p>
  “重慶,簡(jiǎn)稱“渝”,別稱山城,是中華人民共和國(guó)省級(jí)行政區(qū)、直轄市、國(guó)家中心城市、超大城市,國(guó)務(wù)院批復(fù)確定的中國(guó)重要的中心城市之一、長(zhǎng)江上游地區(qū)經(jīng)濟(jì)中心、國(guó)家重要的現(xiàn)代制造業(yè)基地、西南地區(qū)綜合交通樞紐”
  </p>
  <p>
  至2021年末，轄38個(gè)區(qū)縣， 總面積8.24萬(wàn)平方千米， 常住人口3212.43萬(wàn)。
  </p>
</div>
<div id="footer">Copyright ? weiyigeek.top</div>

溫馨提示: 上面這段 HTML 模擬了新聞網(wǎng)站的結(jié)構(gòu)，其中的每個(gè) div 把每條新聞的標(biāo)題和摘要組合在一起，也就是說(shuō) div 為文檔添加了額外的結(jié)構(gòu)。
同時(shí)，由于這些 div 屬于同一類元素，所以可以使用 class="news" 對(duì)這些 div 進(jìn)行標(biāo)識(shí)，這么做不僅為 div 添加了合適的語(yǔ)義，而且便于進(jìn)一步使用樣式對(duì) div 進(jìn)行格式化，可謂一舉兩得。

header 標(biāo)簽

描述：該元素定義文檔或者文檔的一部分區(qū)域的頁(yè)眉，通常包含一組介紹性的或是輔助導(dǎo)航的實(shí)用元素(展示介紹性內(nèi)容)，其包含一些標(biāo)題元素，但也可能包含其他元素，比如 Logo、搜索框、作者名稱，等等。

示例:

<!-- 示例1.頁(yè)面的 Header -->
<header>
	<h2><a href="/"><img src="/media/WeiyiGeek.png" width="315" height="83" alt="WeiyiGeek"></a></h2>
  <nav>
    <h2 class="hidden">Main Navigation</h2>
    <ul>
      <li><a href="/services/">Services</a></li>
      <li class="current"><a href="/articles/">Articles</a></li>
      <li><a href="/resources/">Resources</a></li>
      <li><a href="/projects/">Projects</a></li>
      <li><a href="/community/">Community</a></li>
    </ul>
  </nav>
	<div id="search">
		<form method="get" role="search" action="/search/" id="sitesearch">
			<p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p>
		</form>
		<p class="intro"><a href="/intro">Introduction to Web Accessibility</a></p>
		<p class="training"><a href="/services/training">WebAIM Training</a></p>
	</div>
</header>

<!-- 示例2.文章的 Header -->
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on Wednesday, 4 October 2017 by Jane Smith</p>
  </header>
  <p>博主個(gè)人學(xué)習(xí)博客地址</p>
  <p><a >測(cè)試完畢！</a></p>
</article>

main 標(biāo)簽

描述: 元素呈現(xiàn)了文檔的 <body> 或應(yīng)用的主體部分, 主體部分由與文檔直接相關(guān)，或者擴(kuò)展于文檔的中心主題、應(yīng)用的主要功能部分的內(nèi)容組成
溫馨提示: 在文檔中，<main> 元素的內(nèi)容應(yīng)當(dāng)是獨(dú)一無(wú)二的。任何同時(shí)存在于任意一系列文檔中的相同、重復(fù)內(nèi)容，比如側(cè)邊欄、導(dǎo)航欄鏈接、版權(quán)信息、網(wǎng)站 Logo，搜索框（除非搜索框?yàn)槲臋n的主要功能），都不應(yīng)當(dāng)被包含在其內(nèi)。

示例:

<!-- 1.簡(jiǎn)單示例 -->
<header>如何學(xué)習(xí)HTML呢?</header>
<main>
  <p>請(qǐng)參考【weiyigeek】作者或者關(guān)注微信公眾號(hào)【全棧工程師修煉指南】進(jìn)行學(xué)習(xí)喲！</p>
</main>

<!-- 2.直達(dá)內(nèi)容（skipnav），是一種輔助功能技術(shù)，使其用戶可以快速跳過(guò)大段的重復(fù)內(nèi)容（如主導(dǎo)航欄、信息橫幅等） -->
<header>
	<div id="skiptocontent"><a href="#maincontent">skip to main content</a></div>
</header>
<main id="maincontainer" class="clearfix">
<nav role="navigation">
  <h2>Article Contents</h2>
  <ol>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#creating">Creating "Skip Navigation" Links</a>
      <ol><li><a href="#visible">Visible skip links</a></li> </ol>
    </li>
    <li><a href="#other">Other In-page Navigation Options</a>
      <ul><li><a href="#wcag">WCAG Conformance</a></li> </ul>
    </li>
  </ol>
</nav>

footer 標(biāo)簽

描述: 該元素表示最近一個(gè)章節(jié)內(nèi)容或者根節(jié)點(diǎn)（sectioning root）元素的頁(yè)腳, 一個(gè)頁(yè)腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息。

示例:

<footer>
<p>Posted by: WeiyiGeeker</p>
<p><time pubdate datetime="2022-03-01"></time></p>
<p>copyright @ WeiyiGeeker</p>
</footer>

nav 標(biāo)簽

描述: 該元素表示頁(yè)面的一部分，其目的是在當(dāng)前文檔或其他文檔中提供導(dǎo)航鏈接，其常見(jiàn)示例是菜單，目錄和索引。

示例:

<!-- 示例1 -->
<nav class="crumbs">
  <ol>
      <li class="crumb"><a href="#">Home</a></li>
      <li class="crumb"><a href="#">Article</a></li>
      <li class="crumb"><a href="#">About</a></li>
  </ol>
</nav>

<!-- 示例2 -->
<style>
nav {
    border-bottom: 1px solid black;
}
.crumbs ol {
    list-style-type: none;
    padding-left: 0;
}
.crumb {
    display: inline-block;
}
.crumb a::after {
    display: inline-block;
    color: #000;
    content: '>';
    font-size: 80%;
    font-weight: bold;
    padding: 0 3px;
}
</style>
<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="#">Home</a></li>
        <li class="crumb"><a href="#">Page</a></li>
        <li class="crumb">HTML 學(xué)習(xí)指南</li>
    </ol>
</nav>

溫馨提示: 在不同設(shè)備上（手機(jī)或者PC）可以制定導(dǎo)航鏈接是否顯示，以適應(yīng)不同屏幕的需求, 一個(gè)網(wǎng)頁(yè)也可能含有多個(gè)<nav>元素，例如一個(gè)是網(wǎng)站內(nèi)的導(dǎo)航列表，另一個(gè)是本頁(yè)面內(nèi)的導(dǎo)航列表。

section 標(biāo)簽

描述: 該元素表示 HTML 文檔中一個(gè)通用獨(dú)立章節(jié)，它沒(méi)有更具體的語(yǔ)義元素來(lái)表示，一般來(lái)說(shuō)會(huì)包含一個(gè)標(biāo)題。所以說(shuō)它是一個(gè)通用的分節(jié)元素，只有在沒(méi)有更具體的元素來(lái)代表它的時(shí)候才可以使用, 其標(biāo)簽可以(被)嵌套 article 標(biāo)簽使用。

示例:

<!-- 示例1.常規(guī)文檔 -->
<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

<!-- 示例2.導(dǎo)航使用 -->
<section>
  <h1 class="hidden">WeiyiGeek 個(gè)人博客</h1>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>>
</section>

article 標(biāo)簽

描述: 該元素表示文檔、頁(yè)面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，其意在成為可獨(dú)立分配的或可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目。

溫馨提示: 標(biāo)簽定義的內(nèi)容本身必須是有意義的且必須是獨(dú)立于文檔的其余部分。其標(biāo)簽，通常包含 header 、section 、footer、article 、address、time（發(fā)布日期/時(shí)間)

示例

<article class="film_review">
  <header>
    <h2>header 標(biāo)簽包含</h2>
  </header>
  <section class="main_review">
    <p>section 章節(jié)</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>包含在section元素中的 article</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        包含在 footer 中的標(biāo)簽。
        <p>
          Posted on <time datetime="2015-05-17 19:00">May 17</time>by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    包含在 article 中的標(biāo)簽。
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

figure 標(biāo)簽

描述: 該元素代表一段獨(dú)立的內(nèi)容，可能包含 <figcaption> 元素定義的說(shuō)明元素。該插圖、標(biāo)題和其中的內(nèi)容通常作為一個(gè)獨(dú)立的引用單元。

示例

<!-- 圖像展示 -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
</figure>

<!-- 代碼段 -->
<figure>
  <figcaption>使用 <code>navigator</code> 獲取瀏覽器的信息。</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>

<!-- 引用 -->
<figure>
  <figcaption><b>WeiyiGeek 個(gè)人激勵(lì)</b></figcaption>
  <blockquote>
    為者常成，行者常至。
    https://blog.weiyigeek.top
  </blockquote>
</figure>

<!-- 詩(shī)歌 -->
<figure>
  <figcaption><b><cite>晏子春秋·內(nèi)篇雜下</cite></b></figcaption>
  <p style="white-space:pre">
    梁丘據(jù)謂晏子曰：“吾至死不及夫子矣！”晏子曰：“嬰聞之，為者常成，行者常至。嬰非有異于人也。常為而不置，常行而不休者，故難及也？”
  </p>
  <p style="white-space:pre">
    無(wú)論做什么事情，只要持之以恒，就有可能成功；但不努力，則一定不會(huì)成功！
  </p>
</figure>

執(zhí)行結(jié)果:

figcaption 標(biāo)簽

描述: 此元素是與其相關(guān)聯(lián)的圖片的說(shuō)明/標(biāo)題，用于描述其父節(jié)點(diǎn) <figure> 元素里的其他數(shù)據(jù)。

示例

<!-- 有標(biāo)題的圖像 -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
  <figcaption>MDN Logo</figcaption>
</figure>

<!-- 組合示例 -->
<style>
figure {
  border: thin #c0c0c0 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 220px;
  margin: auto;
}
img {
  max-width: 150px;
  max-height: 150px;
}
figcaption {
  background-color: #222;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}
</style>
<figure>
  <img src="https://blog.weiyigeek.top/img/avatar.jpg" alt="Elephant at sunset">
  <figcaption>The beautiful WEIYIGEEK logo.</figcaption>
</figure>   

執(zhí)行結(jié)果:

aside 標(biāo)簽

描述: <aside> 元素表示一個(gè)和其余頁(yè)面內(nèi)容幾乎無(wú)關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分并且可以被單獨(dú)的拆分出來(lái)而不會(huì)使整體受影響, 其通常表現(xiàn)為側(cè)邊欄或者標(biāo)注框（call-out boxes），即包含網(wǎng)站的導(dǎo)航欄nav元素、

示例:

<style>
aside {
  width: 40%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #29627e;
  font-style: italic;
  color: #29627e;
}
aside > p {
  margin: 0.5rem;
}
p {
  font-family: 'Fira Sans', sans-serif;
}
</style>
<p>蠑螈是一類兩棲動(dòng)物，外形類似蜥蜴，包括短腿和幼體和成體的尾巴。</p>
<aside>
  <p>皮膚粗糙的紐特用致命的神經(jīng)毒素保護(hù)自己。</p>
</aside>

溫馨提示: 不要使用 <aside> 元素去尾隨括號(hào)內(nèi)的文本，因?yàn)檫@種文本被認(rèn)為是主要流內(nèi)容的一部分。

summary 標(biāo)簽

描述: 該元素用作 一個(gè)<details>元素的一個(gè)內(nèi)容的摘要，標(biāo)題或圖例，即定義一個(gè)可見(jiàn)的標(biāo)題,當(dāng)用戶點(diǎn)擊標(biāo)題時(shí)會(huì)顯示出詳細(xì)信息 <details> 包含。

溫馨提示: 如果 <summary> 元素在瀏覽器內(nèi)不能被正確解析和渲染, 則會(huì)展示<details>標(biāo)簽內(nèi)的其他內(nèi)容。

details 標(biāo)簽

描述: 該元素可創(chuàng)建一個(gè)掛件, 僅在被切換成展開狀態(tài)時(shí), 它才會(huì)顯示內(nèi)含的信息, <summary>元素可為該部件提供概要或者標(biāo)簽。
屬性:

• open : 此布爾屬性指示詳細(xì)信息（即＜details＞元素的內(nèi)容）當(dāng)前是否可見(jiàn)。

事件: 除了HTML元素支持的常見(jiàn)事件之外，＜details＞元素還支持toggle事件，

details.addEventListener("toggle", event => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});

示例:

<!-- 示例1.使用CSS進(jìn)行設(shè)計(jì) -->
<style>
details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}
details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}
</style>
<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>


<!-- 示例2.詳細(xì)打開狀態(tài) -->
<details open>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. 16c 64GB.</p>
</details>

總結(jié): 網(wǎng)站中布局常用的三種方式 DIV（Class 類, 常用） 、語(yǔ)義元素（建議）、Table (在HTML4以前常用，現(xiàn)在一般不會(huì)如此使用)

• 使用語(yǔ)義元素的 HTML 布局(建議)

<style type="text/css">
header{
  background-color:black;
  color:white;
  text-align:center;
  padding:5px;
}
nav{
  line-height:30px;
  background-color:#eee;
  height:300px;
  width:100px;
  float:left;
  padding:5px;
}
section{
  width:350px;
  float:left;
  padding:10px;
}
footer{
  background-color:black;
  color:white;
  clear:both;
  text-align:center;
  padding:5px;
}
</style>

<h3>HTML 5 New Elmemnt布局</h3>
<header><h5>This is Header</h5></header>
<nav>
  China<br/>
  Chongqing<br/>
  fuling<br/>
</nav>
<section>
  <h6>China</h6>
  <p>Chongqing City,is very Beatiful!!!!!!</P>
  <p>Fuling is of the Chongqing!!!! </P>
</section>
<footer> Copyright @ WeiyiGeek </footer>

• 使用表格的 HTML 布局
  注釋：<table> 元素不是作為布局工具而設(shè)計(jì)的，該元素的作用是顯示表格化的數(shù)據(jù)。
  使用 <table> 元素能夠取得布局效果，因?yàn)槟軌蛲ㄟ^(guò) CSS 設(shè)置表格元素的樣式：

<table width="500" border="0">
    <tr>
    <td colspan="2" style="background-color:#FFA500;">
    <h1>主要的網(wǎng)頁(yè)標(biāo)題</h1>
    </td>
    </tr>
    <tr>
    <td style="background-color:#FFD700;width:100px;vertical-align:top;">
    <b>菜單</b><br>
    HTML<br>
    CSS<br>
    JavaScript
    </td>
    <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
    內(nèi)容在這里</td>
    </tr>
    
    <tr>
    <td colspan="2" style="background-color:#FFA500;text-align:center;">
    版權(quán) ? weiyigeek.top</td>
    </tr>
</table>

使用 <table> 元素能夠取得布局效果，因?yàn)槟軌蛲ㄟ^(guò) CSS 設(shè)置表格元素的樣式：

上面示例文件: https://github.com/WeiyiGeek/DevelopLearnig/blob/main/fore-end/HTML/example/study/布局示例

綜合實(shí)踐：
示例文件: https://github.com/WeiyiGeek/DevelopLearnig/blob/main/fore-end/HTML/example/study/03.DivisionSection.html

網(wǎng)頁(yè)效果：

原文地址: https://blog.weiyigeek.top/2023/2-24-718.html

本文至此完畢，更多技術(shù)文章，盡情期待下一章節(jié)！

---

專欄書寫不易，如果您覺(jué)得這個(gè)專欄還不錯(cuò)的，請(qǐng)給這篇專欄 【點(diǎn)個(gè)贊、投個(gè)幣、收個(gè)藏、關(guān)個(gè)注，轉(zhuǎn)個(gè)發(fā)，留個(gè)言】(人間六大情)，這將對(duì)我的肯定，謝謝！。

點(diǎn)擊 ?? 關(guān)注「 全棧工程師修煉指南」公眾號(hào)
微信溝通交流: weiyigeeker (點(diǎn)擊添加)
交流溝通群：629184198 或 關(guān)注公眾號(hào)回復(fù)【學(xué)習(xí)交流群】

溫馨提示: 由于作者水平有限，本章錯(cuò)漏缺點(diǎn)在所難免,希望讀者批評(píng)指正，并請(qǐng)?jiān)谖恼履┪擦粝履鷮氋F的經(jīng)驗(yàn)知識(shí)，聯(lián)系郵箱地址 master@weiyigeek.top 或者關(guān)注公眾號(hào) WeiyiGeek 聯(lián)系我。