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 のインデックスとデータ テーブルを管理する方法

推薦する

JavaScript の新しい要素トラバーサルプロパティを使用して子要素をトラバースする方法を学びます

目次1. ChildNodes属性のトラバーサル2. 要素シリーズ属性のトラバーサル以前は、chil...

Windows 10 と MySQL 5.5 のインストールとインストールなしの使用の詳細なチュートリアル (画像とテキスト)

この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...

MySQL curdate() 関数の詳細な例

MySQL CURDATE関数の紹介文字列コンテキストまたは数値コンテキストの YYYMMDD 形式...

Vue+WebSocket ページでの長時間接続のリアルタイム更新

最近、Vue プロジェクトではデータをリアルタイムで更新する必要があります。折れ線グラフは 1 秒ご...

MySQLトランザクションとMySQLログの詳細な説明

取引特性1. アトミック性: トランザクションの開始後、すべての操作が完了するか、まったく実行されな...

Vue2.x の応答性の簡単な説明と例

1. Vue レスポンシブの使用法を確認する​ Vue の応答性は、私たち全員がよく知っています。 ...

HTML テーブルタグチュートリアル (44): テーブルヘッダータグ

<br />ソース コード内で表の構造を明確に区別するために、HTML 言語では、表のヘ...

ChromeとIEに対応したWMPに埋め込まれたHTMLの詳細な紹介

実際には、対応する記述方法は多数ありますが、最も一般的なのは object + embedded で...

SQL 挿入文の書き方の説明

方法 1: INSERT INTO t1(field1,field2) VALUE(v001,v00...

Vueのキーボードイベントの詳細な説明

目次共通キーエイリアスエイリアスが指定されていないキーシステム修飾キーカスタムキーエイリアス要約する...

Nodejs がイントラネット侵入サービスを実装

目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...

MySQLデータベースの基礎知識と操作のまとめ

この記事では、例を使用して、MySQL データベースの基本的な知識と操作について説明します。ご参考ま...

Reactはいくつかの方法でパラメータを渡します

目次親コンポーネントと子コンポーネント間でパラメータを渡すルーティングパラメータステータスの改善コン...

SQL ストアド プロシージャの取得、データ取得、プロセス分析

この記事は主に、SQL のストアド プロシージャから返されたデータを取得するプロセスの分析を紹介しま...

FileZilla を使用して FTP サーバーに接続するプロセスの図

最初にサーバー上に FTP サーバーをセットアップし始めたとき、接続できないことがわかったので、Fi...