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がフルテーブルスキャンを実行するいくつかの状況

推薦する

ウェブサイトはいつ広告を掲載すべきでしょうか?

最近、インターネットのベテランと「広告」について議論したのですが、彼から非常に興味深い意見を聞きまし...

VirtualBox+Ubuntu16でKubernetesクラスタを構築する実装

目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...

Nginx 構成 クロスドメイン リクエスト Access-Control-Allow-Origin * 詳細な説明

序文403 クロスオリジン エラーが発生しNo 'Access-Control-Allow-...

jQueryはドロップダウンメニューのスライド効果を実現します

Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

Vue の計算プロパティとリスナーの使用の概要

1. 計算プロパティとリスナー1.1 計算プロパティ <!DOCTYPE html> &...

CentOS8でyumソースを変更した後にウェアハウスキャッシュの同期に失敗する問題の詳細な説明

問題の原因: 最初は CentOS 8 のデフォルトの yum ソースを正常に使用できますが、次のコ...

一般的なメールボックスで正常に表示できる HTML メールを作成するためのヒント

HTML メールを送信するためのヒント: スタイルを使用してインライン CSS を記述する、使用する...

Vue の 4 つのカスタム命令の説明と使用例

4つの実用的なVueカスタム指示1. Vドラッグ要件: マウスドラッグ要素アイデア:要素のオフセット...

JavaScript BOMの構成と一般的なイベントの詳細な説明

目次1. 部品2. BOMの構成2. ウィンドウオブジェクトの共通イベント1. ウィンドウ読み込みイ...

Vue.js プロジェクトの開始方法

目次1. Node.jsとVue 2. ローカル開発環境でフロントエンドのVueプロジェクトを実行す...

ウィンドウ環境設定Mysql 5.7.21 windowx64.zip無料インストール版チュートリアル詳細説明

1. 公式サイトのmysqlダウンロードページからmysql-5.7.21-windowx64.zi...

ウェブページのコピー防止機能の実装方法(クラッキング手法付き)

ソース ファイルを右クリックすると、次のコードが見つかります。 1. CSSを使用してFirefox...

Ubuntu 20.04 では、隠し録音ノイズ低減機能が有効になります (推奨)

最近、 Ubuntu 20.04でkazamを使用して録音しているときに、問題が見つかりました。シス...