《HTML5程序设计及实践》课件第2章 HTML5布局_第1页
《HTML5程序设计及实践》课件第2章 HTML5布局_第2页
《HTML5程序设计及实践》课件第2章 HTML5布局_第3页
《HTML5程序设计及实践》课件第2章 HTML5布局_第4页
《HTML5程序设计及实践》课件第2章 HTML5布局_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第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> <timedatetime="2015-1-413:20">2015年1月4日</time> </p> </header> <p>该活动非常专业</p> </article> <article> </article></section>辅助信息aside元素用于显示页面或文章相关，但是又可以独立的内容，可以是广告、引用、侧边栏等。示例：博客的网页，在底部使用aside元素实现了相关博客文章的链接<aside><h2>博客链接</h2><ul><li><ahref="#">物联网实训体系</a></li><li><ahref="#">金融财务外包实训体系</a></li><li><ahref="#">电商物流实训体系</a></li></ul></aside>导航信息nav元素包含一组用于页面导航的链接，通过这些链接可以跳转到其他页面或者本页面中的其他区块。用nav元素实现站点导航是最典型的应用。

<nav> <ahref="#">首页</a>|<ahref="#">软件外包</a>| <ahref="#">物联网</a>|<ahref="#">金融财务</a>| <ahref="#">电商物流</a></nav>

显示/隐藏内容details元素和summary元素配合使用，可以方便的实现详细信息的显示和隐藏，在HTML4中必须用脚本才能实现该效果。<details><summary>JavaEE轻量级解决方案</summary><p>JavaEE技术经过多年的发展已经日趋成熟，成为当今企业级应用的最佳解决方案。在JavaEE技术中S2SH（Struts2+Spring+Hibernate）是目前最为流行的轻量级整合开发框架，得到了众多软件企业的认可，在Java开发群体中也得到了广泛的支持。本门课程集Struts2、Spring、Hibernate技术讲解为一体，并有机的将其整合在一起，是一门综合性强、应用性强的技术课程。</p><p></p></details>对话框HTML4中，实现对话框需要比较复杂的脚本，在HTML5中新增了dialog元素，该元素让开发人员非常方便的创建对话框，并显示在web页面中。<dialog> <form>评论：<inputtype="text"id=""/><br><inputtype="submit" id="btnaddcomment"> </form></dialog>图文结构figure元素规定独立的流内容（如图像、图表、照片、代码等等）。figurecapiton元素用于定义figure的标题，可以放置在figure元素开头或者结尾。<figureclass="post-image"> <imgsrc="../img/JavaSE.jpg"/> <figcaption>图1封面照片</figcaption></figure>目录HTML5布局HTML5结构元素HTML5样式元素mark元素mark元素用于强调文档中的一部分文档，以高亮背景显示<p> <mark>博弈论</mark>又被称为对策论（GameTheory）既是现代数学的一个新分支，也是运筹学的一个重要学科。</p>meter元素meter元素用于展示在数值范围内的测量值或是分数值，典型的例子是硬盘空间使用量<metervalue="2"min="0"max="10">2</meter><br><metervalue="0.6">60%</meter>progress元素progress标签用于表示进度，如任务完成的比例<progressvalue="40"max="100"></progress>wbr元素wbr元素可以实现英文单词换行<p> AJAX技术的学习过程中，我们必须对<mark>XML<wbr>Http<wbr>Request</mark>对象非常熟悉。 <br><br> AJAX技术的学习过程中，我们必须对<mark>XMLHttpRequest</mark>对象非常熟悉。</p>time元素time元素明确的对机器的日期和时间进行编码，并且更易读。pubd

人人文库> 全部分类> 专业文献 > IT计算机

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论