In diesem Artikel stellen wir allen den Inhalt der HTML5-Organisation vor. Wir hoffen, dass er für alle hilfreich ist. Standardmäßig ist das Format eines HTML-Dokuments irrelevant für das Format des im Browserfenster angezeigten Dokumentinhalts. Beispielsweise wandelt der Browser mehrere aufeinanderfolgende Leerzeichen in ein Leerzeichen um und ignoriert Zeilenumbrüche. HTML bietet eine Möglichkeit, Inhalte zu organisieren, angezeigte Inhalte zu segmentieren, Inhalte vorzuformatieren usw.
Absätze erstellen
HTML ignoriert die Wagenrückläufe und andere zusätzliche Leerzeichen, die Sie in den Text eingeben. Neue Absätze werden mit identifiziert Das p-Element enthält einen oder mehrere verwandte Sätze, die normalerweise einen Standpunkt oder ein Argument umgeben, oder es gibt einige gemeinsame Themen zwischen mehreren Argumenten.
<body>
<h1>Antoni Gaudí</h1>
<p>Many tourists are drawn to Barcelona
to see Antoni Gaudí's incredible
architecture.</p>
<p>Barcelona celebrated the 150th
anniversary of Gaudí's birth in
2002.</p>
</body>Nach dem Login kopieren
Sie können Absätzen Stile hinzufügen, einschließlich Schriftart, Schriftgröße, Farbe usw.
p-Element
p-Element hat keine spezifische Bedeutung. Wenn kein geeignetes Element verfügbar ist, können Sie dieses Element verwenden, um Struktur festzulegen und zu geben Inhalt zum Inhalt Seine Bedeutung wird normalerweise durch das Klassen- oder ID-Attribut angegeben.
Beachten Sie jedoch, dass es am besten ist, p-Elemente nicht als letzten Ausweg zu verwenden. Den 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 zeigt das Zitieren von anderen Stellen an Ein Inhalt, ähnlich dem q-Element (wird für kurze Zitate verwendet, kann sich nicht über mehrere Zeilen erstrecken), wird jedoch normalerweise in Szenarien verwendet, in denen viel Inhalt zitiert werden muss. Das Attribut „cite“ dieses Elements kann verwendet werden, um die Quelle des zitierten Inhalts anzugeben.
Code kopieren
Der Code lautet wie folgt:
The">http://en.wikipedia.org/wiki/ Apfel"> ;Der Apfel bildet einen Baum, der klein und laubabwerfend ist, ...
Beachten Sie, dass der Browser das Format des Inhalts im Blockquote-Element und in der Standardeinstellung ignoriert Um Text in Anführungszeichen zu blockieren, verwenden Sie einige Organisationselemente wie
. Browser fügen dem Text innerhalb des q-Elements automatisch sprachspezifische Anführungszeichen hinzu, dies variiert jedoch von Browser zu Browser Anders. Das Folgende ist ein Beispiel für die Verwendung des q-Elements zum Hinzufügen einer Thementrennung.
<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'est inspirational.</q></p>
Nach dem Login kopieren
hr-Element stellt eine Thementrennung auf Absatzebene dar. In HTML5 stellt das hr-Element einen Übergang zu einem anderen verwandten Element dar Thema, und der übliche Stil ist eine gerade Linie über die Seite. Das obige Beispiel fügt dem Blockquote-Element einige hr-Elemente hinzu, um eine bestimmte Struktur zu bilden 🎜>
Organisieren Sie den Inhalt in einer Liste
Zu den Listentypen in HTML gehören geordnete Listen, ungeordnete Listen und Beschreibungslisten. 1) Geordnete Liste , ol ist das übergeordnete Element und li ist das Listenelement; 2) Ungeordnete Liste, ul ist das übergeordnete Element, li ist das Listenelement; übergeordnetes Element, dt und dd repräsentieren Begriffe bzw. Beschreibungen in dl
Darüber hinaus können Benutzer auch ihre eigenen Listen definieren
Geordnete Liste
<blockquote cite="http://en.wikipedia.org/wiki/Apple">
主题1
<hr>
主题2
<hr>
......
</blockquote>
Nach dem Login kopieren
Das ol-Element stellt die geordnete Liste dar, und die Listenelemente werden durch das li-Element dargestellt. Das ol-Element unterstützt die folgenden Attribute:
1) Start: Legen Sie den Zahlenwert des ersten Elements in der Liste fest, der Standardwert ist Die Zahl ist 1;
2) Typ: Legen Sie den Nummerntyp fest, der neben jedem Listenelement angezeigt wird. einschließlich: l: Dezimalzahl (Standard), 1,2,3,4
a: Lateinische Kleinbuchstaben, a, b, c, d
A : Lateinische Großbuchstaben, A, B, C, D
i: Römische Kleinbuchstaben, i ,ii,iii,iv
I: Römische Großbuchstaben, I,II,III ,IV
3) umgekehrt: Listennummern sind in absteigender Reihenfolge, einige Browser unterstützen
Ungeordnete Liste
ul-Element stellt eine ungeordnete Liste dar, und Das li-Element stellt Listenelemente dar.
<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>Nach dem Login kopieren
Vor jedem Element in der ungeordneten Liste wird ein Aufzählungszeichen angezeigt. Der Stil des Symbols kann mit der CSS-Eigenschaft list-style gesteuert werden. Typ.
Attribute des li-Elements
Das li-Element stellt die Elemente in der Liste dar. Es kann mit ul und ol verwendet werden und kann das darzustellende Wertattribut enthalten die Seriennummer des Listenelements.
Beschreibungsliste
定义说明列表需要用到三个元素：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>Nach dem Login kopieren
自定义列表
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>Nach dem Login kopieren
使用插图
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>Nach dem Login kopieren
figure元素生成了一个将code元素裹在其中的插图，并用figcaption元素为其添加了一个标题。注意figcaption元素必须是figure元素的第一个或最后一个子元素。
figure元素可以包含多个内容块，但只能包含一个figcaption。
相关推荐：
html5离线存储知识详解
HTML5标签嵌套规则的详细介绍
HTML5新增标签使用方法
Das obige ist der detaillierte Inhalt vonHTML5 Inhalte organisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
