Maison > Article > interface Web > html5 organiser le contenu

html5 organiser le contenu

小云云original: 2017-12-08 09:07:111616parcourir

Dans cet article, nous présenterons le contenu de l'organisation html5 à tout le monde. Nous espérons qu'il sera utile à tout le monde. Par défaut, le format d'un document HTML n'a aucun rapport avec le format du contenu du document affiché dans la fenêtre du navigateur. Par exemple, le navigateur convertira plusieurs caractères d'espacement consécutifs en un seul espace et ignorera les sauts de ligne. HTML fournit un moyen d'organiser le contenu, de segmenter le contenu affiché, de préformater le contenu, etc.

Création de paragraphes

Le HTML ignorera les retours chariot et les autres espaces supplémentaires que vous entrez dans le texte. Les nouveaux paragraphes sont identifiés à l'aide du. Élément p. Un paragraphe contient une ou plusieurs phrases liées, entourant généralement un point de vue ou 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 la police, la taille de la police, la couleur, etc.

élément p

l'élément p n'a pas de signification spécifique Si aucun élément approprié n'est disponible, vous pouvez utiliser cet élément pour établir une structure et donner. content au contenu. Sa signification, sa signification est généralement spécifiée via l'attribut class ou id.

Mais notez qu'il est préférable de ne pas utiliser les éléments p 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 via 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 indique une citation provenant d'ailleurs Un élément de contenu, similaire à l'élément q (utilisé pour les citations courtes, ne peut pas s'étendre sur des lignes), mais est généralement utilisé dans des scénarios où il y a beaucoup de contenu à citer. L'attribut cite de cet élément peut être utilisé pour spécifier la source du contenu cité.

Copier le code

Le code est le suivant :

87a7ea26b062d8f9d6769e0449ce80b2Le">http://en.wikipedia.org/wiki/ Apple"> ;La pomme5db79b134e9f6b82c0b36e0489ee08ed forme un arbre petit et à feuilles caduques, ...1aee16100a65d522474e4de7ff568f4a

Notez que le navigateur ignorera le format du contenu dans l'élément blockquote et par défaut pour bloquer le texte des citations Pour créer une structure dans une citation, utilisez certains éléments d'organisation tels que

Les navigateurs ajouteront automatiquement des guillemets spécifiques à la langue au texte à l'intérieur de l'élément q, mais cela varie d'un navigateur à l'autre. différent. Voici un exemple d'utilisation de l'élément q pour ajouter une séparation de thème

<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>

l'élément hr représente une 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 habituel est une ligne droite à travers la page

L'exemple ci-dessus ajoute quelques éléments hr à l'élément blockquote pour former une certaine structure. >Organisez le contenu dans une liste <.>

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 et 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

<blockquote cite="http://en.wikipedia.org/wiki/Apple">  
主题1  
<hr>  
主题2  
<hr>  
......  
</blockquote>

3) Liste de description, dl est le parent ; element, dt et dd représentent respectivement les termes et les descriptions en dl

De plus, les utilisateurs peuvent également définir leurs propres listes

Liste ordonnée La L'élément ol représente la liste ordonnée et les éléments de la liste sont représentés par l'élément li

l'élément ol prend en charge les attributs suivants :

1) start : définissez la valeur numérique du premier élément de la liste, la valeur par défaut est Le nombre est 1 ;

2) type : définissez le type de numéro affiché à côté de chaque élément de la liste, y compris :

l : Nombre décimal (par défaut), 1,2,3,4

a : Lettres latines minuscules, a, b, c, d

A : Lettres latines majuscules, A, B, C, D

i : chiffres romains minuscules, i ,ii,iii,iv

<body>  
    I like apples and oranges.  
    I also like:  
    <ol>  
        <li>bananas</li>  
        <li>mangoes</li>  
        <li>cherries</li>  
        <li>plums</li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ol>  
    You can see other fruits I like <a href="fruitlisthtml">here</a>  
</body>

I : chiffres romains majuscules, I,II,III, IV

3) inversé : les numéros de liste sont par ordre décroissant, certains navigateurs prennent en charge

Liste non ordonnée

l'élément ul représente une liste non ordonnée, et li L'élément représente un élément de liste.

Une puce sera affichée avant chaque élément de la liste non ordonnée. Le style du symbole peut être contrôlé avec la propriété CSS list-style-. taper.

Attributs de l'élément li

L'élément li représente les éléments de la liste. Il peut être utilisé avec ul et ol, et peut contenir l'attribut value à représenter. le numéro de série de l'élément de liste.

<body>  
    I like apples and oranges.  
    I also like:  
    <ul>  
        <li>bananas</li>  
        <li>mangoes</li>  
        <li>cherries</li>  
        <li>plums</li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ul>  
    You can see other fruits I like <a href="fruitlisthtml">here</a>  
</body>

Liste de description

定义说明列表需要用到三个元素：dl、dt和dd元素，这些元素没有局部属性：

1）dl：表示说明列表；

2）dt：表示说明列表中的术语；

3）dd：表示说明列表中的定义。

<body>  
    I like apples and oranges.  
    I also like:  
    <dl>  
        <dt>Apple</dt>  
            <dd>The apple is the pomaceous fruit of the apple tree</dd>  
            <dd><i>Malus domestica</i></dd>  
        <dt>Banana</dt>  
            <dd>The banana is the parthenocarpic fruit of the banana tree</dd>  
            <dd><i>Musa acuminata</i></dd>  
        <dt>Cherry</dt>  
            <dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd>  
    </dl>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

自定义列表

HTML中的ul元素结合CSS中的counter特性和:before选择器，可以生成复杂的列表。下面是一个例子：

<head>  
    ......  
    <style>  
        body{  
            counter-reset: OuterItemCount 5 InnerItemCount;  
        }  
        #outerlist > li:before {  
         content: counter(OuterItemCount)". ";  
            counter-increment: OuterItemCount 2;  
        }  
        ulinnerlist > li:before {  
            content: counter(InnerItemCount, lower-alpha) ". ";  
            counter-increment: InnerItemCount;  
        }  
    </style>  
</head>  
<body>  
    I like apples and oranges.  
    I also like:  
    <ul id="outerlist" style="list-style-type: none">  
        <li>bananas</li>  
        <li>mangoes, including:</li>  
            <ul class="innerlist">  
                <li>Haden mangoes</li>  
                <li>Keitt mangoes</li>  
                <li>Kent mangoes</li>  
            </ul>  
        <li>cherries</li>  
        <li>plums, including:  
            <ul class="innerlist">  
                <li>Elephant Heart plums</li>  
                <li>Stanley plums</li>  
                <li>Seneca plums</li>  
            </ul>  
        </li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ul>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

使用插图

HTML5对插图的定义为：一个独立的内容单元，可带标题，通常作为一个整体被文档的主体引用，把它从文档主体中删除也不会影响文档的含义。

HTML使用figure元素插入图表、照片、图形、插图、代码片段等，figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。

<body>  
    I like apples and oranges.  
    <figure>  
        <figcaption>Listing 23. Using the code element</figcaption>  
        <code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>document.writen("I like " + fruits.length + " fruits");  
        </code>  
    </figure>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

figure元素生成了一个将code元素裹在其中的插图，并用figcaption元素为其添加了一个标题。注意figcaption元素必须是figure元素的第一个或最后一个子元素。

figure元素可以包含多个内容块，但只能包含一个figcaption。

Articles Liés

Voir plus