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

推薦する

DockerがElasticsearch7.xを起動してエラーを報告する問題を解決する

Docker実行コマンドの使用docker run -d -p 9200:9200 -p 9300:...

Windows で Nginx を使用して https サーバーとリバース プロキシを構成する際の問題

リクエストロジックフロントエンド --> https経由でnginxをリクエストnginx -...

Docker コンテナで DockerFile を使用して複数の Tomcat サービスをデプロイする手順

1. [admin@JD ~]$ cd opt #ルートディレクトリにoptと入力2. [admin...

Linux での MySQL マルチインスタンスの展開とインストール ガイド

MySQLマルチインスタンスとは簡単に言うと、MySQL マルチインスタンスとは、サーバー上で複数の...

WeChatアプレットのスワイパードットのドットをスライダーに変更する方法

目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...

CSS継承方法

次の背景画像を持つ div があるとします。 次の反射効果を作成します。 方法はたくさんありますが、...

ウェブデザイナーは適した人材

<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...

JavaScriptの基本的なインタラクションの詳細な説明

目次1. 要素の入手方法文書から入手ID取得クラス名 (className) を取得します。タグ名 ...

VMwareワークステーションとデバイス/資格情報の非互換性によって発生する起動エラーについて

VMware Workstationsが仮想マシンエラーを起動する エラー レポートのリンク htt...

Yahooのフロントエンド最適化に関する35のルールについての簡単な説明

概要: 仕事でも面接でも、Web フロントエンドのパフォーマンスを最適化することは非常に重要です。で...

MySQLキーワードDistinctの詳細な紹介

MySQLキーワードDistinctの使い方の紹介DDL SQLを準備します: テーブルテストを作成...

CSSのoutline-offsetプロパティを使用してプラス記号を実装する

次のような初期コードがあると仮定します。 <!DOCTYPE html> <htm...

Docker Compose マルチコンテナデプロイメントの実装

目次1. WordPressの導入1. 環境を整える(II) イメージを実行するDocker の作成...

MySQLデータテーブルの基本操作:テーブル構造の操作、フィールド操作例の分析

この記事では、テーブル構造操作やフィールド操作など、MySQL データ テーブルの基本的な操作につい...