h5 組織コンテンツの使用方法-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

h5 組織コンテンツの使用方法

php中世界最好的语言

Jan 12, 2018 am 09:49 AM

html5使用どうやって

今回は、h5 組織コンテンツの使用方法を紹介します。h5 組織コンテンツを使用するにはどうすればよいですか? h5 を使用してコンテンツを整理するときの注意事項は何ですか? 以下は実際のケースです。見てみましょう。

デフォルトでは、HTML ドキュメントの形式は、ブラウザウィンドウに表示されるドキュメントコンテンツの形式とは無関係です。たとえば、ブラウザは複数の連続する空白文字を 1 つのスペースに変換し、改行文字を無視します。 HTML は、コンテンツの整理、表示コンテンツのセグメント化、コンテンツの事前フォーマットなどを行う方法を提供します。

段落を作成する

HTML は、テキスト内に入力された改行やその他の余分なスペースを無視します。段落には、通常、A ポイントまたは引数を囲む 1 つ以上の関連する文が含まれます。、または共通のテーマを共有する複数の引数。

<body> 
    <h1 id="Antoni-nbsp-Gaudí">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>

フォント、フォントサイズ、色などのスタイルを段落に追加できます。

div 要素

div 要素には特定の意味がありません。適切な要素が利用できない場合は、この要素を使用してコンテンツを構造化し、その意味をクラスまたは id 属性を通じて指定できます。

ただし、最後の手段として div 要素を使用しないように注意してください。意味的に重要な要素を優先する必要があります。

事前にフォーマットされたコンテンツ

ブラウザは余分な改行とスペースをすべて圧縮し、ウィンドウのサイズに応じて行を自動的に折り返します。 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 属性を使用して、引用されるコンテンツのソースを指定できます。

トピック分離を追加

hr要素は段落レベルでのトピック分離を表します。 HTML5 では、hr 要素は別の関連トピックへの移行を表し、カスタムスタイルはページ全体にわたる直線です。

デフォルトでは、ブラウザは blockquote 要素内のコンテンツの形式を無視し、blockquote テキストをインデントすることに注意してください。引用の構造を確立するには、p や hr などのいくつかの組織要素を使用できます。

ブラウザは、q 要素のテキストに言語固有の引用符を自動的に追加しますが、その効果はブラウザによって異なります。以下は 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">

テーマ 1

テーマ 2

...

上の例は、特定の blockquote 要素に hr 要素を追加します。構造。

コンテンツをリストに整理する

HTML のリストの種類には、順序付きリスト、順序なしリスト、説明リストなどがあります。

1) 順序付きリスト、ol は親要素、li はリスト項目です。

2) 順序なしリスト、ul は親要素、li はリスト項目です。

3) 説明リスト、dl は親要素です。、dt、dd はそれぞれ dl 内の用語と説明を表します。

これに加えて、ユーザーは独自のリストを定義することもできます。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

H5 でビデオタグとオーディオタグとプログレスバーを使用する方法

H5 にドラッグアンドドロップ機能を実装する方法

H5 セマンティックタグの実際のケース

以上がh5 組織コンテンツの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5：Web開発の新機能と機能Apr 29, 2025 am 12:07 AM

H5は多くの新しい機能と機能をもたらし、Webページのインタラクティブ性と開発効率を大幅に改善します。 1。SEOの強化などのセマンティックタグ。 2.マルチメディアサポートは、オーディオとビデオの再生とタグを簡素化します。 3. Canvas Drawingは、動的なグラフィックスの描画ツールを提供します。 4.ローカルストレージは、LocalStorageとSessionStorageを介してデータストレージを簡素化します。 5. Geolocation APIは、ロケーションベースのサービスの開発を促進します。

H5：HTML5の重要な改善Apr 28, 2025 am 12:26 AM

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

See all articles