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

推薦する

js 実行コンテキストとスコープの概要

目次序文文章1. JavaScriptコードの実行プロセスに関連する概念2. 実行コンテキストと実行...

LinuxでIPアドレスを手動で設定するための詳細な手順

目次1.まずネットワークカードの設定ディレクトリに入る2. ifcfg-ens33ネットワークカード...

IE6/7 における a.getAttribute(href,2) 問題の分析と解決

簡単な説明<br />IE6および7では、一般的なaタグ(HTMLで記述され、DOM操作...

ウェブページのドロップダウンリストとdivレイヤーのカバーの問題を選択する

HTML の select 要素に関する質問は、さまざまな場所で提起されています。最近のプロジェクト...

MySQL外部キーの3つの関係例の詳細な説明

この記事では、例を使用して、MySQL 外部キーの 3 つの関係について説明します。ご参考までに、詳...

Mysql Workbench クエリ mysql データベース メソッド

Mysql Workbench はオープンソースのデータベース クライアントです。このオープンソース...

MySQLテーブルパーティショニングプログラムを変更する方法

MySQLテーブルパーティショニングプログラムを変更する方法1. サブテーブルの実装の原則は次のとお...

momentJs を使用してカウントダウン コンポーネントを作成する (サンプル コード)

今日はvueとmomentで作ったカウントダウンを紹介したいと思います。具体的な内容は以下のとおりで...

LinuxにKafkaをインストールする

目次1.1 前提条件としてのJava環境1.2 Zookeeperのインストールと設定1.3 Kaf...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

MySQL テーブル自動増分 ID オーバーフロー障害レビュー ソリューション

問題: MySQLテーブル内の自動増分IDのオーバーフローによりビジネスブロックが発生した背景: t...

Nginx で HTTPS 証明書を構成する詳細なプロセス

1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...

指定フィールドによるMySQLカスタムリストのソートの実装

問題の説明ご存知のとおり、MySQL でフィールドを昇順に並べ替える SQL は次のとおりです (i...

Vue3ライフサイクル関数とメソッドの詳細な説明

1. 概要いわゆるライフサイクル機能とは、特定の条件下で自動的にトリガーされる機能です。 2. VU...

MySQL 5.7 でパスワードを変更するときに発生する ERROR 1054 (42S22) の解決方法

MySQL 5.7 を新しくインストールしました。ログインすると、パスワードが間違っているというメッ...