Cet article résume 30 guides pour écrire du code HTML. Tant que vous les gardez à l'esprit et les utilisez de manière flexible dans le processus d'écriture du code HTML, vous écrirez certainement de beaux codes et entrerez dans les rangs des développeurs professionnels dès que possible.
Dans le code source de la page précédente, j'ai souvent vu de telles déclarations:
<li>some text here.<li>some new text here.<li>you get the idea.Peut-être que dans le passé, nous pourrions tolérer de telles étiquettes HTML non fermées, mais selon les normes d'aujourd'hui, cela est très indésirable et doit être évité à 100%. Assurez-vous de faire attention à la fermeture de votre balise HTML, sinon elle ne passera pas la vérification et peut causer des problèmes imprévus.
Il est préférable d'utiliser ce formulaire:
<ul><li>some text here. </li><li>some new text here. </li><li>you get the idea. </li></ul>L'auteur a rejoint de nombreux forums CSS plus tôt, où si un utilisateur rencontre des problèmes, nous suggérons qu'il fasse deux choses en premier:
Il existe généralement quatre types de documents à choisir :La définition Doctype indique au navigateur si la page contient HTML, XHTML ou un mélange des deux, afin que le navigateur puisse analyser correctement la balise.
1. <!doctype html public -//w3c//dtd html 4.01//en http://www.w3.org/tr/html4/strict.dtd>2. <!doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/loose.dtd>3. <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>4. <!doctype html public -//w3c//dtd xhtml 1.0 strict//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>Il y a toujours eu des opinions différentes sur le type de déclaration de type de documents à utiliser. On pense généralement que la déclaration la plus stricte est le meilleur choix, mais la recherche montre que la plupart des navigateurs analyseront cette déclaration de manière normale, de sorte que de nombreuses personnes choisissent d'utiliser la norme HTML4.01. L'essentiel du choix d'une déclaration est qu'il ne vous convient pas vraiment, vous devez donc envisager de choisir de manière approfondie une déclaration qui convient à votre projet.
Lorsque vous êtes occupé à écrire du code, vous pouvez souvent ajouter un peu de code CSS intégré à désinvolture ou paresseux, comme ceci:
<p style=color: red;>网页设计</p>Cela semble pratique et n'a aucun problème, mais cela entraînera des problèmes dans votre code.
Lorsque vous commencez à écrire du code, il est préférable de commencer à ajouter du code de style une fois la structure de contenu terminée.
Cette méthode d'encodage est comme combattre la guérilla, qui est une approche très copieuse. -Chris Coyier
Une meilleure approche consiste à définir le style de ce P dans le fichier de feuille de style:
someelement > p {color: red;}En théorie, vous pouvez introduire des feuilles de styles CSS n'importe où, mais la spécification HTML recommande de les introduire dans l'étiquette de tête d'une page Web, ce qui peut accélérer le rendu de la page.
Pendant le processus de développement de Yahoo, nous avons constaté que l'introduction de feuilles de style dans le tag de tête accélérera le chargement des pages Web.
Parce que cela permet de rendre la page étape par étape. - Équipe Yslow
<head><title>my favorites kinds of corn</title><link rel=stylesheet type=text/css media=screen href=path/to/file.css /><link rel=stylesheet type=text/css media=screen href=path/to/anotherfile.css /></head>Un principe à retenir est de rendre la page présente devant les utilisateurs le plus rapidement possible. Lorsqu'un script est chargé, la page s'arrête le chargement jusqu'à ce que le script soit complètement chargé. Il perdra donc plus de temps pour les utilisateurs.
Si votre fichier JS veut simplement implémenter certaines fonctions, telles que l'événement de clic de bouton, vous pouvez l'introduire en toute sécurité au bas du corps, ce qui est certainement la meilleure façon de le faire.
Par exemple : <p>and now you know my favorite kinds of corn. </p><script type=text/javascript src=path/to/file.js></script><script type=text/javascript src=path/to/anotherfile.js></script></body></html>Il y a de nombreuses années, il y avait un moyen d'ajouter directement du code JS à la balise HTML. Particulièrement très commun dans les albums photo simples. Essentiellement, un événement ONClick est attaché à une balise, et son effet équivaut à un code JS. Il n'est pas nécessaire de discuter trop, cette méthode ne doit pas être utilisée, le code doit être transféré dans un fichier JS externe, puis AddEventListener / Pitretvent à l'écouteur de temps. Ou utilisez un framework tel que jQuery, et la méthode d'horloge est requise.
$('a#morecorninfolink').click(function() {alert('want to learn more about corn?');});Beaucoup de gens ne comprennent pas vraiment la signification et la valeur de la vérification standard. L'auteur a analysé ce problème en détail dans un blog. En un mot, la vérification standard est pour vous, pas pour vous de causer des problèmes.
Si vous commencez tout juste à vous engager dans la production de pages Web, il est fortement recommandé de télécharger cette barre d'outils de développement de pages Web et d'utiliser la vérification standard HTML et la vérification standard CSS à tout moment pendant le processus d'encodage. Si vous pensez que CSS est une langue très facile à apprendre, cela vous fera mourir. Votre code complexe rendra votre page pleine de failles et de problèmes constamment. Un bon moyen consiste à vérifier, vérifier, puis vérifier.
Firebug est un meilleur plug-in bien mérité pour le développement Web. Il débogue non seulement JavaScript, mais vous permet également de comprendre intuitivement les propriétés et l'emplacement des balises de page. Inutile de dire, téléchargez-le!
Selon l'observation de l'auteur, la plupart des utilisateurs n'utilisent que 20% de la fonction Firebug, ce qui est vraiment un gaspillage. Vous pourriez aussi bien passer quelques heures à apprendre cet outil dans le système, et je pense que cela vous donnera deux fois le résultat avec la moitié de l'effort.
Tutoriel Firebug :En théorie, vous pouvez écrire des marques avec désinvolture comme ceci:
<div><p>here's an interesting fact about corn. </p></div>Il est préférable de ne pas écrire de cette façon. Il est inutile de mettre plus de lettres et cela rendra le code laid, ce qui est bien:
<div><p>here's an interesting fact about corn. </p></div>L'auteur vous recommande d'utiliser ces six balises sur vos pages Web. Bien que la plupart des gens n'utiliseront que les quatre premiers, le H le plus utilisé aura de nombreux avantages, tels que convivial, convivial pour les moteurs de recherche, etc. Vous pourriez aussi bien remplacer votre balise P par H6.
Aujourd'hui, l'auteur a lancé une discussion sur Twitter: si H1 devrait être défini sur le logo ou sur le titre de l'article, 80% des personnes ont choisi ce dernier.
Bien sûr, comment l'utiliser dépend de vos besoins, mais je suggère que lorsque vous configurez un blog, vous devez définir le titre de l'article en tant que H1, ce qui est très bénéfique pour l'optimisation des moteurs de recherche (SEO).
Au cours des dernières années, l’équipe de Yahoo a fait beaucoup de excellent travail dans le développement frontal. Il n'y a pas longtemps, ils ont publié une extension Firebug appelée Yslow, qui analysera votre page Web et renverra une transcription, qui analyse soigneusement tous les aspects de cette page Web et propose des domaines qui nécessitent une amélioration. Bien que ce soit un peu dur, cela vous aidera certainement. Il est fortement recommandé - Yslow!
Habituellement, le site Web a un menu de navigation, vous pouvez le définir de cette manière:
<div id=nav><a href=#>home </a><a href=#>about </a><a href=#>contact </a></div>Si vous souhaitez écrire un beau code, il est préférable de ne pas utiliser cette méthode.
Pourquoi utiliser les menus de navigation UL pour mettre en place?
-Parce UL est né pour se préparer à la liste de définition
Il est préférable de le définir comme ceci:
<ul id=nav><li><a href=#>home</a></li><li><a href=#>about</a></li><li><a href=#>contact</a></li></ul>IE a toujours été un cauchemar pour les développeurs frontaux!
Si votre feuille de style CSS est essentiellement finalisée, vous pouvez créer une feuille de style pour IE, puis cela ne prendra effet que pour IE:
<!--[if lt ie 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->La signification de ces codes est: si le navigateur de l'utilisateur est IE6 ou ci-dessous, ce code prendra effet. Si vous voulez inclure IE7, alors changez [si LT IE 7] à [si LTE IE 7].
Que vous soyez un utilisateur Windows ou Mac, il existe de nombreux excellents éditeurs pour vous de choisir:
En regardant en arrière la première page que la plupart d'entre nous écrivons, nous trouverons certainement de sérieuses habitudes de div. Habituellement, l'instinct des débutants est d'envelopper un paragraphe avec une div, puis de mettre plus de divs afin de contrôler le positionnement. - En fait, c'est une approche inefficace et nuisible.
Après avoir écrit la page Web, vous devez le vérifier plusieurs fois pour minimiser le nombre d'éléments.
Si vous pouvez utiliser les listes de mise en page UL pour utiliser, n'utilisez pas de divs pour les mettre en page.
Tout comme la clé pour écrire un article est de réduire, réduire et réduire, la rédaction d'une page doit également suivre cette norme.
Les avantages de l'ajout d'un attribut ALT aux images sont évidents - cela permet aux utilisateurs qui désactivent les images ou utilisent des appareils spéciaux pour accéder à vos informations de Prince et sont également conviviaux pour les moteurs de recherche d'images.
Firefox ne prend pas en charge l'affichage de l'attribut Image Alt, vous pouvez ajouter l'attribut de titre:
<img src=cornimage.jpg alt=网页设计title=网页设计/>J'étudie et travaille souvent jusqu'au petit matin sans le savoir, et je pense que c'est une bonne situation.
Le mien ~ ha! Le temps (les moments ah-ha, se référant à des moments où la lumière des saules ou les moments d'illumination) se produit généralement tard dans la nuit. Par exemple, je comprends bien le concept de fermeture en JavaScript, dans ce cas. Si vous n'avez pas connu un moment aussi merveilleux, essayez-le maintenant!
Rien ne peut vous aider à apprendre HTML plus rapidement que d'imiter votre idole. Au début, nous devions tous être prêts à faire un copieur, puis à développer lentement notre propre style. Recherchez le code de votre page de site Web préférée et voyez comment ils les implémentent. C'est le seul moyen pour les experts, vous devez l'essayer. Remarque: Apprenez et imitez leur style de codage, pas copier et copier!
Faites attention à divers effets JavaScript cool sur Internet. Si vous semblez utiliser un plug-in, vous pouvez trouver le nom de plug-in en fonction du nom de fichier dans la balise de tête dans son code source, puis vous pouvez apprendre à l'utiliser pour votre propre usage.
Cela est particulièrement nécessaire lorsque vous créez des sites Web pour d'autres sociétés. N'utilisez-vous pas vous-même la balise Blockquote? Ensuite, l'utilisateur peut l'utiliser, n'utilisez-vous pas vous-même? Les utilisateurs peuvent aussi. Prenez le temps de créer une page qui affiche les styles d'éléments tels que UL, OL, P, H1-H6, Blockquotes, etc., et vérifiez s'il y a des omissions.
Note du traducteur: le titre anglais original est d'utiliser Twitter
Il existe de nombreuses API qui peuvent être ajoutées aux pages Web gratuitement maintenant, et ces outils sont très puissants. Il peut vous aider à mettre en œuvre de nombreuses fonctions intelligentes, et plus important encore, il peut vous aider à promouvoir le site Web.
Photoshop est un outil important pour les ingénieurs frontaux. Si vous maîtrisez HTML et CSS, vous pourriez aussi bien en savoir plus sur Photoshop.
Bien que certaines balises HTML soient rarement utilisées, vous devez toujours les comprendre. Par exemple, ABBR, citer, etc., vous devez les apprendre en cas d'urgence.
Il existe de nombreuses excellentes ressources sur Internet, et de nombreux experts sont cachés dans la communauté. Ici, vous pouvez apprendre par vous-même et demander aux développeurs expérimentés.
La réinitialisation CSS est également réinitialisée CSS, ce qui signifie réinitialiser certains styles de balise HTML ou styles par défaut.
Il existe également un débat féroce sur l'opportunité d'utiliser la réinitialisation CSS sur Internet, et l'auteur le recommande. Vous pouvez d'abord choisir des réinitialités CSS matures, puis évoluer lentement en quelque chose qui vous convient.
Autrement dit, vous devez aligner autant que possible vos éléments Web. Vous pouvez observer les sites Web que vous aimez, et leurs logos, titres, graphiques et paragraphes sont définitivement très bien corrects. Sinon, il semblera chaotique et non professionnel.
Maintenant que vous avez maîtrisé les connaissances de HTML, CSS et Photoshop, vous devez également apprendre à convertir la PSD en images et arrière-plans sur la page Web. Voici deux bons tutoriels:
Il existe de nombreux excellents frameworks pour JavaScript et CSS, mais si vous êtes un débutant, ne vous précipitez pas pour les utiliser. Si vous n'êtes pas en mesure de maîtriser CSS habilement, l'utilisation de frameworks confondre votre système de connaissances.
Le cadre CSS est conçu pour les développeurs qualifiés, ce qui leur fera gagner beaucoup de temps.