Organisez simplement les fonctionnalités de base et la syntaxe des compétences du didacticiel HTML5

Présentation HTML5 HTML5 est la prochaine version majeure du standard HTML, remplaçant HTML 4.01, XHTML 1.0 et XHTML 1.1. HTML5 est également une norme pour structurer et présenter du contenu sur le World Wide Web.

HTML5 est le produit de la coopération entre le World Wide Web Consortium (W3C) et le Web Hypertext Technology Working Group (WHATWG).

Cette nouvelle norme ajoute des fonctionnalités telles que la lecture vidéo et le glisser-déposer, qui reposaient auparavant sur des plug-ins de navigateur tiers tels qu'Adobe Flash, Microsoft Silverlight et Google Gears.

Prise en charge du navigateur La dernière version d'Apple Safari, Mozilla FireFox et Opera prennent en charge la plupart des fonctionnalités HTML5, et IE9 prend également en charge certaines fonctionnalités HTML5.

Les navigateurs mobiles préinstallés sur les iPhones, iPads et téléphones Android prennent tous en charge HTML5.

Nouvelles fonctionnalités HTML5 introduit de nombreux nouveaux éléments et attributs pour nous aider à créer des sites Web modernes. Voici les principales fonctionnalités introduites par HTML5 :

Nouveaux éléments sémantiques : tels que , et .

Forms 2.0 : améliorations des formulaires Web HTML, introduisant de nouveaux attributs pour la balise

Stockage local persistant : afin de ne pas être implémenté via des plug-ins tiers.

WebSocket : la nouvelle génération de technologie de communication bidirectionnelle pour les applications Web.

Événements push du serveur : HTML5 introduit des événements du serveur Web vers le navigateur Web, également appelés événements push du serveur (SSE).

Canvas : prend en charge le dessin 2D programmatique à l'aide de JavaScript.

Audio et vidéo : intégrez de l'audio ou de la vidéo dans des pages Web sans recourir à des plug-ins tiers.

Géolocalisation : Les utilisateurs peuvent choisir de partager leur localisation géographique avec nos pages web.

Microdonnées : nous permet de créer des vocabulaires personnalisés en dehors de HTML5 et d'étendre les pages Web avec une sémantique personnalisée.

Glisser-déposer : faites glisser et déposez des éléments sur la même page Web d'un emplacement à un autre.

Compatibilité ascendante HTML5 est conçu pour être aussi rétrocompatible que possible avec les navigateurs existants. Les nouvelles fonctionnalités s'appuient sur les fonctionnalités existantes et nous permettent de fournir un contenu de secours pour les anciens navigateurs.

Il est recommandé d'utiliser une petite quantité de code JavaScript pour détecter la prise en charge de fonctionnalités HTML5 individuelles.

Syntaxe HTML5

HTML5 possède « sa propre » syntaxe HTML qui est compatible avec les documents HTML 4 et XHTML1 déjà publiés sur le Web, mais n'est pas compatible avec les fonctionnalités SGML plus complexes de HTML 4.

HTML5 n'a pas les règles de syntaxe du XHTML qui nécessitent des noms de balises en minuscules, des attributs de guillemets, les attributs doivent avoir une valeur et tous les éléments vides doivent être fermés.

Mais HTML5 est plus flexible et prend en charge les formulaires suivants :

Mettre en majuscules les noms de balises. Les guillemets doubles pour les attributs sont facultatifs. La valeur de l'attribut est facultative. La fermeture des éléments vides est facultative. DOCTYPE Dans les anciennes versions de HTML, DOCTYPE est très long car le langage HTML est basé sur SGML et doit référencer une DTD.

Les auteurs HTML5 peuvent utiliser une syntaxe simple pour spécifier un DOCTYPE de la forme :

Code XML/HTML Copier le contenu dans le presse-papiers > La syntaxe ci-dessus n'est pas sensible à la casse.

Codage des caractères Les auteurs HTML5 peuvent spécifier le codage des caractères à l'aide d'une syntaxe simple comme suit :

Code XML/HTML Copier le contenu dans le presse-papiers méta charset = "UTF-8" > La syntaxe ci-dessus n'est pas sensible à la casse.

Balise Une approche courante consiste à ajouter un attribut de type avec une valeur de "text/javascript" à l'élément de script, comme indiqué ci-dessous :

Code XML/HTML Copier le contenu dans le presse-papiers script type = "texte/javascript" src = "scriptfile.js" > script > HTML5 supprime les informations supplémentaires requises et nous pouvons utiliser une syntaxe simple comme celle-ci :

Code XML/HTML Copier le contenu dans le presse-papiers script src = "scriptfile.js" > script > Jusqu'à présent, nous avons écrit

Code XML/HTML Copier le contenu dans le presse-papiers lien rel = "feuille de style" type = "text/css" href = "stylefile.css" > HTML5 supprime les informations supplémentaires requises et nous pouvons utiliser une syntaxe simple comme celle-ci :

Code XML/HTML Copier le contenu dans le presse-papiers lien rel = "feuille de style" href = "stylefile.css" > Élément HTML5 L'élément HTML5 est marqué par des balises de début et de fin. Les balises sont qualifiées en utilisant le nom de la balise entre crochets angulaires.

La différence entre la balise de début et la balise de fin est que le nom de cette dernière balise contient une barre oblique avant elle.

Voici un exemple d'élément HTML5 :

Code XML/HTML Copier le contenu dans le presse-papiers p > ... p > HTML5 タグ名は大文字と小文字が区別されず、すべて大文字または大文字を組み合わせて使用できますが、最も一般的な規則は常に小文字を使用することです。

ほとんどの要素には何らかのコンテンツが含まれます。たとえば、 ...

には段落が含まれます。ただし、一部の要素にはコンテンツを含めることができず、空白要素と呼ばれます。たとえば、br、hr、リンク、メタなどです。

HTML5 ドキュメント より良い構造を得るために、次のタグが導入されています:

セクション: このタグは、一般的なドキュメントまたはアプリケーションのセクションを表します。 h1 ～ h6 と一緒に使用して文書構造を表すことができます。

article: このタグは、ブログ エントリや新聞記事など、ドキュメント コンテンツの個別の部分を表します。

余談: このタグは、ページの残りの部分とわずかに関連するコンテンツのブロックを表します。

header: このタグはセクションのヘッダーを表します。

フッター: このタグはセクションの脚注を表し、著者、著作権、その他の情報を含めることができます。

nav: このタグは、ドキュメント内を移動するために使用されるセクションを表します。

ダイアログ: このタグは会話をマークするために使用できます。

図: このタグは、タイトルをグラフやビデオなどの特定の埋め込みコンテンツに関連付けるために使用できます。 HTML5 ドキュメントのマークアップは次のようになります:

XML/HTML コード コンテンツをクリップボードにコピー > html > 頭 > メタ charset = "utf- 8" > タイトル > ... タイトル > 頭 > ボディ > ヘッダー > ... ヘッダー > ナビ > ... ナビ > 記事 > セクション > … セクション > 記事 > 脇 > ... 脇 > フッター > ... フッター > ボディ >

Organisez simplement les fonctionnalités de base et la syntaxe des compétences du didacticiel HTML5_html5