よく使われる HTML 形式のタグ_Powernode Java Academy
|
1. タイトル HTML では、<h1></h1> から <h6></h6> までの 6 つの <h> タグが定義されており、これらは異なるフォント サイズの見出しに使用されます。フォント サイズは大きいものから小さいものの順になっており、<h1> が最大で、<h6> が最小です。 見出しタグでは次の点に注意する必要があります: a. ブラウザはタイトルの前後に自動的に空白行を追加します。見出しタグはブロックレベル要素であるため、デフォルトでは、HTML はブロックレベル要素の前後に余分な空白行 (<br/>) を自動的に追加します。 b. タイトルはページ全体にとって重要です。太字や大きなテキストを作成するためだけではなく、タイトルにのみ HTML 見出しタグを使用する必要があります。見出しタグは SEO に非常に適しており、検索エンジンはタイトルを使用して Web ページの構造とコンテンツをインデックスし、ユーザーはタイトルを使用して Web ページをすばやく閲覧するため、タイトルを使用してドキュメントの構造を示すことが重要です。メインの見出し（最も重要なもの）として <h1> を使用し、次に <h2>（次に重要なもの）、次に <h3> というように使用します。
<!--<h> タグはタイトルを設定するために使用されます。検索エンジンが優先するように、重要な情報を <h1> に配置します。 -->
<h1>
チャイナワン</h1>
<h2>
中国 II</h2>
<h3>
チャイナスリー</h3>
<h4>
チャイナフォー</h4>
<h5>
チャイナファイブ</h5>
<h6>
チャイナシックス効果は次のようになります（フォント サイズは大きいものから小さいものまで）。
2. 改行 <br/>、改行なし <nobr></nobr>、段落区切り <p></p> HTML の改行タグ <br/> と段落区切りタグ <p></p> の違いは、改行タグ <br/> は単なる復帰であるのに対し、 <p></p> は段落区切りである点です。 <p> タグはブロックレベル要素であるため、その前後に比較的大きなスペースが入ります (<br/> は自動的に追加されます)。一方、<br/> タグは行レベル要素であるため、前後にスペースを入れずに行を単純に折り返します。 <br/> の反対のタグとして、<nobr></nobr> があります。これは改行なしを意味し、通常はブラウザがプログラム コードや改行が不要なその他の場所を自動的に折り返すのを防ぐために使用されます。
<!-- 改行と段落区切り: -->
<p>
これは最初の段落です<br /> <!--改行-->
改行タグが使用されています<br />
効果をぜひご覧ください<br />
わかりやすい</p>
<p>
これは 2 番目の段落です</p> <!--セクション、自動改行-->
<p>
これは3番目の段落です</p>
<p>
<nobr> <!--改行を禁止-->
整数 i =0,j=10;
</nobr>
</p>3. 水平線タグ <hr/> <hr /> タグは HTML ページに水平線を作成します。これを行う 1 つの方法は、水平線 (<hr> タグ) を使用して記事内のセクションを区切ることです。 <hr/> タグは幅と高さを設定でき、これら 2 つの属性はそれぞれピクセルとパーセンテージで表現できます。さらに、<hr/> タグには、size (太さ)、color (色)、noshade (影なし) 属性があります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<タイトル></タイトル>
</head>
<本文>
<hr size="5" color="#FF0000" />
<!-- サイズ (太さ) が 5、色が赤の hr タグを定義します -->
<hr width="60" />
<!--width 属性は 60px です-->
<hr width="60%" />
<!--幅は60%です-->
<hr size="10" />
<!--サイズは10pxです-->
<hr size="10%" />
<!--サイズは 10% です-->
<!--align 属性、可能な値は left、right、center です -->
<hr width="20%" align="left" />
<hr width="20%" align="right" />
<hr width="20%" align="center" />
<hr color="#FF0000" />
<!--noshade 属性、影効果を設定しません-->
<hr noshade="noshade" />
</本文>
</html>4. テキスト書式タグ <!-- 一般的なテキストフォーマットタグ --> <center>博客园</center> は中央に <b>Hello, World!</center> を表示します。 </b>太字の場合は、<strong> タグを使用することをお勧めします。 <i>斜めの</i>イタリック体です。 <u>私は下線タグです</u> が下線付きです。 <em>強調、斜体</em> <sub>2</sub> 下付き文字、例: H<sub>2</sub>O <sup>2</sup> 上付き文字、例: 10<sup>2</sup> <!-- フォント サイズの設定は、絶対フォント サイズと相対フォント サイズの 2 つに分けられます。絶対フォント サイズは <font> タグの size 属性で設定され、相対フォント サイズは既定のフォントの相対値です。 --> <!-- 絶対フォント サイズは 1 から 7 までの数値です --> <!--color (色の設定) サイズ (1-7)。 --> <!--face 属性はフォントを設定するために使用されます--> <font></font>フォント タグ、<font color="red" size="7" face="隶书">赤</font> 5. 事前フォーマットタグ <pre> <pre> 事前フォーマットタグ。Web ページのコンテンツをそのまま表示します。特定の特別なコンテンツを表示するために使用することも、コンピュータプログラミングのソースコードを表示するために使用することもできます (たとえば、Blog Garden のソースコードは <pre> タグを通じて表示されます)。
<p>pre タグは、そのまま表示したい特別なコンテンツを表示します:</p>
<前>
私は良い子です。
これは気に入りました。これはフォーマット済みのタグです____
（。\
\ |
\ |___(\--/)
__/ （ . . ）
「'._. '-.O.' こんにちは、子猫です！」
'-.\ "|\
'.,,/'.,,
(⊙_⊙)?何って言ったの？ ? ? ?
</pre>
<p>pre タグはコンピュータ コードを表示するのに最適です:</p>
<前>
i = 1 から 10 まで
印刷する
次に私
</pre> 6. <marquee></marquee> タグ <marquee></marquee> タグのペアは、ブラウザにその中のテキストと画像を移動するように指示します。
<div>
<!--marquee タグ 一部のブラウザでサポートされています: IE、FF-->
<!--direction 属性: コンテンツの移動方向を指定します。指定可能な値は、左、右、上、下です -->
<!--behavior 属性: タグの動作を指定します。指定できる値は scroll、alternate、slide です -->
<marquee direction="left" scrolldelay="" behavior="alternate">
みなさんこんにちは。私のホームページへようこそ！ ......
</マーキー>
</div>7. その他のフォーマットタグの例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<タイトル></タイトル>
</head>
<本文>
<!--<abbr>略語を表示: -->
<abbr title="英国放送協会">
BBC</abbr><br />
<!-- <acronym> フレーズの略語を表示します: -->
<acronym title="ワールド ワイド ウェブ">www</acronym><br />
<!--<blockquote> は長いテキストの引用を定義します:-->
<引用>
<p>
2、3日を超えると、世界最高の予測も推測に過ぎなくなり、
6 つか 7 つは価値がありません。
</p>
<br />
<!-- <q> タグは短い引用を定義します: -->
<q>q ラベル!!!</q>
</blockquote>
<!--<address>住所、署名、文書作成者情報など:-->
<住所>
北京市海淀区中関村ソフトウェアパーク、[email protected]
</アドレス>
<!-- <bdo> タグは dir 属性を使用してテキストの表示順序を定義します: -->
<bdo dir="ltr">電源ノード</bdo><br /> <!--ltr: 左から右、左から右へ-->
<bdo dir="rtl">電源ノード</bdo><br /> <!--rtl:右から左、右から左へ-->
</本文>
</html>2. HTML リスト
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<ヘッド>
<タイトル></タイトル>
</head>
<本文>
<b>HTML リスト:</b><br />
<hr size="5" color="#FF0000;" />
<br />
<!--まず、順序なしリスト (ul:unordered list)-->
<font size="+" color="#FF" face="华文楷体">I. 順序なしリスト:</font><br />
.デフォルト:<br />
<ul>
<li>バナナ</li>
<li>アップル</li>
<li>オレンジ</li>
</ul>
type属性を使用します:<br />
<!--ul タイプ属性の値:
円: 実線の円、円: 中空の円、四角: 実線の四角 -->
<!--ol type 属性値:
<ul type="I"/"a"/"A"/"1">
-->
<ul type="circle">
<li>バナナ</li>
<li>アップル</li>
<li>オレンジ</li>
</ul>
<ul type="square">
<li>バナナ</li>
<li>アップル</li>
<li>オレンジ</li>
</ul>
3. 強調のための属性値の混合使用:<br />
<ul type="circle">
<li>バナナ</li>
<li type="disc">アップル</li>
<li>オレンジ</li>
</ul>
<!--2 番目の順序付きリスト (ol、順序付きリスト)-->
II. 順序付きリスト:
.デフォルト:<br />
<オル>
<li>バスケットボール</li>
<li>バレーボール</li>
<li>サッカー</li>
</ol>
2. type属性を使用します。
<ol type="i">
<li>バスケットボール</li>
<li>バレーボール</li>
<li>サッカー</li>
</ol>
<ol type="A">
<li>バスケットボール</li>
<li>バレーボール</li>
<li>サッカー</li>
</ol>
3. 順序付きリスト項目の先頭の数を変更します。<br />
<引用>
a.<font color="#FFFF">start</font> 属性を単独で使用する場合:<br />
<ol 開始="3">
<li>バスケットボール</li>
<li>バレーボール</li>
<li>サッカー</li>
</ol>
b.<font color="#FFFF">vlaue</font> 属性を単独で使用する場合:<br />
<オル>
<li>バスケットボール</li>
<li value="5">バレーボール</li>
<li>サッカー</li>
</ol>
c. <font color="#FFFF">start、value</font> 属性の一般的な使用法:<br />
<ol 開始="8">
<li>バスケットボール</li>
<li value="15">バレーボール</li>
<li>サッカー</li>
</ol>
</blockquote>
<font size="+1" color="#00FF00" face="花纹楷体">III. ネストされたリスト:</font><br />
1. 順序なしリスト内のネストされた順序なしリスト:<br />
<ul>
<li>ドリンク</li>
<li>果物<ul>
<li>バナナ</li>
<li>アップル</li>
<li>オレンジ</li>
</ul>
</li>
<li>野菜</li>
<li>お茶</li>
</ul>
2. 順序なしリスト内のネストされた順序付きリスト:<br />
<ul>
<li>ドリンク</li>
<li>果物<ol>
<li>バナナ</li>
<li>アップル</li>
<li>オレンジ</li>
</ol>
</li>
<li>野菜</li>
<li>お茶</li>
</ul>
3. 順序付きリスト内のネストされた順序付きリスト:<br />
<オル>
<li>ドリンク</li>
<li>果物<ol>
<li>バナナ</li>
<li>アップル</li>
<li>オレンジ</li>
</ol>
</li>
<li>野菜</li>
<li>お茶</li>
</ol>
4. 順序なしリストを順序付きリストにネストする:<br />
<オル>
<li>ドリンク</li>
<li>果物<ul>
<li>バナナ</li>
<li>アップル</li>
<li>オレンジ</li>
</ul>
</li>
<li>野菜</li>
<li>お茶</li>
</ol>
5. リストの複数レベルのネスト:<br />
<オル>
<li>ドリンク</li>
<li>果物<ul>
<li>バナナ</li>
<li>アップル<ul>
<li>ブラジル製</li>
<li>中国製</li>
</ul>
</li>
<li>オレンジ</li>
</ul>
</li>
<li>野菜</li>
<li>お茶</li>
</ol>
<!--3番目、定義リスト（dl、定義リスト）-->
<font size="+1" color="#00FF00">IV. 定義リスト:</font><br />
1. 定義リスト:<br />
<!--
<ダウンロード>
<dt>最初のヘッダー項目</dt>
<dd>最初のヘッダー項目の説明テキスト</dd>
<dt>2 番目のタイトル項目</dt>
<dd>2 番目のヘッダー項目の説明テキスト</dd>
</dl>
その中には、<dl> は定義リストの先頭を示すために使用されます。
<dt> は定義リストのリスト項目を識別するために使用されます。
<dd> は、定義リスト内のリスト項目の説明テキストを識別するために使用されます。
-->
<ダウンロード>
<!--dt:definition term (定義用語) はタイトル項目「北京」を定義します -->
<dt>北京</dt>
<!--dd:definition definition (用語の定義の説明) タイトル項目「北京」の説明 -->
<dd>
中国の政治の中心
<dt>上海</dt>
<dd>
中国の経済の中心
<dt>深セン</dt>
<dd>
中国の改革開放の先端都市
</dl>
</本文>
</html>多くのタグを使用して、テキストの外観を変更し、テキストに隠された意味を関連付けることができます。一般に、これらのタグは、コンテンツベースのスタイルと物理スタイルの 2 つのカテゴリに分類できます。 1. コンテンツベースのスタイル コンテンツベースのスタイル タグは、タグに含まれるテキストに特定の意味、コンテキスト、または使用法があることをブラウザに伝えます。ブラウザは、その意味、コンテキスト、または使用法と一致する書式をテキストに適用します。コンテンツベースのタグはフォーマットではなく意味を伝えることに注意してください。したがって、それらは自動処理にとって重要であり、コンピューターはドキュメントの外観を気にしません。 フォント スタイルは意味的な手がかりを使用して指定されるため、ブラウザーはユーザーに適した表示スタイルを選択できます。スタイルは場所によって異なるため、コンテンツ ベースのスタイルを使用すると、ドキュメントが幅広い読者にとって理解しやすいものになることを保証できます。これは、視覚障害者や身体障害者向けに設計されたブラウザでは特に重要です。これらのブラウザの表示オプションは、従来のテキストとは根本的に異なる場合や、何らかの形で非常に制限されている場合があるためです。 現在の HTML および XHTML 標準では、すべてのコンテンツ ベースのタグの形式は定義されておらず、コンテンツ ベースのスタイルはドキュメント内の通常のテキストとは異なる方法で表示する必要があると指定しているだけです。この標準では、これらのコンテンツベースのスタイルを互いに異なる方法で表示する必要さえありません。実際のアプリケーションでは、これらのタグの多くが従来の印刷と非常に明白な関係があることに気付くでしょう。それらは意味と表示スタイルが似ており、ほとんどのブラウザで同じスタイルとフォントで表示されます。 HTML/XHTML コンテンツ ベースのスタイル タグを使用する場合は、従うべきルールがいくつかあります。テキストの意味を必ずしも知らなくても、テキストをどのように表示するかだけを考えるのは非常に簡単だからです。コンテンツベースのスタイルを使い始めると、ドキュメントの一貫性が高まり、自動検索やコンテンツ編集をより適切にサポートできるようになります。タグは次のとおりです: <略> <頭字語> <引用> <コード> <dfn> <em> <kbd> <サンプル> <strong> <var> 2. 身体的なスタイル コンテンツベースのスタイル タグについて説明するときに、「意図」という言葉をよく使用します。これは、ブラウザがテキストを表示する方法よりも、タグによって伝えられる意味の方が重要だからです。ただし、場合によっては、法律上または著作権上の理由により、テキストを特定の方法 (斜体や太字など) で表示したいことがあります。この場合、テキストに物理的なスタイルを使用できます。 他のテキスト処理システムでは、スタイルと外観を正確に制御する傾向がありますが、HTML または XHTML を使用する場合は、まれな状況を除いて物理タグの使用を避ける必要があります。可能な限り、ブラウザにコンテキスト情報を提供し、コンテンツベースのスタイルを使用します。現在のブラウザではこのテキストが単に斜体または太字で表示されますが、将来のブラウザやさまざまなドキュメント生成ツールでは、これらのコンテンツベースのスタイルが非常に創造的な方法で活用される可能性があります。 現在の HTML/XHTML 標準では、太字、斜体、等幅、下線、取り消し線、拡大、縮小、上付き、下付きのテキストを含む合計 9 つの物理スタイルが提供されています。タグは次のとおりです: <b> <大きい> <i> <s> <小> <ストライク> <サブ> <sup> <tt> 上記はエディターが紹介するよく使われる HTML 形式のタグです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策
>>: CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル
推薦する
パーソナライズされたクリエイティブなウェブサイトデザインの例 (30)
そこで、個性的なスタジオやフリーランスを表現する組み合わせを 30 個選びました。デザインを目立たせ...
変数が空かどうかを判定するシェルの方法の概要
シェルで変数が空かどうかを判断する方法シェルプログラミングでは、パラメータのエラーチェック項目に、変...
純粋なCSS3で実装されたネオンライト効果
達成される効果は次のとおりです。 マウスがボタン内に移動すると、ネオンライトのような効果が生成され、...
MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法
目次MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法1. 非同...
JavaScript 組み込みオブジェクトの概要
目次1. 組み込みオブジェクト2. 数学オブジェクト1. Mathオブジェクトの使用2. 指定された...
カルーセルアニメーションを実現するVueコンポーネント
この記事では、カルーセルアニメーションを実現するためのVueコンポーネントの具体的なコードを例として...
MySQL DISTINCTの基本実装原理の詳細な説明
序文DISTINCT は、GROUP BY 操作の実装と非常によく似ていますが、GROUP BY の...
MySQLデータベースのマスタースレーブレプリケーションと読み取り書き込み分離に関する詳細なチュートリアル
目次序文1. MySQL マスタースレーブレプリケーション1. サポートされているレプリケーションの...
Flask アプリケーションの Docker デプロイ実装手順
1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...
Vue でのキープアライブコンポーネントの使用例
問題の説明（キープアライブとは何か）キープアライブ 名前の通り、アクティブな状態を維持します。誰が活...
Nginx リバース プロキシから go-fastdfs へのケースの説明
背景go-fastdfs は、http プロトコルをサポートする分散ファイルシステムです。一般的なプ...
Dockerは同じIPネットワークセグメントとの接続を実現する
最近、Docker とホストが同じネットワーク セグメント上で通信する問題を解決し、そのプロセス全体...
vue-element-admin グローバル読み込み待機中
最近の要件:グローバルロード、すべてのインターフェースはロード待機機能を表示するかどうかを手動で制御...
MySQL Server 8.0.3 のインストールと設定方法のグラフィックチュートリアル
この文書はMySQL Server 8.0.3のインストールと設定方法を参考のために記録したものです...
UTF-8 ファイルの Unicode 署名 BOM (バイト オーダー マーク) の問題
最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...