一、页面节点元素相关概念
二、section元素的使用
<!DOCTYPE html>
<html>
<head>
<title>页面结点元素</title>
<style type="text/css">
#Head{border-bottom:4px double #eee;
text-align:center;
font-size :20px
}
</style>
</head>
<body>
<article>
<header id=Head>
<h3>茗茶推荐——祁门红茶</h3>
</header>
<!-- ********* Begin ******* -->
<section >
<header><h3>什么是红茶</h3></header>
<p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
</section >
<!-- ********* End ********* -->
</article>
</body>
</html>
三、nav元素的使用
<!DOCTYPE html>
<html>
<head>
<title>页面结点元素</title>
<style type="text/css">
#Head{border-bottom:4px double #eee;
text-align:center;
font-size :20px
}
</style>
</head>
<body>
<article>
<header id=Head>
<h3>茗茶推荐——祁门红茶</h3>
<!-- ********* Begin ******* -->
<nav>
<a href="https://www.qmhtea.com/" title="主页">主页</a>
<a href="#" title="花茶及文化">花茶及文化</a>
</nav>
<!-- ********* End ********* -->
</header>
<section >
<header><h3>什么是红茶</h3></header>
<p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
</section >
</article>
</body>
</html>
四、footer元素和address元素的使用
<!DOCTYPE html>
<html>
<head>
<title>页面结点元素</title>
<style type="text/css">
#Head{border-bottom:4px double #eee;
text-align:center;
font-size :20px
}
</style>
</head>
<body>
<article>
<header id=Head>
<h3>茗茶推荐——祁门红茶</h3>
<nav>
<a href="https://www.qmhtea.com/" title="主页">主页</a>
<a href="#" title="花茶及文化">花茶及文化</a>
</nav>
</header>
<section >
<header><h3>什么是红茶</h3></header>
<p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
</section >
<hr/>
<!-- ********* Begin ******* -->
<footer>
<address>Written by<a href="mailto:webmaster@example.com">茗茶联系站</a></address>
<h4>©2020 Tyut</h4>
</footer>
<!-- ********* End ********* -->
</article>
</body>
</html>