Maison > Article > interface Web > Théorie de base du HTML

Théorie de base du HTML

不言original: 2018-04-02 15:19:492473parcourir

Cet article partage avec vous les connaissances théoriques de base sur le HTML. Le contenu est très bon. Les amis intéressés peuvent consulter

HTML

Semantic.

La sémantique des balises HTML signifie : exprimer de manière appropriée la structure du document en utilisant des balises qui contiennent de la sémantique (telles que h1-h6)
La dénomination sémantique du CSS fait référence à : l'ajout de 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 peuvent mieux lire à l'aide d'un lecteur d'écran
Les moteurs de recherche peuvent mieux comprendre la page. inclusion
Facilite le fonctionnement et la maintenance durables des projets d'équipe

Décrivez brièvement votre approche de la sémantique HTML, compris ?

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 ;
Facilitez la tâche des personnes qui lisent le code source pour diviser le site Web en morceaux pour faciliter 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

. 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é<!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 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
Quels sont les éléments en ligne ? Que sont les éléments de niveau bloc ? Quels sont les éléments vides ?

Les éléments en ligne incluent :

(souligné)

a b span img input select strongLes éléments de niveau bloc incluent :
p ul ol li dl dt dd h1 h2 h3 h4…pÉléments vides courants :
<br> <hr> <img> <input> <link> <meta>
Quelle est la différence entre l'utilisation d'un lien et de @import lors de l'importation de styles sur la page ?

appartient à la balise

, 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
attendra que la page soit chargée avant de charger
link@importCSS
est proposé par
, tandis que
est importTag, aucun problème de compatibilitéCSS2.1IE5linkXHTML
Pourriez-vous s'il vous plaît présenter votre compréhension du noyau du navigateur ?

est principalement divisé en deux parties : le moteur de rendu (

moteur
layout engineerRendering EngineJS 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 de la page Web, puis de sa sortie au 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. Tous les navigateurs Web, clients de messagerie et autres applications qui doivent modifier et afficher le contenu du réseau nécessitent le noyau
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<.>
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,
Presto Noyau : Opera7 et supérieur. [OperaLe noyau était à l'origine : Presto, maintenant : Blink;]
WebkitNoyau : Safari,Chrome etc. [Chrome de Blink (une branche de WebKit)]

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
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 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 de nouveaux éléments structurels 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 la différence entre les cookies, sessionStorage et localStorage ?

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 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

iframe有那些缺点？

iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

Label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件

HTML5的form如何关闭自动完成功能？

给不想要提示的 form 或某个 input 设置为 autocomplete=off。

如何实现浏览器内多个标签页之间的通信? (阿里)

WebSocket、SharedWorker
也可以调用localstorge、cookies等本地存储方式

webSocket如何兼容低浏览器？(阿里)

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

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

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

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

map+area或者svg
border-radius
纯js实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等

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

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

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

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

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

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容
i内容展示为斜体，em表示强调的文本

页面导入样式时，使用 link 和 @import 有什么区别？

link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS
页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载
@import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题

介绍一下你对浏览器内核的理解？

浏览器内核主要分为两部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎
渲染引擎负责取得网页的内容进行布局计和样式渲染，然后会输出至显示器或打印机
JS引擎则负责解析和执行JS脚本来实现网页的动态效果和用户交互
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

常见的浏览器内核有哪些？

Blink内核：新版 Chrome、新版 Opera
Webkit内核：Safari、原Chrome
Gecko内核：FireFox、Netscape6及以上版本
Trident内核（又称MSHTML内核）：IE、国产浏览器
Presto内核：原Opera7及以上

HTML5有哪些新特性？

Nouveaux sélecteurs document.querySelector, document.querySelectorAll
API glisser-déposer
Lecture multimédia vidéo et audio
Stockage local localStorage et sessionStorage
Manifeste d'application hors ligne
Notifications sur le bureau, e-mail, url, recherche
Géolocalisation
Webworker multitâche
Websocket double protocole de communication industrielle complet
Historique de gestion de l'historique
Partage de ressources inter-domaines (CORS) Access-Control-Allow-Origin
Changement de visibilité de l'événement de changement de visibilité
Communication inter-fenêtres PostMessage
Objet de données de formulaire
Peinture sur toile
Quels éléments ont été supprimés par HTML5 ?

Influence sur la convivialité Négativement éléments concernés : frame, frameset, noframes

Comment gérer les problèmes de compatibilité du navigateur avec les nouvelles balises HTML5 ?

Utiliser shim html5shiv.js

Comment faire la distinction entre HTML et HTML5 ?

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

Lorsque l'utilisateur est en ligne, enregistrez et mettez à jour le fichier cache sur la machine de l'utilisateur ; Lorsque les utilisateurs sont hors ligne, ils peuvent accéder normalement aux sites de stockage hors ligne ou au contenu des applications

Créez un nouveau fichier manifeste dans le projet. pour le fichier manifeste est : xxx.appcache

Configurez le type MIME correct sur le serveur Web, c'est-à-dire text/cache-manifest

Si c'est le premier Lorsque l'application est accédée une fois, le navigateur téléchargera les ressources correspondantes en fonction du contenu du fichier manifeste et les stockera hors ligne

Si l'application a été visitée et que les ressources ont été stockées hors ligne, le navigateur comparera. Le nouveau fichier manifeste est le même que l'ancien fichier manifeste. Si le fichier n'a pas changé, aucune opération ne 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 utilisera directement les ressources stockées hors ligne.
Quels sont les avantages et les inconvénients de l'iframe ?

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

permet de télécharger des scripts en parallèle

permet la communication entre sous-domaines
Inconvénients :

ne peut pas être reconnu par certains moteurs de recherche

Beaucoup de pages seront générées, ce qui est difficile à gérer

Lorsque l'utilisateur sélectionne la balise label, le navigateur Tournez automatiquement le focus sur le contrôle de formulaire lié à l'étiquette

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

Comment réaliser la communication entre plusieurs onglets dans le navigateur ?
<label>Date:<input type="text"/></label>

postMessage

SharedWorker (API Web Worker)
événement de stockage (API localStorge)
WebSocket
Comment webSocket est compatible avec appareil de navigation faible ?
- Adobe Flash Socket
- ActiveX HTMLFile (IE)
- Envoyer XHR basé sur un encodage en plusieurs parties
- Quelles sont les utilisations possibles de XHR basées sur des interrogations longues
API de visibilité de page ?
- Mettre automatiquement en pause la lecture de musique ou de vidéo lorsque la page passe à d'autres processus en arrière-plan
- Lorsque l'utilisateur parcourt d'autres pages, mettre en pause la lecture automatique du diaporama sur la page d'accueil du site
- Après avoir terminé la connexion, synchronisez automatiquement l'état de connexion des autres pages sans actualiser
title et h1 La différence entre b et strong, la différence entre i et em ?
- titre représente le titre de la page entière, h1 représente un titre de niveau clair, qui a un grand impact sur la capture des informations de la page
- fort indique un contenu clé et a le sens de renforcer le ton Lorsque vous utilisez un appareil de lecture pour lire sur Internet, fort sera souligné, tandis que b
. est d'afficher le contenu souligné
- i le contenu est affiché en italique, em représente le texte souligné
- Balises de style naturel : b, i, u, s, pre
- Balises de style sémantique : strong, em, ins, del, code
- Des balises de style sémantique doivent être utilisées avec précision, mais sans abus. Si vous n'êtes pas sûr, il est préférable d'utiliser des balises de style naturel
Recommandations associées :

Quelques points de connaissances HTML de base

Connaissances de base du HTML dans le front-end

Explication détaillée des connaissances de base des images HTML

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Effets spéciaux d'animation de texte basés sur HTML5 CanvasArticle suivant：Effets spéciaux d'animation de texte basés sur HTML5 Canvas

Articles Liés

Voir plus