Comment comprenez-vous la sémantisation de la structure HTML ?

  • 1. Lorsque les styles sont supprimés ou perdus, la page peut encore présenter une structure claire.
  • 2. Les lecteurs d'écran (si le visiteur a des déficiences visuelles) "liront" entièrement votre page web en fonction de votre balisage.
  • 3. Les appareils tels que les PDA et les téléphones mobiles peuvent ne pas être en mesure d'afficher les pages web comme les navigateurs sur des ordinateurs ordinaires (généralement parce que ces appareils prennent moins bien en charge CSS).
  • 4. Les robots d'indexation des moteurs de recherche s'appuient également sur le balisage pour déterminer le contexte et le poids de chaque mot-clé.
  • 5. Que votre page soit facilement comprise par les robots d'exploration est très important, car les robots ignorent en grande partie le balisage utilisé pour la présentation et se concentrent uniquement sur le balisage sémantique.
  • 6. Facilite le développement et la maintenance en équipe.

Le mode strict et le mode quirks de la déclaration de document Doctype : comment ces deux modes sont-ils déclenchés, et quelle est l'importance de les distinguer ?

1. Comment déclencher les deux modes

L'ajout d'une déclaration d'en-tête XML peut déclencher le mode Quirks du navigateur IE. Une fois déclenché, le navigateur analyse exactement comme IE5.5, avec les mêmes bogues et autres problèmes qu'IE5.5, et son comportement (JavaScript) est également le même.

2. Déclenchement dans IE6 : ajoutez une déclaration XML avant le DOCTYPE XHTML.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3. Déclenchement dans IE7 : ajoutez un commentaire HTML entre la déclaration XML et le DOCTYPE XHTML.

<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4. Peut être déclenché à la fois dans IE6 et IE7 : ajoutez un commentaire HTML en tête du document DOCTYPE HTML 4.01.

<!-- quirks mode -->  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

5. Ajoutez en haut de la page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> , déclenchera le « mode quirks »

6. Lorsqu'aucune déclaration DTD n'est utilisée, ou qu'une déclaration DTD inférieure à HTML4 (HTML4 non inclus) est utilisée, pratiquement tous les navigateurs effectuent le rendu en mode quirks.

Du point de vue du front-end, que pensez-vous qu'il faille prendre en compte pour bien faire du SEO ?

  • 1. Comprendre comment les moteurs de recherche explorent et indexent les pages web.
  • 2. Optimisation des balises meta.
  • 3. Comment sélectionner des mots-clés et les placer dans les pages web.
  • 4. Comprendre les principaux moteurs de recherche.
  • 5. Les principaux annuaires internet.
  • 6. Moteurs de recherche payants au clic.
  • 7. Inscription/soumission aux moteurs de recherche.
  • 8. Échange de liens et popularité des liens.
  • 9. Utilisation raisonnable des balises.

Nous savons que les fichiers CSS peuvent être introduits via des liens externes. Veuillez parler des façons d'introduire le CSS via des liens externes, et y a-t-il des différences de performance entre ces méthodes ?

Il existe trois façons les plus couramment utilisées d'introduire le CSS :

  • Première : ajouter dans la section head<link rel="stylesheet" type="text/css" href="my.css.html"/>, pour introduire un fichier CSS externe.
  • Deuxième : ajouter dans la section head
    <style type="text/css"> 
div{margin: 0;padding: 0;border:1px red solid;} 
</style>
  • Troisième : ajouter directement dans les balises de la page.<div style="border:1px red solid;">

Qu'est-ce que CSS Sprite ? Discutez des avantages et des inconvénients de cette technique.

Les CSS sprites sont appelés « css精灵 » par beaucoup en Chine. C'est une façon de gérer les images de page web. Il vous permet d'inclure toutes les images dispersées impliquées dans une page dans , ce qui réduit le nombre de requêtes au serveur et améliore la vitesse d'accès.

1. Avantages :

  • (1) L'utilisation de CSS Sprites peut effectivement réduire le nombre de requêtes HTTP d'une page web, améliorant grandement les performances de la page. C'est aussi l'avantage des CSS Sprites et la principale raison de leur large diffusion et application.
  • (2) Cela résout le problème des web designers pour nommer les images. Il vous suffit de nommer une seule image combinée plutôt que de nommer chaque petit élément, ce qui améliore l'efficacité de la production de pages web.
  • (3) Il est pratique de modifier les styles. Il vous suffit de modifier la couleur ou le style d'une ou de quelques images, et le style de toute la page web peut être modifié. Il est également pratique à maintenir.

2. Inconvénients :

  • (1) Lors de la fusion d'images, vous devez fusionner de manière organique et raisonnable plusieurs images en une seule, et laisser suffisamment d'espace pour éviter que des arrière-plans inutiles n'apparaissent dans les sections. Ces points sont acceptables ; le plus douloureux concerne les pages adaptatives sur des écrans larges à haute résolution. Si votre image n'est pas assez large, l'arrière-plan peut facilement se casser.
  • (2) Les CSS Sprites sont pénibles à développer. Vous devez utiliser Photoshop ou d'autres outils pour mesurer et calculer la position exacte de chaque unité d'arrière-plan. Cela ressemble à de la couture ; ce n'est pas difficile, mais c'est très fastidieux.
  • (3) Les CSS Sprites sont pénibles à maintenir. S'il y a un léger changement dans l'arrière-plan de la page, vous devez généralement modifier l'image fusionnée. S'il n'est pas nécessaire de la modifier, il vaut mieux ne pas y toucher, afin d'éviter de modifier davantage de CSS. Si elle ne peut pas tenir à sa position d'origine, vous devez (de préférence) ajouter des images plus bas. Ainsi, la taille de l'image augmente, et vous devez aussi modifier le CSS.

Définissez un coin arrondi (de n'importe quelle taille) reconnu par les navigateurs à noyau webkit conformément au standard CSS3.

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;

Quels sont les éléments en ligne ? Quels sont les éléments de niveau bloc ? Qu'est-ce que le modèle de boîte CSS ?

  • Les éléments en ligne incluent : a b span I em img input select strong
  • Les éléments de niveau bloc incluent : div ul ol li dl dt dd h1 h2 h3 h4 p
  • Modèle de boîte : margin border padding width

Quelles sont les trois couches qui composent une page front-end ? Quelles sont-elles respectivement, et quels sont leurs rôles ?

Une page web est divisée en trois couches, à savoir : la couche de structure, la couche de présentation et la couche de comportement.

  • 1. La couche structurelle d'une page web est créée par des langages de balisage tels que HTML ou XHTML. Les balises, c'est-à-dire les mots qui apparaissent entre chevrons, sont responsables de la signification sémantique du contenu de la page web. Ces balises ne contiennent aucune information sur la façon d'afficher le contenu concerné. Par exemple, la balise P exprime la signification sémantique : « Ceci est un paragraphe de texte. »
  • 2. La couche de présentation d'une page web est créée par CSS. CSS répond à la question « comment afficher le contenu concerné ».
  • 3. La couche de comportement d'une page web est chargée de répondre à la question « comment le contenu doit réagir aux événements ». C'est le domaine dominé par le langage JavaScript et le DOM.

En HTML, quelle est la différence entre les méthodes GET et POST pour l'action dans un formulaire ?

  • 1. GET est utilisé pour récupérer des données depuis le serveur, tandis que POST est utilisé pour envoyer des données au serveur.
  • 2. GET ajoute les données du formulaire à l'URL spécifiée par l'action sous la forme variable=value, l'URL et les données étant reliées par « ? », et les variables étant reliées par « & ». POST place les données du formulaire dans le corps de données du formulaire et les transmet à l'URL spécifiée par action d'une manière qui associe les variables aux valeurs.
  • 3. Get n'est pas sécurisé car, pendant la transmission, les données sont placées dans l'URL de la requête, et de nombreux serveurs existants, serveurs proxy ou agents utilisateur enregistreront l'URL de la requête dans des fichiers journaux et la stockeront quelque part, de sorte que certaines informations privées peuvent être vues par des tiers. De plus, les utilisateurs peuvent directement voir les données soumises dans le navigateur, et certains messages système internes seront également affichés à l'utilisateur. Toutes les opérations Post sont invisibles pour l'utilisateur.
  • 4. Get transmet une petite quantité de données, principalement parce qu'il est limité par la longueur de l'URL. Post peut transmettre de grandes quantités de données, donc seul Post peut être utilisé pour l'envoi de fichiers (bien sûr, il y a une autre raison qui sera mentionnée plus tard).
  • 5. Get limite les valeurs de l'ensemble de données Form aux caractères ASCII. Post prend en charge l'intégralité du jeu de caractères ISO10646.
  • 6. Get est la méthode par défaut de Form.

Quelle est la différence entre les attributs id et class des éléments HTML ?

id et class sont deux attributs courants dans les pages web. Ils travaillent ensemble pour rendre toute la page riche et colorée. Lorsque nous définissons des styles pour un élément, les deux peuvent être utilisés, mais y a-t-il des différences ?

  • 1. Lorsqu'on écrit dans une feuille de style CSS, le préfixe du sélecteur id doit être '#', et le préfixe du sélecteur class doit être '.'
  • 2. L'attribut id ne peut être utilisé qu'une seule fois dans une page, tandis que class peut être utilisé plusieurs fois.
  • 3. En tant que balise d'élément, id sert à distinguer différentes structures et contenus, tandis que class, en tant que style, peut être appliqué à n'importe quelle structure et à n'importe quel contenu.
  • 4. Principes généraux en mise en page : id détermine d'abord la structure et le contenu, puis définit des styles pour celle-ci. class, c'est l'inverse : on définit d'abord le style, puis on applique le style à différentes structures et contenus selon les différents besoins de la page.
  • 5. Les navigateurs actuels autorisent plusieurs id avec la même valeur d'attribut sur la même page, et ils s'affichent généralement normalement. Cependant, lorsque JavaScript utilise id pour contrôler des éléments, des erreurs peuvent survenir.
  • 6. Dans les applications pratiques, class est souvent utilisé pour les sections de texte et la décoration de page, tandis que id est principalement utilisé pour les grandes mises en page et les styles destinés à la conception de blocs conteneurs ou de boîtes conteneurs.

Qu'est-ce qu'Ajax ?

Ajax n'est pas une technologie unique ; il s'agit en fait de plusieurs technologies, chacune avec ses propres caractéristiques uniques. Combinées ensemble, elles deviennent une nouvelle technologie puissante. Ajax comprend :

  • 1. XHTML et CSS
  • 2. Utiliser le Document Object Model (DOM) pour l'affichage dynamique et l'interaction.
  • 3. Utiliser XML et XSLT pour l'échange et la manipulation de données.
  • 4. Utiliser XMLHttpRequest pour la réception asynchrone de données.
  • 5. Utiliser JavaScript pour les relier ensemble.

Dans quels navigateurs avez-vous testé vos pages ? Quels sont les moteurs de rendu de ces navigateurs ? Quels problèmes de compatibilité entre navigateurs sont couramment rencontrés ? Pourquoi se produisent-ils ? Quelles sont les solutions ?

  • 1. DOCTYPE affecte le traitement CSS.
  • 2. FF : après avoir défini le padding, div augmentera sa hauteur et sa largeur, mais IE ne le fera pas. Par conséquent, vous devez utiliser !important pour définir une hauteur et une largeur supplémentaires.
  • 3. FF prend en charge !important, tandis qu'IE l'ignore. Vous pouvez utiliser !important pour définir des styles spéciaux pour FF.
  • 4. Problème de centrage vertical de div : vertical-align: middle; augmentez la hauteur de ligne à la même hauteur que le div entier, line-height: 200px; puis insérez du texte, et il sera centré verticalement. L'inconvénient est que vous devez contrôler le contenu pour qu'il ne passe pas à la ligne.
  • 5. L'interprétation du modèle BOX dans Mozilla Firefox et IE est incohérente, ce qui provoque une différence de 2px. Solution : div{margin:30px!important;margin:28px;} Notez que l'ordre de ces deux marges ne doit pas être inversé. IE ne peut pas reconnaître l'attribut !important, mais les autres navigateurs le peuvent.

Stockage hors ligne HTML5

Une fonctionnalité importante de HTML5 est le stockage hors ligne. Le stockage hors ligne consiste à enregistrer certains fichiers de ressources localement, afin que les rechargements de page ultérieurs utilisent les fichiers de ressources locaux, et que l'application web puisse continuer à être accessible hors ligne. En même temps, grâce à certaines méthodes (mise à jour des fichiers concernés ou utilisation d'API associées), des opérations telles que la mise à jour et la suppression du stockage hors ligne peuvent être effectuées.

Le stockage hors ligne HTML5 utilise un fichier manifeste pour indiquer quels fichiers doivent être stockés, en utilisant par exemple<html manifest='offline.manifest'>pour introduire un fichier manifeste. Le chemin de ce fichier peut être relatif ou absolu. Si vous avez de nombreuses applications web et souhaitez gérer de manière centralisée les fichiers manifestes, un serveur de fichiers statique est alors un bon choix.

Quels sont les avantages et les inconvénients des iframes ?

1. Inconvénients :

Le plus grand inconvénient de l'utilisation d'une structure de cadres dans les pages web est que les programmes « spider » des moteurs de recherche ne peuvent pas interpréter de telles pages. Lorsqu'un programme spider rencontre une page web composée de plusieurs cadres, il ne voit que les cadres et ne peut pas trouver de liens ; il en conclut donc que le site est un site mort et repart rapidement. Cela n'est rien de moins qu'un désastre pour un site web. Si vous voulez vendre des produits, vous avez besoin de clients ; pour obtenir des clients, vous devez d'abord faire venir des gens sur votre site web, et pour ce faire, vous n'avez d'autre choix que de compter sur les moteurs de recherche. Vous passez beaucoup de temps, d'efforts et d'argent à ouvrir une boutique en ligne, mais vous empêchez ensuite délibérément les moteurs de recherche de vous indexer. C'est comme ouvrir un magasin de détail, mais peindre toutes les vitrines en noir et ne mettre aucune enseigne.

2. Avantages :

D'après ce qui précède, nous pouvons constater que l'inconvénient de l'utilisation du cadre iframe est qu'il ne peut pas être exploré et capturé par les moteurs de recherche. Mais tout a deux faces. Ce défaut peut aussi être son avantage. En tirant parti de cela, nous pouvons utiliser le cadre iframe pour afficher sur notre site du contenu qui doit être consulté par nos utilisateurs mais qui n'a pas besoin d'être exploré par les moteurs de recherche. Ainsi, iframe peut réellement jouer son rôle, et le code de notre site peut également être grandement simplifié. Par exemple, comme mentionné ci-dessus par l'auteur, ajouter des informations de diffusion en direct Weibo. Nous n'avons pas besoin de fournir ces informations Weibo aux moteurs de recherche ; ce que nous devons fournir, c'est une expérience interactive avec les visiteurs, comme le montre la figure ci-dessous. Si nous utilisons le cadre iframe pour intégrer les informations Weibo, nous pouvons non seulement ajouter facilement la plateforme de diffusion en direct Weibo du site, mais aussi constater que le code est très concis.

iframe a l'avantage de pouvoir afficher la page web d'origine complètement inchangée, mais s'il est utilisé sur la page d'accueil, c'est ce que les moteurs de recherche détestent le plus. Alors, peu importe la qualité de votre site web, il n'aura pas un bon classement ! S'il s'agit d'une page dynamique, utiliser include est un peu mieux ! Mais vous devez supprimer ses balises <html><head><title><body> !

Avantages des cadres

  • Lors du rechargement d'une page, vous n'avez pas besoin de recharger toute la page ; il vous suffit de recharger un cadre de la page (réduction de la transmission de données et augmentation de la vitesse de téléchargement de la page).
  • Facilite la création de barres de navigation.

Inconvénients des cadres

  • Il génère de nombreuses pages et n'est pas facile à gérer.
  • Pas facile à imprimer.
  • Le bouton Précédent du navigateur devient inopérant.
  • Le code est complexe et ne peut pas être indexé par certains moteurs de recherche.
  • La plupart des petits appareils mobiles (téléphones PDA) ne peuvent pas afficher complètement les cadres.
  • Les pages comportant plusieurs cadres augmentent les requêtes HTTP vers le serveur.
  • En raison des nombreux inconvénients ci-dessus, il ne respecte pas le concept de conception web standard et a été abandonné par la conception web standard.

Astuce : Actuellement, tous les avantages des cadres peuvent être entièrement implémentés avec Ajax, donc il n'est plus nécessaire d'utiliser des cadres.

Le principe du modèle de boîte CSS

  • 1. La portée du modèle de boîte W3C inclut margin, border, padding et content, et la partie content n'inclut pas les autres parties.
  • 2. La portée du modèle de boîte IE inclut également margin, border, padding et content. La différence avec le modèle de boîte W3C standard est que la partie content du modèle de boîte IE inclut border et padding.

La différence entre CSS display:none et visibility:hidden

  • visibility:hidden masque l'élément, mais conserve sa position lors de la navigation.
  • display:none traite l'élément comme inexistant et ne le charge pas.

Qu'est-ce que jQuery ?

jQuery est une bibliothèque JavaScript réutilisable écrite en JavaScript.

Le code JavaScript pour définir le texte de l'interface utilisateur sans utiliser jQuery est le suivant :

document.getElementById("txt1").value = "hello";

Le code JavaScript après utilisation de la bibliothèque de classes jQuery est le suivant :

$("#txt1").val("Hello");

On peut voir que le code JavaScript après utilisation de la bibliothèque de classes jQuery est nettement plus concis, et il correspond mieux aux caractéristiques du secteur informatique : court, simple et rapide.

Quelle est la relation entre jQuery et JavaScript ? jQuery remplacera-t-il JavaScript ?

  • JavaScript : c'est le langage de script le plus populaire sur le Web.
  • jQuery : c'est un excellent framework JavaScript. C'est une bibliothèque JS légère. Il est compatible avec CSS3 et également compatible avec divers navigateurs (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+).

jQuery n'est pas destiné à remplacer JavaScript. L'utilisation de jQuery simplifie le développement Web.

Comment utiliser la bibliothèque jQuery ?

Téléchargez le fichier jquery.js depuis jquery.com (la dernière version de jQuery V1.11.1 ou V2.1.1). La règle de nommage des fichiers jQuery, comme « jquery-1.4.1.js », où 1.4.1 est le numéro de version du fichier JS.

Avant de développer un programme Web, le JavaScript requis est inclus, comme indiqué dans le code ci-dessous :

<script src="../code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

Qu'est-ce qu'un CDN (Content Delivery Network) ?

Lors du développement de pages Web, l'un des problèmes les plus pris en compte est le temps de réponse de la page sur l'ordinateur client : plus il est court, meilleure est l'expérience utilisateur.

L'un des principaux facteurs limitant l'expérience utilisateur est la taille des fichiers Web téléchargés par le navigateur, notamment les fichiers *.html, les images, les fichiers *.js, *.css et d'autres fichiers.

Afin de maximiser la réutilisation et d'économiser de la bande passante, le CDN a vu le jour : son idée de base est d'éviter autant que possible les goulots d'étranglement et les liens sur Internet susceptibles d'affecter la vitesse et la stabilité de la transmission des données, rendant la transmission du contenu plus rapide et plus stable. Son objectif est de permettre aux utilisateurs d'obtenir le contenu requis à proximité, de résoudre la congestion d'Internet et d'améliorer la vitesse de réponse des utilisateurs accédant aux sites Web.

Comment utiliser le CDN jQuery ?

  • (1) Il est recommandé d'utiliser les nœuds CDN officiels, le code d'utilisation est le suivant :
    <script src="../code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="../code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  • (2) Il existe également le CDN jQuery fourni par Google :
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  • (3) Microsoft fournit également des nœuds CDN jQuery :
    <script type="text/javascript" src="../ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"> </script>

Comment accéder automatiquement au fichier jQuery du site web lorsque le réseau CDN est inaccessible ?

Généralement, les nœuds du réseau CDN sont fiables. Mais il peut arriver qu'ils échouent. Par conséquent, pour offrir une double assurance, vous pouvez vérifier si le chargement du CDN échoue, puis charger automatiquement le jQuery du site web. L'exemple de code est le suivant :

<script type="text/javascript" src="../ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
if (typeof jQuery == 'undefined')  
{  
    document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js.html' type='text/javascript'%3E%3C/script%3E"));  
}
</script>

Quelle est la différence entre les fichiers jQuery.js et jQuery.min.js de même version ?

  • Point commun : Les deux fichiers offrent les mêmes fonctionnalités jQuery, c'est-à-dire qu'il n'y a aucune différence dans les appels de fonctions.
  • Différence : Le fichier jQuery.js convient à la lecture par les programmeurs. Le fichier jQuery.min.js est compressé et tous les espaces sont supprimés afin d'économiser de la bande passante et de l'espace, ce qui rend le fichier plus petit pour la transmission réseau, mais ne convient pas à la lecture par les programmeurs.

Quand faut-il utiliser jquery.js, et quand faut-il utiliser jquery.min.js ?

  • Dans les scénarios de développement et de débogage : utilisez le fichier jQuery.js, car vous voulez déboguer et pouvoir voir le code JavaScript.
  • Dans un environnement de déploiement de production : utilisez le fichier jQuery.min.js, qui peut réduire la bande passante réseau et accélérer le chargement des pages.

Qu'est-ce que le fichier jQuery.vsdoc.js ?

Le fichier *.vsdoc.js est utilisé dans l'environnement de développement Microsoft Visual Studio pour obtenir commodément jQuery IntelliSense. Lorsque vous saisissez une fonction jQuery, il vous propose automatiquement le type de fonction, les instructions d'utilisation de la fonction, les paramètres de fonction, etc. Si vous utilisez jQuery pour développer des programmes web sous VS, le fichier vsdoc.js améliore grandement l'efficacité du développement.

Comment expliquez-vous la syntaxe de base de jQuery ?

La structure syntaxique de jQuery peut être divisée en quatre parties :

  • 1. Par défaut, toutes les commandes jQuery commencent par un symbole "$".
  • 2. Ensuite vient la sélection des éléments HTML. Par exemple, ci-dessous nous sélectionnons un champ de texte HTML par l'ID "txt1".
  • 3. Puis, séparés par un point (.). Cet opérateur sépare l'élément et l'action (fonction) de l'élément.
  • 4. Enfin, quelle fonction (action) appliquer.

En jQuery, que représente le symbole "$" ?

En jQuery, le symbole "$" est un alias de jQuery, et la bibliothèque jQuery par défaut commence par $.

Pourquoi utiliser jQuery.noConflict() ?

Il existe de nombreuses bibliothèques similaires à jQuery, telles que MooTools, Backbone, Sammy, Cappuccino, Knockout. Certaines de ces bibliothèques utilisent également le symbole $. Si elles sont utilisées ensemble, cela provoquera des conflits de noms.

Pour résoudre ce conflit, vous devez utiliser jQuery.noConflict(), afin de ne pas dépendre du symbole $ par défaut. Par exemple :

jQuery.noConflict();  
(function($){

})(jQuery);

Plusieurs événements document.ready peuvent-ils être chargés dans la même page ?

Oui.

Tutoriels connexes :

  • Tutoriel HTML : https://www.example.com/html/
  • Tutoriel CSS : https://www.example.com/css/
  • Tutoriel JavaScript : https://www.example.com/js/
  • Tutoriel jQuery : https://www.example.com/jquery/