Résumé des questions d'entretien HTML de base

Cet article partage principalement avec vous des questions et réponses d'entretien HTML de base, dans l'espoir de vous aider.

1 Que fait DOCTYPE ? Comment distinguer le mode standard du mode mixte ? Que signifient-ils ?

indique au navigateur quelle version de la spécification HTML utiliser pour afficher le document. Un DOCTYPE absent ou mal formé entraînera le rendu du document HTML en mode promiscuité.
Le mode Standards s'exécute selon les normes les plus élevées prises en charge par le navigateur ; les pages en mode Quirks sont affichées de manière plus lâche et rétrocompatible.

2 Pourquoi avez-vous seulement besoin d'écrire en HTML5 ?

HTML5 n'est pas basé sur SGML (Standard Generalized Markup Language), il n'est donc pas nécessaire de référencer DTD (DTD Document Type Definition), mais DOCTYPE est nécessaire pour standardiser le comportement du navigateur.

HTML4.01 est basé sur SGML, donc DTD doit être cité. Afin d'indiquer au navigateur le type de document utilisé par le document, comme suit :

3 Quels sont les éléments en ligne ? Que sont les éléments de niveau bloc ? Quels sont les éléments vides ?

Éléments en ligne : a span img input select
Éléments de niveau bloc : p ul ol li dl dt dd h1 p
Éléments vides : <br> <hr> <link> <meta>

4 Lors de l'importation de styles sur le page, utilisez Quelle est la différence entre link et @import ?

Les mêmes endroits sont toutes des méthodes CSS de référence externes. La différence :

1. le lien est une balise xhtml. En plus de charger du CSS, vous pouvez également définir. RSS et autres Transactions ; @import appartient à la catégorie CSS et ne peut charger que le lien CSS

2. Lorsque le lien fait référence au CSS, il est chargé en même temps que la page ; @import doit être chargé une fois la page complètement chargée, et @import est le CSS référencé attendra que le fichier CSS qui le référence soit chargé avant de charger

3. le lien est une balise xhtml , aucun problème de compatibilité ; @import a été proposé dans css2.1, une version inférieure. Le navigateur ne prend pas en charge

4. le lien prend en charge l'utilisation du contrôle javascript pour changer le style, et @import ne prend pas en charge

5. style de lien Le poids du style est supérieur à Le poids de @import

6. import nécessite la balise <style type="text/css"> lorsqu'il est utilisé dans html

5 Flash de contenu non stylé (FOUC) Flash de contenu non stylé

@import l'importation de fichiers CSS attendra que le document soit chargé avant de se charger la feuille de style CSS. Par conséquent, il y aura une période de temps entre la fin du chargement du DOM de la page et la fin de l'importation CSS, et le contenu de la page ne sera pas stylisé.

Solution : utilisez la balise de lien pour charger les fichiers de style CSS. Comme les liens sont chargés séquentiellement, la page attendra que le CSS soit téléchargé avant de télécharger le fichier HTML. De cette façon, la mise en page est effectuée en premier et il n'y aura pas de problème FOUC.

6 Veuillez présenter votre compréhension du cœur du navigateur ?

Il est principalement divisé en deux parties : le moteur de rendu (Layout Engine ou Rendering Engine) et le moteur JS.

Moteur de rendu : responsable de l'obtention du contenu de la page Web (HTML, XML, images, etc.), de l'organisation des informations (comme l'ajout de CSS, etc.) et du calcul de la méthode d'affichage du Web page, puis l'envoyer vers le moniteur ou l'imprimante. Différents noyaux de navigateur auront différentes interprétations grammaticales des pages Web, de sorte que les effets de rendu seront également différents.
Moteur JS : analyse et exécute du javascript pour obtenir des effets dynamiques sur les pages Web.

Au début, il n'y avait pas de distinction claire entre le moteur de rendu et le moteur JS. Plus tard, le moteur JS est devenu de plus en plus indépendant, et le noyau avait tendance à se référer uniquement au moteur de rendu.

7 Quels sont les noyaux courants des navigateurs ?

1. Trident (MSHTML) : IE MaxThon TT Le navigateur World 360 Sogou

2. Geckos : Netscape6 et supérieur FireFox Mozilla Suite /SeaMonkey

3. Presto : Opera7 et supérieur (le noyau Opera était à l'origine : Presto, maintenant : Blink)

4. Webkit : Safari Chrome

8 Quelles sont les nouvelles fonctionnalité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 faire la distinction entre HTML et HTML5

De nouvelles fonctions telles que les images, l'emplacement, le stockage et le multitâche ont été ajoutées.
Nouveaux éléments :

1. toile

2. éléments vidéo et audio pour la lecture multimédia

3. 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

4. Éléments de contenu avec une meilleure sémantique, tels que comme section de navigation d'en-tête de pied de page d'article

5. API de localisation : géolocalisation

6. contrôle de formulaire, recherche d'URL d'e-mail de date et d'heure du calendrier

7. Nouvelle technologie : web worker (le web worker est du JavaScript qui s'exécute en arrière-plan, indépendamment des autres scripts, et n'affecte pas les performances de la page. Vous pouvez continuer à faire ce que vous voulez : cliquer, sélectionner du contenu, etc., pendant que le web worker est en arrière-plan Exécuter) socket web

8. Glisser-déposer API : glisser, déposer

Éléments supprimés :

1. Éléments purement expressifs : basefont big center font s strike tt u

2. Éléments de mauvaise performance : frame frameset noframes

Distinguer :

1. La manière dont DOCTYPE est déclaré est importante pour distinguer Les facteurs

2. sont distingués en fonction des structures et fonctions nouvellement ajoutées

9 Décrivez brièvement votre compréhension de la sémantique HTML ?

1. Supprimer ou perdre des styles peut donner à la page une structure claire.

2. Il est utile pour le référencement et les moteurs de recherche d'établir une bonne communication, et aide les robots à explorer plus d'informations. Les robots s'appuient sur des balises pour déterminer le contexte et le poids de chaque mot-clé.

3. Pratique à analyser pour d'autres appareils.

4. Facile pour le développement et la maintenance des équipes, sémantique basée sur la lisibilité.

10 Comment utiliser le stockage hors ligne des fichiers HTML5 et quel est le principe de fonctionnement ?

Une fois en ligne, le navigateur constate que l'en-tête HTML a l'attribut manifest, et il demandera le fichier manifeste. S'il s'agit de la première visite, le navigateur téléchargera les ressources correspondantes en fonction du contenu. du fichier manifeste et stockez-le hors ligne. Si l'on y a accédé et que la ressource a été stockée hors ligne, le navigateur utilisera la ressource hors ligne pour charger la page. Le navigateur comparera ensuite le nouveau fichier manifeste avec l'ancien fichier manifeste. Si le fichier n'a pas changé, aucune opération ne sera effectuée. Si le fichier a changé, les ressources du fichier seront à nouveau téléchargées et stockées hors ligne. Par exemple,

Ajouter l'attribut manifeste à l'en-tête de la page

<html manifest=&#39;cache.manifest&#39;>

Écrire les ressources de stockage hors ligne dans le fichier cache.manifest

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
Resourse/logo.png
FALLBACK:
 //offline.html

11 cookies , Quelle est la différence entre sessionStorage et localStorage ?

Ce qu'ils ont en commun : ils sont tous enregistrés côté navigateur et ont la même origine.

Différence :

1. Les cookies sont des données stockées sur le terminal local de l'utilisateur afin d'identifier l'identité de l'utilisateur. Ils sont toujours transportés dans la même requête http source, c'est-à-dire. , les cookies sont stockés dans le navigateur. Ils sont transmis au serveur, mais le stockage de session et le stockage local n'enverront pas automatiquement les données au serveur, mais les enregistreront uniquement localement.

2. Les limites de taille de stockage varient. Les données enregistrées par les cookies sont très petites et ne peuvent pas dépasser 4 Ko, tandis que les données enregistrées par le stockage de session et le stockage local sont volumineuses et peuvent atteindre 5 Mo.

3. La durée de validité des données est différente. Le cookie reste valable jusqu'à la date d'expiration du cookie définie, même si la fenêtre ou le navigateur est fermé. Le stockage de sessions n'est valide que jusqu'à la fermeture de la fenêtre du navigateur. Le stockage local est toujours valide, même lorsque les fenêtres et les navigateurs sont fermés, pour le stockage de données à long terme.

4. Les portées sont différentes. Les cookies sont partagés dans toutes les fenêtres homologues ; le stockage de session n'est pas partagé dans différents navigateurs, même sur la même page ; le stockage local est partagé dans toutes les fenêtres homologues

12 iframe Quels sont les avantages et inconvénients ?

Avantages :

1. iframe peut afficher la page Web intégrée intacte.

2. S'il existe plusieurs pages Web faisant référence à l'iframe, il vous suffit alors de modifier le contenu de l'iframe pour changer le contenu de chaque page appelée, ce qui est pratique et rapide.

3. Si la page Web a le même en-tête et la même version afin d'unifier le style, elle peut être écrite sous forme de page et imbriquée avec iframe, ce qui peut augmenter la réutilisabilité du code.

4. Si vous rencontrez du contenu tiers à chargement lent, tel que des icônes et des publicités, ces problèmes peuvent être résolus par les iframes.

Inconvénients :

1. Les robots des moteurs de recherche ne peuvent pas interpréter ce type de page

2. structure du cadre Divers des barres de défilement apparaissent dans

3. Lorsque vous utilisez la structure du cadre, assurez-vous que les liens de navigation corrects sont définis.

4. la page iframe augmentera la requête http du serveur

13 Quelle est la fonction du label ?

La balise label est utilisée pour définir la relation entre les contrôles de formulaire Lorsque l'utilisateur sélectionne l'étiquette, le navigateur mettra automatiquement le focus sur le contrôle de formulaire lié à l'étiquette. Il y a deux attributs dans label qui sont très utiles, FOR et ACCESSKEY.
Fonction d'attribut FOR : indique l'élément HTML à lier à l'étiquette d'étiquette. Lorsque vous cliquez sur cette étiquette, l'élément lié prend le focus. Par exemple,

<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

Fonction d'attribut ACCESSKEY : indique la touche de raccourci permettant d'accéder à l'élément lié à la balise d'étiquette. Lorsque vous appuyez sur la touche de raccourci, l'élément lié prend le focus. Par exemple,

<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">

14 Comment désactiver la fonction de saisie semi-automatique dans un formulaire HTML5 ?

La zone de saisie HTML peut avoir une fonction de saisie semi-automatique. Lorsque vous saisissez du contenu dans la zone de saisie, le navigateur trouvera un contenu similaire à partir de l'historique de vos zones de saisie précédentes avec le même nom ci-dessous. dans la zone de saisie, vous n'êtes pas obligé de tout saisir, sélectionnez simplement les éléments dans la liste. Mais parfois, nous souhaitons désactiver la fonction de saisie semi-automatique de la zone de saisie. Par exemple, lorsque l'utilisateur saisit du contenu, nous souhaitons utiliser la technologie AJAX pour rechercher et répertorier dans la base de données au lieu de rechercher dans l'historique de l'utilisateur.

Méthode :

1. Définir la saisie semi-automatique dans le menu des options Internet d'IE

2. Définir la saisie semi-automatique de la zone de saisie du formulaire Activez ou désactivez pour activer la fonction de saisie semi-automatique de la zone de saisie

15 如何实现浏览器内多个标签页之间的通信?

1. WebSocket SharedWorker

2. 也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常

16 webSocket如何兼容低浏览器？

1. Adobe Flash Socket  ActiveX HTMLFile (IE)  基于 multipart 编码发送 XHR 基于长轮询的 XHR

2. 引用WebSocket.js这个文件来兼容低版本浏览器。

16 页面可见性（Page Visibility）API 可以有哪些用途？

1. 通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。

2. 在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

17 如何在页面上实现一个圆形的可点击区域？

1. map+area或者svg

2. border-radius

3. 纯js实现，一个点不在圆上的算法

18  实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果

<p style="height:1px;overflow:hidden;background:red"></p>

19 网页验证码是干嘛的，是为了解决什么安全问题？

1. 区分用户是计算机还是人的程序;

2. 可以防止恶意破解密码、刷票、论坛灌水；

20 title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
strong标明重点内容，语气加强含义；b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code

21 元素的alt和title有什么异同？

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

相关推荐：

前端面试题小结

CSS基础面试题小结、

JavaScript面试基础知识题分享

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!