您的位置：首页 > Web前端 > HTML5

HTML5新增结构元素

2017-10-09 13:10 429 查看

HTML5 新增的主体结构元素
article 元素

section 元素

nav

aside元素

time元素和pudate属性
time元素

pudate属性

HTML5新增的非主体结构元素
header元素

footer元素

hgroup元素

address元素

HTML5的结构

HTML5 新增的主体结构元素

article 元素

可以内嵌

可以表示插件

<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width = "600"  height = "400"</embed>
</object>
</article>

section 元素

通常不推荐没有标题内容使用section元素

不要与article元素混淆

总结

不要将section元素作为设置样式的页面容器

如果article、aside、nav元素更符合使用条件，那不要说seciton元素

没有标题内容的，不要使用section元素

nav

用作页面导航的连接组，其中的导航元素连接到其他页面或当前页面的其他部分。将主要的、基本的连接组放进nav元素即可

应用场景：

传统导航条

侧边栏导航

页内导航

翻页操作

html5中不要使用menu 元素代替 nav元素

练习代码如下

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<ul>
<li><a href = "#">主页</a></li>
<li><a href = "#">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>html5和css3的历史</h1>
<nav>
<ul>
<li><a href = "#">HTML5历史</a></li>
<li><a href = "#">CSS3历史</a></li>
</ul>
</nav>
</header>
<section>
<h1>HTML5历史</h1>
<p>....</p>
</section>
<section>
<h1>css3历史</h1>
<p>....</p>
</section>
<footer>
<a href = "#">删除</a>
<a href = "#">修改</a>
</footer>
</article>
<footer>
<p><small>版权声明：</small></p>
</footer>
</body>
</html>

aside元素

表示当前页面或者文字的附属信息部分

包含先关的引用、侧边栏、逛逛、导航条等

练习代码如下

<html>
<head>
<meta charset="UTF-8">
<title>aside元素</title>
</head>
<body>
<header>
<h1>js入门</h1>
</header>
<article>
<h1>语法</h1>
<p>文章的正文。。。。。。</p>
<aside>
<h1>名词解释</h1>
<p>这是一个对语言来说很重要的内容体</p>
</aside>
</article>
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href = "#">2015-3-10</a></li>
<li><a href = "#" >大牛：真希望可以好好的学习一下</a></li>
</ul>
</nav>
</aside>
</body>
</html>

time元素和pudate属性

time元素

24小时

<html>
<head>
<meta charset="UTF-8">
<title>Time元素</title>
</head>
<body>
<time datatime = "2017-10-09">2017-10-09</time>
<time datatime = "2017-10-09T20:00">2017-10-09</time>
<time datatime = "2017-10-09T20:00Z">2017-10-09</time>
<time datatime = "2017-10-09T20:00Z+09:00">2017-10-09</time>
</body>
</html>

pudate属性

<html>
<head>
<meta charset="UTF-8">
<title>update属性</title>
</head>
<body>
<article>
<header>
<h1>苹果</h1>
<p>发布日期
<time datetime="2017-10-09" pubudate>2015-10-09</time></p>
<p>舞会时间
<time datetime ="2015-10-09">2015-10-09</time></p>
</header>
</article>
</body>
</html>

HTML5新增的非主体结构元素

header元素

具有引导和导航作用额结构元素

<html>
<head>
<meta charset="UTF-8">
<title>header元素</title>
</head>
<body>
<header>
<h1>IT最新技术</h1>
<a href="#">极客学院</a>
<nav>
<ul>
<li><a href="#">学习</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">极客</a></li>
</ul>
</nav>
</header>
</body>
</html>

footer元素

可以在article和section中嵌套

hgroup元素

将标题及其子标题进行分组的元素。

hgroup通常会将h1~h6元素进行分组

将同一级下的标题和子标题进行组合

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<hgroup>
<h1>这是文章的标题</h1>
<h2>这是一个子标题</h2>
</hgroup>
<p><time datetime="2017-10-09">2017-10-09</time></p>
</header>
<div>
这是内容
</div>
<footer>
这是底部
</footer>
</article>
</body>
</html>

address元素

呈现联系人和联系信息

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<address>
<a href="#">iwen</a>
<a href="#">ime</a>
</address>
<footer>
<div>
<!--
作者：offline
时间：2017-10-09
描述：方便添加属性
-->
<address>
<a href="#">iwen</a>极客学院，嘉华大厦
</address>
<time datetime = "2017-10-09">2017-10-09</time>
</div>
</footer>
</body>
</html>

HTML5的结构

显示编排内容区域块

section等元素

隐示编排内容区域块

标题分级

按级别生成

不同区域块可以使用相同级别的标题

下面是一个典型的结构demo

<html>
<head>
<meta charset="UTF-8">
<title>网页编排示例</title>
</head>
<body>
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">help</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>main title of article</h1>
<h2>sub title of article</h1>
</hgroup>
<p>content
</p>
<section>
<div>
<article>
<h1>pinglun title</h1>
<p>pinglun content</p>
</article>
</div>
</section>
</article>
<footer>
<small>copyright belongs to...</small>
</footer>
</body>
</html>

本博客内容到此结束，欢迎交流探讨！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 结构

相关文章推荐

新的分享

章节导航