Heim > Web-Frontend > H5-Tutorial > Hauptteil

So verwenden Sie h5-Organisationsinhalte

php中世界最好的语言
Freigeben: 2018-01-12 09:49:06
Original
2249 Leute haben es durchsucht


Dieses Mal zeige ich Ihnen, wie Sie h5-Organisationsinhalte verwenden. Wie verwenden Sie h5-Organisationsinhalte? Was sind die Vorsichtsmaßnahmen für die Verwendung von h5 zum Organisieren von Inhalten? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Standardmäßig hängt das Format des HTML-Dokuments nicht mit dem Format des im Browserfenster angezeigten Dokumentinhalts zusammen. Beispielsweise verbindet der Browser mehrere Leerzeichen miteinander. Wird in ein Leerzeichen umgewandelt und Zeilenumbrüche werden ignoriert. HTML bietet eine Möglichkeit, Inhalte zu organisieren, angezeigte Inhalte zu segmentieren, Inhalte vorzuformatieren usw.

Absätze erstellen

HTML ignoriert Wagenrückläufe und andere zusätzliche Leerzeichen, die Sie in den Text eingeben. Ein Absatz enthält einen oder mehrere verwandte Sätze drehen sich normalerweise um einen Standpunkt oder ein Argument, oder es gibt einige gemeinsame Themen bei mehreren Argumenten.

<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>
Nach dem Login kopieren

Sie können Absätzen Stile hinzufügen, einschließlich Schriftarten, Schriftgrößen, Farben usw.

div-Element

div-Element hat keine spezifische Bedeutung. Wenn kein geeignetes Element verfügbar ist, können Sie dieses Element verwenden, um den Inhalt zu strukturieren und ihm eine Bedeutung zu geben id-Attribut angegeben.

Beachten Sie jedoch, dass es am besten ist, div-Elemente nicht als letzten Ausweg zu verwenden. Elementen mit semantischer Bedeutung sollte Vorrang eingeräumt werden.

Vorformatierter Inhalt

Der Browser komprimiert alle zusätzlichen Wagenrückläufe und Leerzeichen und bricht Zeilen automatisch entsprechend der Fenstergröße um. Das pre-Element kann die Art und Weise ändern, wie der Browser Inhalte verarbeitet, indem es verhindert, dass Leerzeichen zusammengeführt werden, sodass die Formatierung im Quelldokument erhalten bleibt. Beachten Sie jedoch, dass es am besten ist, dieses Element nicht zu verwenden, es sei denn, es ist notwendig, die ursprüngliche Formatierung des Dokuments beizubehalten, da es die Flexibilität des Mechanismus zur Steuerung der Rendering-Ergebnisse durch die Verwendung von Elementen und Stilen verringert. Das

pre-Element wird normalerweise in Verbindung mit dem code-Element verwendet, um Codebeispiele anzuzeigen, da die Formatierung in Programmiersprachen normalerweise wichtig ist.

<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> 
Nach dem Login kopieren

Zitieren von Inhalten von anderer Stelle

Das Blockquote-Element stellt einen von anderer Stelle zitierten Inhalt dar. Es ähnelt dem q-Element (wird für kurze Zitate verwendet und kann sich nicht über mehrere Zeilen erstrecken), jedoch wird normalerweise in wichtigen Szenen mit vielen Zitaten verwendet. Das Attribut „cite“ dieses Elements kann verwendet werden, um die Quelle des zitierten Inhalts anzugeben.

Thementrennung hinzufügen

Das hr-Element stellt die Thementrennung auf Absatzebene dar. In HTML5 stellt das hr-Element einen Übergang zu einem anderen verwandten Thema dar und der benutzerdefinierte Stil ist eine gerade Linie über die Seite.

Beachten Sie, dass der Browser die Formatierung des Inhalts im Blockquote-Element ignoriert und den Blockquote-Text standardmäßig einrückt. Um die Struktur eines Angebots festzulegen, können Sie einige Organisationselemente wie p oder hr verwenden.

Browser fügen dem Text im q-Element automatisch sprachspezifische Anführungszeichen hinzu, die Auswirkungen variieren jedoch je nach Browser. Unten finden Sie ein Beispiel für die Verwendung des q-Elements.

<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">
Nach dem Login kopieren

Thema 1


Thema 2


.... .

Das obige Beispiel fügt dem Blockquote-Element einige hr-Elemente hinzu, um eine bestimmte Struktur zu bilden.

Inhalte in Listen organisieren

Zu den Listentypen in HTML gehören geordnete Listen, ungeordnete Listen und Beschreibungslisten.

1) Geordnete Liste, ol ist das übergeordnete Element, li ist das Listenelement

2) Ungeordnete Liste, ul ist das übergeordnete Element, li ist das Listenelement; 🎜> 3) Beschreibungsliste, dl ist das übergeordnete Element, dt und dd repräsentieren Begriffe bzw. Beschreibungen in dl.

Darüber hinaus können Benutzer auch eigene Listen definieren.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie Video- und Audio-Tags und Fortschrittsbalken in H5

So implementieren Sie Drag- Und-Drop-Funktion in H5

H5-Semantik-Tag tatsächlicher Fall

Das obige ist der detaillierte Inhalt vonSo verwenden Sie h5-Organisationsinhalte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!