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 のデフォルトの時間タイプ (datetime と timestamp) の精度は秒です。...

CSS でデフォルトのスタイルをクリアし、共通のスタイルを設定する方法

CSS デフォルトスタイルをクリア通常の明確なデフォルト スタイル: *{ マージン:0; パディン...

JavaScript の Strict モードの詳細な説明

目次導入厳密モードの使用厳格モードの新機能例外を強制的にスローする変数の使用を簡素化する議論を単純化...

HTMLエンコードによる文字化け問題について

今日、3年生から質問がありました。彼が書いた HTML コードを開くと、文字化けした文字が表示されま...

W3C が推奨するモバイル Web マークアップ言語 XHTML Basic 1.1

W3C は最近、「 XHTML Basic1.1 」と「 Mobile Web Best Prac...

MySQL で数千万のテストデータを含むテストデータベースを作成する方法

場合によっては、MySQL が公式に提供しているテスト ライブラリに基づいてテスト データを作成し、...

Zabbix上のすべてのホストのIPとホスト名を取得する

ザビックスZabbix ([`zæbiks]) は、WEB インターフェースに基づいて分散システム監...

Reactにおけるコンテキスト適用シナリオの分析

コンテキストの定義と目的コンテキストは、コンポーネント ツリーにプロパティを明示的に渡すことなく、コ...

Node.JS で悪天候のリアルタイム警報システムを構築する

目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...

スクロールバーのスタイルを設定するための CSS サンプルコード

スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。 •::-webki...

Docker のホスト間コンテナ通信オーバーレイ実装プロセスの詳細な説明

サーバーも 2 つあります。準備:コンテナのホスト名を設定する consul: kv タイプのストレ...

Vue の自動書式設定の改行保存の詳細な説明

ネットで変更方法をいろいろ調べたのですが、うまくいきませんでした。後で大物から見て削除しました。フォ...

vue+springbootでログイン機能を実現

この記事の例では、ログイン機能を実現するためのvue+springbootの具体的なコードを参考まで...

Navicat for MySQL 11 登録コード\アクティベーションコードの概要

おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...

フロントエンド開発者のための HTML 入門

1 HTML入門1.1 初めてのコード体験、最初のウェブページの作成XML/HTML コードコンテン...