HTMLの基本構文は、HTMLを学び始めたばかりの人にとって便利です。

HTMLの基本構文は、HTMLを学び始めたばかりの人にとって便利です。

1.1 一般的なマーキング
一般的なタグは開始タグと終了タグで構成されます。構文は次のとおりです: <x>制御テキスト</x>
ここで、x はタグ名を表します。 <x> と </x> はスイッチのセットのようなものです。開始タグ <x> は機能をオンにし、終了タグ </x> (通常は開始タグとスラッシュ / を組み合わせたもの) は機能をオフにします。制御されるテキスト情報は 2 つのタグの間に配置されます。たとえば、<i>これは斜体です</i>。
特定の特殊効果や機能を実現するために、タグにいくつかの属性を追加することもできます。例: <x a1="v1",a2="v2",...,an="vn">制御されたテキスト</x>
このうち、a1、a2、...、an は属性名、v1、v2、...、vn は対応する属性値です。属性値は引用符で囲むことも、囲まないこともできます。これは現在使用されているすべてのブラウザで受け入れられます。ただし、新しい W3C 標準によると、属性値は引用符で囲む必要があるため、引用符を使用する習慣を身に付けることをお勧めします。
1.2 空のタグ<br />ほとんどのタグはペアで表示されますが、単独で存在するタグもあります。これらの単一に存在するタグは空タグと呼ばれます。その式は次のとおりです: <x>
同様に、空のタグにいくつかの属性を付加して、特定の特殊効果や機能を実現することもできます。たとえば、<x a1="v1",a2="v2",...,an="vn">、たとえば、<hr>、<br> などです。
W3C が定義した新しい標準 (XHTML1.0/HTML4.0) では、空のタグは / で終わることを推奨しています。つまり、<X /> です。
追加の属性が使用される場合: <x a1="v1",a2="v2",...,an="vn" />
現在使用されているブラウザでは、空タグの後に / を追加するかどうかについて厳密な要件はありません。つまり、空タグの末尾に / を追加しても追加しなくても、機能には影響しません。ただし、ファイルを最新の標準に準拠させたい場合は、/ を追加するのが最適です。

2. HTMLタグの分類2.1 文書構造タグ
このタイプのマークアップの目的は、ファイルの構造を示すことです。主なものは次のとおりです。
<html>...</html>: HTML ファイルの始まりと終わりを示します。
<head>...</head>: ファイルのタイトル領域をマークします。
<body>...</body>: ファイルの本体を示します2.2 ブロック書式タグ
このタイプのタグの主な目的は、HTML ファイル内の特定のテキストセクションを特定の形式で表示し、ファイルの読みやすさを向上させることです。主なものは次のとおりです。
<title>...</title>: ファイルのタイトル。
<hi>...</hi>:i=1,2,...,6,ウェブページのタイトル。
<hr>: 水平線を生成します。
<br>: 強制的に改行します。
<p>...</p>: ドキュメントの段落。
<pre>...</pre>: 元の形式で表示します。
<address>...</address>: 連絡先の氏名、電話番号、住所などの情報を記入します。
<blockquote>...</blockquote>: セクションの引用符。
2.3 文字書式タグ
HTML ファイル テキストの外観を変更し、ファイルの美しさを高めるために使用されます。主なものは次のとおりです。
<b>...</b>: 太字のテキスト。
<i>...</i>: 斜体のテキスト。
<tt>...</tt>: フォントを入力します。
<font>...</font>: フォント設定を変更します。
<center>...</center>: 中央揃え。
<blink>...</blink>: テキストが点滅します。
<big>...</big>:フォントサイズを大きくします。
<small>...</small>: フォントサイズを小さくします。
<cite>...</cite>: 参照。
2.4 リストタグ
<ul>...</ul>: 番号なしリスト。
<ol>...</ol: 番号付きリスト。
<li>...</li>: リスト項目。
<dl>...</dl>: 定義リスト。
<dd>...</dd>: プロジェクトを定義します。
<dt>...</dt>: プロジェクトを定義します。
<dir>...</dir>: ディレクトリの一覧。
<menu>...</menu>: メニュー形式のリスト。
2.5 アンカータグ
リンクは HTML ハイパーテキスト ファイルの生命線とも言えます。HTML はリンク タグを使用して、世界中に散在する画像、テキスト、ビデオ、オーディオなどの情報を統合します。このタイプのマークの主な目的は、主に以下のものを含むハイパーテキスト リンク (Hypertext Link) をマークすることです。
<a>...</a>: ハイパーリンクを作成します。
2.6 マルチメディアタグ
このタイプのタグは、画像データを表示するために使用されます。主なものは次のとおりです。
<img>: 埋め込まれた画像。
<embed>: マルチメディア オブジェクトを埋め込みます。
<bgsound>: バックグラウンドミュージック。
2.7 テーブルタグ
このタイプのマーキングは、表を作成するために使用されます。主なものは次のとおりです。
<table>...</table>: テーブルセクションを定義します。
<caption>...</caption>: 表のタイトル。
<th>...</th>: 表のヘッダー。
<tr>...</tr>: 表の列。
<td>...</td>: 表のセル。
2.8 フォームタグ
このタイプのタグはインタラクティブなフォームを作成するために使用され、主なものは次のとおりです。
<Form>...</form>: フォーム セクションの開始と終了を示します。
<input>: 1 行のテキスト ボックス、ラジオ ボタン、チェック ボックスなどを生成します。
<textarea>...</textarea>: 複数行の入力テキスト ボックスを生成します。
<select>...</select>: ドロップダウン リストの開始と終了を示します。
<option>...</option>: ドロップダウン リストに選択項目を生成します。
HTML タグでは大文字と小文字は区別されません。つまり、<BODY> と <body> は同じです。以下にこれらのタグの紹介をします。

3. ファイル構造タグ<br />HTML ファイルの構造は基本的に 2 つの部分に分けられ、1 つはタイトル領域 (ヘッド セクション)、もう 1 つは本体領域 (ボディ セクション) と呼ばれます。ドキュメント構造タグは、タイトルが属する場所と本文が属する場所を示すために使用されます。
3.1<html>: ドキュメント全体をマークします<br />目的: html ファイル全体をマークします 説明: 標準の html ファイルは、<html> で始まり </html> で終わるファイルです。今すぐ:
<html>
... html ファイルの全文</html>
3.2<head>: ファイルタイトル領域をマークします<br />説明: HTML ファイルでは、<head> と </head> で囲まれた領域をファイルタイトル領域と呼びます。通常、head セクションは html セクションに含まれます。つまり、次のようになります。
<html>
<ヘッド>
......html ファイルのタイトル領域</head>
.....
</html>
3.3<title>: Web ページのタイトル<title>.....</title> は、HTML ファイルのタイトル領域で最も重要かつ最もよく使用されるタグです。タイトル領域のその他のタグには、<base>、<isindex>、<link>、<nextid>、<meta> などがあります。
<title> タグの目的は、Web ページのタイトルを設定することです。このタイトルはブラウザ ウィンドウのタイトル バーに表示され、ブラウザ ページのテキストには表示されません。ほとんどのブラウザのお気に入り、ブックマーク、履歴リスト機能は、このファイルのタイトルにちなんで名付けられています。
<title>...</title> でマークされたテキストには長さの制限はありませんが、タイトルが長すぎると切り捨てられてしまい、覚えにくくなる場合があります。
3.4<body>: ファイルの本体を示します<br />説明: HTML ファイルでは、<body>...</body> で囲まれた領域はファイルの本体と呼ばれ、通常は <head> セクションの後にあります。
3.5 <body> タグの属性
背景属性:
このプロパティでは、背景パターンとしてグラフィック ファイル (通常は gif または jpeg) を指定できます。グラフィックはタイルのようにレイアウトされ、Web ページ全体のベースマップを形成します。

<<:  Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法

>>:  MySQL のインデックスとデータ テーブルを管理する方法

推薦する

Linux 環境に nginx をインストールするチュートリアル

目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...

MySQL 接続例外とエラー 10061 の解決方法

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

Vue プロジェクトのパッケージ化と最適化の実装手順

目次Vueプロジェクトのパッケージ化、起動、最適化Vueプロジェクトのパッケージ化プロジェクトホステ...

mysql5.7 の新しい json フィールド タイプの使用例の分析

この記事では、MySQL 5.7 で追加された json フィールド タイプの使用方法を例を使って説...

HTMLテーブルではテーブルの外側の境界線のみが表示されます

質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...

JS 継承の詳細

目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...

MySQL トリガー: 複数のトリガー操作の作成例の分析

この記事では、例を使用して、MySQL で複数のトリガー操作を作成する方法について説明します。ご参考...

Reactは二次連結(左右連結)を実現する

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

MySQL での coalesce() の使用に関するヒントのまとめ

序文最近、偶然 MySQL の coalesce を発見しました。ちょうど時間があったので、MySQ...

Vue で計算プロパティを使用する際の知識ポイントのまとめ

計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...

MySQLトリガーの使用例の詳細

MySQL トリガー構文の詳細: トリガーは、特定のテーブル内のデータが挿入、削除、または更新される...

Dockerで作成したコンテナを削除する方法

Dockerで作成したコンテナを削除する方法1. まず、docker -s -aコマンドを使用してす...

MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有

問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...

Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法

皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...

あなたをエキスパートに見せるための 13 個の JavaScript ワンライナー

目次1. ランダムなブール値( true / false )を取得する2. 指定された日付が営業日で...