HTML 頁面內(nèi)容
2018-06-16 16:05 更新
HTML頁面內(nèi)容
Article 標(biāo)簽
article元素表示自包含HTML文檔中的內(nèi)容。
以下代碼顯示了正在使用的 article 元素。
<!DOCTYPE HTML>
<html>
</head>
<body>
<article>
<header>
<hgroup>
<h1 id="fruitsilike">H1Like</h1>
<h2>H2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1 id="morefruit">XML</h1>
This is a test.
<section>
<h1>HTML</h1>
This is a test.
</section>
</section>
<footer>
<nav>
Nav
</nav>
</footer>
</article>
</body>
</html>HTML Sections
section元素是HTML5的新功能，表示文檔的一部分。
section元素應(yīng)用于包含內(nèi)容將在文檔的大綱或目錄中列出。
段元素通常包含一個(gè)或多個(gè)內(nèi)容段落和標(biāo)題，但標(biāo)題是可選的。
以下代碼顯示了正在使用的section元素。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<section>
<hgroup>
<h1>H1</h1>
<h2>H2</h2>
</hgroup>
This is a test.
<section>
<h1>H1</h1>
This is a test.
<section>
<h1>More information</h1>
This is a test.
</section>
</section>
</section>
</body>
</html>HTML nav
nav 元素表示文檔的一個(gè)部分包含到其他頁面或同一頁面的其他部分的鏈接。
此元素標(biāo)識(shí)文檔的主要導(dǎo)航部分。
以下代碼顯示了使用 nav 元素。
<!DOCTYPE HTML>
<html>
<body>
<header>
<hgroup>
<h1>H1</h1>
<h2>by www.o2fo.com</h2>
</hgroup>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#fruitsilike">XML</a></li>
<ul>
<li><a href="#morefruit">HTML</a></li>
</ul>
<li><a href="#activitiesilike">CSS</a></li>
<ul>
<li><a href="#tritypes">Java</a></li>
<li><a href="#mytri">Javascript</a></li>
</ul>
</ul>
</nav>
</header>
<section>
<header>
<hgroup>
<h1 id="fruitsilike">Section h1</h1>
<h2>Section h2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1 id="morefruit">Inner H1</h1>
This is a test.
<section>
<h1>More information</h1>
This is a test.
</section>
</section>
</section>
<section>
<header>
<h1 id="activitiesilike">Activities</h1>
</header>
<section>
<p>This is a test.</p>
<h1 id="tritypes">Java</h1>
This is a test.
<section>
<h1 id="mytri">Javascript</h1>
</section>
</section>
</section>
<nav>
More Information: <a href="http://www.o2fo.com">Learn More About</a>
<a href="http://www.o2fo.com">Learn More About</a>
</nav>
<footer id="mainFooter">
©2011, www.o2fo.com. <a href="http://www.o2fo.com">Visit</a>
</footer>
</body>
</html>HTML Details
details 元素創(chuàng)建一個(gè)節(jié)，用戶可以展開該節(jié)以獲取有關(guān)主題的更多詳細(xì)信息。
details 元素通常包含一個(gè)摘要元素，用于為詳細(xì)信息部分創(chuàng)建標(biāo)簽或標(biāo)題。
以下代碼顯示如何使用摘要和詳細(xì)信息元素。
<!DOCTYPE HTML>
<html>
<head>
<style>
details {
border: solid thin black;
padding: 5px
}
details>summary {
font-weight: bold
}
</style>
</head>
<body>
<article>
<h1>H1</h1>
</header>
<section>
<p>This is a test.</p>
<details>
<summary>Summary</summary>
<ol>
<li>XML</li>
<li>HTML</li>
<li>CSS</li>
</ol>
</details>
</section>
</article>
</body>
</html>HTML Headers Footers
header 元素表示節(jié)的標(biāo)題。它可以包含任何您想要表示為頭部的內(nèi)容。
頭部元素通常包含一個(gè) h1?h6 元素或一個(gè) hgroup 元素，它還可以包含節(jié)的導(dǎo)航元素。
footer 元素是頁眉的補(bǔ)充，表示部分的頁腳。
頁腳通常包含關(guān)于版塊的摘要信息，并且可以包括作者的詳細(xì)信息，權(quán)限信息。
您可以在以下代碼中看到頁眉和頁腳元素。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<hgroup>
<h1>H1</h1>
<h2>by www.o2fo.com</h2>
</hgroup>
</header>
<section>
<header>
<hgroup>
<h1>Section h1</h1>
<h2>Section h2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1>Inner Section h1</h1>
This is a test.
<section>
<h1>More information</h1>
This is test.
</section>
</section>
</section>
<footer id="mainFooter">
©2015, www.o2fo.com. <a href="http://www.o2fo.com">Visit</a>
</footer>
</body>
</html>HTML aside
aside 元素表示僅與周圍元素相關(guān)的內(nèi)容。這類似于書或雜志中的側(cè)邊欄。
內(nèi)容與頁面，文章或部分的其余部分有關(guān)，但它不是主要流程的一部分。
下面的代碼添加和樣式 aside 元素。
<!DOCTYPE HTML>
<html>
<head>
<style>
article {
border: thin black solid;
padding: 10px;
margin-bottom: 5px
}
aside {
width: 40%;
background: white;
float: right;
border: thick solid black;
margin-left: 5px;
}
aside>section {
padding: 5px;
}
aside>h1 {
background: white;
color: black;
text-align: center
}
</style>
</head>
<body>
<article>
<header>
<hgroup>
<h1 id="fruitsilike">H1</h1>
<h2>H2</h2>
</hgroup>
</header>
<aside>
<h1>Why</h1>
<section>
This is a test:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</section>
</aside>
</article>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：