Quoi de neuf en HTML5

Nouvelles fonctionnalités de HTML5 : 1. Balises sémantiques (en-tête, pied de page, navigation, etc.) ; 2. Mécanisme de stockage WebStorage ; 4. Types de formulaires (e-mail, tell, date, etc.) ; Éléments multimédias vidéo et audio ; 6. toile.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

HTML5 est la prochaine génération de HTML et deviendra le nouveau standard pour HTML, XHTML et HTML DOM.

HTML5 est le résultat d'une collaboration entre le W3C et le WHATWG. W3C 与 WHATWG 合作的结果。

为 HTML5 建立的一些规则：

• 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
• 减少对外部插件的需求（比如 Flash）
• 更优秀的错误处理
• 更多取代脚本的标记
• HTML5 应该独立于设备
• 开发进程应对公众透明

浏览器支持

最新版本的 Chrome、Firefox、Safari以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。

新特性

HTML5 中新增的一些有趣的新特性：

1、语义化标签

header<span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅黑, Tahoma, Arial, sans-serif">  </span>footer 、 nav 、 aside 、 section 、 meau 、 template 、 article 、 audio 、 video 、 canvas 等

2、webStorage 储存机制 sessionStorage 和 localStorageQuelques règles établies pour HTML5 :

Les nouvelles fonctionnalités doivent être basées sur HTML, CSS, DOM et JavaScript.

Besoin réduit de plugins externes (comme Flash)

• Meilleure gestion des erreurs

Plus de balisage pour remplacer les scripts

HTML5 devrait être indépendant du périphérique

• Le processus de développement doit être transparent pour le public

Prise en charge des navigateurs

Les dernières versions de Chrome, Firefox, Safari et Opera prennent en charge certaines fonctionnalités HTML5. Internet Explorer 9 prendra en charge certaines fonctionnalités HTML5. Domestic Maxthon, ainsi que les navigateurs nationaux tels que 360 ​​Browser, Sogou Browser, QQ Browser et Cheetah Browser basés sur IE ou Chromium (la version d'ingénierie ou la version expérimentale de Chrome) prennent également en charge la capacité HTML5.

Nouvelles fonctionnalités

Quelques nouvelles fonctionnalités intéressantes ajoutées en HTML5 :

1 Balises sémantiques

header<span style="font- family:Microsoft Yahei. , Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅é»', Tahoma, Arial, sans-serif"> </span>footer , nav , aside , section , meau , template , article , audio, vidéo, canvas, etc.

2 webStorage mécanisme de stockage sessionStorage<.> et <code>localStorage

webStorage : utilisez HTML5 pour stocker localement les données de navigation des utilisateurs. Auparavant, le stockage local utilisait des cookies. Mais le stockage Web doit être plus sécurisé et plus rapide. Ces données ne seront pas enregistrées sur le serveur, mais ne seront utilisées que lorsque les utilisateurs demanderont des données sur le site Web. Il peut également stocker de grandes quantités de données sans affecter les performances du site Web. Les données existent dans des paires clé/valeur, et les données d'une page Web ne peuvent être consultées et utilisées que par cette page Web.

Web Storage est divisé en deux types : sessionStorage et localStorage, c'est-à-dire que ces deux sont une instance de Storage. Le sens littéral montre clairement que sessionStorage enregistre les données dans la session et disparaît lorsque le navigateur est fermé, tandis que localStorage enregistre toujours les données localement sur le client. Les méthodes fournies par son API sont les suivantes :

setItem (key, value) ——  保存数据，以键值对的方式储存信息。

getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

clear () ——  删除所有的数据

key (index) —— 获取某个索引的key

localStorage : stockage des données sans limite de temps

Le cycle de vie de localStorage est permanent. Si vous utilisez localStorage pour stocker des données, même si vous fermez le navigateur, les données ne disparaîtront pas à moins que vous ne les supprimiez activement. La méthode utilisée est celle indiquée ci-dessus. localStorage a un attribut de longueur, vous pouvez vérifier le nombre d'enregistrements de données dont il dispose. L'utilisation est la suivante :

var storage = null;                          //判断浏览器是否支持localStorage
    if(window.localStorage){
        storage.setItem("name", "Rick");     //调用setItem方法，存储数据
            alert(storage.getItem("name"));  //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");      //调用removeItem方法，移除数据
            alert(storage.getItem("name"));  //调用getItem方法，弹框显示 name 为 null
    }

sessionStorage : Stockage des données pour une session🎜🎜 Le cycle de vie de sessionStorage se situe avant la fermeture du navigateur. En d’autres termes, les données existeront toujours jusqu’à la fermeture complète du navigateur. sessionStorage a également un attribut length, et son jugement et son utilisation de base sont les mêmes que ceux de localStorage. Les points suivants doivent être notés : 🎜 (1) L'actualisation de la page n'effacera pas les données 🎜 (2) Seuls les liens ouverts sur la page actuelle peuvent accéder aux données de sessionStorage ; changez-le. La méthode localisation.href peut obtenir les données internes de sessionStorage ; 🎜🎜🎜3. Objet History 🎜🎜🎜 L'objet history enregistre l'historique de l'accès à Internet de l'utilisateur, à partir du moment où la fenêtre est ouverte. 🎜🎜Utilisez la méthode go() pour sauter arbitrairement dans l'historique de l'utilisateur, en arrière ou en avant. 🎜🎜Cette méthode accepte un paramètre, une valeur entière représentant le nombre de pages à sauter en arrière ou en avant. 🎜🎜Les nombres négatifs représentent un saut en arrière (similaire au bouton « précédent » d'un navigateur autonome) 🎜🎜Les nombres positifs représentent un saut en avant (similaire au bouton « avant » d'un navigateur autonome) 🎜

history.go(-1) // 后退一页 
history.go(1) // 前进一页 
history.go(2) // 前进两页

🎜Vous pouvez également give go() La méthode passe un paramètre de chaîne et le navigateur passera à la première position de l'historique qui contient la chaîne - elle peut être en avant ou en arrière. Cela dépend de l'emplacement le plus proche. Si l'historique ne contient pas la chaîne, alors cette méthode ne fait rien🎜

history.go('wrox.com') // 调到最近的 wrox.com 页面

🎜Vous pouvez également utiliser les deux méthodes abrégées back() et forward() au lieu de go(). Les deux méthodes imitent les boutons « précédent » et « suivant » du navigateur. 🎜

history.back() // 后退一页
history.forward() // 前进一页

🎜🎜4. Mise à niveau des éléments de formulaire🎜🎜

传统的表单元素：form、laber、textarea、select、button...

input（text、password、radio、checkbox、file、submit、reset、button）

Html5给input新增加一些类型（search、email、number、tell、range、color、date）

升级：给表单元素新增加属性placeholder（给表单元素设置提示信息）

升级：提供了新的下拉框方式

5、多媒体

用于回放的 video 和 audio 元素

6、用于绘画的 canvas

5ba626b379994d53f7acf72a64f9b697定义图形,绘制路径，矩形，圆形，字符以及添加图像的方法 。

　　首先创建canvas元素，并规定元素的id、宽度和高度撒的：

　　　　　　65bf494c1b23a47c81fdf73594820646c2caaf3fc160dd2513ce82f021917f8b
　然后通过javas来绘制。Canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成渐变。
　　　　　　5cd6e472395e766622bc5d31b556eb7a
　　　　　　　　　　var c=document.getElementById("myCanvas");
　　　　　　　　　　var cxt=c.getContext("2d");
　　　　　　　　　　cxt.fillStyle="#FF0000";
　　　　　　　　　　cxt.fillRect(0,0,150,75);
　　　　　　2cacc6d41bbb37262a98f745aa00fbf0

　　JavaScript 使用 id 来寻找 canvas 元素：

　　　　　　var c=document.getElementById("myCanvas");

　　然后，创建 context 对象：

　　　　　　var cxt=c.getContext("2d");

　　getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

　　下面的两行代码绘制一个红色的矩形：

　　　　　　cxt.fillStyle="#FF0000";
　　　　　　cxt.fillRect(0,0,150,75);

　　fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

　　下面的两行代码绘制一条直线：

　　　　　　cxt.moveTo(100,100);

　　　　　　cxt.lineTo(200,200);

　　下面的一行代码是画一个圆：

　　　　　　cxt.arc(70,18,15,0,Math.PI*2,false);

　　这些属性值分别对应的是什么，70,18分别是X轴和Y轴，15是这个圆的半径，0是角度,Math.PI*2是圆周率，false代表顺时针而true是逆时针。

　　颜色的渐变效果也是可以实现的：

　　　　<script type="text/javascript">
　　　　　　　　var c=document.getElementById("myCanvas");
　　　　　　　　var cxt=c.getContext("2d");
　　　　　　　　var grd=cxt.createLinearGradient(0,0,175,50);
　　　　　　　　grd.addColorStop(0,"#FF0000");
　　　　　　　　grd.addColorStop(1,"#00FF00");
　　　　　　　　cxt.fillStyle=grd;
　　　　　　　　cxt.fillRect(0,0,175,50);
　　　　 </script>

　　还有一些其他效果:

　　　　曲线quadraticCurreTo

　　　　字体fillText

推荐教程：《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!