HTML5新特性及应用课案.pptx

HTML5新特性及教育信息化应用;课程主要内容;什么是HTML5？;HTML发展历程;官方概念：HTML5草案的前身名为Web Applications 1.0，是HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。 广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等 ;为什么使用HTML5;招聘;html5可以做什么？;html5可以做什么？;html5可以做什么？;html5可以做什么？;三、HTML5新特性;HTML5的八大新特性;语义化的标签;拾色器 input type=color value=#ed1c24;本地存储;设备兼容;多媒体;Canvas 画布元素;WebGL;SVG;拖拽(DragDrop);@font-face使网页自由引入新的字体 页面预渲染及可见性 rel=“prerender”，提升页面打开速度 。。。;CSS3新特性-选择器;圆角 border-radius: 3px -moz-border-radius-topleft -webkit-border-top-left-radius 阴影 box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) text-shadow: 2px 2px #444, 3px 3px #555 自定义字体 @font-face{font-family: Adam, src:url(adam.ttf);}p{font-family:Adam, serif;} 文本换行 word-wrap: normal|break-word;边框背景 border-image: url(border.png) 27 27 27 27 round round; 渐变 background: -moz-linear-gradient(20%, center, 30%, center, from(blue), to(yellow)) no-repeat; 背景 background-size: 100px 50px; background-origin: content-box|border-box|padding-box; background-clip: border-box|padding-box;透明 opacity: 0.5; RGBA color: rgba(0, 255, 0, 0.5); HSL/A color: hsl(240, 50%, 50%); hsla(240, 50%, 50%, 0.5) 调整元素尺寸 resize: both|horizontal|vertical;盒模型 box-sizing: content-box|border-box; 网格模型 column-count: 3; column-width: 13em; column-gap: 1em; column-rule: 1px solid black; CSS Table Display #content{display: table;}#main{display: table-cell; width:620px; padding-right: 22px;}#side{display: table-cell; width: 300px;} Outline outline-offset;变换 transform: rotate(30deg); transform: scale(0.5, 2.0); transform: skew(-30deg); transform: translate(30px, 0); 过渡 transition: all 1s ease-out ; 动画 animation: greenPulse infinite ease-in-out 3s; ;媒体查询 .entry{color: red;}@media all and {min-width: 100em}{ .entry{color: black;}} 语音支持 voice-volume, voice-balance, voice-family ;浏览器前缀;四、NACG云学习平台介绍及HTML5的应用;NACG云学习平台;先进的教育理念;丰富的教学元素;以用户为中心的教学设计和管理;设计管理多种类型课程;适用于学校教育的各个方面;教务管理;响应式设计;拖拽变更页面布局;拖拽上传文件;CSS3;五、互动讨论