top 35 html5 interview questions
Questions d'entrevue HTML5 les plus fréquemment posées avec réponses et exemples de code:
HTML5 est la dernière version du langage HTML, HTML signifie Hyper Text Markup Language, c'est un langage universel de balisage World Wide Web qui permet de créer et de concevoir des pages Web à afficher sur Internet.
HTML5 qui a été officiellement publié en 2012 prend en charge toutes les pages Web existantes.
Cet article couvrira les questions d'entrevue de base et avancées sur HTML5 avec des exemples parfaits pour les débutants et les professionnels expérimentés.
Fonctionnalités de HTML5
Il existe plusieurs fonctionnalités notables de HTML5 et quelques-unes d'entre elles sont décrites ci-dessous pour votre référence.
Les nouvelles fonctionnalités de HTML5 incluent:
- Supporte les éléments multimédias comme la vidéo et l'audio.
- Stockage local
- Prise en charge de certains nouveaux éléments et attributs personnalisés.
- Nouveaux éléments de formulaire tels que l'url, la date, la plage, l'heure, la couleur, etc.
Lecture recommandée => Top 30 des questions d'entrevue HTML
Questions et réponses d'entrevue HTML5 les plus importantes
Voici quelques-uns des plus fréquemment demandés Questions HTML5 avec des exemples de codage pour votre compréhension facile.
Sois prêt!!
Q # 1) Qu'est-ce que HTML5?
Répondre: HTML5 est la dernière version du langage de balisage HyperText qui peut être référencé au langage principal WWW (World Wide Web), ce langage de balisage améliore un fichier texte avec des bits de code, et ce code que nous pouvons dire comme «balisage» décrit le structure du document.
HTML5 fournit certaines fonctionnalités standard telles que celles de CSS, HTML, JavaScript et DOM, ce qui réduira à son tour le besoin de plugins externes. Il y a plus de balisage pour remplacer les scripts, une meilleure gestion des erreurs, etc. HTML5 est indépendant de l'appareil.
HTML5 introduit de nouvelles fonctionnalités qui peuvent être utilisées pour modifier la façon dont l'utilisateur interagit avec les documents, notamment:
- Ajout de nouvelles règles d'analyse pour améliorer la flexibilité.
- Ajout de nouveaux attributs.
- Autoriser la modification hors ligne.
- Support (Web SQL), - Une norme commune pour le stockage des données dans les bases de données SQL.
- Enregistrement du protocole de prise en charge et du gestionnaire MIME.
Q # 2) Quelle est la différence entre HTML et HTML5?
Réponse: Les différences entre HTML et HTML5 sont indiquées ci-dessous:
HTML5 | HTML |
---|---|
Permet un effet glisser-déposer. | N'autorise pas l'effet glisser-déposer. |
HTML5 a un support vidéo et audio de haut niveau. | La prise en charge vidéo et audio de haut niveau ne fait pas partie de la version et des spécifications du code HTML précédent. |
Canvas, SVG et autres graphiques vectoriels virtuels sont pris en charge dans HTML5. | En HTML, si nous voulons implémenter des graphiques vectoriels, cela n'était possible qu'en utilisant une bibliothèque tierce comme VML, Silver-light, etc. |
SVG et MathML peuvent être utilisés dans le texte. | Ce n'est pas possible en HTML. |
La base de données Web SQL, le cache d'application et le stockage Web sont utilisés comme stockage permanent. | Le cache du navigateur peut être utilisé comme stockage temporaire. |
HTML5 est plus adapté aux mobiles. | Le HTML est moins adapté aux mobiles. |
La déclaration de Doctype est simple et facile. | La déclaration de Doctype est longue et compliquée. |
Les attributs Async, charset et ping sont disponibles. | Ces attributs ne sont pas disponibles en HTML. |
HTML5 supporte javascript pour s'exécuter en arrière-plan. | Ne prend pas en charge JavaScript pour s'exécuter dans le navigateur Web. |
Nous pouvons dessiner des formes comme un rectangle, un cercle et un triangle en HTML5. | Il n'est pas possible de dessiner des formes comme un rectangle, un cercle, un triangle, etc. |
Q # 3) Qu'est-ce que c'est? Quels sont les différents types disponibles?
Répondre: La déclaration fournit des instructions au navigateur Web pour comprendre quelles informations il doit afficher et la nécessité de commencer par la déclaration. En HTML5, la déclaration DOCTYPE est très courte et insensible à la casse et est écrite en haut de chaque page HTML5.
Les DOCTYPE suivants sont également pris en charge dans HTML5:
Il existe 3 types de DOCTYPES comme mentionné ci-dessous:
- Doctype strict
- Cadre Doctype
- Doctype transitionnel
Q # 4) Quelles sont les nouvelles balises dans les éléments multimédias en HTML5?
Réponse: Les nouvelles balises dans Media Elements en HTML5 sont inscrites ci-dessous :
- : Demandez des contenus multimédias tels que des sons, des flux audio ou de la musique, intégrez du contenu audio sans avoir besoin d'un plug-in supplémentaire tel qu'un lecteur flash.
- : Demandez du contenu vidéo comme des flux vidéo ou des clips vidéo, intégrez du contenu vidéo, etc.
- : Demandez plusieurs ressources multimédias dans des éléments multimédias, tels que l'audio, la vidéo, l'image, etc.
- : Demandez une application externe ou un contenu intégré (un plug-in).
- : Appliquer des pistes de texte dans les éléments multimédias tels que la vidéo ou l'audio. Cette balise est utilisée pour les sous-titres ou les fichiers de sous-titres pendant la lecture du média vidéo.
Q # 5) Qu'est-ce qu'une balise en HTML5?
Répondre: Une balise est un contenu spécial en HTML5, qui est entouré d'un crochet angulaire (). Un symbole de barre oblique (/) est utilisé pour fermer la balise après avoir terminé le bloc.
Par exemple
This is my Browser
Une balise Html5 est un ensemble de caractères qui développent une commande formatée pour une page Web. Ces commandes formatées communiquent et envoient les instructions au navigateur.
Q # 6) Qu'est-ce que le nombre minimum de balises HTML5 requises pour créer une page Web?
Répondre: Au moins 3 balises HTML5 sont nécessaires pour créer une page Web, telles que (,,).
Q # 7) Quelle est l'importance du glisser-déposer dans HTML5?
Répondre: Le glisser-déposer est le concept d'interface utilisateur le plus important qui permet de saisir facilement un objet et de le faire glisser à l'endroit souhaité à l'aide d'un clic de souris.
Certaines fonctionnalités communes qui sont principalement utilisées par l'opération de glisser-déposer incluent le déplacement, le lien ou la copie.
On peut faire glisser une image en utilisant des éléments, type = , pour rendre une image déplaçable et définir l'attribut d'image déplaçable sur true.
Q # 8) Expliquez les nouveaux types d'entrée de formulaire en HTML5.
Réponse: HTML5 a 14 nouveaux types d'entrée de formulaires:
- Date: Ceci est un sélecteur de date, nous pouvons choisir une date en utilisant type = 'Date'.
- Semaine: Ceci est un sélecteur de semaine, nous pouvons choisir une semaine en utilisant type = 'semaine'.
- Mois: Ceci est un sélecteur de mois, nous pouvons choisir un mois en utilisant type = 'mois'.
- Temps: Ceci est un sélecteur de temps, nous pouvons choisir le temps en utilisant type = 'temps'.
- Datetime: Il s'agit d'une date et d'une heure combinées, nous pouvons choisir la combinaison de la date et de l'heure en utilisant type = 'Datetime'.
- Datetime-local: Une date et une heure locales combinées, nous pouvons choisir la combinaison de la date et de l'heure locales en utilisant type = «DateTime-local».
- Email: Permet une ou plusieurs adresses e-mail, nous pouvons entrer plusieurs adresses e-mail en utilisant type = 'e-mail'.
- Tel: Permet différents numéros de téléphone à travers le monde. Un numéro de téléphone est validé par le client. Nous pouvons entrer un numéro de téléphone en utilisant type = “tel”.
- Chercher: Permet de rechercher des requêtes par texte d'entrée. Nous pouvons saisir plusieurs requêtes en utilisant type = 'chercher'.
- Nombre: Permet d'insérer une valeur numérique avec des attributs supplémentaires tels que min, max. etc., et nous pouvons entrer plusieurs valeurs numériques en utilisant type = 'numéro'.
- URL: Un type d'entrée d'URL, utilisé pour l'adresse Web. Dans une seule URL, nous pouvons utiliser plusieurs attributs en utilisant type = 'Url'.
- Couleur: Permet de sélectionner plusieurs couleurs, nous pouvons photographier plusieurs couleurs en utilisant type = 'Couleur'.
- Varier: Permet d'insérer une valeur numérique dans une plage spécifique, la plage est similaire au nombre mais elle est très spécifique. Nous pouvons entrer une valeur numérique dans une plage en utilisant type = 'gamme'.
- Espace réservé: Permet d'afficher un bref indice (généralement dans une couleur claire) dans les champs de saisie, avant de saisir la valeur. Nous pouvons écrire un bref indice dans le champ de saisie en utilisant type = «Espace réservé».
Q # 9) Qu'est-ce que la carte d'image en html5?
Répondre: Les cartes d'images sont une combinaison d'URL et d'images, où un clic sur ces images (zone cliquable de l'image) ouvrira différentes nouvelles pages Web.
Deux types d'images cartographiques sont disponibles en HTML5, c'est-à-dire côté client et côté serveur:
Le mappage d'images côté client est créé à l'aide de deux éléments et, où la carte contient les informations de la carte et l'élément de zone prend les attributs pour définir chaque section de la carte. Carte d'image côté serveur créé à l'aide de l'attribut, l'attribut usemap est le nom de notre carte.
Q # 10) Comment écrivez-vous un symbole de droit d'auteur sur une page de navigateur Web?
Répondre: Pour écrire un symbole de copyright, nous devons taper © ou © dans un fichier HTML5.
Q # 11) Comment optimiser les actifs du site Web?
Répondre: Nous devons comprendre certaines règles d'optimisation de base afin d'optimiser les ressources du site Web. Au départ, nous devrions réduire la taille du téléchargement et faire moins de requêtes http.
Pour optimiser les ressources du site Web, nous pouvons suivre les techniques ci-dessous:
- Compression de fichiers
- Concaténation de fichiers
- Hébergement CDN
- Déchargement des actifs
- Réorganiser
- Code de raffinage
Q # 12) Quelle est l'utilisation de MathML Element dans HTML5?
Répondre: Le mot MathML (Mathematical Markup Language) est un langage de balisage, utilisé pour montrer une expression scientifique et mathématique sur le Web. MathML est une forme de XML (langage de balisage extensible) pour décrire la notation mathématique.
On peut utiliser ... balises à l'intérieur des documents HTML5 pour l'implémentation de l'élément MathML.
Exemple: imprimer a² + 2b + 5 = 0 en utilisant le code HTML5.
MathMl Example
Noter: Si MathML est utilisé par une application conforme à l'espace de noms dans une recommandation XML, l'espace de noms suivant doit être utilisé:
http://www.w3.org/1998/Math/MathML
Q # 13) Quelles sont les différentes balises de formatage en HTML5?
Réponse: HTML5 contient d'anciennes et de nouvelles balises de mise en forme, comme indiqué ci-dessous:
- Texte marqué: Représente le texte en surbrillance à des fins de référence. On peut utiliser
> balises pour la mise en évidence du texte. - Texte supprimé: Spécifie le bloc de texte supprimé. Nous pouvons utiliser des balises pour implémenter un texte supprimé.
- Texte souligné: Définit le texte mis en évidence. On peut utiliser balises pour implémenter un texte accentué.
- Texte inséré: Insère un bloc de texte dans un document. Nous pouvons utiliser des balises pour implémenter un texte inséré.
- Petit texte: Afficher le texte inséré dans une petite taille. Nous pouvons utiliser des balises pour implémenter un petit texte.
- Texte en exposant: Ceci est un texte en exposant. On peut utiliser balises pour implémenter un texte en exposant.
- Texte en indice: Ceci est un texte en indice. On peut utiliser balises pour implémenter un texte en exposant.
Q # 14) Pourquoi utilisons-nous HTML5?
Répondre: HTML5 prend en charge l'animation, le dessin, l'audio, la vidéo, etc. et il intègre facilement une vidéo sur la page Web. Il ne nécessite aucun logiciel supplémentaire comme Flash pour regarder des vidéos.
Certaines des raisons importantes d'utiliser HTML5 sont données ci-dessous:
- Prise en charge héritée et multi-navigateurs
- De meilleures interactions
- Stockage plus intelligent
- Code plus propre
Q # 15) Qu'est-ce qu'un hyperlien? S'applique-t-il uniquement au texte?
Répondre: Le lien hypertexte est un lien qui permet à un utilisateur de passer d'une page Web à une autre page Web lorsqu'il clique dessus. Le concept de lien hypertexte est utilisé sur le texte et l'image, et nous pouvons convertir une image en lien à l'aide de > balises.
Exempleà C créer un lien hypertexte dans une image (image cliquable) est illustré ci-dessous.
Image Hyperlink Example Click the following link
Q # 16) Expliquez le concept de stockage Web en HTML5.
Répondre: Le stockage Web offre la possibilité de stocker les données de nos applications Web localement dans le navigateur de l'utilisateur. Il peut stocker jusqu'à 10 Mo de données. Le stockage Web permet d'augmenter les performances de nos applications.
Deux types de stockage Web sont utilisés pour stocker des données localement dans HTML5:
- Stockage local: Cela stocke les données qui n'expireront pas ou ne s'effaceront pas automatiquement lorsqu'un utilisateur ferme ou rouvrira un navigateur.
- Stockage de session: Cela stocke les données pour une seule session (c'est-à-dire un utilisateur qui surfe sur Internet ou sur le site Web). Une fois le navigateur fermé, les données de session seront automatiquement supprimées du navigateur Web.
Q # 17) Expliquez l'API de géolocalisation en HTML5.
Répondre: L'API de géolocalisation est utilisée pour localiser la position géographique d'un utilisateur.
Pour des raisons de confidentialité, il est demandé à l'utilisateur l'autorisation de signaler les informations de localisation. Utilisez le navigator.geolocation.get position actuelle () méthode pour obtenir la position de l'utilisateur et les coordonnées géographiques (longitude et numéro de latitude).
Par exemple, pour renvoyer la position de latitude et de longitude d'un utilisateur est indiquée ci-dessous.
Click The My Location Button to get your Location.
My Location var x = document.getElementById('location'); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = 'Geolocation is not supported by this browser.'; } } function showPosition(position) { x.innerHTML = 'Latitude: ' + position.coords.latitude + '
Longitude: ' + position.coords.longitude; }
Exemple expliqué:
- Vérifiez si la géolocalisation est prise en charge ou non.
- Si la géolocalisation est prise en charge, exécutez la méthode getCurrentPosition (). Si la géolocalisation n'est pas prise en charge, affichez le message d'erreur à l'utilisateur.
- Si la méthode getCurrentPosition () réussit, elle renvoie les coordonnées et les fonctions spécifiées dans le paramètre.
- La fonction showPosition () obtient la sortie - Longitude et Latitude.
Q # 18) Expliquez les graphiques HTML5.
Répondre: HTML5 prend en charge deux types de graphiques, à savoir Canvas et SVG.
a) Toile: L'élément est utilisé pour concevoir des graphiques sur la page Web, et il dispose de plusieurs méthodes pour dessiner des cercles, des boîtes, ajouter des images et du texte. 300 px X 150 px (largeur X hauteur) est la taille de pixel par défaut du canevas.
ExempleDessiner une boîte carrée à l'aide de l'élément canvas est illustré ci-dessous.
#mycanvas{border:2px solid pink;}
b) SVG: Les graphiques vectoriels évolutifs sont principalement utilisés pour les applications graphiques et les diagrammes de type vectoriel évolutifs, tels que le système de coordonnées X, Y, les graphiques bidimensionnels et à secteurs. Cela le rend plus rapide et léger. SVG suit le format XML.
Exemplepour dessiner un rectangle à l'aide d'un élément SVG est illustré ci-dessous.
Q # 19) Quels sont les avantages de l'utilisation de HTML5?
Répondre: HTML5 est la version avancée du HTML. HTML5 permet de créer des sites Web plus faciles ou interactifs en incorporant de la vidéo, de l'audio et des graphiques sur la page Web.
HTML5 prend en charge la technologie multimédia et le contenu graphique sur le Web sans utiliser de plug-ins tiers.
Certaines des fonctionnalités les plus importantes ajoutées par HTML5 incluent:
- Géolocalisation
- Cache d'applications hors ligne
- Base de données côté client
- La gestion des erreurs
- Nouvelle structure et nouveaux éléments multimédias.
- Prise en charge et compatibilité du navigateur.
Prend en charge une nouvelle interface de programmation d'application (API) comme:
- Gestion de l'historique du navigateur
- Glisser déposer
- Dessin 2D sur une page Web
- Lecture multimédia temporelle
Les applications prises en charge comprennent:
- Travailleurs Web - JavaScript
- Accès aux fichiers locaux
- Cache d'application
- Stockage de données local
- Bases de données SQL locales
Q # 20) Comment créer un lien qui se connectera à une autre page de navigateur Web lorsque vous cliquez sur HTML5?
Répondre: Utilisez le tag pour créer des hyperliens, et ceux-ci sont utilisés pour se connecter à une autre page Web. Nous pouvons créer un lien hypertexte en utilisant type = texte étiqueter. Lorsque nous cliquons sur le texte, l'URL liée de la page Web s'ouvre.
Par exemple , le code ci-dessous est un lien qui mène à la page d'accueil Yahoo, située à l'adresse https://in.yahoo.com
Yahoo link
Visit Yahoo Home Page
Q # 21) Combien de navigateurs Web prend en charge HTML5?
comment ouvrir les fichiers apk
Répondre: La plupart des dernières versions d'Apple Safari, Google Chrome, Opera, Internet Explorer et Mozilla Firefox sont prises en charge par HTML5.
Q # 22) Quelles sont les API fréquemment utiles en HTML5?
Répondre: Voici une liste des API les plus fréquemment utilisées en HTML5:
- API média
- API de transfert de données
- API de cache d'application
- Interaction de l'utilisateur
- API historique
- API de validation de contrainte
- API de commande
- API de suivi de texte
Q # 23) Combien de balises ont été supprimées en HTML5?
Répondre: La liste des balises supprimées complètement dans HTML5 comprend:
Q # 24) Quels formats vidéo et audio sont utilisés pour l'intégration sur la page Web?
Réponse: Les formats vidéo et audio utilisés pour l'intégration sur la page Web sont indiqués ci-dessous:
- Vidéo: MPEG4, Ogg, WebM.
- L'audio: WAV, Ogg Vorbis, MP3.
Q # 25) Énumérez les éléments de structure de page de HTML5.
Réponse: Les éléments de structure de page de HTML5 sont donnés ci-dessous:
- : Représente la section d'en-tête et stocke les informations de départ sur la page Web.
- : Représente la section de pied de page (dernière partie) de la page.
- : Représente les éléments de navigation de la page HTML.
- : C'est un ensemble d'informations.
- : C'est un ensemble d'instructions qui est utilisé à l'intérieur du bloc d'article pour définir la structure de base d'une page.
- : Contenu de la barre latérale de la page.
Q # 26) Expliquez certaines des listes courantes pour concevoir une page Web.
Réponse: Les listes courantes pour concevoir une page Web comprennent:
- Liste des répertoires
- Liste de définitions
- Liste ordonnée
- Liste des menus
- Liste non ordonnée
Différent - Différentes balises sont utilisées pour composer chaque liste.
Q # 27) Quelle est l'utilité de la balise de sortie en HTML5?
Répondre: La balise est utilisée pour représenter les différents types de sortie et de résultat.
Q # 28) Quel élément fournit la fonction de saisie semi-automatique dans une zone de texte?
Répondre: Dans HTML5element, fournit la fonction de saisie semi-automatique dans une zone de texte.
Q # 29) Comment intégrer la vidéo et l'audio dans Html5?
Répondre:
Vidéo:
Exemple pour intégrer une vidéo en HTML5:
L'audio:
Exemple pour incorporer un audio dans HTML5:
Q # 30) Quelles sont les balises migrées de HTML4 vers HTML5?
Répondre: La liste des balises migrées de HTML4 vers HTML5 est donnée ci-dessous:
HTML4 typique HTML5 typique
Q # 31) Quelle est la partie des technologies HTML5?
Réponse: La liste est donnée ci-dessous:
- Travailleurs Web
- Espace archivage sur le Web
- SVG
- CSS3
- Événements envoyés par le serveur (SSE)
- Microdonnées
- Intentions Web
- Prises Web
- Application hors ligne
- Géolocalisation
- Fichier API
- Messagerie Web
- Glisser déposer
- Toile 2D
Q # 32) Quelle est la différence entre les éléments SVG et Canvas?
Répondre:
SVG | Éléments de toile |
---|---|
SVG ne convient pas aux graphiques des jeux. | Le canevas convient aux graphiques de jeux. |
Il est basé sur un modèle objet. | Il est basé sur des pixels. |
Convient à l'utilisation de grandes zones de rendu. | Convient à l'utilisation de petites zones de rendu. |
SVG fournit n'importe quel support pour les gestionnaires d'événements. | Canvas ne fournit aucun recours pour les gestionnaires d'événements. |
La modification est autorisée via le script et le CSS. | La modification est autorisée via le script uniquement. |
SVG a une meilleure évolutivité | Canvas a une mauvaise évolutivité. |
SVG est basé sur un vecteur (composé de formes). | Le canevas est basé sur un raster (composé d'un pixel). |
SVG ne dépend pas de la résolution. | Le canevas dépend entièrement de la résolution. |
SVG est capable d'animer l'API. | Canvas n'a aucune API pour l'animation. |
SVG convient à l'impression de haute qualité et de toute résolution. | La toile ne convient pas à l'impression de haute qualité et haute résolution. |
Q # 33) Quelle est l'utilité de la balise en HTML5?
Répondre: La balise figure est utilisée pour ajouter une image dans le document sur une page Web.
Q # 34) Qu'est-ce que les microdonnées en HTML5?
Répondre: Les microdonnées sont une nouvelle syntaxe sémantique simple, qui est utilisée pour ajouter les groupes imbriqués de paires nom et valeur de données aux documents, qui sont généralement basés sur le contenu de la page. Les microdonnées sont utilisées pour de nouveaux attributs globaux.
Q # 35) Expliquez les balises Meta.
Répondre: Les balises Meta sont utilisées pour fournir des informations utiles à nos pages Web.
Certaines des balises comprennent:
- Titre: Fournit un titre à la page Web.
- Style: Insère certains styles et détails CSS dans la page Web.
- Lien: Définit la relation entre une page et une autre page et une source externe.
Quelques abréviations utiles
- XML: Langage de balisage extensible
- W3C: World Wide Web Consortium
- SQL: Langage de requêtes structurées
- JPEG: Groupe conjoint d'experts photographiques
- IP: protocole Internet
- HTTP: Protocole de transfert hypertexte
- href: Référence hypertexte
- FTP: Protocole de transfer de fichier
- FEU: Interface de programmation d'applications
- ICI: Environnement de développement intégré
- TRAME: Outil de polices d'intégration Web
- JUGEMENT: Modèle d'objet de document
- URL: Localisateur de ressources uniformes
Conclusion
HTML5 peut être considéré comme le fondement des technologies Web, c'est la principale technologie utilisée pour créer des pages Web.
Beaucoup de professionnels qui ont l'intention de se lancer dans la technologie Web doivent apprendre le HTML5. HTML5 n'est pas seulement la sous-structure des technologies Web, mais il est également utilisé pour développer des applications mobiles. Terminologiquement, HTML5 n’est pas un langage de programmation, mais plutôt un langage de balisage.
Cet article servira de guide à la liste des questions et réponses d'entretien HTML5 les plus importantes, car il couvre à la fois les questions et réponses d'entrevue HTML5 de base et avancées. Nous sommes convaincus que ce sont à leur tour de très bonnes ressources pour vous aider à vous préparer à l'entretien HTMl5.
J'espère que cet article vous aidera à réussir toute interview HTML5.
lecture recommandée
- Questions et réponses d'entrevue
- Questions et réponses d'entrevue de test ETL
- Plus de 35 questions et réponses sur les entretiens Apache Tomcat
- Quelques questions et réponses difficiles sur les tests manuels
- 25 meilleures questions et réponses d'entrevue de test Agile
- Top 35 des questions et réponses d'entretien Android
- Questions d'entrevue Spock avec réponses (les plus populaires)
- Quelques questions d'entretien intéressantes sur les tests de logiciels