よく使われる 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 のインストールと設定方法のグラフィックチュートリアル
推薦する
CSS を使用して三角形を実装する一般的な手法 (複数の方法)
面接の経験によっては、CSS に関する質問がよく見られ、CSS を使用して三角形を描画する方法につい...
Vue ページレンダリングにおけるキーの適用例チュートリアル
導入フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポ...
CSS3 レーダースキャンマップのサンプルコード
CSS3 を使用して、クールなレーダースキャン画像を実現します。 コード上で直接: // インデック...
外部ネットワークアクセスを許可するためのMysql5.6の設定手順の詳細を共有する
最近、MySQL 5.6 を導入しましたが、デフォルトでは MySQL はローカル サービスのみを許...
JavaScript でプロトタイプ パターンを実装する方法
概要プロトタイプ パターンは、プロトタイプ インスタンスによって作成されるオブジェクトの型を指し、こ...
シンプルなスネークゲームを実現するネイティブjs
この記事では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...
MySQLデータベースの増分バックアップのアイデアと方法
MySQL データベースの増分バックアップを実行するには、データベース構成ファイル /etc/my....
Linuxダイナミックリンクライブラリの使用
通常のプログラムと比較すると、ダイナミック リンク ライブラリにはメイン関数がなく、一連の関数の実装...
PIP で docker-compose をインストールする際のタイムアウト問題の解決方法
1: インストールコマンドpip install docker-compose例外情報socket....
Chromeブラウザの自動パスワード保存プロンプト機能を無効にする方法
注: Web 開発では、フォームに autocomplete="off" を追加...
h1、h2、h3タグを適切に使用する
Web ページを作成する過程では、<h1>、<h2>、<h3> ...
CSS 境界線の長さ制御機能の実装
以前は、境界線の長さをコンテナーよりも小さくする必要があったときに、div ネストを使用していました...
MySQL 5.6 マスタースレーブエラー報告の実践記録
1. 問題の症状バージョン: MySQL 5.6、従来の binlog ファイルと pos 方式を使...
便利で使いやすいウェブアプリケーションを設計するための 10 のヒント
より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。ヒント1: ...
高品質なウェブページのデザイン方法 高品質なウェブページ（画像とテキスト）のデザイン経験
オープンプラットフォームの増加に伴い、そこから派生するさまざまなアプリケーションサービスも増加傾向に...