HTML5是一種新的HTML標(biāo)準(zhǔn)，為網(wǎng)頁開發(fā)者提供了許多新的標(biāo)簽，其中標(biāo)簽的位置設(shè)置也不例外。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5標(biāo)簽位置設(shè)置</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>這里是網(wǎng)站的頭部</h1> <nav> <ul> <li><a href="/">首頁</a></li> <li><a href="/about">關(guān)于我們</a></li> <li><a href="/contact">聯(lián)系我們</a></li> </ul> </nav> </header> <main> <h2>這里是文章標(biāo)題</h2> <p>這里是文章的第一個(gè)段落，我們可以使用<section>標(biāo)簽來劃分文章的節(jié)，還可以在<section>標(biāo)簽上使用<header>標(biāo)簽來標(biāo)識(shí)節(jié)的標(biāo)題，如下所示：</p> <pre> <section> <header>節(jié)標(biāo)題</header> <p>節(jié)的內(nèi)容</p> </section> </pre> <p>這里是文章的第二個(gè)段落，我們還可以使用<aside>標(biāo)簽來標(biāo)識(shí)與文章內(nèi)容相關(guān)但卻不是主要內(nèi)容的部分，如下所示：</p> <pre> <aside> <p>這里是推薦的相關(guān)文章列表</p> <ul> <li><a href="/article1">相關(guān)文章1</a></li> <li><a href="/article2">相關(guān)文章2</a></li> <li><a href="/article3">相關(guān)文章3</a></li> </ul> </aside> </pre> </main> <footer> <p>這里是網(wǎng)站的底部版權(quán)信息</p> </footer> </body> </html>
除了<section>和<aside>標(biāo)簽之外，還有許多可以用來標(biāo)識(shí)文章內(nèi)容和結(jié)構(gòu)的標(biāo)簽，例如<article>、<figure>和<figcaption>等等。