- header元素
- footer元素
- hgroup元素
- address元素
- 网页编排规则
1.header元素
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>header元素</title>
</head>
<body>
<header>
<h1>孙叫兽演示一下header元素之IT最新技术</h1>
<a href="http://www.baidu.com">IT健身网站</a>
<nav>
<h2>前端知识</h2>
<ul>
<li><a href="#">学习</a></li>
<li><a href="#">编程</a></li>
<li><a href="#">健身</a></li>
</ul>
</nav>
</header>
</body>
</html>
效果演示：
2.footer元素
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>footer元素</title>
</head>
<body>
<footer>
<ul>
<li><a href="#">版权信息</a></li>
<li><a href="#">地图标记</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</footer>
</body>
</html>
效果演示：
3.hgroup元素（这个现在已经不用啦）
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hgroup元素</title>
</head>
<body>
<header>
<hgroup>
<h1>这个主标题</h1>
<h2>这个是一个二级标题</h2>
</hgroup>
<p>这个是这篇文章的内容</p>
</header>
<div>
这个里面存放的是内容
</div>
<footer>这个是文章的底部</footer>
</body>
</html>
效果演示：
4.address元素
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>address元素</title>
</head>
<body>
<address>
<a href="#">孙叫兽</a>
<a href="#">孙叫兽的粉丝</a>
</address>
<footer>
<div>
<address>
<a href="#">孙叫兽</a>
北京市丰台区时代财富天地
</address>
<time datetime="2020-4-23">2020-4-23</time>
</div>
</footer>
</body>
</html>
效果演示：
5.网页编排示例
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页编排示例</title>
</head>
<body>
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>这个是文章的标题</h1>
<h2>这个是文章的子标题</h2>
</hgroup>
<p>这个是正文内容</p>
<section>
<div>
<article>
<h1>评论标题</h1>
<p>评论内容</p>
</article>
</div>
</section>
</article>
<footer>
<p><a href="#">网站的版权</a></p>
</footer>
</body>
</html>
效果演示：
今天这个文章就写到这里，感谢大家的阅读，谢谢！