(HTML5程序设计及实践)第2章HTML5布局.ppt

谢 谢 Thanks for listening. 第2章 HTML5布局 目录 HTML5布局 HTML5结构元素 HTML5样式元素 HTML5页面布局 HTML5页面布局示例 layout.html + style.css 目录 HTML5布局 HTML5结构元素 HTML5样式元素 文章结构 body article header 文章标题 /header 正文内容 footer 文章尾注 /footer /article /body 内容分段 section、article和div有一些类似的地方，都可以用于区分网页的不同区域， section、article和div有区别的。 div主要用于页面的大块布局； article元素强调的是独立性； section主要用于内容的分段； article元素和section元素是可以相互嵌套的，当一篇文章中有几个并列的段落是，就可以用section分段，当文章的其中一段具有独立性时，可以用article标识该段的独立性。 内容分段 section h2评论/h2 article header h3tom/h3 p time datetime=2015-1-4 13:202015年1月4日/time /p /header p该活动非常专业/p /article article /article /section 辅助信息 aside元素用于显示页面或文章相关，但是又可以独立的内容，可以是广告、引用、侧边栏等。 示例：博客的网页，在底部使用aside元素实现了相关博客文章的链接 aside h2博客链接/h2 ul lia href=#物联网实训体系/a/li lia href=#金融财务外包实训体系/a/li lia href=#电商物流实训体系/a/li /ul /aside 导航信息 nav元素包含一组用于页面导航的链接，通过这些链接可以跳转到其他页面或者本页面中的其他区块。用nav元素实现站点导航是最典型的应用。 nav a href=#首页/a | a href=#软件外包/a | a href=#物联网/a | a href=#金融财务/a| a href=#电商物流/a /nav 显示/隐藏内容 details元素和summary元素配合使用，可以方便的实现详细信息的显示和隐藏，在HTML4中必须用脚本才能实现该效果。 details summaryJava EE轻量级解决方案/summary pJavaEE技术经过多年的发展已经日趋成熟，成为当今企业级应用的最佳解决方案。在JavaEE技术中S2SH（Struts2+Spring+Hibernate）是目前最为流行的轻量级整合开发框架，得到了众多软件企业的认可，在Java开发群体中也得到了广泛的支持。本门课程集Struts2、Spring、Hibernate技术讲解为一体，并有机的将其整合在一起，是一门综合性强、应用性强的技术课程。/p p/p /details 对话框 HTML4中，实现对话框需要比较复杂的脚本，在HTML5中新增了dialog元素，该元素让开发人员非常方便的创建对话框，并显示在web页面中。 dialog form 评论：input type=text id= /br input type=submit id=btnaddcomment /form /dialog 图文结构 figure元素规定独立的流内容（如图像、图表、照片、代码等等）。figurecapiton元素用于定义figure的标题，可以放置在figure元素开头或者结尾。 figure class=post-image img src=../img/JavaSE.jpg / figcaption图1 封面照片/figcaption /figure 目录 HTML5布局 HTML5结构元素 HTML5样式元素 mark元素 mark元素用于强调文档中的一部分文档，以高亮背景显示 p mark博弈论/mark又被称为对策论（Game Theory）既是现代数学的一个新分支，也是运筹学的一个重要学科。 /p meter元素 meter元素用于展示在数值范围内