Questions d'entretien frontales que les débutants en HTML doivent connaître

HTML

---

Sémantique

• La sémantique de la balise HTML signifie : en utilisant les balises sémantiques include (comme h1-h6) représentent de manière appropriée la structure du document

• La sémantique de la dénomination CSS signifie : ajouter des classes significatives aux balises html

• Pourquoi la sémantique est nécessaire :

• Après avoir supprimé le style, la page présente une structure claire

• Les personnes aveugles utilisent davantage les lecteurs d'écran Bonne lecture

• Les moteurs de recherche peuvent mieux comprendre la page, ce qui est propice à l'inclusion

• Faciliter le fonctionnement et la maintenance durables des projets d'équipe

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

• Faites la bonne chose avec les bonnes balises.

• La sémantique HTML structure le contenu de la page et le rend plus clair, facilitant ainsi son analyse par les navigateurs et les moteurs de recherche

• Même si ; il n'y a pas de style CSS est également affiché dans un format de document et est facile à lire ; SEO ;

• Permet aux personnes qui lisent le code source de diviser le site Web en morceaux pour plus de facilité. lecture, maintenance et compréhension

• Fonction Doctype ? Quelle est la différence entre le mode standards et le mode compatibilité ? La déclaration

se situe sur la première ligne du document

, avant la balise
• . Indique à l'analyseur du navigateur quelle norme de document utiliser pour analyser ce document.

  L'inexistence ou le format incorrect entraînera le rendu du document en mode de compatibilité<code>于HTMLDOCTYPELe formatage et le mode de fonctionnement JS du mode standards s'exécutent au standard le plus élevé pris en charge par le navigateur. En mode compatibilité, les pages sont affichées de manière vaguement rétrocompatible, simulant le comportement des anciens navigateurs pour éviter que le site ne fonctionne pas

• HTML5 Pourquoi simplement écrire ?

HTML5 n'est pas basé sur SGML, il n'est donc pas nécessaire de référencer la DTD, mais un doctype est nécessaire pour réguler le comportement du navigateur (laisser les navigateurs fonctionner comme ils le devraient)

• Et HTML4.01 est basé sur SGML, il doit donc référencer la DTD pour indiquer au navigateur le type de document utilisé par le document

• Lors de l'importation de styles sur une page, quelle est la différence entre l'utilisation de link et @import ?

appartient à la balise

En plus de charger
• , il peut également être utilisé pour définir

  , définir link connexion. attributs, etc.; et XHTML est fourni par CSS et ne peut être utilisé que pour charger la page RSSrel@importCSSCSS Lorsque la page est chargée,

  le fera. être chargé en même temps, et le
référencé
• attendra que la page soit chargée avant de charger

  link@importCSS

  est proposé par
et ne peut être reconnu ci-dessus
• , tandis que

  est importTag, aucun problème de compatibilitéCSS2.1IE5linkXHTML

  Quels sont les noyaux courants des navigateurs ?

Noyau :

, navigateur Sogou, etc. [Aussi connu sous le nom de MSHTML]

• TridentIE,MaxThon,TT,The World,360

  Noyau :
et supérieur,
• etc.

  GeckoNetscape6FF,MozillaSuite/SeaMonkey

  Noyau :
et plus. [
• Le noyau était à l'origine : Presto, maintenant :

  ;]PrestoOpera7OperaBlink

  Noyau :
etc. [
• de

  (une branche de Webkit)]Safari,ChromeChromeBlinkWebKit

  Quelles sont les nouvelles fonctionnalités de 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

• Le 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. le navigateur est fermé

• Éléments de contenu avec une meilleure sémantique, tels que l'article, le pied de page, l'en-tête, la navigation, la section

• les contrôles de formulaire, le calendrier, la date , heure, email, url, recherche

• Webworker nouvelle technologie, websocket, Géolocalisation

• Éléments supprimés :

• Éléments purement expressifs : basefont, big, center, font, s, strike, tt, u

• Éléments qui ont un impact négatif sur la convivialité : frame, frameset , noframes

• Prise en charge des nouvelles balises HTML5 :

• Prise en charge d'IE8/IE7/IE6 générée par la méthode document.createElement Balises

• Vous pouvez utiliser cette fonctionnalité pour que ces navigateurs prennent en charge les nouvelles balises HTML5

• Une fois que le navigateur prend en charge la nouvelle balise, vous devez toujours ajouter la balise default Le style de

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 stockage à long terme de données, le navigateur est fermé Les données ne seront pas perdues après

• Les données de sessionStorage seront automatiquement supprimées après la fermeture du navigateur

• Contenu éléments avec une meilleure sémantique, tels que article et pied de page, en-tête, navigation, section

• contrôle de formulaire, calendrier, date, heure, email, url, recherche

• webworker nouvelle technologie, websocket , Géolocalisation

• Éléments supprimés :

• Éléments purement expressifs : 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 :

• IE8/IE7/IE6 prend en charge les balises générées par la méthode document.createElement

• Vous pouvez utiliser cette fonctionnalité pour créer ces balises Le navigateur prend en charge les nouvelles balises HTML5

• Une fois que le navigateur a pris en charge la nouvelle balise, vous devez toujours ajouter le style par défaut de la balise

• Bien sûr, vous pouvez utiliser directement des frameworks matures, tels que html5shim

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->

• Comment distinguer HTML5 : DOCTYPE déclare une nouvelle structure éléments et éléments fonctionnels

Comment utiliser le stockage hors ligne HTML5 Pouvez-vous expliquer le principe de fonctionnement ?

• Lorsque l'utilisateur n'est pas connecté à Internet, le site ou l'application est accessible normalement. Lorsque l'utilisateur est connecté à Internet, le fichier cache sur la machine de l'utilisateur. est mis à jour

• Principe : le stockage hors ligne HTML5 est basé sur le mécanisme de mise en cache (et non sur la technologie de stockage) d'un fichier .appcache nouvellement créé. Les ressources sont stockées hors ligne via la liste d'analyse sur ce fichier, et ces ressources seront stockées comme des cookies. Plus tard, lorsque le réseau sera hors ligne, le navigateur affichera la page à travers les données stockées hors ligne

• Comment utiliser :

• Ajoutez un attribut de manifeste à l'en-tête de la page comme indiqué ci-dessous ;

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

• En mode hors connexion, utilisez la fenêtre .applicationCache pour implémenter les exigences

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

Comment le navigateur gère-t-il et charge-t-il les ressources de stockage hors ligne HTML5 ?

• Une fois en ligne, le navigateur constate que l'en-tête HTML a l'attribut manifest, et il demandera le fichier manifeste si c'est la première fois que vous accédez à l'application, le. Le navigateur Le contenu du fichier manifeste télécharge les ressources correspondantes et les stocke hors ligne. Si l'application a été accédée et que les ressources ont été stockées hors ligne, le navigateur utilisera les ressources hors ligne pour charger la page, puis le navigateur comparera le nouveau fichier manifeste avec l'ancien fichier manifeste. Si le fichier n'a pas changé, non. L'opération sera effectuée, si le fichier change, les ressources du fichier seront à nouveau téléchargées et stockées hors ligne.

• En mode hors connexion, le navigateur utilise directement les ressources stockées hors ligne

Veuillez décrire les cookies, sessionStorage et localStorage, la différence ?

• Les cookies sont des données (généralement cryptées) stockées sur le terminal local de l'utilisateur (Côté Client) par le site Internet afin d'identifier l'identité de l'utilisateur

• Les données des cookies sont toujours transportées dans la requête http de la même origine (même si elles ne sont pas nécessaires), et seront transmises dans les deux sens entre le navigateur et le serveur

• sessionStorage et localStorage n'enverront pas automatiquement les données au serveur et ne les enregistreront que localement

• Taille de stockage :

• cookieLa taille des données ne peut pas dépasser 4 ko

• sessionStorage et localStorage, bien qu'ils aient également des limites de taille de stockage, sont beaucoup plus grands que les cookies et peuvent atteindre 5 M ou plus

• Délai d'expiration :

• localStorage Stocke les données persistantes, les données ne seront pas perdues après la fermeture du navigateur, sauf si les données sont activement supprimées

• sessionStorage Les données sont automatiquement supprimées après la fermeture de la fenêtre actuelle du navigateur

• cookie L'ensemble cookie le délai d'expiration est valable jusqu'au délai d'expiration, même si la fenêtre ou le navigateur est fermé

Quels sont les avantages et les inconvénients de l'iframe ?

• Inconvénients :

• iframe bloquera l'événement Onload de la page principale

• Le programme de récupération du moteur de recherche ne peut pas interpréter ce genre de page, ce qui n'est pas propice au référencement

• iframe et la page principale partagent le pool de connexion, et le navigateur a des restrictions sur les connexions dans le même domaine. Par conséquent, cela affectera le chargement parallèle de la page

• Vous devez prendre en compte ces deux défauts avant d'utiliser iframe. Si vous devez utiliser iframe, il est préférable d'utiliser <a href="http://www.php.cn/wiki/48.html" target="_blank">javascript<code><a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a> code> Ajoutez dynamiquement la valeur de l'attribut iframe à src, ce qui peut contourner les deux problèmes ci-dessus

• Avantages :

• Utilisé pour charger du contenu plus lent (comme des publicités)

• peut permettre au script d'être téléchargé en parallèle

• peut réaliser une communication de domaine par abonnement croisé

Quel est le rôle du Label ? Comment est-il utilisé ?

• balise d'étiquette 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

  .

Comment désactiver la fonction auto-complete dans un formulaire HTML5 ?

• Définissez autocomplete=off pour les formulaires ou les entrées qui ne veulent pas d'invites.

Comment mettre en œuvre la communication entre plusieurs onglets dans le navigateur ? (Alibaba)

• WebSocket, SharedWorker

• Vous pouvez également appeler des méthodes de stockage locales telles que localstorge et cookies

Comment webSocket est-il compatible avec les navigateurs bas de gamme ? (Ali)

• Adobe Flash Socket,

• Fichier HTML ActiveX (IE),

• Envoyer XHR basé sur un codage multipart,

• XHR basé sur une interrogation longue

Page Visibilité Quoi utilisations pour lesquelles les API peuvent-elles être utilisées ?

• 通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;

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

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

• map+area或者svg

• border-radius

• 纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<p></p>

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

• iframe + contentWindow

• postMessage

• SharedWorker(Web Worker API)

• storage 事件(localStorge API)

• WebSocket

webSocket 如何兼容低浏览器？

• Adobe Flash Socket

• ActiveX HTMLFile (IE)

• 基于 multipart 编码发送 XHR

• 基于长轮询的 XHR

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

• title 表示是整个页面标题，h1 则表示层次明确的标题，对页面信息的抓取有很大的影响

• strong 标明重点内容，有语气加强的含义，使用阅读设备阅读网络时，strong 会重读，而 b 是展示强调内容

• i内容展示为斜体，em 表示强调的文本

• 自然样式标签：b, i, u, s, pre

• 语义样式标签：strong, em, ins, del, code

• 应该准确使用语义样式标签, 但不能滥用。如果不能确定时，首选使用自然样式标签

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

bootstarp+table使用方法分析

前端中排序算法实例详解

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!