三，细说 HTML5 之新增的主题结构元素

来源：互联网发布：山东省移动公司网络部编辑：程序博客网时间：2024/04/29 17:09

现在所有的站点基本上都是Div+CSS布局，几乎所有的文章标题、内容、辅助介绍等都用Div容器来承载。搜索引擎在抓取页面内容时，因为没有明确的容器的含义只能去猜测这些标签容器承载的是文章标题还是文章内容等，HTML5新标准中直接添加了拥有具体含义的HTML标签比如：article、footer、header、nav、section 。

主题结构元素：article

定义和用法
<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：
论坛帖子
报纸文章
博客条目
用户评论

代码分析：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>标题</title></head><body><article>  <header>    <h1>欢迎 wenteryan</h1>    <p>我就静静的看着你装逼。。。。</p>  </header>  <article>    <header>开始装逼了。。。</header>    <p>欢迎评论。。</p>    <footer>    Copyright © 2012-2015 wenteryan的博客 版权所有 wenteryan    </footer>  </article></article><article>    <h1>这是一个内嵌页面</h1>    <object>      <embed src="#" width="600" height="300"></embed>    </object>  </article></body></html>

显示结果：

这里写图片描述

主题结构元素：section

定义和用法
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

代码分析：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>标题</title></head><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>  <h1>水果</h1>  <article>    <h2>无子西瓜</h2>    <p>无子西瓜又大又甜。。。</p>  </article>  <article>    <h2>无子西瓜</h2>    <p>无子西瓜又大又甜。。。</p>  </article>  <article>    <h2>无子西瓜</h2>    <p>无子西瓜又大又甜。。。</p>  </article></article></body></html>

显示结果：

这里写图片描述

注：article 元素是一个特殊的section ,比section更加强调独立性，section强调分段或分块性，article强调独立性。

1.不要让section 设为页面样式容器，那是DIV 做的事。
2.如果aside、nav、article 更符合使用条件，那就不要用section元素。
3.不要为没有标题区域模块使用section 元素。因为 section 元素必须有标题。

主题结构元素：nav

定义和用法
<nav> 标签定义导航链接的部分。
<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

nav 元素应用场景：

传统导航条
侧边栏导航
页内导航
翻页操作

代码分析：显示结果：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>标题</title></head><body><nav>  <ul>    <li><a href="#">主页</a></li>    <li><a href="#">我的博客</a></li>    <li><a href="#">博主简介</a></li>  </ul></nav><article>  <header>  <h1>心里感悟</h1>  <nav>    <ul>    <li><a href="#">生活不易</a></li>    <li><a href="#">大家加油</a></li>  </ul>  </nav>  </header>  <section>    <h1>生活不易</h1>    <p>生不容易，活不容易，生活更不容易。</p>  </section>  <section>    <h1>大家加油</h1>    <p>改善生活，创造奇迹。</p>  </section>  <footer>    <a href="#">修改</a><a href="#">删除</a>  </footer></article><footer>    Copyright © 2012-2015 wenteryan的博客 版权所有 wenteryan  </footer></body></html>

显示结果：

这里写图片描述

主题结构元素：aside

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。
aside 标签的内容应与主区域的内容相关.

aside 元素应用场景：

内容相关的应用
侧边栏
广告
导航条

代码分析：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>标题</title></head><body><h1>第一种用法：内容相关的应用</h1><article>  <header>  <h1>js 入门</h1>  </nav>  </header>  <h1>语法</h1>    <p>文章。。。。。。。。</p>  <aside>    <h1>名词解释</h1>    <p>语法：这是一个对语言来说很重要的内容体</p>  </aside></article><h1>第二种用法：侧边栏</h1><aside>  <nav>    <h2>评论</h2>    <ul>      <li><a href="#">2016-4-18</a></li>      <li><a href="#">大牛：希望能好好学习一下</a></li>    </ul>  </nav></aside></body></html>

显示结果：

这里写图片描述

主题结构元素：time 与微格式

time

定义和用法
<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
浏览器支持
目前所有主流浏览器都不支持标签。

代码分析：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>标题</title></head><body><time datetime="2016-4-18">2016-4-18</time><time datetime="2016-4-18T20:00">2016-4-18</time><time datetime="2016-4-18T20:00Z">2016-4-18</time><time datetime="2016-4-18T20:00+09:00">2016-4-18</time></body></html>

显示结果：

这里写图片描述

微格式

pubdate：是可选的布尔类型，可以用在article 的time 元素，代表，文章或整个页面的发布日期。

当出现多个time 元素，可以用pubdate表示文章或整个页面的发布日期。

代码分析：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>标题</title></head><body><article>  <header>    <h1>我的博客</h1>    <p>发布时间</p>    <time datetime="2016-4-18" pubdate>2016-4-18</time>    <p>创建日期</p>    <time datetime="2016-4-14">2016-4-14</time>  </header></article></body></html>

显示结果：

这里写图片描述

后面还有。。。努力更新中。。。有要源码的可以留邮箱的！

1 0

三，细说 HTML5 之 新增的主题结构元素

主题结构元素：article

主题结构元素：section

主题结构元素：nav

主题结构元素：aside

主题结构元素：time 与 微格式

三，细说 HTML5 之新增的主题结构元素

主题结构元素：time 与微格式