84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
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视频教程》 Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois! Étiquettes associées： html5 source：php.cn Article précédent：HTML5中thead是什么意思 Article suivant：html5中新增加的属性与元素有哪些 Déclaration de ce site Web Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn Derniers articles par auteur 深入搞懂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 Derniers numéros Comment définir l'attribut obligatoire de HTML5 à l'aide de Javascript ? J'essaie de marquer une zone de saisie de texte comme requis en Javascript. Depuis 2023-10-13 08:52:25 0 2 317 Problème lié à l'obtention de coordonnées de souris précises : utilisation du canevas HTML5 lors du redimensionnement de la page Je souhaite créer cet effet de pixel à partir d'un expert front-end. Bien que je puisse ob... Depuis 2023-09-12 12:20:33 0 1 280 Vidéo HTML5 M3U8 encodée en Base64 Je souhaite ajouter un fichier M3U8 encodé en base64 dans la balise vidéo de HTML5, commen... Depuis 2023-09-09 23:07:18 0 1 247 vue.js/bootstrap : méthode d'événement onclick non appelée, erreur "Variable introuvable : updateDocument" Je suis nouveau dans le développement front-end mais j'ai une compréhension de base de HTM... Depuis 2023-09-09 20:06:48 0 1 362 Supprimer la barre oblique de fermeture '/' de la balise d'image en XHTML J'ai une chaîne txt1 qui stocke une image. Sa valeur est au format XHTML, c'est à dire que... Depuis 2023-09-06 12:15:38 0 1 240 Rubriques connexes Plus> Quelles sont les méthodes de production de production d'animation html5 ? La différence entre HTML et HTML5 Raisons pour lesquelles l'écran tactile du téléphone portable échoue qu'est-ce que le système oa Comment centrer la page Web dans Dreamweaver Comment désactiver les mises à jour automatiques dans Win10 Dogecoin prix d'aujourd'hui Comment MySQL et Redis assurent-ils la cohérence des doubles écritures ? Recommandations populaires 什么是URL地址 web端是什么意思 编程语言有哪些 什么是IT行业 error是什么意思 Tutoriels populaires Plus> Tutoriels associés Recommandations populaires Derniers cours Tutoriel vidéo Yexiutang HTML5+CSS3 8577 Tutoriel vidéo approfondi sur les bases du HTML5 24122 Tutoriel vidéo d'introduction aux connaissances de base HTML5 63438 Tutoriel vidéo de base pour démarrer avec HTML5 35988 Tutoriel vidéo de base sur les nouvelles fonctionnalités de HTML5 26910 Tutoriel pratique d'animation HTML5 Canvas 53196 Pratique de développement HTML5 : production frontale du site Web mobile à emporter Baidu 58942 Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1394746 temps d'étude Tutoriel vidéo JAVA pour débutants 2347158 temps d'étude Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 493052 temps d'étude Introduction rapide au développement web front-end 213403 temps d'étude Maîtrisez les didacticiels vidéo PS à partir de zéro 842464 temps d'étude [Web front-end] Démarrage rapide de Node.js 3072 temps d'étude Collection complète de cours full-stack de développement Web étranger 2480 temps d'étude Aller au langage pratique GraphQL 1958 temps d'étude Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape 464 temps d'étude Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures 10688 temps d'étude Derniers téléchargements Plus> effets Web Code source du site Web Matériel du site Web Modèle frontal [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3 [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5 [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3 [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet [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) [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet À propos de nous Clause de non-responsabilité Sitemap Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！
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视频教程》
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
