コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTMLファイルとは何ですか? HTML ファイルについての予備的な理解

HTMLファイルとは何ですか? HTML ファイルについての予備的な理解

寻∝梦
リリース： 2018-08-13 19:28:06
オリジナル
4872 人が閲覧しました

これは HTML5 の入門チュートリアルであり、より多くの初心者が正しい方向を見つけられるように、初心者が HTML5 を体系的に学ぶ方法について説明します。

1. HTML ファイルとは何ですか?

TML の正式な英語名は Hypertext Marked Language で、中国語名は「Hypertext Markup Language」です。

通常のテキストとの違いは、HTML ファイルにはテキスト コンテンツだけでなく、中国語で「タグ」と呼ばれるいくつかのタグも含まれていることです。

HTML ファイルの接尾辞は .htm または .html です。

テキストエディタを使用してHTMLファイルを作成できます。

2. HTML ファイルを作成します

TML の英語の正式名は Hypertext Marked Language で、中国語名は「Hypertext Markup Language」です。

通常のテキストとの違いは、HTML ファイルにはテキスト コンテンツだけでなく、中国語で「タグ」と呼ばれるいくつかのタグも含まれていることです。

HTML ファイルの接尾辞は .htm または .html です。

テキストエディタを使用してHTMLファイルを作成できます。 

<html>
<head>
<title>PHP中文网</title>
</head>
<body>
This is my first homepage.<b>This text is bold</b> 
</body>
</html>
ログイン後にコピー

この first.html ファイルを表示するには、それをダブルクリックします。または、ブラウザを開き、[ファイル] メニューから [開く] を選択し、ファイルを選択します。

このファイルの最初のタグは です。このタグは、これが HTML ファイルのヘッダーであることをブラウザーに伝えます。ファイルの最後のタグは で、HTML ファイルがここで終了することを示します。

との間の内容はHead情報です。ヘッド情報は表示されず、ブラウザでは見ることができません。しかし、それはその情報が役に立たないという意味ではありません。たとえば、検索エンジンが Web ページを検索しやすくするために、ヘッド情報にいくつかのキーワードを追加できます。

と の間の内容はこのファイルのタイトルです。このタイトルは、ブラウザの上部にあるタイトル バーに表示されます。

との間の情報が本文です。

と の間のテキストは太字です。 名前が示すように、太字を意味します。

HTML ファイルは通常のテキストに似ていますが、、 など、通常のテキストよりも多くのタグが含まれています。これらのタグを通じて、ブラウザーにファイルの表示方法を指示できます。

HTML 要素

HTML 要素は、テキストをマークし、テキストの内容を表すために使用されます。たとえば、body、p、title は HTML 要素です。

HTML 要素は < で始まり > で終わるタグで表されます。

タグは通常、 のようにペアで表示されます。開始タグは開始タグ、終了タグは終了タグと呼ばれます。

現在、HTML タグでは大文字と小文字が区別されません。たとえば、 と は同じです。

HTML 要素の属性

HTML 要素は属性を持つことができます。属性は HTML 要素の機能を拡張します。

たとえば、次のように bgcolor 属性を使用してページの背景色を赤にすることができます:

別の例として、border 属性を使用して、テーブルをボーダーレステーブルに。以下のように:

属性は通常、name="value" のように属性名と値のペアで表示されます。上の例では、bgcolor と border が名前、red と 0 が値です。属性値は通常、二重引用符でマークされます。この属性は通常、HTML の終了タグではなく、開始タグに付加されます。

テキスト タイトル

この例では、HTML ファイルでテキスト タイトルを定義する方法を示します。

HTML では、

から
までのタグを使用して、大きいものから小さいものまでテキスト タイトルを定義します。各テキストのタイトルは独自の段落です。 

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3> 
<h4>This is a heading</h4> 
<h5>This is a heading</h5> 
<h6>This is a heading</h6>
ログイン後にコピー

段落分割

HTML で段落を分割するには

と

を使用します。 

<p>This is a paragraph</p>
<p>This is another paragraph</p>
ログイン後にコピー

改行


タグを使用すると、新しい段落を作成せずに改行することができます。
終了タグがありません。改行に

を使用するのは悪い習慣です。
を使用するのが正しいです。

これは改行を含む段落
グラフです

HTML コメント

HTML ファイルでは、このようにコードを説明するコード コメントを書くことができます。将来的には、他の人があなたのコードをよりよく理解できるようになります。

コメントはの間に記述できます。ブラウザはコメントを無視するため、HTML 本文にはコメントが表示されません。 

<!--This is a comment -->
ログイン後にコピー

いくつかのヒント

HTML ファイルでは、余分なスペースが自動的に削除されます。スペースをいくつ追加しても、すべて 1 つのスペースとしてカウントされます。空白行もスペースとみなされます。

一部のタグでは、

を使用せずにテキストを段落に分割できます。たとえば、

などのタイトル タグです。

【関連おすすめ】

HTMLとHTML5の発展の歴史

HTML をゼロから学習できる HTML の基本要素

以上がHTMLファイルとは何ですか? HTML ファイルについての予備的な理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
HTML5入门教程，适合初学者
ソース：php.cn
前の記事：HTML5 フォームの属性は何ですか? 次の記事：React Router のコア履歴ライブラリの詳細な分析
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2324
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2458
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2074
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1958
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2027
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート