[À lire absolument pour la recherche d'emploi front-end] Questions et réponses sélectionnées pour les entretiens de développement front-end_HTML
HTML
Quel est le rôle de Doctype ? Comment distinguer le mode strict du mode mixte ? Que signifient-ils ?
(1), la déclaration <!DOCTYPE> se trouve en premier dans le document, avant la balise <html> Indiquez à l'analyseur du navigateur quelle spécification de type de document utiliser pour analyser ce document.
(2), la composition en mode strict et le mode de fonctionnement JS sont exécutés selon les normes les plus élevées prises en charge par le navigateur.
(3). En mode mixte, la page est affichée de manière lâche et rétrocompatible. Émule le comportement des anciens navigateurs pour empêcher le site de ne pas fonctionner.
(4), DOCTYPE n'existe pas ou le format est incorrect, ce qui entraînera la présentation du document en mode mixte.
Par exemple, la valeur de l'attribut d'affichage par défaut de div est "block", qui devient. Élément "block level" ;
La valeur de l'attribut d'affichage par défaut de span est "inline", qui est un élément "inline".
(2) Les éléments en ligne incluent : a b span img input select strong (ton d'accentuation)
Les éléments au niveau du bloc incluent : div ul ol li dl dt dd h1 h2 h3 h4…p
(3) Éléments vides bien connus :
<br> <hr> <img> <input> <link> <meta>
Little known are:
<area> <base> <col> <command> < embed> <keygen> <param> <source> <wbr>Quelle est la différence entre
(2) Lorsque la page est chargée, le lien sera chargé en même temps, et le CSS référencé par @import attendra ; jusqu'à ce que la page soit chargée avant le chargement ;
(3) l'importation ne peut être reconnue que dans IE5 ou supérieur, et le lien est une balise XHTML, il n'y a donc pas de problème de compatibilité
(4) Le poids du style de lien est ; supérieur au poids de @import.
* Les images png24 bits apparaissent comme arrière-plan sur les navigateurs iE6, la solution est de les rendre en PNG8.
* La marge et le remplissage par défaut des navigateurs sont différents. La solution est d'ajouter un *{margin:0;padding:0;} global pour unifier.
* Bug de double marge dans IE6 : une fois que l'étiquette de l'attribut de bloc flotte et qu'il y a des marges horizontales, la marge affichée dans IE6 est plus grande que la valeur définie.
Double distance générée par IE flottant #box{ float:left width:10px; margin:0 0 0 10px;}
Dans ce cas, IE générera une distance de 20px La solution est d'utiliser le style d'étiquette float. Ajoutez --_display:inline; au contrôle pour le convertir en attribut en ligne. (_Ce symbole ne peut être reconnu que par ie6)
La méthode de reconnaissance progressive exclut progressivement les parties du tout.
Tout d'abord, l'utilisation intelligente de la marque "9" sépare le navigateur IE de toutes les situations.
Ensuite, utilisez à nouveau "+" pour séparer IE8 de IE7 et IE6, afin que IE8 soit reconnu indépendamment.
css
.bb{
background-color:#f1ee18;/*Toute reconnaissance*/
.background-color:#00deff9; /*Reconnaissance IE6, 7, 8*/
+background-color:#a200ff;/ *Reconnaissance IE6, 7*/
_background-color:#1e0bd1;/*Reconnaissance IE6*/
}
* Sous IE, vous pouvez utiliser la méthode d'obtention d'attributs réguliers pour obtenir des attributs personnalisés,
Vous pouvez également utiliser getAttribute( ) pour l'obtenir Attributs personnalisés ;
Sous Firefox, vous ne pouvez utiliser que getAttribute() pour obtenir des attributs personnalisés.
Solution : Obtenez des attributs personnalisés via getAttribute()
* Sous IE, l'objet pair a des attributs x, y, mais. pas d'attribut pageX , pageY ;
Sous Firefox, l'objet événement a les attributs pageX, pageY, mais pas d'attributs x, y
* Solution : (Commentaire conditionnel) L'inconvénient est que des requêtes HTTP supplémentaires peuvent être ajoutées sous le navigateur IE.
* L'interface chinoise de Chrome forcera l'affichage du texte inférieur à 12 px par défaut
Cela peut être résolu en ajoutant la propriété CSS -webkit-text-size-adjust: none
Le style de survol n'apparaîtra pas après. le lien hypertexte est visité. Le style de lien hypertexte cliqué n'a plus de survol et n'est plus actif. La solution est de changer l'ordre des propriétés CSS :
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}.
Quelles sont les nouveautés du html5 et quels éléments ont été supprimés ? Comment gérer les problèmes de compatibilité des navigateurs avec les nouvelles balises HTML5 ? Comment différencier HTML et HTML5 ?
* HTML5 n'est plus un sous-ensemble de SGML, il s'agit principalement de l'ajout d'images, de localisation, de stockage, de multitâche et d'autres fonctions.
* Toile de peinture
Éléments vidéo et audio pour la lecture multimédia
Stockage local hors ligne localStorage stocke les données pendant une longue période, et les données ne sont pas perdues après la fermeture du navigateur
Les données de SessionStorage sont automatiquement supprimées après la fermeture du navigateur
; Meilleure sémantique Éléments de contenu, tels que article, pied de page, en-tête, navigation, section
Contrôles de formulaire, calendrier, date, heure, email, url, recherche
Nouvelles technologies webworker, websockt, Géolocalisation
* Éléments supprimés
Éléments purement performants : basefont, big, center, font, s, strike, tt, u ;
Éléments ayant un impact négatif sur la convivialité : frame, frameset, noframes ;
Prise en charge des nouvelles balises HTML5 :
* Prise en charge de IE8/IE7/IE6 via les balises générées par la méthode document.createElement,
Vous pouvez utiliser cette fonctionnalité pour que ces navigateurs prennent en charge les nouvelles balises HTML5,
Une fois que le navigateur prend en charge les nouvelles balises, vous devez également ajouter le style par défaut de la balise :
* Bien sûr, le le meilleur moyen est d'utiliser directement des frameworks matures, le plus utilisé est le framework html5shim
<!--[if lt IE 9]>
<script> trunk/html5.js "</script>
<![endif]-->
Comment distinguer : la déclaration DOCTYPE de nouveaux éléments structurels et éléments fonctionnels
Compréhension sémantique ?
Utilisez le bon hashtag pour la bonne chose !
La sémantique HTML consiste à structurer le contenu de la page pour en faciliter l'analyse par les navigateurs et les moteurs de recherche.
Elle est également affichée dans un format de document sans style CCS et est facile à lire ;
Les robots des moteurs de recherche s'appuient sur des balises pour déterminer le contexte et le poids des mots-clés individuels, ce qui est bénéfique pour le référencement.
Aidez les personnes qui lisent le code source à diviser le site Web en morceaux pour faciliter la lecture, la maintenance et la compréhension.
Stockage hors ligne HTML5 ?
stockage local des données à long terme, les données ne seront pas perdues après la fermeture du navigateur ;
les données de sessionStorage seront automatiquement supprimées après la fermeture du navigateur.
(Écrivez) un code HTML qui décrit la sémantique.
(De nombreuses nouvelles balises ajoutées en HTML5 (telles que <article>, <nav>, <header> et <footer>, etc.)
sont basées sur des principes de conception sémantique)
< header ">
< h1>Titre< /h1>
< h2>Focus sur la technologie frontale Web< /h2>
< /div>
Quels sont les inconvénients de l'iframe ?
*iframe bloquera l'événement Onload de la page principale ;
*iframe et la page principale partagent le pool de connexions, et le navigateur a des restrictions sur les connexions dans le même domaine, cela affectera donc le chargement parallèle de la page.
Vous devez prendre en compte ces deux inconvénients avant d'utiliser iframe. Si vous devez utiliser une iframe, il est préférable d'ajouter dynamiquement la valeur de l'attribut src à l'iframe via javascript
, ce qui peut contourner les deux problèmes ci-dessus.
Veuillez décrire la différence entre les cookies, sessionStorage et localStorage ?
Les cookies sont échangés entre le navigateur et le serveur. sessionStorage et localStorage n'auront pas
sessionStorage et localStorage ont un espace de stockage plus grand ;
sessionStorage et localStorage ont des interfaces plus riches et plus faciles à utiliser ;
sessionStorage et localStorage ont des espaces de stockage indépendants ;
