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 vos étiquettes HTML, sinon elle ne passera pas la vérification et pourrait 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 :Doctype définit qu'avant que la balise HTML n'apparaisse, il indique au navigateur si cette 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 ces déclarations 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 souhaite 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 aux balises 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 trop discuter, cette méthode ne doit pas être utilisée, le code doit être transféré dans un fichier JS externe, puis AddEventListener / Pièdet de l'écoute de temps. Ou utilisez un cadre tel que jQuery, qui nécessite l'utilisation de sa méthode d'horloge.
$('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 à travailler dans la production de pages Web, il est fortement recommandé de télécharger cette barre d'outils de développement 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% des fonctions de 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 fera 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 séparée 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, 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 divisions de div. Habituellement, l'instinct des débutants est d'envelopper un paragraphe avec 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 la mise en page UL, n'utilisez pas Div pour disposer la liste.
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 du ciel ou l'illumination soudaine) se produit généralement tard dans la nuit. Par exemple, je comprends bien le concept de fermetures 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 aux 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, les utilisateurs peuvent l'utiliser, n'utilisez-vous pas OL 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 utilise 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 déjà 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 la question de savoir si la réinitialisation CSS doit être utilisée, 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 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.
Les cadres CSS sont conçus pour les développeurs qualifiés, ce qui leur fera gagner beaucoup de temps.