DIV+CSS 图文混排的图片居中办法_html/css_WEB-ITnose

Le chargement paresseux natif est une fonction de navigateur intégrée qui permet le chargement paresseux des images en ajoutant un attribut chargé = "paresseux" à la balise. 1. Il ne nécessite pas de bibliothèques JavaScript ou tierces et est utilisée directement dans HTML; 2. Il convient aux images qui ne sont pas affichées sur le premier écran sous la page, les modules complémentaires de défilement de la galerie d'images et les grandes ressources d'image; 3. Il ne convient pas aux images avec premier écran ou affichage: aucun; 4. Lorsque vous l'utilisez, un espace réservé approprié doit être réglé pour éviter la gigue de mise en page; 5. Il devrait optimiser le chargement d'image réactif en combinaison avec les attributs SRCSET et tailles; 6. Les problèmes de compatibilité doivent être pris en compte. Certains anciens navigateurs ne le soutiennent pas. Ils peuvent être utilisés grâce à la détection des fonctionnalités et combinés avec des solutions JavaScript.

SRCSET et les tailles sont des propriétés clés pour l'implémentation HTML des images réactives. SRCSET fournit plusieurs sources d'image et leur densité de largeur ou de pixel, telles que 400W et 800W, et le navigateur sélectionne l'image appropriée en conséquence; Les tailles définissent la largeur d'affichage de l'image sous différentes largeurs d'écran, telles que (max-largeur: 600px) 100VW, 50VW, afin que le navigateur puisse correspondre plus précisément à la taille de l'image. Dans une utilisation réelle, vous devez préparer des images multi-taille, clairement nommées, concevoir la disposition conformément à la requête multimédia, et tester les performances de l'équipement pour éviter d'ignorer les tailles ou les erreurs unitaires, enregistrant ainsi la bande passante et améliorant les performances.

À l'aide de balises HTML, vous pouvez utiliser l'attribut HREF pour réaliser Page Jump, ouvrir de nouvelles fenêtres, le positionnement dans les pages et les fonctions de liaison par e-mail et par téléphone. 1. Utilisation de base: spécifiez l'adresse cible via HREF, comme l'accès à une page Web; 2. Ouvrez une nouvelle fenêtre: Ajouter des attributs Target = "_ Blank" et Rel = "Noopenner"; 3. Sautez dans la page: Combinez ID et # Symbole pour réaliser le positionnement du point d'ancrage; 4. Lien de téléphone e-mail: utilisez MailTo: ou Tel: Protocole pour déclencher les applications système.

La principale différence est que TextArea prend en charge plusieurs lignes d'entrée de texte, tandis que InputText n'est disponible qu'en une seule ligne. 1. Utilisez InputType = "Text" pour être adapté à la saisie utilisateur courte et unique, telle que le nom d'utilisateur, l'adresse e-mail, etc., et peut définir MaxLength pour limiter le nombre de caractères. Le navigateur offre une fonction de remplissage automatique, ce qui facilite le style uniformément entre les navigateurs; 2. Utilisez TextArea pour les scénarios qui nécessitent plusieurs lignes d'entrée, telles que les boîtes de commentaires, les formulaires de rétroaction, les pauses et les paragraphes de ligne de support, et peuvent contrôler la taille via CSS ou désactiver la fonction de réglage. Les deux fonctionnalités du formulaire de support telles que les espaces réservées et les remplissages requis, mais TextArea définit la taille à travers les lignes et les cols, et l'entrée utilise l'attribut de taille.

Il s'agit d'un élément au niveau du bloc, utilisé pour diviser de grandes zones de contenu de bloc; Il s'agit d'un élément en ligne, adapté à l'emballage de petits segments de fragments de texte ou de contenu. Les différences spécifiques sont les suivantes: 1. Occuper exclusivement une ligne, une largeur et une hauteur, des marges intérieures et extérieures peuvent être définies, qui sont souvent utilisées dans des structures de mise en page telles que les en-têtes, les barres latérales, etc.; 2. N'enveloppez pas les lignes, n'occupez que la largeur du contenu et sont utilisés pour le contrôle du style local tel que la décoloration, le gras, etc.; 3. En termes de scénarios d'utilisation, il convient à l'organisation de mise en page et de structure de la zone globale, et est utilisé pour les ajustements de style à petite échelle qui n'affectent pas la disposition globale; 4. Lors de la nidification, il peut contenir des éléments et les éléments au niveau du bloc ne doivent pas être imbriqués à l'intérieur.

Pour obtenir un effet pop-up de base, vous devez suivre les étapes suivantes: 1. Structure: Utilisez HTML pour créer des boutons de déclenchement, une couche de masque et une zone de contenu contextuelle; 2. Style: Définissez la mise en page cachée par défaut, la mise en page centrée, l'arrière-plan du masque et les styles de bouton de fermeture via CSS; 3. Interaction: Utilisez JavaScript pour lier les événements de clic pour contrôler l'affichage et la masque de fenêtre contextuels et peuvent étendre la fonction de clôture de la clé ESC; 4. Optimisation: ajoutez l'animation CSS pour améliorer l'expérience utilisateur. L'ensemble du processus ne nécessite pas de bibliothèque tierce, ce qui convient pour réaliser rapidement des fonctions contextuelles de base.

Les balises sont une balise introduite par HTML5 pour définir des fragments de contenu réutilisables. Ils ne sont pas rendus immédiatement, mais peuvent être insérés dynamiquement via JavaScript. Le processus d'utilisation comprend: 1. Définition du modèle; 2. Clonage du contenu; 3. Insertion du dom. Par exemple, obtenez le modèle via document.getElementById, appelez clonenode (true) et insérez la page. Lors du remplissage dynamique des données, la liaison du contenu peut être obtenue en fonctionnant les éléments DOM clonés, qui convient à la création de listes de produits, de cartes utilisateur et d'autres composants. Lorsque vous l'utilisez, veillez à ne pas accéder directement aux sous-éléments du modèle, à éviter les conflits d'identification, à gérer les lunettes de style et peut également créer des composants d'encapsulation avec des composants Web.

Pour commencer rapidement avec HTML, il vous suffit de maîtriser quelques balises de base pour créer un squelette Web. 1. La structure de la page est essentielle et, qui est l'élément racine, contient des méta-informations et est la zone d'affichage du contenu. 2. Utilisez le titre. Plus le niveau est élevé, plus le nombre est petit. Utilisez des balises pour segmenter le texte pour éviter de sauter le niveau. 3. Le lien utilise des balises et correspond aux attributs HREF, et l'image utilise des balises et contient des attributs SRC et Alt. 4. La liste est divisée en listes non ordonnées et listes commandées. Chaque entrée est représentée et doit être imbriquée dans la liste. 5. Les débutants n'ont pas à forcer la mémorisation de toutes les balises. Il est plus efficace de les écrire et de les vérifier pendant que vous écrivez. Maître la structure, le texte, les liens, les images et les listes pour créer des pages Web de base.