HTMLの基礎 HTMLの構造

HTMLの基礎 HTMLの構造
HTML ファイルとは何ですか?
HTML は Hyper Text Markup Language の略です。
HTML ファイルは、マークアップを含むテキスト ファイルです。
これらのタグはブラウザがページを表示する方法を制御します。
HTML ファイルには、htm または html 拡張子が必要です。
HTML ファイルは、簡単なテキスト エディターで作成できます。


まず、HTML 言語について簡単に紹介します (ここで強調したいのは、実際に操作できるということです)。HTML はインターネットの共通言語であり、シンプルで汎用性の高いフル機能のマークアップ言語です。これにより、Web ページ作成者はテキストと画像を組み合わせた複雑なページを作成できるようになり、これらのページは、使用されているコンピューターやブラウザーの種類に関係なく、インターネット上の他のユーザーが閲覧できるようになります。すごいと思いませんか? いいえ、今見ているのはこの言語で書かれたページです。

はい、HTML は、あまりよく知らないからといって、それほど魔法的なものではありません。では、その秘密を解き明かしていきましょう。まず、HTML の構成構造を紹介します。

HTML の構造 (頭、目、体 -- まさに人間のようですね)

1. 頭。英語を学んだことがあるなら、英語で「头」の書き方も知っているはずです。はい、HEAD です。したがって、head の HTML 記述は <head>head content</head> です。簡単ですよね? これら 2 つは、後者には前者よりも余分な「/」記号があることを除けば、非常によく似ていることに注意してください。今後頻繁に使用される予定です。

2. 目。人間の目と同じように、ウェブページは心の窓であり、ウェブページの目はタイトルであるべきです。タイトルはどのように説明すればよいでしょうか?タイトル、はい!ご存知のとおり、目は頭にあります。したがって、<title>タイトル</title> は <head> と </head> の間に配置する必要があります。つまり
<head><title>タイトル</title></head>

3. ボディ。本文はウェブページの最も重要な部分です。なぜなら、前に話した内容はページに表示される内容ではなく、実際に目にするのはページの本文(もちろん、そのタイトルはブラウザの左上隅に表示されます)であり、本文は----BODYであり、その記述方法は<body>ページ コンテンツ</body>です。
最後に、これらの部分を 1 つの Web ページにまとめることを忘れないでください。そのためには、<html></html> で囲みます。
さて、Web ページの構造を全体的に見てみましょう。

コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<タイトル>
タイトル
</タイトル>
</head>
<本文>
ページの内容
</本文>
</html>

試してみませんか?
Windows を実行している場合は、メモ帳を開いて次のテキストを入力します。

ヒント: 実行前にコードの一部を変更することができます

このファイルを「mypage.htm」として保存します。
ファイルを直接ダブルクリックするか、ブラウザを起動します -> ファイル メニューで「開く」(または「ページを開く」) を選択すると、ダイアログ ボックスが表示されます -> 「参照」(または「ファイルの選択」) を選択し、作成した HTML ファイル「mypage.htm」を見つけて選択し、「開く」をクリックします ->。 すると、ダイアログ ボックスにこのファイルのアドレスが表示されます (例: 「C:\MyDocuments\mypage.htm」) -> 「OK」をクリックすると、ブラウザにこのページが表示されます。


HTML エディターについて:
frontpage、dreamwaver などの一部の WYSIWYG エディターを使用すると、プレーンテキストでコードを記述せずに簡単にページを作成できます。
しかし、熟練した Web 開発者になりたい場合は、プレーン テキスト エディターでコードを記述することを強くお勧めします。これにより、HTML の基礎を習得するのに役立ちます。

FAQ Q: HTML ファイルを作成しましたが、ブラウザで結果が表示されません。なぜでしょうか?
A: ファイルを保存し、正しいファイル名と拡張子 (例: 「c:\mypage.htm」) を使用していることを確認してください。また、ブラウザで開くときに同じファイル名を使用していることを確認してください。
Q: HTML ファイルを編集しましたが、変更内容がブラウザに表示されません。なぜでしょうか?
A: ブラウザはページをキャッシュするので、同じページを 2 回読み取る必要がありません。このページが変更されましたが、ブラウザはそれを認識しません。編集したページをブラウザに強制的に読み込ませるには、「更新/再読み込み」ボタンを使用してください。

<<:  VMWare仮想マシンにCentOS7システムをインストールする詳細な手順

>>:  MySQLがフルテーブルスキャンを実行するいくつかの状況

推薦する

MySQL 整合性制約の例の詳細な説明

この記事では、MySQL の整合性制約について説明します。ご参考までに、詳細は以下の通りです。メイン...

MySQLトリガーの使用

目次1. トリガーの紹介1. トリガーとは何ですか? 2. トリガーの特徴2. トリガーを作成する1...

Vue3 Vue CLI マルチ環境設定

目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...

MySQL スケジュールタスクの実装と使用例

この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...

CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法

問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...

docker compose を使用してハーバープライベートウェアハウスをインストールする詳細なチュートリアル

概要港とは何ですか?英語の単語の意味は「港」です。 Harborはコンテナ(貨物)を保管するために使...

Vue プロジェクトがページング効果を実現

ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。 1...

MySQL 5.7.21 のインストールと設定方法のグラフィックチュートリアル (ウィンドウ)

ウィンドウ環境にmysql5.7.21をインストールします。詳細は次のとおりです。 1. MySQL...

Nginx の負荷分散と動的および静的分離の原理と構成

目次1. Nginxは負荷分散の原則を実装する2. Nginxの動的および静的分離の原則Nginx ...

Windows 10 での MySQL 5.7.21 インストーラのインストール グラフィック チュートリアル

MySQLをインストールしてメモしておきます。うまくインストールできるか分かりませんが、試してみます...

MySql 学習ノートにおけるトランザクション分離レベルの詳細な説明

背景トランザクションについて話すとき、誰もがそれに精通している必要があります。MySQL データベー...

外部キー制約を持つテーブルデータを削除する MySQL メソッドの紹介

MySQLでテーブルやデータを削除する場合、 [エラー] 1451 - 親行を削除または更新できませ...

MySQL の永続性とロールバックの原理を 1 つの記事で理解する

目次再実行ログディスクデータを直接更新するのではなく、最初にメモリデータを更新する必要があるのはなぜ...

Nest.js パラメータ検証とカスタム戻りデータ形式の詳細な説明

0x0 パラメータ検証Nest.jsでは、パラメータ検証業務のほとんどをパイプライン方式で実装してい...

フローティング要素が親要素の高さを崩す原因と解決策の詳細な説明

フローティング要素は、親要素の高さを縮小します。要素を float float:left/right...