html5新增的主题结构元素
article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
它可以是一篇博客或者报刊中的文章,一篇论坛帖子、一段用户评论或独立的插件。
或其他任何独立的内容。
article元素使可以嵌套使用的。
article元素可以用来表示插件。
<article>
<header>
<h1>极客学院</h1>
<p>hello,欢迎来到极客学院</p>
</header>
<article>
<header>
作者
</header>
<p>评论</p>
<footer>
time
</footer>
</article>
<footer>
<p>这是底部</p>
</footer>
</article>
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="" width="600" height=""></embed>
</object>
</article>
section元素
section元素用于对网站或应用程序中页面上的内容进行分块。
一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素;
当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。
<section>
<h1>苹果</h1>
<p>这个苹果很甜</p>
</section>
*(通常不推荐没有标题内容使用section元素)
*(不要与article元素混淆)
<article>
<h1>苹果</h1>
<p>这是一个水果,可以吃。而且很好吃</p>
<section>
<h2>红富士</h2>
<p>这是一个很不错的苹果</p>
</section>
<section>
<h2>国光</h2>
<p>这是一种外表很好看,也很甜的苹果</p>
</section>
</article>
<section>
<h1>水果</h1>
<article>
<h2>香蕉</h2>
<p>内容</p>
</article>
<article>
<h2>香蕉</h2>
<p>内容</p>
</article>
<article>
<h2>香蕉</h2>
<p>内容</p>
</article>
<article>
<h2>香蕉</h2>
<p>内容</p>
</article>
</section>
section元素强调的是分段或分块,article元素强调的是独立性
总结:
1.不要将section元素作为设置样式的页面容器,那是div的工作
2.如果article元素、aside元素、nav元素更符合使用条件,那不要使用section元素
3.没有标题内容,不要使用section元素。
nav元素
nav元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他页面或当前页面的其他部分。
并不是所有的连接组都要被放进nav元素,只需要将主要的、基本的连接组放进nav元素即可。
nav元素应用场景:
传统导航条
侧边栏导航
页内导航
翻页操作
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>HTML5与CSS3的历史</h1>
<nav>
<li><a href="#">HTML5历史</a></li>
<li><a href="#">css3历史</a></li>
</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>
注意:
html5中不能使用menu元素代替nav元素
menu使用在一系列发出命令的菜单上,是一种交互性的元素
aside元素
aside元素用来表示当前页面或文章的附属信息部分,
它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,
以及其他类似的有区别于主要内容的部分。
第一种用法:在article元素之内使用
(放在article标签里面,用来表示对主流内容的一个说明解释)
<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>
第二种用法:在article元素之内进行使用
(作为也难或整体信息的附属部分,侧边栏等,文章列表,广告单元)
time元素与微格式
微格式:是一种利用html5通过class属性来对网页添加附属信息的方法
附加的信息有可能是新闻发生的时间,日期,个人电话号码,企业邮箱等,
在html5之前就已经使用,但是发现在使用时间和机器编码上出现了一些问题,编码过程中会产生一下歧义。
html5增加了一个新元素time,来无歧义的明确的对机器码时间,日期进行编码,并且让人易读。
time表示某个时刻或某个日期,允许带时差。
<time datetime="2015-10-10">2015-10-10</time>
<time datetime="2015-10-10T20:00">2015-10-10</time> 日期和时间之间用T表示,间隔分隔符
<time datetime="2015-10-10T20:00Z">2015-10-10</time> 表示机器编码用的是UTC标准时间
<time datetime="2015-10-10T20:00+09:00">2015-10-10</time> 表示另一个地区的时差
pubdate属性(true false)
可以用在article元素中的time元素上,表示time时间代表了整个文章或页面的发布日期。
<article>
<header>
<h1>苹果手机</h1>
<p>
发布日期:
<time datetime="2015-10-10" pubdate>2015-10-10</time>
</p>
<p>
舞会时间:
<time datetime="2015-10-12">2015-10-12</time>
</p>
</header>
</article>