84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
html5具备的功能:1、新的图形库,可以让网站内容变得更加丰富;2、更方便的多媒体内容;3、地理定位;4、拖放功能;5、桌面通知;6、离线和存储;7、性能和集成;8、设备访问;9、样式设计等。
本教程操作环境:windows7系统、HTML5版、Dell G3电脑。
html5具备的功能
1、新的图形库:
HTML5引入了Canvas和WebGL函数库,可以让网站内容变得更加丰富。特别是WebGL函数库,几乎可以改变这一领域的整个游戏规则,只要看看这个著名的雷神之锤II游戏场景的画面,这可完全是用HTML5来开发的。对我来说,这代表了新的时代,让人可以想象未来的游戏是怎么玩的。
2、更方便的多媒体内容:
如果曾经设计过需要包含许多影音内容的网站,你就会了解那种笨重的感觉。常常需要用一堆Flash加上和标记才能获得想要的效果。但是以后再也不用这么麻烦了,HTML5引入了容易使用的 和 标记,所以要在网站上加入多媒体内容变得比以往更加容易。也正因为有这样的功能,所以很多在线视频网站已经开始转移到HTML5了。 3、地理定位: 人们越来越少通过台式机甚至笔记本电脑来使用网络了。在今天,有很多人通过手持可移动设备浏览网络,例如智能手机和平板电脑。目前这种移动化的网络访问特征,再加上HTML5中新的地理定位功能,结合在一起开创了无数新的可能性。当用户访问你的网站时,可以知道他们的精确位置,让你能够提供个性化内容,以配合用户所在的环境。例如,当访问一个与郊游有关的网站时,如果发现你处于闹市区,就可以提供行程规划相关的信息;但如果你是在郊区位置访问该网站,则默认会显示互动式地图功能。 4、拖放功能: 这是个细微的变动,但却非常重要。拖放功能可以让你将浏览器的内容直接拖拉到电脑上,也可以将内容从电脑拖拉到浏览器上。真的是很划时代的改变,不是吗?来看看这个展示,想想看,如果社交网站有这样的功能,当你度假回来后,就可以很容易选好你的假期照片,然后拖拉到浏览器,就可以马上和网上的朋友分享。这才是我想要的网站互动方式! 5、桌面通知: 桌面通知是出现在浏览器之外的小弹窗,即使在用户没有浏览网站时,也可以和网站进行互动。目前这个功能只有Google Chrome浏览器可以使用,你可以在这里看到展示。这些通知很适合用来做电子邮件通知、社交网络更新、微博信息,还有其他服务中使用。再配合拖放功能后,就真的弱化了在线和本地应用程序之间的区别。 6、离线和存储 离线资源:应用程序缓存。 火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。 在线和离线事件。 Firefox 3 支持 WHATWG 在线和离线事件,这可以让应用程序和扩展检测是否存在可用的网络连接,以及在连接建立和断开时能感知到。 WHATWG 客户端会话和持久化存储 (又名 DOM 存储)。 客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。 IndexedDB。 是一个为了能够在浏览器中存储大量结构化数据,并且能够在这些数据上使用索引进行高性能检索的 Web 标准。 自 web 应用程序中使用文件。 对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中,从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 type file 的元素的新的 multiple 属性针对多文件选择的支持。 还有 FileReader。 7、性能和集成 Web Workers。 能够把 JavaScript 计算委托给后台线程,通过允许这些活动以防止使交互型事件变得缓慢。 XMLHttpRequest Level 2。 允许异步读取页面的某些部分,允许其显示动态内容,根据时间和用户行为而有所不同。这是在 Ajax背后的技术。 即时编译的 JavaScript 引擎。 新一代的 JavaScript 引擎功能更强大,性能更杰出。 History API。 允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。 conentEditable 属性:把你的网站改变成 wiki ! HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。 拖放。 HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。 HTML 中的焦点管理。 支持新的 HTML5 activeElement 和 hasFocus 属性。 基于 Web 的协议处理程序。 你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。 requestAnimationFrame。 允许控制动画渲染以获得更优性能。 全屏 API。 为一个网页或者应用程序控制使用整个屏幕,而不显示浏览器界面。 指针锁定 API。 允许锁定到内容的指针,这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。 在线和离线事件。 为了构建一个良好的具有离线功能的 web 应用程序,你需要知道什么时候你的应用程序确实离线了。顺便提一句,在你的应用程序又再回到在线状态时你也需要知道。 8、设备访问 使用 Camera API。 允许使用和操作计算机的摄像头,并从中存取照片。 触控事件。 对用户按下触控屏的事件做出反应的处理程序。 使用地理位置定位。 让浏览器使用地理位置服务定位用户的位置。 检测设备方向。 让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备(例如制作能够对设备位置做出反应的游戏)或者使页面的布局跟屏幕的方向相适应(横向或纵向)。 指针锁定 API。 允许锁定到内容的指针,这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。 9、样式设计 新的背景样式特性。 现在可以使用 box-shadow 给逻辑框设置一个阴影,而且还可以设置 多背景。 更精美的边框。 现在不仅可以使用图像来格式化边框,使用 border-image 和它关联的普通属性,而且可以通过 border-radius 属性来支持圆角边框。 为你的样式设置动画。 使用 CSS Transitions 以在不同的状态间设置动画,或者使用 CSS Animations 在页面的某些部分设置动画而不需要一个触发事件,你现在可以在页面中控制移动元素了。 排版方面的改进。 作者拥有更高的控制已达到更佳的排版。他们不但可以控制 text-overflow 和 hyphenation, 而且也可以给它设置一个 阴影 或者更精细地控制它的 decorations。感谢新的 @font-face 规则,现在我们可以下载并应用自定义的字体了。. 新的展示性布局。 为了提高设计的灵活性,已经有两种新的布局被添加了进来:CSS 多栏布局, 以及 CSS 灵活方框布局。 相关推荐:《html视频教程》 Atas ialah kandungan terperinci html5具备什么功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP! Label berkaitan: html5 sumber:php.cn Artikel sebelumnya:HTML5中thead是什么意思 Artikel seterusnya:html5中新增加的属性与元素有哪些 Kenyataan Laman Web ini Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn Artikel terbaru oleh pengarang 深入搞懂Redis中的哨兵 2023-04-26 17:59:18 【整理分享】7个热门的React状态管理工具 2023-04-26 17:47:48 一文讨论Vue2中key和Vue3中key的区别 2023-04-26 17:41:42 一文聊聊Node中的内存控制 2023-04-26 17:37:05 实用Excel技巧分享:4种删除重复值的小妙招! 2023-04-26 17:31:25 实用Word技巧分享:简繁转换功能竟然可以这样用! 2023-04-26 17:27:32 如何解决跨域?常见解决方案浅析 2023-04-25 19:57:58 一文理解JavaScript中的单例模式 2023-04-25 19:53:11 深入了解Node中的Buffer 2023-04-25 19:49:11 探讨如何在Vue3中编写单元测试 2023-04-25 19:41:54 Isu terkini Bagaimana untuk menetapkan atribut yang diperlukan HTML5 menggunakan Javascript? Saya cuba menandakan kotak input teks seperti yang diperlukan dalam Javascript. daripada 2023-10-13 08:52:25 0 2 317 Masalah dengan tidak mendapat koordinat tetikus yang tepat: menggunakan kanvas HTML5 apabila mengubah saiz halaman Saya mahu mencipta kesan piksel ini daripada pakar bahagian hadapan. Walaupun saya boleh m... daripada 2023-09-12 12:20:33 0 1 280 Video HTML5 M3U8 dikodkan dengan Base64 Saya ingin menambah fail M3U8 yang dikodkan base64 dalam teg Video HTML5, bagaimana saya b... daripada 2023-09-09 23:07:18 0 1 247 vue.js/bootstrap: kaedah acara onclick tidak dipanggil, ralat "Pembolehubah tidak ditemui: updateDocument" Saya baru dalam pembangunan bahagian hadapan tetapi mempunyai pemahaman asas tentang HTML5... daripada 2023-09-09 20:06:48 0 1 362 Alih keluar slash penutup '/' daripada teg imej dalam XHTML Saya mempunyai txt1 rentetan yang menyimpan imej. Nilainya dalam format XHTML, iaitu eleme... daripada 2023-09-06 12:15:38 0 1 240 Topik-topik yang berkaitan Lagi> Apakah kaedah penghasilan penghasilan animasi html5? Perbezaan antara HTML dan HTML5 Bagaimana untuk membuka fail img Bagaimana untuk mengintegrasikan idea dengan Tomcat Penggunaan kelas kalendar dalam java Bagaimana untuk memulakan semula perkhidmatan dalam rangka kerja swoole Komputer tidak boleh menyalin dan menampal Apakah maksud syiling MLM? Berapa lama masa yang biasanya diambil untuk runtuh? Cadangan popular 什么是URL地址 web端是什么意思 编程语言有哪些 什么是IT行业 error是什么意思 Tutorial Popular Lagi> Tutorial berkaitan Cadangan popular Kursus terkini Tutorial video Yexiutang HTML5+CSS3 8577 Tutorial video mendalam asas HTML5 24122 Tutorial video pengenalan pengetahuan asas HTML5 63438 Tutorial video asas untuk bermula dengan HTML5 35988 Tutorial video asas tentang ciri baharu HTML5 26910 Tutorial praktikal animasi Kanvas HTML5 53196 Amalan pembangunan HTML5: pengeluaran bahagian hadapan tapak web mudah alih Baidu takeout 58942 Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP) 1394746 kali belajar Tutorial Video Permulaan JAVA 2347160 kali belajar Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python 493052 kali belajar Pengenalan pantas kepada pembangunan bahagian hadapan web 213403 kali belajar Kuasai tutorial video PS dari awal 842464 kali belajar [Web front-end] Permulaan pantas Node.js 3072 kali belajar Koleksi lengkap kursus timbunan penuh pembangunan web asing 2480 kali belajar Gunakan GraphQL praktikal bahasa 1958 kali belajar Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah 464 kali belajar Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam 10688 kali belajar Muat turun terkini Lagi> kesan web Kod sumber laman web Bahan laman web Templat hujung hadapan [butang borang] kod hubungan borang mesej perusahaan jQuery [Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5 [Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk [butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan [Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS [kesan khas html5] Permainan kotak menolak html5 klasik [Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej [Kesan album foto] Kesan zum hover kulit album peribadi CSS3 [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG) [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG) [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS) [PNG素材] 金色的毕业帽矢量素材(EPS+PNG) [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG) [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG) [banner图] 扁平风格的植树节banner矢量素材(AI+EPS) [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG) [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu Tentang kita Penafian Sitemap Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!
3、地理定位:
人们越来越少通过台式机甚至笔记本电脑来使用网络了。在今天,有很多人通过手持可移动设备浏览网络,例如智能手机和平板电脑。目前这种移动化的网络访问特征,再加上HTML5中新的地理定位功能,结合在一起开创了无数新的可能性。当用户访问你的网站时,可以知道他们的精确位置,让你能够提供个性化内容,以配合用户所在的环境。例如,当访问一个与郊游有关的网站时,如果发现你处于闹市区,就可以提供行程规划相关的信息;但如果你是在郊区位置访问该网站,则默认会显示互动式地图功能。
4、拖放功能:
这是个细微的变动,但却非常重要。拖放功能可以让你将浏览器的内容直接拖拉到电脑上,也可以将内容从电脑拖拉到浏览器上。真的是很划时代的改变,不是吗?来看看这个展示,想想看,如果社交网站有这样的功能,当你度假回来后,就可以很容易选好你的假期照片,然后拖拉到浏览器,就可以马上和网上的朋友分享。这才是我想要的网站互动方式!
5、桌面通知:
桌面通知是出现在浏览器之外的小弹窗,即使在用户没有浏览网站时,也可以和网站进行互动。目前这个功能只有Google Chrome浏览器可以使用,你可以在这里看到展示。这些通知很适合用来做电子邮件通知、社交网络更新、微博信息,还有其他服务中使用。再配合拖放功能后,就真的弱化了在线和本地应用程序之间的区别。
6、离线和存储
离线资源:应用程序缓存。 火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。
在线和离线事件。 Firefox 3 支持 WHATWG 在线和离线事件,这可以让应用程序和扩展检测是否存在可用的网络连接,以及在连接建立和断开时能感知到。
WHATWG 客户端会话和持久化存储 (又名 DOM 存储)。 客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。
IndexedDB。 是一个为了能够在浏览器中存储大量结构化数据,并且能够在这些数据上使用索引进行高性能检索的 Web 标准。
自 web 应用程序中使用文件。 对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中,从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 type file 的元素的新的 multiple 属性针对多文件选择的支持。 还有 FileReader。
7、性能和集成
Web Workers。 能够把 JavaScript 计算委托给后台线程,通过允许这些活动以防止使交互型事件变得缓慢。
XMLHttpRequest Level 2。 允许异步读取页面的某些部分,允许其显示动态内容,根据时间和用户行为而有所不同。这是在 Ajax背后的技术。
即时编译的 JavaScript 引擎。 新一代的 JavaScript 引擎功能更强大,性能更杰出。
History API。 允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。
conentEditable 属性:把你的网站改变成 wiki ! HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。
拖放。 HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。
HTML 中的焦点管理。 支持新的 HTML5 activeElement 和 hasFocus 属性。
基于 Web 的协议处理程序。 你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。
requestAnimationFrame。 允许控制动画渲染以获得更优性能。
全屏 API。 为一个网页或者应用程序控制使用整个屏幕,而不显示浏览器界面。
指针锁定 API。 允许锁定到内容的指针,这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。
在线和离线事件。 为了构建一个良好的具有离线功能的 web 应用程序,你需要知道什么时候你的应用程序确实离线了。顺便提一句,在你的应用程序又再回到在线状态时你也需要知道。
8、设备访问
使用 Camera API。 允许使用和操作计算机的摄像头,并从中存取照片。
触控事件。 对用户按下触控屏的事件做出反应的处理程序。
使用地理位置定位。 让浏览器使用地理位置服务定位用户的位置。
检测设备方向。 让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备(例如制作能够对设备位置做出反应的游戏)或者使页面的布局跟屏幕的方向相适应(横向或纵向)。
9、样式设计
新的背景样式特性。 现在可以使用 box-shadow 给逻辑框设置一个阴影,而且还可以设置 多背景。
更精美的边框。 现在不仅可以使用图像来格式化边框,使用 border-image 和它关联的普通属性,而且可以通过 border-radius 属性来支持圆角边框。
为你的样式设置动画。 使用 CSS Transitions 以在不同的状态间设置动画,或者使用 CSS Animations 在页面的某些部分设置动画而不需要一个触发事件,你现在可以在页面中控制移动元素了。
排版方面的改进。 作者拥有更高的控制已达到更佳的排版。他们不但可以控制 text-overflow 和 hyphenation, 而且也可以给它设置一个 阴影 或者更精细地控制它的 decorations。感谢新的 @font-face 规则,现在我们可以下载并应用自定义的字体了。.
新的展示性布局。 为了提高设计的灵活性,已经有两种新的布局被添加了进来:CSS 多栏布局, 以及 CSS 灵活方框布局。
相关推荐:《html视频教程》
Atas ialah kandungan terperinci html5具备什么功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!