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

推薦する

HTML マークアップ言語 - フォーム

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

マインドマップを使って4つの側面からWeb標準の価値を議論する

このアイデアを改善し、より良い意見を得られることを期待して、議論を刺激するためにいくつかの値を大まか...

CSS ウェイト値(カスケード)の例の詳細な説明

•CSSには多くのセレクターがあります。複数のセレクターを同じ要素に適用するとどうなるでしょうか? ...

HTMLのテーブルタグの基本学習チュートリアル

表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...

Dockerを使用してLaravel開発環境を構築するための完全な手順

序文この記事では、Docker を使用して、ローカル コンピューターにインストールされている開発スイ...

Kubernetes オブジェクトボリュームの詳細な使用方法

概要ボリュームは、さまざまなストレージ リソースを抽象化および仮想化したものです。ストレージ リソー...

Docker を使用した nextcloud パーソナル ネットワーク ディスクの構築に関するチュートリアル

目次1. はじめに2. 導入環境ツール4. 展開プロセス要約する1. はじめにNextcloud は...

MySql への新しいユーザーの追加、ユーザー用のデータベースの作成、ユーザーへの権限の割り当ての概要

1. 新しいユーザーを追加するローカルIPアクセスのみを許可する '123456' ...

OCSP を有効にすると、https 証明書の検証効率が向上し、Let's Encrypt SSL 証明書へのアクセスが遅くなる問題が解決されます。

ここ数日、ウェブサイトを初めて開いたときにアクセスが非常に遅いのですが、その後はページが正常に開きま...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...

Ubuntu 18.04 に VMware Tools をインストールする際のエラーを解決する

1. オンライン チュートリアルによると、Ubuntu 18.04 のインストールはまだ失敗します。...

jsはクリックしてカードを切り替える機能を実現します

この記事の例では、クリックしてカードを切り替える機能を実現するためのjsの具体的なコードを共有してい...

鏡像効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考...

nginx 用の zabbix 5.0 をインストールして展開する方法

目次実験環境インストールと展開データベースをインストールして設定します (ここでは mariadb ...