ホームページ > 記事 > ウェブフロントエンド > html5でコンテンツを整理する
html5でコンテンツを整理する
- 小云云オリジナル
- 2017-12-08 09:07:111584ブラウズ
この記事では、html5編成の内容を皆様にご紹介していきますので、皆様のお役に立てれば幸いです。デフォルトでは、HTML ドキュメントの形式は、ブラウザ ウィンドウに表示されるドキュメント コンテンツの形式とは無関係です。たとえば、ブラウザは複数の連続する空白文字を 1 つのスペースに変換し、改行を無視します。 HTML は、コンテンツの整理、表示コンテンツのセグメント化、コンテンツの事前フォーマットなどを行う方法を提供します。
段落を作成する
HTML では、テキスト内に入力された改行やその他の余分なスペースは無視され、通常、段落には 1 つ以上の関連する文が含まれます。ある論点や議論を中心に展開しているか、複数の議論の間に共通のテーマがいくつかあります。
<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>
フォント、フォントサイズ、色などのスタイルを段落に追加できます。
p 要素
p 要素には特定の意味がありません。適切な要素が利用できない場合は、この要素を使用してコンテンツを構造化し、その意味を通常 class または id 属性を通じて指定できます。 。
ただし、最後の手段として p 要素を使用しないことが最善であることに注意してください。意味的に重要な要素を優先する必要があります。
事前にフォーマットされたコンテンツ
ブラウザは余分な改行とスペースをすべて圧縮し、ウィンドウのサイズに応じて行を自動的に折り返します。 pre 要素は、ブラウザーがコンテンツを処理する方法を変更して、空白文字のマージを防ぎ、ソース ドキュメント内の書式設定を維持することができます。ただし、要素とスタイルを使用してレンダリング結果を制御するメカニズムの柔軟性が低下するため、ドキュメントの元の書式を保持する必要がない限り、この要素を使用しないことをお勧めします。
プログラミング言語では書式設定が通常重要であるため、pre 要素は通常、コード例を表示するために code 要素と組み合わせて使用されます。
<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>
他の場所からコンテンツを引用する
blockquote要素は、q要素（短い引用符に使用され、複数行にまたがることはできません）と同様に、他の場所から引用されたコンテンツの一部を表しますが、通常は次の目的で使用されます。引用 内容の濃いシーン。この要素の cite 属性を使用して、引用されるコンテンツのソースを指定できます。
コードをコピーします
コードは次のとおりです:
79f71d63376099874f04fcbca2c2fe6f">http://en.wikipedia.org/wiki/Apple">5db79b134e9f6b82c0b36e0489ee08ed リンゴは、小さくて落葉性の木になります...1aee16100a65d522474e4de7ff568f4a
ブラウザに注意してください blockquote 要素内のコンテンツの形式は無視され、デフォルトで blockquote テキストがインデントされるため、p や hr などのいくつかの構成要素を使用できます。
ブラウザは言語固有の引用符にテキストを追加しますが、効果はブラウザによって異なります。<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>
トピックの区切りを追加します。 hr 要素は段落レベルのトピックの分離を表します。HTML5 では、hr 要素は別の関連トピックへの移行を表し、カスタム スタイルはページ全体にわたる直線です。上の例では、いくつかの hr 要素を blockquote 要素に追加しています。特定の構造
コンテンツをリストに整理します HTML のリストの種類には、順序付きリスト、順序なしリスト、説明リストがあります 1) 順序付きリスト、ol は親要素、li はリスト項目です。2) 順序なしリスト、ul は親要素、li はリスト項目です。
3) 説明リスト、dl は親要素、dt と dd はそれぞれ dl 内の用語と説明を表しますさらに、ユーザーが定義することもできます独自のリスト。
順序付きリストol要素は順序付きリストを表し、リスト項目は次の属性をサポートします:
1) start: を設定します。リストの最初の項目の数値。最初の項目のデフォルトの数値は 1 です。
2) type: 以下を含む、各リスト項目の横に表示される数値のタイプを設定します。
l: 10 進数 (デフォルト)、 1、2、3、4
a: 小文字のラテン文字、a、b、c、d A: 大文字のラテン文字、A、B、C、D
i: 小文字のローマ数字、i、ii、iii 、iv
I: 大文字のローマ数字、I、II、III、IV
3) 反転: リスト番号は降順であり、一部のブラウザは
順序なしリストをサポートしていますul要素は順序なしリストを表し、li要素はリスト項目を表します
順序なしリストの各項目の前に箇条書きが表示されます。li 要素の属性は CSS 属性で制御できます。リスト内の項目。ul および ol とともに使用でき、リスト項目のシリアル番号を表す value 属性を含めることができます。
<blockquote cite="http://en.wikipedia.org/wiki/Apple"> 主题1 <hr> 主题2 <hr> ...... </blockquote>説明リスト
定义说明列表需要用到三个元素：dl、dt和dd元素，这些元素没有局部属性： 1）dl：表示说明列表； 2）dt：表示说明列表中的术语； 3）dd：表示说明列表中的定义。 自定义列表 HTML中的ul元素结合CSS中的counter特性和:before选择器，可以生成复杂的列表。下面是一个例子： 使用插图 HTML5对插图的定义为：一个独立的内容单元，可带标题，通常作为一个整体被文档的主体引用，把它从文档主体中删除也不会影响文档的含义。 HTML使用figure元素插入图表、照片、图形、插图、代码片段等，figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。 figure元素生成了一个将code元素裹在其中的插图，并用figcaption元素为其添加了一个标题。注意figcaption元素必须是figure元素的第一个或最后一个子元素。 figure元素可以包含多个内容块，但只能包含一个figcaption。 相关推荐：<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>
<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>
<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>
以上がhtml5でコンテンツを整理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。