移动设备的html5页面布局

2015-3-8 22:32| 发布者: 蚂蚁HTML5| 查看: 6026| 评论: 6|来自: 蚂蚁HTML5社区

摘要: 我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子。 HTML5标准添加的新元素当中,用于标识常见页面结构的包括:section、header、footer
我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子。
  HTML5标准添加的新元素当中,用于标识常见页面结构的包括:section、header、footer、nav、article和mark等。
  1.header
 
元素定义文档的页面组合,通常是一些引导和导航信息。而定义中说明
标签内通常包含section的头部信息,如hl-h6或hgroup等,但这不是必需的。同时也可以包含列表、搜索框或主题相关的Logo。如下代码所示:
  1. <header>
  2.     <hl>zzfriend.com,这是一个html5社区</h1>
  3.     <p>这篇文章主要介绍HTML5新标签含义</p>
  4. </header>
复制代码
  实际上,这是一段带有含义的HTML标签,用来表示头部信息,里面还有h1和p的内容,而且与以下的页面代码是一致的。
  1. <div class='header'>
  2.     <h1>zzfriend.com,这是一个html5社区</h1>
  3.     <p>这篇文章主要介绍HTML5新标签含义</p>
  4. </div>
复制代码
  2.footer
 
元素定义文档或章节的末尾部分,通常包含一些章节的基本信息,如作者信息、相关链接及版权信息。而联系信息相关的内容一般会配合
标签。例如以下代码:
  1. <footer>
  2.     <p>隐私信息|版权信息</p>
  3.     <p>关于我们|联系我们</p>
  4. </footer>
复制代码
   需要注意的是,一个HTNfL页面上可以允许有一个或多个header和footer。
    在footer标签内,不仅可以包含p标签等相关内容,同时也可以插入比如nav、ul、div等其他元素。因此需要根据实际情况而布局页面。从上述代码可以看出,虽然footer标签的内容插入了部分版权信息及相关的联系信息,但并不是带含义的内容,下面将介绍nav元素,它可以帮助此部分含有语义内容。
    3.nav
   
    4.aside
   

    上图所示的布局方式属于典型的博客页面布局,该布局的右侧边栏部分,即
区域及
区域都可以调整成前面提到的几个HTML5元素标签.

    5.article
    在HTML5规范中,article元素表示文档、页面,用来显示一块独立的文章内容,如一则网站新闻、一篇博客文章等。anicle标签是可以相互嵌套的。例如如下代码:
  1. <article>
  2. <header>
  3. <h1>html5新元素article示例标题</h1>
  4. </header>   
  5. <p>article新元素内容区域</P>
  6. <footer>
  7.     <ul>
  8.     <li>文章标签1</li>
  9.     <li>文章标签2</li>
  10.     </ul>
  11.     </footer>
  12. </article>
复制代码
    我们来解释一下上述代码。代码中使用article表示一篇文章主题内容元素,其内主要由三部分组成。其中header部分主要表示文章的头部信息,一般包含标题、时间、作者等信息,代码中使用h1元素表示文章的标题。第二部分目前使用p元素表示文章的主体内容。第三部分是footer,该部分一般包含文章标签等相关信息。
    6.section
    在HTML5规范中,section元素定义为文档中的节。比如章节、页眉、页脚或文档中的其他部分。
例如如下代码:
  1. <article>
  2.     <section>
  3.     <hl>Apple</h1>
  4.     <p>iPhone手机内置的web游览器是mobile safari</p>
  5.     </section>
  6.     <section>
  7.     <h1>google</h1)
  8.     <p>Android平台下自带的移动Web游览器是Android Browser</p>
  9.     </section>
  10. </article>
复制代码

  7.hgroup

  HTML5将hgroup标签定义为对网页或区段的标题元素进行组合,通过使用多级别的hl—h6标签节点进行分组,例如副标题、标签行等。例如:
  1. <header>
  2.     <hgroup>
  3.     <h1>本网站是一个关于HTML5的网站</h1>
  4.     <h2>这篇文章主要介绍HTML5新元素</h2>
  5.     <hgroup>
  6. </header>
复制代码
  代码中,我们在header内使用hgroup元素表示一组信息。hgroup内共有hl和h2两部分元素内容,它们都分别表示为主标题和副标题等。
    对于hgroup元素的用法,虽然没有严格的要求,但适当的使用hgroup元素对于SEO有一定的好处,因此hgroup标签内建议使用hl-h6标签。
更多的HTML5新元素
    实际上,除了我们介绍的语义标签外,在HTML5的标准中还定义了更多不同语义的标签。
    * audio:定义音频内容。
    * canvas:定义画布功能。
    * command:定义一个命令按钮。
    * datalist:定义一个下拉列表。
    * details:定义一个元素的详细内容。
    * dialog:定义一个对话框。
    * keygen:定义表单里一个声称的键值。
    * mark:定义有标记的文本。
    * output:定义一些输出类型。
    * progress:定义任务的过程。
    * source:定义媒体资源。
    * video:定义一个视频内容。
    虽然HTML5标准中新增了很多新的元素,但实际上在移动Web应用中使用的机会并不多。
    audio及video等标签虽然可以在移动Web应用中得到实践,但由于其性能、兼容性以及页面渲染等原因,它们还不能很好地应用到智能手机以及平板电脑的Web浏览器上。
  下一篇文章我们将探讨目前智能手机或平板电脑上的各种软件界面布局结构,以及如何将这些新元素应用到Web页面布局中。
关于这些我之前在论坛讨论过移动设备的html5页面布局【》》探讨一下,你不了解的html5! 】。
大家有什么问题可以在论坛里面直接提问,看到后,我会仔细解答大家的!

扫描关注蚂蚁HTML5社区官方微信

无语

惊吓
4

期待
1

很赞

差劲

刚表态过的朋友 (5 人)

相关阅读

发表评论

最新评论

引用 gzg555888 2017-3-4 10:34
值得学习
引用 kkkkkkkbao 2016-10-9 22:12
值得学习
引用 雕民823 2016-7-23 10:26
教程T
引用 雕民823 2016-7-22 20:41
值得学习
引用 lims 2016-5-24 09:25
新手来学习
引用 QQ群521595826 2016-1-10 16:33
【怎么学习HTML】 现在很多小伙伴喜欢在互联网上找视频资料学习HTML,但是光看视频你是不可能学会HTML的,没有人指导你,而且很多视频已经过时了 并没有什么用!  如果你真的想学习HTML这门技术,你可以来这个群【521,595,826】 在这里有最新的HTML课程 免费学习 也有很多人指导你 进步 不需要你付出什么 只要你有一颗学习的心就可以了 不是愿意学习的就不要加了!

查看全部评论(6)

热门教程

【教程下载】HTML5移动应用开发入门经典
【教程下载】HTML5移动应用开发入门经典
【HTML5开发教程下载】HTML5移动应用开发入门经典,总共24章,每章一个小时学习时间,
【教程下载】HTML5与CSS3权威指南
【教程下载】HTML5与CSS3权威指南
《HTML 5与CSS 3权威指南》内容系统而全面,详尽地讲解了html 5和css 3的所有新功能和
【教程下载】HTML5游戏开发(全)
【教程下载】HTML5游戏开发(全)
【HTML5游戏开发(全)】本书分为9章。 学习如何绘制游戏对象、绘制动画、加入音频等
关闭

网站推荐上一条 /1 下一条

关注蚂蚁HTML5社区官方微信
关注蚂蚁HTML5社区官方微信

邮箱:Admin@zzfriend.com QQ:791577401 木子牛HTML5工作室 版权所有

© 2014-2017 MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

返回顶部