- 1、本文档共44页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
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;五、互动讨论
文档评论(0)