HTML5程序设计及实践第2章 HTML5布局.pptVIP

下载本文档

37
0
约2.74千字
约 20页
2019-01-22 发布于江西
举报
版权申诉

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

1、本文档共20页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
8、VIP文档为合作方或网友上传，每下载1次，网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档

谢谢 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> <h3>tom</h3> <p> <time datetime="2015-1-4 13:20">2015年1月4日</time> </p> </header> <p>该活动非常专业</p> </article> <article> </article> </section> 辅助信息 aside元素用于显示页面或文章相关，但是又可以独立的内容，可以是广告、引用、侧边栏等。示例：博客的网页，在底部使用aside元素实现了相关博客文章的链接 <aside> <h2>博客链接</h2> <ul> <li><a href="#">物联网实训体系</a></li> <li><a href="#">金融财务外包实训体系</a></li> <li><a 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> <summary>Java EE轻量级解决方案</summary> <p>JavaEE技术经过多年的发展已经日趋成熟，成为当今企业级应用的最佳解决方案。在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 封面照片<