Maison > Article > interface Web > Comment utiliser le contenu organisé h5

Comment utiliser le contenu organisé h5

php中世界最好的语言original: 2018-01-12 09:49:062271parcourir

Cette fois, je vais vous montrer comment utiliser le contenu organisationnel h5, comment utiliser le contenu organisationnel h5 ? Quelles sont les précautions lors de l'utilisation de h5 pour organiser du contenu Voici un cas pratique, jetons un oeil.

Par défaut, le format du document HTML n'est pas lié au format du contenu du document affiché dans la fenêtre du navigateur. Par exemple : le navigateur connectera plusieurs espaces entre eux. Se convertit en espace et les nouvelles lignes sont ignorées. HTML fournit un moyen d'organiser le contenu, de segmenter le contenu affiché, de préformater le contenu, etc.

Créer des paragraphes

Le HTML ignorera les retours chariot et les autres espaces supplémentaires que vous saisissez dans le texte. Les nouveaux paragraphes de la page Web sont marqués de l'élément p. tournent généralement autour d’un point ou d’un argument, ou il existe des thèmes communs parmi plusieurs arguments.

<body> 
    <h1>Antoni Gaudí</h1> 
    <p>Many tourists are drawn to Barcelona 
       to see Antoni Gaudí&#39;s incredible 
       architecture.</p> 
    <p>Barcelona celebrated the 150th 
       anniversary of Gaudí&#39;s birth in 
       2002.</p> 
</body>

Vous pouvez ajouter des styles aux paragraphes, notamment des polices, des tailles de police, des couleurs, etc.

Élément div

L'élément div n'a pas de signification spécifique. Si aucun élément approprié n'est disponible, vous pouvez utiliser cet élément pour structurer le contenu et lui donner une signification via la classe ou. attribut id spécifié.

Mais notez qu'il est préférable de ne pas utiliser les éléments div en dernier recours. La priorité doit être donnée aux éléments ayant une importance sémantique.

Contenu préformaté

Le navigateur compressera tous les retours chariot et espaces supplémentaires et enveloppera automatiquement les lignes en fonction de la taille de la fenêtre. L'élément pre peut modifier la façon dont le navigateur gère le contenu, empêchant la fusion des caractères d'espacement afin que le formatage du document source soit préservé. Notez cependant qu'il est préférable de ne pas utiliser cet élément à moins qu'il ne soit nécessaire de conserver la mise en forme originale du document, car cela réduit la flexibilité du mécanisme permettant de contrôler les résultats du rendu grâce à l'utilisation d'éléments et de styles. L'élément

pre est généralement utilisé en conjonction avec l'élément code pour afficher des exemples de code, car le formatage dans les langages de programmation est généralement important.

<p>Add this to your style sheet if you want 
  to display a dotted border underneath the 
  <code>abbr</code> element whenever it has 
  a <code>title</code> attribute.</p> 
<pre class="brush:php;toolbar:false"> 
    <code> 
        abbr[title] { 
            border-bottom: 1px dotted #000; 
        } 
    </code>

Citer du contenu provenant d'ailleurs

L'élément blockquote représente un élément de contenu cité ailleurs. Il est similaire à l'élément q (utilisé pour les citations courtes et ne peut pas s'étendre sur des lignes), mais. est généralement utilisé lors de scènes importantes avec de nombreuses citations. L'attribut cite de cet élément peut être utilisé pour spécifier la source du contenu cité.

Ajouter une séparation de sujet

L'élément hr représente la séparation de sujet au niveau du paragraphe. En HTML5, l'élément hr représente une transition vers un autre sujet connexe et le style personnalisé est une ligne droite traversant la page.

Notez que le navigateur ignorera le formatage du contenu dans l'élément blockquote et indentera le texte blockquote par défaut. Pour établir la structure d'un devis, vous pouvez utiliser certains éléments organisationnels tels que p ou hr.

Les navigateurs ajouteront automatiquement des guillemets spécifiques à la langue au texte de l'élément q, mais les effets des différents navigateurs varient. Vous trouverez ci-dessous un exemple utilisant l'élément q.

<p>She tried again, this time in French: 
<q lang="fr">Avez-vous lu le livre
<cite lang="en">High Tide in Tucson</cite>
de Kingsolver? C&#39;est inspirational.</q></p>
<blockquote cite="http://en.wikipedia.org/wiki/Apple">

Thème 1

f32b48428a809b51f04d3228cdf461fa

Thème 2

f32b48428a809b51f04d3228cdf461fa

.... .

1aee16100a65d522474e4de7ff568f4a

L'exemple ci-dessus ajoute des éléments hr à l'élément blockquote pour former une certaine structure.

Organisez le contenu en listes

Les types de listes en HTML incluent les listes ordonnées, les listes non ordonnées et les listes de descriptions.

1) Liste ordonnée, ol est l'élément parent, li est l'élément de liste

2) Liste non ordonnée, ul est l'élément parent, li est l'élément de liste ; 🎜> 3) Liste de descriptions, dl est l'élément parent, dt et dd représentent respectivement les termes et les descriptions en dl.

En plus de cela, les utilisateurs peuvent également définir leurs propres listes.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser les balises vidéo et audio et les barres de progression dans H5

Comment implémenter le glisser- fonction and-drop en H5

Tag sémantique H5 cas réel

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：Comment créer une fonction de vérification du calendrier dans H5Article suivant：Comment créer une fonction de vérification du calendrier dans H5

Articles Liés

Voir plus