educoder实训平台----页面结点元素
第1关：页面结点元素相关概念
BCDAB
第2关：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>
第3关：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>
第4关：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>
<h4>©2020 Tyut</h4>
<address>Written by<a href="mailto:webmaster@example.com">茗茶联系站</a></address>
</footer>
<!-- ********* End ********* -->
</article>
</body>
</html>