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

html5新增的结构元素

2014-04-09 09:26 429 查看

1、主体结构元素

article元素(独立内容)

     <article>
     <header>

          <h1>公司</h1>

          <p>发表日期：<time pubdate="pubdate">2014/10/09</time></p>

     </header>

     <p><b>苹果</b>, 植物类水果，多次花果.....("苹果"文章正文)</p>

     <footer>

          <p><small>著作版权###公司所有。</small></p>

     </footer>

     </article>

article元素是可以嵌套使用的，内层的内容再原则上需要与外层的内容相关联。例如，一篇博文，针对该文章的评论就可以使用嵌套article。(pubdate代表发布时间)

  ....

<p><b>苹果</b>, 植物类水果，多次花果.....("苹果"文章正文)</p>

<section>

<h2>评论</h2>

<article>

<header>

<h3>发表者：lucy</h3>

  <p>

                         <time pubdate datetime="2010-10-10T19:00-08:00">

                              1小时前

                         </time>

                    </p>

<header>

</article>

  <article>...</article>

</section>

     </article>

article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中。

    <article>

<h1>My Fruit Spinner</h1>

<object>

<param name="allowFullScreen" value="true">

<embed src="#" width="600" height="395"></embeb>

</object>

</article>

section元素(内容分段)

section元素用于对网站或应用程序中页面上的内容进行分块。section元素由内容和标题组成。但section元素是一个特殊的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。通常不推荐位那些没有标题的内容使用section元素。

nav元素

<body>

<h1>技术资料</h1>

<nav>

     <ul>

          <li><a href="/">主页</a></li>

          <li><a herf="/events">开发文档</a></li>

     </ul>

</nav>

<article>

     <header>

          <h1> HTML 5 与 CSS 3的历史</h1>

          <nav>

               <ul>

                    <li><a href="#HTML 5">HTML 5的历史</a></li>

                    <li><a href="#CSS 3">CSS 3的历史</a></li>

               </ul>

          </nav>

     </header>

     <section id="HTML 5">

          <h1>HTML 5的历史</h1>

          <p>讲述HTML 5的历史的正文</p>

     </section>

     <section id="CSS 3">

          <h1>CSS 3的历史</h1>

          <p>讲述CSS 3的历史的正文</p>

     </section>

     ..。

     <footer>

          <p>

               <a href="?edit">编辑</a> |

               <a href="?delete">删除</a> |

               <a href="?rename">重命名</a>

          </p>

     </footer>

</article>

<footer>

     <p><small>版权所有...</small></p>

</footer>

</body>

nav元素可以用于以下这些场合

传统导航条



      侧边栏导航

页内导航

翻页操作

aside元素

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

time元素

有些机器编码过程会对时间产生歧义，HTML 5增加了一个新的元素来无歧义地、明确地对机器的日期和时间进行编码，并且以让人易读的方式来展示它

<time datetime="2010-11-13">2010年11月13日</time>

<time datetime="2010-11-13T20:00">我生日的晚上8点</time>

编码时机器读到的部分在datetime属性里，而元素的开始标记和结束标记中间的部分显示在网页上。

2、非主体结构元素

header元素

<header>
<hgroup>

<h1>IT 新技术</h1>

<a href="http://blog.sina.com.cn/itnewtech">
http://blog.sina.com.cn/itnewtech

</a>

<a href="#">[订阅]</a>

<a href="#">[手机订阅]</a>

</hgroup>

<nav>

<ul>

     <li>首页</li>

     <li><a href="#">博文目录</a></li>

     <li><a href="#">图片</a></li>

     <li><a href="#">关于我</a></li>

</ul>

</nav>

</header>

hgroup元素

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

<header>

<hgroup>

<h1>主标题</h1>

<h2>子标题</h2>

</hgroup>

</header>

footer元素

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

address元素

address元素用来在文档呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。

<address>

<a href="#">lucy</a>

<a href="#">lily</a>

<a href="#">cecil</a>

</address>

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

标签： html5 构元素

相关文章推荐

新的分享

章节导航