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
se situe sur la première ligne du document
L'inexistence ou le format incorrect entraînera le rendu du document en mode de compatibilité<!DOCTYPE>于HTML<html>DOCTYPELe 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 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
appartient à la balise
, 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,
link@importCSS
est importTag, aucun problème de compatibilitéCSS2.1IE5linkXHTML
Noyau :
TridentIE,MaxThon,TT,The World,360
GeckoNetscape6FF,MozillaSuite/SeaMonkey
;]PrestoOpera7OperaBlink
(une branche de Webkit)]Safari,ChromeChromeBlinkWebKit
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
É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="//m.sbmmt.com/wiki/48.html" target="_blank">javascript<code><a href="//m.sbmmt.com/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 style="height:1px;overflow:hidden;background:red"></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中文网其它相关文章！
推荐阅读：
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
