停止濫用div! HTML語義化介紹

文同步本人掘金平臺(tái)的原創(chuàng)翻譯：https://juejin.cn/post/6844903817968893960

DIVS該停止（濫用）了

我們喜歡（使用）<div>標(biāo)簽。它們已經(jīng)存在了幾十年，這幾十年來，當(dāng)需要將一些內(nèi)容包裹起來達(dá)到（添加）樣式或者布局目的的時(shí)候，它們成為首選元素。查看線上站點(diǎn)時(shí)，看到像下面這些內(nèi)容的情況依舊很常見：

<div class="container" id="header">
    <div class="header header-main">Super duper best blog ever</div>
    <div class="site-navigation">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </div>
</div>
<div class="container" id="main">
    <div class="article-header-level-1">
        Why you should buy more cheeses than you currently do
    </div>
    <div class="article-content">
        <div class="article-section">
            <div class="article-header-level-2">
                Part 1: Variety is spicy
            </div>
            <!-- cheesy content -->
        </div>
        <div class="article-section">
            <div class="article-header-level-2">
                Part 2: Cows are great
            </div>
            <!-- more cheesy content -->
        </div>
    </div>
</div>
<div class="container" id="footer">
    Contact us!
    <div class="contact-info">
        <p class="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </p>
        <div class="street-address">
            <p>123 Main St., Suite 404</p>
            <p>Yourtown, AK, 12345</p>
            <p>United States of America</p>
        </div>
    </div>
</div>
復(fù)制代碼

Hoo，那有很多的div標(biāo)簽。但是，它有效。我的意思主要是，它具有你需要的結(jié)構(gòu)。并且，我確定在你完成樣式添加之后，它看起來會(huì)像你想要的那個(gè)樣子。然而，它有些嚴(yán)重的問題：

可訪問性 - 許多a11y tools非常智能，會(huì)盡力解析頁面結(jié)構(gòu)，以幫助用戶按照頁面制作者的意圖來引導(dǎo)用戶，并為用戶提供簡(jiǎn)單的跳轉(zhuǎn)鏈接來指引他們到自己關(guān)心的頁面部分。然而，<div>標(biāo)簽并沒有真正傳遞有關(guān)文檔結(jié)構(gòu)的任何有用信息。世界上最聰明的a11y tool仍然不是人類，不能指望其解析class和id屬性，或能夠識(shí)別全世界開發(fā)人員命名塊元素的奇怪和狂野的方式。我可以識(shí)別到class="article-header-level-2"是一個(gè)副標(biāo)題，但是機(jī)器不能。（如果可以的話，把它從我電腦中拿出來，可我也還沒準(zhǔn)備好進(jìn)行AGI革命呢。）
可讀性 - 要閱讀此代碼，你需要仔細(xì)掃描類名，從<div class="..."></div>樣板之間挑選出來。一旦你（的代碼）深入幾個(gè)層次，跟蹤哪個(gè)</div>結(jié)束標(biāo)記與哪個(gè)<div ...>開始標(biāo)記對(duì)應(yīng)，那就變得很棘手了。你開始非常依賴IDE功能，例如著色不同的縮進(jìn)級(jí)別或突出顯示匹配的標(biāo)記以跟蹤您的位置，而在較長(zhǎng)的文檔中，它可能需要在這些功能之上進(jìn)行大量的滾動(dòng)。
一致性和標(biāo)準(zhǔn) - 開始新的工作或轉(zhuǎn)移到新項(xiàng)目，并且必須從頭學(xué)習(xí)代碼庫中使用的讓人抓狂的標(biāo)記，那可能會(huì)令人很沮喪。如果每個(gè)人都有標(biāo)準(zhǔn)化的方法來標(biāo)記web文檔中常見結(jié)構(gòu)，那么在不熟悉代碼庫的情況下，都可以很容易的瀏覽HTML文件并快速處理它應(yīng)該展示的內(nèi)容。如果只有一個(gè)這樣的標(biāo)準(zhǔn)...

HTML5: 這個(gè)標(biāo)準(zhǔn)

HTML5并不新奇。這是輕描淡寫；最初的工作草稿于2008年1月（11年前）發(fā)布，以征求公眾意見，并于4年半前，2014年10月份成為一個(gè)全面W3C的推薦。所以，就像它已經(jīng)存在了一段時(shí)間。

HTML5的主要進(jìn)步之一是引入了一組標(biāo)準(zhǔn)化的語義元素。術(shù)語“語義”指的是單詞或事物的含義，因此”語義元素“是用于以更有意義的方式標(biāo)記文檔結(jié)構(gòu)的元素，這種方式可以清楚地表明它們的用途和它們?cè)谖募蟹?wù)的目的是什么。而且重要的是，由于它們是標(biāo)準(zhǔn)化的，定義文檔的這些元素可以被每個(gè)人使用并理解，包括機(jī)器人。

我認(rèn)為HTML5規(guī)范本身在<div>元素定義下的一個(gè)注釋中很好地總結(jié)了這個(gè)問題：

注釋：強(qiáng)烈建議作者將div元素視為最后采取的元素，在沒有其它元素適合的（情況下）。使用更合適的元素而不是div元素可以使讀者更容易訪問，并且更容易為作者提供可維護(hù)性。-- www.w3.org/TR/html5/gr…

我將語義塊元素分為兩類：主要結(jié)構(gòu)和內(nèi)容指標(biāo)。這些不是標(biāo)準(zhǔn)的條款或者其它條款；我在這篇文章中做了一些（區(qū)分）。但我認(rèn)為這種區(qū)分足夠有用。?♂?

主要結(jié)構(gòu)

有一個(gè)超級(jí)常見的模式，可在互聯(lián)網(wǎng)上的網(wǎng)站，教程甚至CSS庫中找到，并且有充分的理由。我們經(jīng)常將最頂層的頁面劃分為三個(gè)區(qū)域：頁眉、主頁和頁腳，然后根據(jù)需要將這些區(qū)域劃分為多個(gè)區(qū)域。我在上面的例子中包含了這個(gè)來證明這點(diǎn)：

<div class="container" id="header">...</div>
<div class="container" id="main">
    ...
    <div class="article-section">...</div>
    ...
</div>
<div class="container" id="footer">...</div>
復(fù)制代碼

我已經(jīng)看過（并且使用過）這種模式很久了，以這種方式構(gòu)造文檔非常有意義，既可以讀取HTML，又可以更加簡(jiǎn)單地在CSS中設(shè)置頁面樣式。頁眉和頁腳元素頁可以使用PHP或Rails/ERB等語言中的部分模版來更易于使用，因?yàn)槟憧梢栽谡麄€(gè)站點(diǎn)中包含常見的頁眉和頁腳部分：

<?php include 'header.php'; ?>

<div id="main">...</div>

<?php include 'header.php'; ?>
復(fù)制代碼

所以這就是事情：每個(gè)人都認(rèn)為這是一個(gè)很好的模式。這包括WHATWG和W3C的人員，他們將模式標(biāo)準(zhǔn)化為HTML5中的四個(gè)新元素，名稱非常清晰：<header>, <main>, <footer>和<section>。

Bookends: <header> 和 <footer>

<header> 和 <footer>元素基本上是雙胞胎：它們?cè)谝?guī)范中的定義非常相似，并遵循相同的規(guī)則，關(guān)于它們被允許使用的位置，唯一區(qū)別在于它們的語義目的：頁眉在事物的前面，頁腳在事物的末尾。對(duì)于事物，我的意思不僅僅是頁面的：這對(duì)元素的設(shè)計(jì)用于文檔的任何部分，代表一大塊內(nèi)容，具有明確的開頭和結(jié)尾。這可以包括表格，文章，文章部分，社交媒體網(wǎng)站上的帖子，卡片等。

頁眉和頁腳在語義上接近sectioning root或sectioning content元素。像<body>, <blockquote>, <section>, <td>,<aside>等許多其它元素；如果你想了解完整的列表，就點(diǎn)擊上面的鏈接。輔助技術(shù)可以使用這些元素和其它元素生成文檔大綱，這可以幫助用戶更輕松的訪問它。在每個(gè)sectioning root/content中，你不應(yīng)該使用超過一個(gè)的<header>或<footer>。（一個(gè)就好，不能兩個(gè)相同）

作為最后說明，<header>經(jīng)常作為其上下文保存標(biāo)題元素（<h1>-<h6>）。這不是必須的，但可以幫助將其它相關(guān)元素與標(biāo)題分組，比如鏈接，圖片或子標(biāo)題，并且可以維持一直的結(jié)構(gòu)，即使標(biāo)題是<header>中的唯一元素。

好東西：<main>

第三個(gè)主要區(qū)域元素--<main>很特別。規(guī)范中說明了關(guān)于<main>的兩個(gè)非常重要的內(nèi)容：

文檔的主要內(nèi)容區(qū)域包括文檔的特定內(nèi)容，且不包括在一組文檔中重復(fù)的內(nèi)容，例如站點(diǎn)導(dǎo)航鏈接，版本信息，站點(diǎn)的徽標(biāo)，橫幅和搜索表單（除非文檔或應(yīng)用的主功能是一種搜索形式）-- www.w3.org/TR/html5/gr…

所以，<main>是你放置好東西的區(qū)域，是頁面的重要部分，特別是用戶訪問此頁面的原因（或說目的），而不是您的站點(diǎn)。換句話來說，主要內(nèi)容。

所有其它東西，徽標(biāo)、搜索表單和導(dǎo)航欄等都可以在<body>中的<header>或<footer>中，但是在<main>之外。

文檔中不能有多個(gè)可見的main元素。如果文檔中存在多個(gè)main元素，則必須使用隱藏屬性隱藏所有其它（main）實(shí)例。 -- www.w3.org/TR/html5/gr…

這很獨(dú)特。和<header>和<footer>（以及其它塊元素不同），<main>不能在任意切片內(nèi)容的整個(gè)頁面中使用；它應(yīng)該只被使用一次。或者更確切地說，它可以在文檔中多次被使用，但是一次只能看到一個(gè)<main>元素，所有其它的（

）必須被使用隱藏屬性隱藏，如CSS中的display:none。如果您思考下，（你會(huì)明白）這在應(yīng)用程序中預(yù)加載視圖是種很有用的模式：創(chuàng)建一個(gè)新的<mian hidden>，獲取用戶可能接下來查看的一些內(nèi)容（例如：系列文中的下一篇，下一張幻燈圖放映等），然后，當(dāng)用戶點(diǎn)擊鏈接/按鈕加載該視圖時(shí)，通過在兩者上切換隱藏屬性，將當(dāng)前的<main>切換到預(yù)加載的（那個(gè)）。

在繼續(xù)之前，我們暫停下并查看上面的示例。如果我們使用<header>，<main>和<footer>作為文章的主要結(jié)構(gòu)，它的外觀如下：

<header>
    <h1>Super duper best blog ever</h1>
    ...
</header>
<main>
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</main>
<footer>
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</footer>
復(fù)制代碼

那真的很棒！但是，還有很多工作要做。

分解：<section>

因此，我們?yōu)轫撁嫣峁┝艘粋€(gè)基本大綱：頁眉，頁腳和主要內(nèi)容區(qū)域。現(xiàn)在是時(shí)候添加些美妙的內(nèi)容了。

通常，你會(huì)希望將你的內(nèi)容分解為多個(gè)部分，尤其是對(duì)像本文這樣的大量文本內(nèi)容，因?yàn)闆]人喜歡閱讀這些難以理解的文本墻。

<section>派上用場(chǎng)了。這是在系列規(guī)則中最簡(jiǎn)單的一個(gè)：從結(jié)構(gòu)上講，它基本上只是一個(gè)具有特殊含義的<div>。一個(gè)<section>開始一個(gè)新的"sectioning content"區(qū)域，因此它可以有自己的<header>和<footer>。

那么，<section>和普通的舊<div>之間有什么區(qū)別，然后，你應(yīng)該在什么時(shí)候使用它們呢？好吧，允許我再次引用規(guī)范：

筆記：
元素不是通用容器元素。當(dāng)一個(gè)元素僅是用于樣式目的或?yàn)槟_本編寫提供便利的時(shí)候，鼓勵(lì)作者使用[div](https://www.w3.org/TR/html5/grouping-content.html#elementdef-div)元素。一般規(guī)則是元素僅在元素內(nèi)容在文本[大綱](https://www.w3.org/TR/html5/sections.html#outline)中明確列出時(shí)候才適用。-- [https://www.w3.org/TR/html5/sections.html#the-section-element](https://www.w3.org/TR/html5/sections.html#the-section-element)

你知道，概述來說，HTML5規(guī)范實(shí)際上是可讀的。它是那個(gè)比較可讀的規(guī)范之一。每當(dāng)我瀏覽它以獲取快速答復(fù)時(shí)，我都不可避免地學(xué)到一些意想不到的和有用的東西，尤其是當(dāng)我開始點(diǎn)擊鏈接的時(shí)候。有時(shí)（你也）試試吧！

簡(jiǎn)而言之，如果要在目錄中列出文檔的一部分，請(qǐng)使用<section>。如果沒有，請(qǐng)使用<div>或其它元素。

內(nèi)容指標(biāo)

很好，我們已經(jīng)得到了一個(gè)堅(jiān)固的頁面結(jié)構(gòu)。我們已經(jīng)明確標(biāo)記了頁面的主要內(nèi)容區(qū)域，而不僅僅是單獨(dú)調(diào)整<div>，我們已經(jīng)調(diào)整出了頁眉，頁腳和章節(jié)。但是，肯定還有比我們的文檔更多的語義。

讓我們來談?wù)凥TML5中添加的一些元素，它們傳達(dá)的內(nèi)容語義而不是結(jié)構(gòu)。

整體：<article>

<article>元素用于表示完全獨(dú)立的內(nèi)容區(qū)域，這些內(nèi)容可以從頁面中提取出來并放入另一個(gè)內(nèi)容中，并且仍然有意義。這可能是文字文章或博客，但也可用于社交媒體帖子，如推特或臉書的墻貼。

HTML5規(guī)范建議文章總有一個(gè)標(biāo)題，標(biāo)識(shí)它是什么，理想的情況下使用標(biāo)題元素(<h1>-<h6>)。<article>也可以有<header>，<footer>和<section>元素，因此你可以使用它來嵌入一個(gè)完整的文檔片段，其中包含其它頁面中所需的所有結(jié)構(gòu)。

從上面的方式返回到示例，我們使用<article>和我們討論的其它一些元素來重寫帶class="article-*"的元素。

<article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
復(fù)制代碼

這不是比原來更具可讀性嗎？而且，不僅更容易閱讀，它對(duì)輔助技術(shù)更有用；機(jī)器人不能總是弄清楚你的特定類名模式，但是它們可以遵循這種結(jié)構(gòu)。

使用：<nav>

這個(gè)元素比其它元素更有名。<nav>旨在清楚地識(shí)別頁面上的主要導(dǎo)航塊，幫助用戶圍繞站點(diǎn)其余部分找到路徑的鏈接組（例如站點(diǎn)地圖或標(biāo)題中的鏈接列表）或當(dāng)前頁面（例如目錄）。

在我們的示例頂部，讓我們將<nav>應(yīng)用于標(biāo)題中的那組鏈接。

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/archive">Archive</a>
</nav>
復(fù)制代碼

根本不改變結(jié)構(gòu)，但你知道它是什么，一目了然而不需要在<div>上讀物和處理類名來找到它，更重要的是機(jī)器人也可以找到它。

接觸：<address>

我們要討論的最后一個(gè)元素是<address>。這個(gè)元素旨在調(diào)出聯(lián)系信息，它通常在主頁<footer>中用于標(biāo)記企業(yè)的郵寄地址，電話號(hào)碼，客戶服務(wù)郵箱地址等等。

有趣的是，如何在<address>元素中標(biāo)記內(nèi)容的規(guī)則是開放的。規(guī)范提到有幾個(gè)其它規(guī)范可以解決這個(gè)問題，并且提供這種級(jí)別的粒度可能超出了HTML本身的范圍。

常見的解決方案是RDFa，也是W3C規(guī)范，它使用標(biāo)簽上的屬性來標(biāo)記數(shù)據(jù)的不同組件。下面是我們示例中的頁腳在標(biāo)記<address>元素和RDFa時(shí)可能看起來的樣子：

<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>
復(fù)制代碼

無疑，RDFa有點(diǎn)冗長(zhǎng)，但它對(duì)于標(biāo)記數(shù)據(jù)非常方便。如果你有興趣了解有關(guān)RDFa的更多信息，請(qǐng)點(diǎn)擊以下鏈接：

The W3C's RDFa primer
A description of schemas and links to a bunch of them on schema.org
The LocalBusiness schema used above

總結(jié)

好了，我們已經(jīng)介紹了很多，我們已經(jīng)看到很多零零散散的元素應(yīng)用到我們的例子中。那么，讓我們把它們放在一起看看它的樣子。

<header>
    <h1>Super duper best blog ever</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>
復(fù)制代碼

如果你問我（怎么看改造后的內(nèi)容？），那這比原始例子的可讀性高100倍，而且對(duì)于搜索引擎優(yōu)化和可訪問性目的而言，其效率將提高100倍。

這些絕不是HTML中唯一的語義元素。有很多其它元素可以幫助你標(biāo)記和構(gòu)建你的文本內(nèi)容，嵌入媒體資源等等。如果你喜歡這個(gè)并且希望深入挖掘，這里有一些（標(biāo)簽）可以查看下。你可能認(rèn)識(shí)一些：

<aside>
<blockquote>
<cite>
code
<data>
<del>
<figure>
<ins>
<time>
<var>

這只是一個(gè)開始！就像我說的，當(dāng)你開始閱讀HTML規(guī)范時(shí)，很難停下來。它是種非常豐富的語言，我認(rèn)為人們經(jīng)常會(huì)低估這種語言。

前在項(xiàng)目的過程中遇到了一個(gè)問題，某個(gè) div 希望始終顯示在最上面，而在之后的元素都顯示在它之下，當(dāng)時(shí)設(shè)置了 z-index 也沒有效果，不知道什么原因，因此找了一下 CSS 相關(guān)資料，解決了這個(gè)問題的同時(shí)，也學(xué)習(xí)了很多知識(shí)，特此和大家分享一下。

屏幕是一個(gè)二維平面，然而 HTML 元素卻是排列在三維坐標(biāo)系中， x 為水平方向， y 為垂直方向， z為屏幕由內(nèi)向外方向，我們?cè)诳雌聊坏臅r(shí)候是沿著 z 軸方向從外向內(nèi)的。由此，元素在用戶視角就形成了層疊的關(guān)系，某個(gè)元素可能覆蓋了其他元素也可能被其他元素覆蓋；

這里有幾個(gè)重要的概念：層疊上下文 (堆疊上下文, Stacking Context)、層疊等級(jí) (層疊水平, Stacking Level)、層疊順序 (層疊次序, 堆疊順序, Stacking Order)、z-index、BFC（塊級(jí)格式化上下文，Block Formatting Context），這些概念共同決定了你看到元素的位置，下面我們就圍繞著這幾個(gè)概念來一起學(xué)習(xí)一下。

聲明：

以下定位元素指的是 position:absolute|fixed|relative|sticky
以下非定位元素指的是 position:initial|static
本文蠻長(zhǎng)的，但是如果你可以仔細(xì)看完，那對(duì)相關(guān)概念的掌握就非常好了 (～o￣▽￣)～

1. 層疊上下文 (Stacking Context)

層疊上下文 (堆疊上下文, Stacking Context)，是 HTML 中一個(gè)三維的概念。在 CSS2.1 規(guī)范中，每個(gè)元素的位置是三維的，當(dāng)元素發(fā)生層疊，這時(shí)它可能覆蓋了其他元素或者被其他元素覆蓋；排在 z 軸越靠上的位置，距離屏幕觀察者越近。

文章 <關(guān)于z-index 那些你不知道的事> 有一個(gè)很好的比喻，這里引用一下；

可以想象一張桌子，上面有一堆物品，這張桌子就代表著一個(gè)層疊上下文。如果在第一張桌子旁還有第二張桌子，那第二張桌子就代表著另一個(gè)層疊上下文。現(xiàn)在想象在第一張桌子上有四個(gè)小方塊，他們都直接放在桌子上。在這四個(gè)小方塊之上有一片玻璃，而在玻璃片上有一盤水果。這些方塊、玻璃片、水果盤，各自都代表著層疊上下文中一個(gè)不同的層疊層，而這個(gè)層疊上下文就是桌子。

每一個(gè)網(wǎng)頁都像一個(gè)房間，這個(gè)房間就是 <html></html>，其他層疊上下文就像這個(gè)房間里的桌子，HTML 標(biāo)簽中的一切都被置于這個(gè)房間中。

當(dāng)給一個(gè)元素的 position 值賦為 fixed 或 sticky 值時(shí)，你就創(chuàng)建了一個(gè)新的層疊上下文，其中有著獨(dú)立于頁面上其他層疊上下文和層疊層的層疊層，這就相當(dāng)于你把另一張桌子帶到了房間里。

層疊上下文 1 (Stacking Context 1)是由文檔根元素形成的，層疊上下文 2 和 3 (Stacking Context 2, 3) 都是層疊上下文 1 (Stacking Context 1) 上的層疊層。他們各自也都形成了新的層疊上下文，其中包含著新的層疊上下文。

在層疊上下文中，其子元素按照上面解釋的規(guī)則進(jìn)行層疊。形成層疊上下文的方法有：

根元素 <html></html>；
position 值為 absolute|relative，且 z-index 值不為 auto；
position 值為 fixed|sticky；
z-index 值不為 auto 的 flex 元素，即父元素屬性 display:flex|inline-flex；
opacity 屬性值小于 1 的元素；
transform 屬性值不為 none 的元素；
mix-blend-mode 屬性值不為 normal 的元素；
filter、 perspective、 clip-path、 mask、 mask-image、 mask-border、 motion-path值不為 none 的元素；
perspective 值不為 none 的元素；
isolation 屬性被設(shè)置為 isolate 的元素；
will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值
-webkit-overflow-scrolling 屬性設(shè)置為 touch 的元素；

總結(jié):

層疊上下文可以包含在其他層疊上下文中，并且一起組建了一個(gè)有層級(jí)的層疊上下文；
每個(gè)層疊上下文完全獨(dú)立于它的兄弟元素，當(dāng)處理層疊時(shí)只考慮子元素，類似于 BFC；
每個(gè)層疊上下文是自包含的：當(dāng)元素的內(nèi)容發(fā)生層疊后，整個(gè)該元素將會(huì)在父級(jí)疊上下文中按順序進(jìn)行層疊；

2. 層疊等級(jí) (Stacking Level)

層疊等級(jí) (層疊水平, Stacking Level) 決定了在同一個(gè)層疊上下文中，元素在 z 軸上的顯示的順序；

普通元素的層疊等級(jí)優(yōu)先由其所在的層疊上下文決定；
層疊等級(jí)的比較，只有在同一個(gè)層疊上下文元素中才有意義；
在同一個(gè)層疊上下文中，層疊等級(jí)描述定義的是該層疊上下文中的元素在 z 軸上的上下順序；

對(duì)于普通元素的層疊水平探討只局限于在當(dāng)前層疊上下文中：

層疊上下文本身是一個(gè)強(qiáng)力的「層疊結(jié)界」，普通的元素水平是無法突破這個(gè)結(jié)界和結(jié)界外的元素去較量層疊水平的。
— CSS 世界

另外，層疊等級(jí)并不一定由 z-index 決定，只有定位元素的層疊等級(jí)才由 z-index 決定，其他類型元素的層疊等級(jí)由層疊順序、他們?cè)?HTML 中出現(xiàn)的順序、他們的祖先元素的層疊等級(jí)一同決定，詳細(xì)的規(guī)則見下面層疊順序的介紹。

3. z-index

在 CSS 2.1 中, 所有的盒模型元素都處于三維坐標(biāo)系中。除了我們常用的橫坐標(biāo)和縱坐標(biāo)，盒模型元素還可以沿著「z 軸」層疊擺放，當(dāng)他們相互覆蓋時(shí)，z 軸順序就變得十分重要。
-- CSS 2.1 Section 9.9.1 - Layered presentation

z-index 只適用于定位的元素，對(duì)非定位元素?zé)o效，它可以被設(shè)置為正整數(shù)、負(fù)整數(shù)、 0、 auto，如果一個(gè)定位元素沒有設(shè)置 z-index，那么默認(rèn)為 auto；

元素的 z-index 值只在同一個(gè)層疊上下文中有意義。如果父級(jí)層疊上下文的層疊等級(jí)低于另一個(gè)層疊上下文的，那么它 z-index 設(shè)的再高也沒用。所以如果你遇到 z-index 值設(shè)了很大，但是不起作用的話，就去看看它的父級(jí)層疊上下文是否被其他層疊上下文蓋住了。

4. 層疊順序 (Stacking Order)

層疊順序 (層疊次序, 堆疊順序, Stacking Order) 描述的是元素在同一個(gè)層疊上下文中的順序規(guī)則（之前的層疊上下文和層疊等級(jí)是概念），從層疊的底部開始，共有七種層疊順序：

背景和邊框：形成層疊上下文的元素的背景和邊框。
負(fù) z-index 值：層疊上下文內(nèi)有著負(fù) z-index 值的定位子元素，負(fù)的越大層疊等級(jí)越低；
塊級(jí)盒：文檔流中的塊級(jí)、非定位子元素；
浮動(dòng)盒：非定位浮動(dòng)元素；
行內(nèi)盒：文檔流中行內(nèi)、非定位子元素；
z-index: 0： z-index 為 0 或 auto 的定位元素，這些元素形成了新的層疊上下文；
正 z-index 值： z-index 為正的定位元素，正的越大層疊等級(jí)越高；

第 7 級(jí)順序的元素會(huì)顯示在之前順序元素的上方，也就是看起來覆蓋了更低級(jí)的元素：

除層疊順序優(yōu)先級(jí)規(guī)則之外，還有一條后來居上規(guī)則：同一個(gè)層疊順序的元素按照在 HTML 里出現(xiàn)的順序依次層疊。這兩個(gè)規(guī)則共同決定瀏覽器元素在文檔中是如何層疊的。

5. 文檔流 (Document Flow)

5.1 常規(guī)流 (Normal flow)

在常規(guī)流中，盒一個(gè)接著一個(gè)排列;
在塊級(jí)格式化上下文里面，它們豎著排列；
在行內(nèi)格式化上下文里面，它們橫著排列;
當(dāng) position 為 static 或 relative，并且 float 為 none 時(shí)會(huì)觸發(fā)常規(guī)流；
對(duì)于靜態(tài)定位(static positioning)， position:static，盒的位置是常規(guī)流布局里的位置；
對(duì)于相對(duì)定位(relative positioning)， position:relative，盒偏移位置由 top、 bottom、 left、 right 屬性定義。即使有偏移，仍然保留原有的位置，其它常規(guī)流不能占用這個(gè)位置。

5.2 浮動(dòng) (Floats)

左浮動(dòng)元素盡量靠左、靠上，右浮動(dòng)同理；
這導(dǎo)致常規(guī)流環(huán)繞在它的周邊，除非設(shè)置 clear 屬性；
浮動(dòng)元素不會(huì)影響塊級(jí)元素的布局；
但浮動(dòng)元素會(huì)影響行內(nèi)元素的布局，讓其圍繞在自己周圍，撐大父級(jí)元素，從而間接影響塊級(jí)元素布局；
最高點(diǎn)不會(huì)超過當(dāng)前行的最高點(diǎn)、它前面的浮動(dòng)元素的最高點(diǎn)；
不超過它的包含塊，除非元素本身已經(jīng)比包含塊更寬；
行內(nèi)元素出現(xiàn)在左浮動(dòng)元素的右邊和右浮動(dòng)元素的左邊，左浮動(dòng)元素的左邊和右浮動(dòng)元素的右邊是不會(huì)擺放浮動(dòng)元素的；

5.3 絕對(duì)定位 (Absolute positioning)

絕對(duì)定位方案，盒從常規(guī)流中被移除，不影響常規(guī)流的布局；
它的定位相對(duì)于它的包含塊，相關(guān) CSS 屬性： top、 bottom、 left、 right；
如果元素的屬性 position 為 absolute 或 fixed，它是絕對(duì)定位元素；
對(duì)于 position:absolute，元素定位將相對(duì)于上級(jí)元素中最近的一個(gè) relative、 fixed、 absolute，如果沒有則相對(duì)于 body；

6. BFC （Block Formatting Context）

6.1 什么是 BFC

BFC (Block Formatting Context) 塊級(jí)格式化上下文，是用于布局塊級(jí)盒子的一塊渲染區(qū)域，相對(duì)應(yīng)的還有 IFC（Inline Formatting Context）內(nèi)聯(lián)格式化上下文，不是本文重點(diǎn)，讀者可以自行查閱相關(guān)知識(shí)。

BFC 是 Web 頁面 CSS 視覺渲染的一部分，用于決定塊盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域。
— MDN - 塊格式化上下文

一個(gè) BFC 的范圍包含創(chuàng)建該上下文元素的所有子元素，但不包括創(chuàng)建了新 BFC 的子元素的內(nèi)部元素。這從另一方角度說明，一個(gè)元素不能同時(shí)存在于兩個(gè) BFC 中。因?yàn)槿绻粋€(gè)元素能夠同時(shí)處于兩個(gè) BFC 中，那么就意味著這個(gè)元素能與兩個(gè) BFC 中的元素發(fā)生作用，就違反了 BFC 的隔離作用。

觸發(fā) BFC 的方式有：

根元素，即 HTML 標(biāo)簽;
浮動(dòng)元素，即 float 值為 left、 right;
overflow 值不為 visible，即值為 auto、 scroll、 hidden；
display 值為 inline-block、 table-cell、 table-caption、 table、 inline-table、 flex、 inline-flex、 grid、 inline-grid；
定位元素： position 值為 absolute、 fixed；
contain 為 layout、 content、 paint 的元素；

注意： display:table 也可以生成 BFC 的原因在于 Table 會(huì)默認(rèn)生成一個(gè)匿名的 table-cell，是這個(gè)匿名的 table-cell 生成了 BFC。

6.2 用法

1. 阻止相鄰元素的 margin 合并

屬于同一個(gè) BFC 的兩個(gè)相鄰塊級(jí)子元素的上下 margin 會(huì)發(fā)生重疊，(設(shè)置 writing-mode:tb-rl時(shí)，水平 margin 會(huì)發(fā)生重疊)。所以當(dāng)兩個(gè)相鄰塊級(jí)子元素分屬于不同的 BFC 時(shí)可以阻止 margin 重疊。可以給任一個(gè)相鄰塊級(jí)盒子的外面包一個(gè) div，通過改變此 div 的屬性使兩個(gè)原盒子分屬于兩個(gè)不同的 BFC，以此來阻止 margin 重疊。

代碼和預(yù)覽參見：Codepen - 使用BFC阻止margin合并：https://codepen.io/SHERlocked93/pen/eVOevN

2. 阻止元素被浮動(dòng)元素覆蓋

一個(gè)正常文檔流的塊級(jí)元素可能被一個(gè) float 元素覆蓋，擠占正常文檔流，因此可以設(shè)置一個(gè)元素的 float、 display、 position 值等方式觸發(fā) BFC，以阻止被浮動(dòng)盒子覆蓋。

代碼和預(yù)覽參見：Codepen - 使用BFC阻止元素被浮動(dòng)元素覆蓋：https://codepen.io/SHERlocked93/pen/pazdzB

3. 包含浮動(dòng)元素

通過改變包含浮動(dòng)子元素的父盒子的屬性值，觸發(fā) BFC，以此來包含子元素的浮動(dòng)盒子。

代碼和預(yù)覽參見：Codepen - 使用BFC包含浮動(dòng)元素：https://codepen.io/SHERlocked93/pen/OQLOqG

7. 實(shí)戰(zhàn)

下面一起來看幾個(gè)例子實(shí)戰(zhàn)一下，幫助理解。

7.1 普通情況

三個(gè) relative 定位的 div 塊中各有 absolute 的不同顏色的 span.red、 span.green、 span.blue，它們都設(shè)置了 position:absolute；

代碼和預(yù)覽參見：Codepen - 普通情況：https://codepen.io/SHERlocked93/pen/aaPord

那么當(dāng)沒有元素包含 z-index 屬性時(shí)，這個(gè)例子中的元素按照如下順序?qū)盈B（從底到頂順序）：

根元素的背景和邊界；
塊級(jí)非定位元素按 HTML 中的出現(xiàn)順序?qū)盈B；
行內(nèi)非定位元素按 HTML 中的出現(xiàn)順序?qū)盈B；
定位元素按 HTML中的出現(xiàn)順序?qū)盈B；

紅綠藍(lán)都屬于 z-index 為 auto 的定位元素，因此按照 7 層層疊順序規(guī)則來說同屬于層疊順序第 6 級(jí)，所以按 HTML 中的出現(xiàn)順序?qū)盈B：紅->綠->藍(lán)

7.2 在相同層疊上下文的父元素內(nèi)的情況

紅綠位于一個(gè) div.first-box 下，藍(lán)位于 div.second-box 下，紅綠藍(lán)都設(shè)置了 position:absolute， first-box 與 second-box 都設(shè)置了 position:relative；

代碼和預(yù)覽參見：Codepen - 父元素不同但都位于根元素下：https://codepen.io/SHERlocked93/pen/RYENBw

這個(gè)例子中，紅藍(lán)綠元素的父元素 first-box 與 second-box 都沒有生成新的層疊上下文，都屬于根層疊上下文中的元素，且都是層疊順序第 6 級(jí)，所以按 HTML 中的出現(xiàn)順序?qū)盈B：紅->綠->藍(lán)

7.3 給子元素增加 z-index

紅綠位于一個(gè) div.first-box 下，藍(lán)黃位于 div.second-box 下，紅綠藍(lán)都設(shè)置了 position:absolute，如果這時(shí)給綠加一個(gè)屬性 z-index:1，那么此時(shí) .green 位于最上面；

如果再在 .second-box 下 .green 后加一個(gè)絕對(duì)定位的 span.gold，設(shè)置 z-index:-1，那么它將位于紅綠藍(lán)的下面；

代碼和預(yù)覽參見：Codepen - 設(shè)置了z-index：https://codepen.io/SHERlocked93/pen/gdZOrK

這個(gè)例子中，紅藍(lán)綠黃元素的父元素中都沒有生成新的層疊上下文，都屬于根層疊上下文中的元素

紅藍(lán)都沒有設(shè)置 z-index，同屬于層疊順序中的第 6 級(jí)，按 HTML 中的出現(xiàn)順序?qū)盈B；
綠設(shè)置了正的 z-index，屬于第 7 級(jí)；
黃設(shè)置了負(fù)的 z-index，屬于第 2 級(jí)；

所以這個(gè)例子中的從底到高顯示的順序就是：黃->紅->藍(lán)->綠

7.4 在不同層疊上下文的父元素內(nèi)的情況

紅綠位于一個(gè) div.first-box 下，藍(lán)位于 div.second-box 下，紅綠藍(lán)都設(shè)置了 position:absolute，如果 first-box 的 z-index 設(shè)置的比 second-box 的大，那么此時(shí)無論藍(lán)的 z-index 設(shè)置的多大 z-index:999，藍(lán)都位于紅綠的下面；如果我們只更改紅綠的 z-index 值，由于這兩個(gè)元素都在父元素 first-box 產(chǎn)生的層疊上下文中，此時(shí)誰的 z-index 值大，誰在上面；

代碼和預(yù)覽參見：Codepen - 不同層疊上下文的父元素：https://codepen.io/SHERlocked93/pen/gdZbOJ

這個(gè)例子中，紅綠藍(lán)都屬于設(shè)置了 z-index 的定位元素，不過他們的父元素創(chuàng)建了新的層疊上下文；

紅綠的父元素 first-box 是設(shè)置了正 z-index 的定位元素，因此創(chuàng)建了一個(gè)層疊上下文，屬于層疊順序中的第 7 級(jí)；
藍(lán)的父元素 second-box 也同樣創(chuàng)建了一個(gè)層疊上下文，屬于層疊順序中的第6級(jí)；
按照層疊順序， first-box 中所有元素都排在 second-box 上；
紅綠都屬于層疊上下文 first-box 中且設(shè)置了不同的正 z-index，都屬于層疊順序中第 7 級(jí)；
藍(lán)屬于層疊上下文 second-box，且設(shè)置了一個(gè)很大的正 z-index，屬于層疊元素中第 7 級(jí)；
雖然藍(lán)的 z-index 很大，但是因?yàn)?second-box 的層疊等級(jí)比 first-box 小，因此位于紅綠之下；

所以這個(gè)例子中從低到到顯示的順序：藍(lán)->紅->綠

(我遇到的的情況就屬于這個(gè)例子類似情形)

7.5 給子元素設(shè)置 opacity

紅綠位于 div.first-box 下，藍(lán)位于 div.second-box 下，紅綠藍(lán)都設(shè)置了 position:absolute，綠設(shè)置了 z-index:1，那么此時(shí)綠位于紅藍(lán)的最上面；

如果此時(shí)給 first-box 設(shè)置 opacity:.99，這時(shí)無論紅綠的 z-index 設(shè)置的多大 z-index:999，藍(lán)都位于紅綠的上面；

如果再在 .second-box 下 .green 后加一個(gè) span.gold，設(shè)置 z-index:-1，那么它將位于紅綠藍(lán)的下面；

代碼和預(yù)覽參見：Codepen - opacity的影響：https://codepen.io/SHERlocked93/pen/GXPRWB

之前已經(jīng)介紹了，設(shè)置 opacity 也可以形成層疊上下文，因此：

first-box 設(shè)置了 opacity， first-box 成為了一個(gè)新的層疊上下文；
second-box 沒有形成新的層疊上下文，因此其中的元素都屬于根層疊上下文；
黃屬于層疊順序中第 2 級(jí)，紅綠屬于第 7 級(jí)， first-box 屬于第 6 級(jí)，藍(lán)屬于層疊順序中第6級(jí)且按HTML出現(xiàn)順序位于 first-box 之上；

所以這個(gè)例子中從低到到顯示的順序：黃->紅->綠->藍(lán)

關(guān)注微信公眾號(hào)：安徽思恒信息科技有限公司,了解更多技術(shù)內(nèi)容……

據(jù)來自MDN整理https://developer.mozilla.org/

文檔元數(shù)據(jù)

元數(shù)據(jù)（Metadata）含有頁面的相關(guān)信息，包括樣式、腳本及數(shù)據(jù)，能幫助一些軟件（例如搜索引擎、瀏覽器等等）更好地運(yùn)用和渲染頁面。對(duì)于樣式和腳本的元數(shù)據(jù)，可以直接在網(wǎng)頁里定義，也可以鏈接到包含相關(guān)信息的外部文件

<base>
HTML <base> 元素指定用于一個(gè)文檔中包含的所有相對(duì) URL 的根 URL。一份中只能有一個(gè) <base> 元素
<head>
HTML head 元素規(guī)定文檔相關(guān)的配置信息（元數(shù)據(jù)），包括文檔的標(biāo)題，引用的文檔樣式和腳本等。
<link>
HTML外部資源鏈接元素 (<link>) 規(guī)定了當(dāng)前文檔與外部資源的關(guān)系。該元素最常用于鏈接樣式表，此外也可以被用來創(chuàng)建站點(diǎn)圖標(biāo)(比如PC端的“favicon”圖標(biāo)和移動(dòng)設(shè)備上用以顯示在主屏幕的圖標(biāo))
<meta>
HTML <meta> 元素表示那些不能由其它HTML元相關(guān)元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元數(shù)據(jù)信息
<style>
HTML的<style>元素包含文檔的樣式信息或者文檔的部分內(nèi)容。默認(rèn)情況下，該標(biāo)簽的樣式信息通常是CSS的格式
<title>
HTML <title> 元素定義文檔的標(biāo)題，顯示在瀏覽器的標(biāo)題欄或標(biāo)簽頁上。它只可以包含文本，若是包含有標(biāo)簽，則包含的任何標(biāo)簽都不會(huì)被解釋

內(nèi)容分區(qū)

內(nèi)容分區(qū)元素允許你將文檔內(nèi)容從邏輯上進(jìn)行組織劃分。使用包括頁眉(header)、頁腳(footer)、導(dǎo)航(nav)和標(biāo)題(h3~h6)等分區(qū)元素，來為頁面內(nèi)容創(chuàng)建明確的大綱，以便區(qū)分各個(gè)章節(jié)的內(nèi)容。

<address>
HTML <address> 元素表示其中的 HTML 提供了某個(gè)人或某個(gè)組織（等等）的聯(lián)系信息
<article>
HTML <article>元素表示文檔、頁面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，其意在成為可獨(dú)立分配的或可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目
<aside>
HTML <aside> 元素表示一個(gè)和其余頁面內(nèi)容幾乎無關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分并且可以被單獨(dú)的拆分出來而不會(huì)使整體受影響
<footer>
HTML <footer> 元素表示最近一個(gè)章節(jié)內(nèi)容或者根節(jié)點(diǎn)（sectioning root ）元素的頁腳。一個(gè)頁腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息
<header>
HTML <header> 元素用于展示介紹性內(nèi)容，通常包含一組介紹性的或是輔助導(dǎo)航的實(shí)用元素。它可能包含一些標(biāo)題元素，但也可能包含其他元素，比如 Logo、搜索框、作者名稱，等等
<h1>~<h6>
HTML <h1>–<h6> 標(biāo)題(Heading)元素呈現(xiàn)了六個(gè)不同的級(jí)別的標(biāo)題，<h1> 級(jí)別最高，而 <h6> 級(jí)別最低
<hgroup>
HTML <hgroup> Element (HTML Headings Group Element) 代表一個(gè)段的標(biāo)題。它規(guī)定了在文檔輪廓里（the outline of the document ）的單一標(biāo)題是它所屬的隱式或顯式部分的標(biāo)題
<main>
HTML <main> 元素呈現(xiàn)了文檔的 <body> 或應(yīng)用的主體部分。主體部分由與文檔直接相關(guān)，或者擴(kuò)展于文檔的中心主題、應(yīng)用的主要功能部分的內(nèi)容組成
<nav>
HTML <nav>元素表示頁面的一部分，其目的是在當(dāng)前文檔或其他文檔中提供導(dǎo)航鏈接。導(dǎo)航部分的常見示例是菜單，目錄和索引
<section>
HTML <section>元素表示一個(gè)包含在HTML文檔中的獨(dú)立部分，它沒有更具體的語義元素來表示，一般來說會(huì)有包含一個(gè)標(biāo)題

文本內(nèi)容

使用 HTML 文本內(nèi)容元素來組織在開標(biāo)簽 <body> 和閉標(biāo)簽 </body> 里的塊或章節(jié)的內(nèi)容。這些元素能標(biāo)識(shí)內(nèi)容的宗旨或結(jié)構(gòu)，而這對(duì)于 accessibility 和 SEO 很重要。

<blockquote>
HTML <blockquote> 元素（或者 HTML 塊級(jí)引用元素），代表其中的文字是引用內(nèi)容。通常在渲染時(shí)，這部分的內(nèi)容會(huì)有一定的縮進(jìn)（注中說明了如何更改）。若引文來源于網(wǎng)絡(luò)，則可以將原內(nèi)容的出處 URL 地址設(shè)置到 cite 特性上，若要以文本的形式告知讀者引文的出處時(shí)，可以通過 <cite> 元素
<dd>
HTML <dd> 元素（HTML 描述元素）用來指明一個(gè)描述列表 (<dl>) 元素中一個(gè)術(shù)語的描述。這個(gè)元素只能作為描述列表元素的子元素出現(xiàn)，并且必須跟著一個(gè) <dt> 元素
<div>
HTML <div> 元素 (或 HTML 文檔分區(qū)元素) 是一個(gè)通用型的流內(nèi)容容器
<dl>
HTML <dl> 元素（或 HTML 描述列表元素）是一個(gè)包含術(shù)語定義以及描述的列表，通常用于展示詞匯表或者元數(shù)據(jù) (鍵-值對(duì)列表)
<dt>
HTML <dt> 元素（或 HTML 術(shù)語定義元素）用于在一個(gè)定義列表中聲明一個(gè)術(shù)語。該元素僅能作為 <dl> 的子元素出現(xiàn)。通常在該元素后面會(huì)跟著 <dd> 元素，然而，多個(gè)連續(xù)出現(xiàn)的 <dt> 元素都將由出現(xiàn)在它們后面的第一個(gè) <dd> 元素定義
<figcaption>
HTML <figcaption> 元素是與其相關(guān)聯(lián)的圖片的說明/標(biāo)題，用?于描述其父節(jié)點(diǎn) <figure> 元素里的其他數(shù)據(jù)。這意味著 <figcaption> 在<figure> 塊里是第一個(gè)或最后一個(gè)。同時(shí) HTML Figcaption 元素是可選的；如果沒有該元素，這個(gè)父節(jié)點(diǎn)的圖片只是會(huì)沒有說明/標(biāo)題
<figure>
HTML <figure> 元素代表一段獨(dú)立的內(nèi)容, 經(jīng)常與說明（caption） <figcaption> 配合使用, 并且作為一個(gè)獨(dú)立的引用單元。當(dāng)它屬于主內(nèi)容流（main flow）時(shí)，它的位置獨(dú)立于主體。這個(gè)標(biāo)簽經(jīng)常是在主文中引用的圖片，插圖，表格，代碼段等等，當(dāng)這部分轉(zhuǎn)移到附錄中或者其他頁面時(shí)不會(huì)影響到主體
<hr>
HTML <hr> 元素表示段落級(jí)元素之間的主題轉(zhuǎn)換（例如，一個(gè)故事中的場(chǎng)景的改變，或一個(gè)章節(jié)的主題的改變）。在HTML的早期版本中，它是一個(gè)水平線。現(xiàn)在它仍能在可視化瀏覽器中表現(xiàn)為水平線，但目前被定義為語義上的，而不是表現(xiàn)層面上
<li>
HTML<li> 元素（或稱 HTML 列表?xiàng)l目元素） 用于表示列表里的條目。它必須包含在一個(gè)父元素里：一個(gè)有序列表(<ol>)，一個(gè)無序列表(<ul>)，或者一個(gè)菜單 (<menu>)。在菜單或者無序列表里，列表?xiàng)l目通常用點(diǎn)排列顯示；在有序列表里，列表?xiàng)l目通常在左邊顯示按升序排列的計(jì)數(shù)，例如數(shù)字或者字母
<main>
HTML <main> 元素呈現(xiàn)了文檔的 <body> 或應(yīng)用的主體部分。主體部分由與文檔直接相關(guān)，或者擴(kuò)展于文檔的中心主題、應(yīng)用的主要功能部分的內(nèi)容組成
<ol>
HTML <ol> 元素表示多個(gè)有序列表項(xiàng)，通常渲染為有帶編號(hào)的列表
<p>
<p>元素（或者說 HTML 段落元素）表示文本的一個(gè)段落。該元素通常表現(xiàn)為一整塊與相鄰文本分離的文本，或以垂直的空白隔離或以首行縮進(jìn)。另外，<p> 是塊級(jí)元素
<pre>
HTML <pre> 元素表示預(yù)定義格式文本。在該元素中的文本通常按照原文件中的編排，以等寬字體的形式展現(xiàn)出來，文本中的空白符（比如空格和換行符）都會(huì)顯示出來。(緊跟在 <pre> 開始標(biāo)簽后的換行符也會(huì)被省略)
<ul>
HTML <ul> 元素（或稱 HTML 無序列表元素）表示一個(gè)內(nèi)可含多個(gè)元素的無序列表或項(xiàng)目符號(hào)列表

內(nèi)聯(lián)文本語義

使用 HTML 內(nèi)聯(lián)文本語義（Inline text semantics）定義一個(gè)單詞、一行內(nèi)容，或任意文字的語義、結(jié)構(gòu)或樣式。

圖片和多媒體

HTML 支持各種多媒體資源，例如圖像、音頻和視頻。

內(nèi)嵌內(nèi)容

除了常規(guī)的多媒體內(nèi)容，HTML 可以包括各種其他的內(nèi)容，即使它并不容易交互。

腳本

為了創(chuàng)建動(dòng)態(tài)內(nèi)容和 Web 應(yīng)用程序，HTML 支持使用腳本語言，最突出的就是 JavaScript。某些元素用于支持此功能。

編輯標(biāo)識(shí)

這些元素能標(biāo)示出某個(gè)文本被更改過的部分。

表格內(nèi)容

這里的元素用于創(chuàng)建和處理表格數(shù)據(jù)。

表單

HTML 提供了許多可以起使用的元素，這些元素能用來創(chuàng)建一個(gè)用戶可以填寫并提交到網(wǎng)站或應(yīng)用程序的表單。

交互元素

HTML 提供了一系列有助于創(chuàng)建交互式用戶界面對(duì)象的元素。

過時(shí)的和棄用的元素

警告：下面這些舊的 HTML 元素已被棄用，且不應(yīng)再被使用。千萬不要在新的項(xiàng)目中使用它們，并且要盡快替換舊項(xiàng)目中的殘余。在此列出，僅供參考

在線咨詢

上一篇：掌握Django文件處理：一步步構(gòu)建上傳功能
下一篇：價(jià)值投資：數(shù)字貨幣可長(zhǎng)線持有的三種幣

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商