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

HTML5学习之路（2）

2016-06-15 14:26 260 查看
写本文的主要意图主要供自己学习巩固之用，如有错误望大家指正。

今天来了解一下HTML5中新增的结构元素，其又分为两类：

Ⅰ.主体结构元素（article、section、nav、aside、time）

Ⅱ.非主体结构元素（header、hgroup、footer、address）

主体结构元素

article

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。他可以是一篇博客或者报刊中的文章，一篇论坛贴帖子、一段用户评论或独立的插件，或其它任何独立的内。

注:

①article元素是可以嵌套使用的

②article元素可以用来表示插件

③article元素一般会带个标题，并放在 header 元素中

例如：

<body>
<article>
<header>
<h1>好好学习天天向上</h1>
<p>少壮不努力老大徒伤悲</p>
</header>
<p>成就梦想放眼未来</p>
<footer>hugejinfan</footer>
</article>
<article>
<h1>插件</h1>
<object data="" type="">
<embed src="#" type="" width="600" height="100"></embed>
</object>
</article>
</body>


section

section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。

注意：

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

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

③没有标题元素不要使用sction元素

例如：

<body>
<section>
<h1>交通工具</h1>
<p>代步</p>
</section>

<article>
<h1>水果</h1>
<p>富含维生素</p>
<section>
<h2>香蕉</h2>
<p>很好吃</p>
</section>
<section>
<h2>芒果</h2>
<p>美味</p>
</section>
</article>

<!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 -->

<section>
<h1>水果</h1>
<p>富含维生素</p>
<article>
<h2>水蜜桃</h2>
<p>香甜</p>
</article>
<article>
<h2>火龙果</h2>
<p>好吃</p>
</article>
</section>
</body>


nav

nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。

nav元素的应用场景：

传统导航条

侧边导航

页内导航

翻页操航

例如：

<!--传统导航条（要达到理想样式还需自行修改样式表部分）-->
<style>
nav ul{
list-style: none;
}
li{
float:left;
}
a{
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">项目展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</body>
...


aside

aside元素用来表示当前页面或文章的附属信息部分，他可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他有区别于主要内容的部分。

在 article 标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。

在 article 标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。

time

time元素代表 24 小时中的某个时刻或某个日期。表示时刻时允许带时间差，可定义很多格式的日期和时间。

例如：

<time datetime="2016-06-15">2016年6月15日</time>
<!--日期与时间之间要用时间分隔符"T"分隔-->
<time datetime="2016-06-15T18:00">2016年6月15日</time>
<!--"+"后的时间表示时间差-->
<time datetime="2016-06-15T18:00+04:00">2016年6月15日</time>


非主题结构元素

header

header元素是一种有引导和导航的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。

例如：

<header>
<h1>文章标题</h1>
</header>

<article>
<header>
<h1>标题</h1>
</header>
<p>内容</p>
</article>


hgroup

hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如内容区块的标题及其子元素算一组。

注：

一个内容模块中包括了主标题和至少一个子标题才使用 hgroup

例如：

<header>
<hgroup>
<h1>我是苹果</h1>
<h2>我是香蕉</h2>
<h3>我是大枣</h3>
</hgroup>
<p>都是水果</p>
</header>


footer

footer元素可以作为其上层父级内容区块或是一个区块的脚注。footer通常包括其他相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

例如：

<article>
<p>内容</p>
<footer>
<ul>
<li>about1</li>
<li>about2</li>
<li>about3</li>
</ul>
</footer>
</article>


address

address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、电子邮箱、电话号码等。

注：

address元素不应该用于描述通讯地址，除非它是联系信息的一部分。

address元素通常连同其他信息被包含在
<footer>
元素中。

例如：

<address>
<ul>
<li>作者：<a href="#">xx</a></li>
<li>联系方式：<a href="#">xx-xxxxx</a></li>
<li>地址：<a href="#"></a>xx</li>
</ul>
</address>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5
相关文章推荐
新的分享
章节导航