HTML5新增的非主体结构元素
程序员文章站
2022-05-11 10:54:49
...
1.header元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<header>
<h1>IT最新技术</h1>
<a href="http://www.baidu.com/">宇宙学院</a>
<nav>
<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>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<footer>
<ul>
<li><a href="#">版权信息</a></li>
<li><a href="#">站点地图</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</footer>
<article>
<footer>这是一个文章的底部</footer>
</article>
<section>
<footer>这是section下的footer</footer>
</section>
</body>
</html>
3.hgroup元素
<article>
<header>
<hgroup>
<h1>这是文章标题</h1>
<h2>这是一个子标题</h2>
</hgroup>
<p>
<time datetime="2015-10-10">2015-10-10</time>
</p>
</header>
<div>
这是内容
</div>
<footer>
这是底部
</footer>
</article>
4.address元素和网页编排规则
<address>
<a href="#">iwen</a>
<a href="#">ime</a>
</address>
<footer>
<div>
<address>
<a href="#">iwen</a>
宇宙学院,嘉华大厦
</address>
<time datetime="2016-14-15">2016-14-15</time>
</div>
</footer>
<header>
<h1>网页标题</h1>
<nav>
<ul>
<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>
<small>版权所有:...</small>
</footer>
上一篇: HTML5 新增的主体结构元素