Analyse des principes de conception pour démarrer avec HTML5

[Introduction] Cet article est un article sur les concepts de conception d'Ued of Alimama. Il parle principalement des principes de conception pour démarrer avec HTML5 que j'ai commencé à parcourir. Les amis dans le besoin peuvent s'y référer. L'ère du HTML5 et du CSS3 est arrivée. La nouvelle page d'accueil Taobao 2011 a entièrement utilisé HTML5 uniquement en adoptant les changements

Cet article est un article sur les concepts de conception d'Alimama. les principes de conception pour démarrer avec HTML5, les amis dans le besoin peuvent s'y référer.

L'ère du HTML5 et du CSS3 est arrivée. La nouvelle page d'accueil Taobao 2011 a toutes utilisé le HTML5. La seule façon d'accepter le changement est d'accepter le changement. La traduction de l'article est très bonne.Après l'avoir relu, j'ai l'impression de comprendre beaucoup de choses. Je recommande fortement aux autres développeurs de chaussures pour enfants, notamment front-end, d'y jeter un œil.
Non seulement j'ai compris la relation entre html4, xhtml1.0, xhtml2.0 et html5, mais j'ai aussi compris pourquoi HTML5 est apparu. En même temps, j'ai intensifié l'application de HTML5 dans le projet.

------------------------------------------------------ ------ ------------------------------------
Les fameuses trois lois d'Asimov des robots :
Les robots ne doivent pas nuire aux humains ni rester les bras croisés et regarder les humains se faire mal.
Les robots doivent obéir aux ordres humains à moins que l'ordre ne viole la Première Loi.
Les robots doivent se défendre, tant qu'ils ne violent pas les première et deuxième lois.

------------------------------------------------------ ------ ------------------------------------
Les mêmes points entre xhtml1 .0 et html4.0 :
Le contenu des deux spécifications est le même ;
le vocabulaire est le même
tous les éléments sont les mêmes
tous les attributs sont également les mêmes ; > xhtml1.0 et html4.0La seule différence :
XHTML 1.0 nécessite l'utilisation de la syntaxe XML (style de codage strict)
//Tous les attributs doivent utiliser des lettres minuscules;
//Tous les éléments doivent également utiliser des minuscules letter;
/ /Toutes les valeurs d'attribut doivent être entre guillemets;
//Vous devez également vous rappeler d'utiliser des balises de fermeture, et n'oubliez pas d'utiliser des balises à fermeture automatique pour img et br.
Le seul changement entre XHTML 1.1 et xhtml1.0 :
Marquer le document comme document XML
//Modèle de gestion des erreurs XML : si l'analyseur rencontre une erreur, il arrête l'analyse.
//Pour les navigateurs qui ne comprennent pas XML, les utilisateurs ne pourront pas voir directement cette page Web.
Fonctionnalités XHTML 2 (cette spécification n'est pas complète) :
Toujours en utilisant le modèle de gestion des erreurs XML, vous devez vous assurer que les documents sont envoyés sous forme de types de documents XML
Intentionnellement plus compatible avec les versions existantes de HTML ; , Les développeurs et les fournisseurs de navigateurs ne le prendront jamais en charge.
Principes de conception vraiment largement applicables :
Soyez conservateur lors de l'envoi et soyez ouvert lors de la réception.
//En tant que professionnels, lors de l'envoi de documents, nous essaierons d'être conservateurs, d'utiliser les meilleures pratiques et de nous assurer que le document est bien formaté.
//Mais du point de vue du navigateur, il doit être ouvert à recevoir n'importe quel document.

------------------------------------------------------ ------ ------------------------------------

HTML5
1 Web Hypertext a été créé en 2004 par le groupe de travail sur la technologie des applications (Web Hypertext Application Technology Working Group, WHATWG), complètement séparé du W3C.
2. Le W3C a créé le groupe de travail HTML5 en 2007 pour poursuivre son travail sur la base des résultats du travail du WHATWG.

------------------------------------------------------ ------ ------------------------------------

Premier principe de conception HTML5 : évitez toute complexité inutile

Le code est le suivant

Copier le code

1. Comment écrire DOCTYPE :

代码如下	复制代码
一、DOCTYPE的写法： //HTML 4.01： //XHTML 1.0： //HTML5： //

//HTML 4.01 :

//XHTML 1.0 :

代码如下	复制代码
//HTML 4.01： //XHTML 1.0: //HTML5:

//

Cette méthode d'écriture déclenchera le mode standards du navigateur. Remarque : Doctype n'est pas écrit pour les navigateurs, Doctype est écrit pour les validateurs. Laissez le validateur valider mon document par rapport à ce doctype. 2. Comment écrire l'encodage des caractères du document spécifié :

Le code est le suivant	Copier le code
//HTML 4.01 : //XHTML 1.0 ://HTML5 :

Remarque : ce raccourci s'applique non seulement à la dernière version du navigateur, mais est également valable pour les navigateurs qui sont encore utilisés par les gens aujourd'hui.
Autres méthodes d'écriture concises du HTML5 :

Le code est le suivant

Copier le code

代码如下	复制代码
//无需再写type="text/css"，否则那就是重复自己了 <script></script> //无需再写使用的脚本语言 type="text/javascript"HTML5设计原理二：支持已有的内容 Hello world Hello world Hello world Hello world

/ /Plus besoin d'écrire type="text/css", sinon vous allez vous répéter

<script></script>

//Pas besoin d'écrire le langage de script utilisé type= Deuxième principe de conception HTML5 "text/javascript" : prise en charge du contenu existant

Bonjour tout le monde

代码如下	复制代码
//HTML 4.01 XHTML 1.0: Headline text Paragraph text. //HTML5: Headline text Paragraph text.

Bonjour tout le monde

Bonjour tout le monde

代码如下	复制代码
//HTML 4.01 XHTML 1.0: ... ... ... ... ... //HTML5: ... ... ... ... ...

Bonjour tout le monde< /p> Remarque : HTML5 prend en charge diverses méthodes d'écriture libres existantes. En JavaScript, vous pouvez ajouter un point-virgule à la fin de chaque instruction, mais ce n'est pas obligatoire car JavaScript insérera automatiquement un point-virgule... JSlint est en effet un excellent outil qui standardise et unifie le style de codage JavaScript, ce qui est très utile dans les projets d’équipe, cela fonctionne. ------------------------------------------------------ ------ ------------------------------------Troisième principe de conception HTML5 : résoudre des problèmes réelsAjouter un lien vers l'ensemble du bloc de contenu (y compris plusieurs éléments au niveau du bloc)

Le code est le suivant	Copier le code
//HTML 4.01 XHTML 1.0 : Texte du titre Texte du paragraphe.< /a> //HTML5 : Texte du titre Texte du paragraphe.

< /a>Remarque : cette façon d'écrire est en fait utilisée depuis longtemps. Elle existe dans le navigateur, mais il était auparavant illégal de l'écrire de cette façon. Nous avons maintenant changé la norme et vous êtes autorisé à l'écrire de cette façon. . ------------------------------------------------------ ------ ------------------------------------Principe de conception HTML5 quatrième : chercher la vérité et être pragmatiqueLes nouveaux éléments sémantiques impliquent l'en-tête, le pied de page, la section, l'article...

Le code est le suivant	Copier le code
//HTML 4.01 XHTML 1.0 : ... ... < p id="main">... ... ... //HTML5 : ... > ... ... ......

Remarque : les nouveaux éléments section, article, side et nav représentent un nouveau modèle de contenu, un modèle de contenu sans précédent en HTML : partitionner le contenu.
L'utilisation de nouveaux éléments comme alternatives aux classes est plus intéressante car ces éléments peuvent être utilisés non pas une seule fois dans une page, mais plusieurs fois et peuvent être imbriqués.
La section la plus courante peut être considérée comme celle la plus pertinente par rapport au contenu. Et l’article est un type spécial de section. À côté se trouve une section spéciale. Enfin, Nav est aussi une section spéciale.
/

Le code est le suivant

Copier le code

代码如下	复制代码
/HTML 4.01 XHTML 1.0: ... ... ... ... //HTML5: ... ... ... ...

/HTML 4.01 XHTML 1.0 :

...

...

...
< /p>

...

代码如下	复制代码
input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"

//HTML5 :
< section class= "item">

...

...< /footer>

...

代码如下	复制代码

...

Remarque : En HTML5, tant que vous créez un nouveau bloc de contenu, quel que soit la section, l'article, à part , nav, Qu'il s'agisse d'autres éléments, vous pouvez y utiliser H1, et vous n'avez pas à vous soucier du niveau dans lequel le titre de ce bloc doit être classé dans toute la page, H2, H3, il n'y a pas de problème ;

------------------------------------------------------ ------ ------------------------------------
Principe de conception HTML5 cinq : Dégradation douce
Graduelle Le revers de l’amélioration est une dégradation douce.

Utilisez l'attribut type pour améliorer le formulaire :

Le code est le suivant

Copier le code

input type="number"input type="search"input type= "range" input type="email"input type="date"input type="url"

Remarques : Les navigateurs existants ne peuvent pas comprendre ces nouvelles valeurs de type, mais lorsqu'ils voient une valeur de type qu'ils ne comprennent pas, ils interpréteront la valeur de type comme du texte. HTML5 ajoute également de nouveaux attributs aux éléments de saisie, tels que l'espace réservé, qui est utilisé pour pré-placer du texte dans la zone de texte. Aucun JavaScript n’est requis pour l’implémenter, c’est parfait. ------------------------------------------------------ ------ ------------------------------------Vidéo HTML5 vs Flash vidéo (élément vidéo) :

Le code est le suivant	Copier le code
td>

Remarque : les deux doivent être pris en compte, qu'il s'agisse de HTML5 ou de Flash :Si le navigateur prend en charge les éléments vidéo , il prend également en charge H264. Il n'y a rien à dire, utilisez simplement First video. Si le navigateur prend en charge l'élément vidéo et Ogg, utilisez la deuxième vidéo. Si le navigateur ne prend pas en charge l'élément vidéo, vous devriez essayer la vidéo Flash. Si le navigateur ne prend pas en charge l'élément vidéo et ne prend pas en charge Flash, je fournis également un lien de téléchargement. Suivez un autre principe de conception, la loi de Metcalfe :

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!