HTML基础培训(共50张).pptx

HUAWEI TECHNOLOGIES CO., LTDHuawei Confidential Security Level: 2022-5-85基础培训HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 目录l一一 什么是什么是5l二二 5新特性和那些效果新特性和那些效果l三三 5目前存在的应用局限目前存在的应用局限l四四 开放讨论：开放讨论：5适合应用于我们哪些项目？适合应用于我们哪些项目？ 2一 什么是5 3HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 1 历史 4今天1991年1994年1997年1995年2009年HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 2 什么是5l官方概念：5草案的前身名为 1.0，是4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。l广义概念：5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：5，3，3， ，（3D）等l后面我们描述的5就是基于广义来讲述 5二 5新特性和应用 6HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 5新特性（顺序待调整）l媒体支持：和l画布元素以及视频加速l增强的表单l更炫的平面动画3页面渲染及 3 3Dl矢量支持l5的图形机制比较 l离线应用l原生的拖拽l其他5特性. 7媒体支持媒体支持 8HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 当前应用场景 9视频点播直播-优酷5版本视频聊天- 5视频聊天功能HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential & l 标签定义视频，比如电影片段或其他视频流。l 标签定义声音，比如音乐或其他音频流。l（ ） 是应用在视频会议、实时广播、多方会谈、点对点应用程序等等的新的协议与 （用 启动用户计算机的摄影机，用 进行点对点传输等等） 10HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示： 11播放视频创建声音l5 - 创建声音播放声音画布元素以及视频加速 12HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景流程图-我司某运营产品构建3D虚拟拓扑图-某3D网管HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential ，5最期待元素之一，可以通过脚本可以任意创建图形，编辑图形，导入图片，导出图片。其中分2D与3D：2D ：基本线条、路径、插入图像、像素级操作、文字、阴影、颜色渐变等提供图形绘制功能。3D （）： 定义了一套, 能够允许在网页中使用类似于 ，实际上是一套基于 2.0的3d图形。这些是通过 5的标签来使用的。 14HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示： 15构造一个简单的 3D物体基本作图之画板 增强的表单增强的表单 16HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景 17配置页面-增加配置的流畅性和容错性注册-增加注册的流畅性和无障碍浏览HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 新的元素5的表单定义了十几个新的元素和特性，这些新增元素可以代码更为易用、简洁和高效。这些新的东西包括：1 新元素：、， 等2 新属性：、 、等特性3 新样式：新的伪类样式，比如等4 新的输入方式-语音输入： 可以让标签接受语音并转化为数字 18HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示：新特性全集 19更丰富的样式支持更丰富的样式支持- 3 20HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景 21通讯录管理-图片墙首页HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 3新特性l选择器l和透明度l多栏布局：弹性布局（水平布局、垂直布局）l多背景图l l文字阴影l属性l盒阴影：阴影，文本阴影l盒模型：，多背景，圆角(边框半径)，边框图片l2D：旋转，缩放，倾斜，请参考：基础变换l3D：透视， 3D，等等l媒体查询l语音HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示 233 HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示：3 2D 24灰太狼 华为HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示：3 3D 3D 3d 旋转的立方体 矢量图形矢量图形 26HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景 27矢量地图-某产品构建多样的矢量图形图表项目HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential l（ ）：可缩放矢量图形，使用）：可缩放矢量图形，使用 来描述二维图形和绘图程序的语言。来描述二维图形和绘图程序的语言。可以在浏览器中构造可以在浏览器中构造 矩形、圆形、椭圆、线条、多边形、折线、路矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果，和动画等径、滤镜效果、渐变效果，和动画等 28HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示： 29简单的图形元素复合图表5的图形机制比较: 30HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 相同点l均是均是5规范的一部分规范的一部分l均能实现图形和动画均能实现图形和动画l均可以通过脚本编程控制显示均可以通过脚本编程控制显示 31HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 不同点 32是！非！最大的区别！ 是否矢量是否矢量矢量，放大不失真像素操作，放大失真图形内存模式图形内存模式保留模式即发即弃。直接向它的位图呈现它的图形，然后对所绘制的形状没有任何认知，只会得到最终的位图。基本图形种类基本图形种类丰富（线，圆，矩形，多边形，路径等）除了矩形，只有路径原生动画支持原生动画支持支持不支持。需要去模拟，即刷屏3D不支持支持交互交互支持事件只能用根据坐标进行编程可访问性可访问性好。结构易于分析差。程序无法感知内容，除非图像识别或专门做内容映射最终实现的代码特征最终实现的代码特征标签，少量依赖基本上是完全依赖HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 小结互有所长，均适用不同应用场景：互有所长，均适用不同应用场景：更适合规则图形的绘制和动画，更好管理。更适合规则图形的绘制和动画，更好管理。典型场景：图表，流程图等高保真度矢量文档。典型场景：图表，流程图等高保真度矢量文档。更适合不规则或涉及像素级的变化场景，更高效。更适合不规则或涉及像素级的变化场景，更高效。典型场景：图片编辑和图形数据分析，位图动画，典型场景：图片编辑和图形数据分析，位图动画，2D游戏，游戏，3D虚拟虚拟空间等像素操作。空间等像素操作。 33离线应用离线应用 34HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景 35频道缓存，海报缓存，减低服务器负载，提升用户开机体验 机顶盒离线保存桌面和通讯录数据，定时和服务器同步 版HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 离线应用：让网络应用变为桌面应用离线存储使得你的应用可以在用户离线的状况下进行访问。离线存储离线存储使得你的应用可以在用户离线的状况下进行访问。离线存储的两个特性：的两个特性：1 离线资源缓存离线资源缓存2 本地数据存储本地数据存储 离线存储技术技术显然至少有三个好处：离线存储技术技术显然至少有三个好处：1 最直接的好处就是用户可以离线访问你的应用最直接的好处就是用户可以离线访问你的应用2 因为文件被缓存在本地使得页面加载速度提升许多因为文件被缓存在本地使得页面加载速度提升许多3 离线应用只加载被修改过的资源，因此大大降低了用户请求对服务离线应用只加载被修改过的资源，因此大大降低了用户请求对服务器造成的负载压力器造成的负载压力 36HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示 37 (使用15+观看)如何离线存储资源如何使用 存储数据拖拽拖拽 38HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景 39拖放文件实现上传和预览拖拽操作页面上的组件和数据HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 简介5为元素新增了用于拖拽的属性，这个属性决定了元素是否能被拖拽，或只能选择元素的文本。同时5使用接口用来支持拖拽数据存储。三个重要特性： 属性：就是标签元素要设置，否则不会有效果，例如：列表1 对象：退拽对象用来传递的媒介，使用一般为。事件： 、 、 40HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示 41如何实现本地文件拖拽至网页网页内拖拽事件演示其他其他5特性特性 42HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential l使网页自由引入新的字体l页面预渲染及可见性 “”，提升页面打开速度l。 43更多观看： ：不影响用户主要任务的情况下，浏览器运行多个后台运行程序 ：和服务器全双工通信，收发信息不再有延迟：允许应用感知位置，显示你地理位置附近的内容三 5目前存在的应用局限 44HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 5目前的局限l各浏览器支持程度不同。如目前支持较好的有各浏览器支持程度不同。如目前支持较好的有 ，l国内存在高比例旧款浏览器国内存在高比例旧款浏览器l兼容性不同，如视频格式兼容性不同，如视频格式l开发工具不健全开发工具不健全l规范未正式发布规范未正式发布l浏览器效率未到达理想浏览器效率未到达理想 45三 开放讨论5适合于哪些项目？适合于哪些项目？ 46HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 其他一些例子l放大镜：放大镜： 47Thank Thank Thank 演讲完毕，谢谢观看！