免费空间-免费资源分享网站移动版
免费空间 | 国内免费空间 | PHP免费空间 | asp免费空间 | 免费空间申请 | 悍铭福利空间 | 永久免费网站空间 | 八七云免费空间 | 主机蛋 | 安安互联 |
您的位置:首页 > 网站建设 >

HTML5布局标签属性和方法

作者:免费空间 发布时间:2016-01-09 00:42:05
摘要:header标签 header标签定义文档的页眉(介绍信息),用法: headerh1阿邦Dreamweaver专栏/h1/header nav标签 nav 标签定义导航链接的部分,用法: nav ul li&

<header>标签
  <header>标签定义文档的页眉(介绍信息),用法:
  <header><h1>阿邦Dreamweaver专栏</h1></header>
  <nav>标签
  <nav> 标签定义导航链接的部分,用法:
  <nav>
  <ul>
  <li><a href="#">菜单一</a></li>
  <li><a href="#">菜单二</a></li>
  <li><a href="#">菜单三</a></li>
  <li><a href="#">菜单四</a></li>
  </ul>
  </nav>
  <section> 标签
  <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分,用法:
  <section>
  <h1>标题一</h1>
  <p>文章段落内容</p>
  </section>
  <article> 标签
  <article> 标签定义外部的内容。
  外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自blog的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。总之,可以理解为article所表示的就是文章内容。用法:
  <article>
  <a href="#">文章内链接</a><br />文章内容文章内容文章内容
  </article>
  <aside> 标签
  <aside>标签定义article以外的内容。aside的内容应该与article的内容相关,如上图所示,它类似于布局中的辅助侧边栏。用法:
  <aside>
  <h4>小标题</h4>
  段落内容段落内容
  </aside>
  <footer> 标签
  <footer> 标签定义section或document的页脚。在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息,也就是类似于版权信息的东西。用法:
  <footer>页脚文字,版权信息等</footer>
  如果要达成上图的效果,整体的Html5代码应该如下:
  <!DOCTYPE html>
  <html>
  <head>
  <title>Html5示范文档</title>
  </head>
  <body> <header>
  <h1><a href="#">阿邦Dreamweaver专栏-Html5布局示范文档</a></h1>
  </header>
  <nav>
  <ul>
  <li><a href="#">菜单一</a></li>
  <li><a href="#">菜单二</a></li>
  <li><a href="#">菜单三</a></li>
  <li><a href="#">菜单四</a></li>
  </ul>
  </nav>
  <section>
  <header>内容标题</header>
  <article>文章内容</article>
  <footer>文章版权内容</footer>
  </section>
  <aside>相关内容</aside>
  <footer>页脚、页面版权内容</footer>
  </body>
  </html>
  完整的Html5代码如上所列,但它只是Html的代码结构,如果让它变成上图那种样式,仍需要CSS代码支持,这时候可以用到CSS3。


标签: 没有tag 免费空间 免费ASP空间 免费
相关推荐
免费空间声明:
(一) 由于各方面情况的调整与变化,本网所提供的考试信息仅供参考,敬请以权威部门公布的正式信息为准。
(二) 本网注明来源为其他媒体的稿件均为转载稿,免费转载出于非商业性学习目的,版权归原作者所有。如有内容、版权等问题请在30日内与本网联系。联系方式:邮件 jiansou123#126.com
最近更新
网站地图 | XML地图
版权所有 © 2005-2022 free.kaoshi86.com 免费空间 All Rights Reserved
本网站所有信息全是来源于互联网,如有侵权请来电咨询! 粤ICP备15072123号