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

1 HTML入門

1.1 初めてのコード体験、最初のウェブページの作成

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
< title >初めてのウェブページを作る</ title >
</ヘッド>
<本文>
< h1 >こんにちは世界</ h1 >
</本文>
</html>

1.2 HTMLとCSSの関係

Web フロントエンド開発の基本的なテクノロジーを習得するには、HTML、CSS、JavaScript 言語を習得する必要があります。これら 3 つのテクノロジが何を実現するのかを見てみましょう。
1. HTML は Web ページのコンテンツを伝達する媒体です。コンテンツとは、Web ページの作成者がユーザーが閲覧できるようにページに配置する情報であり、テキスト、画像、ビデオなどが含まれます。
2. CSS スタイルは表現です。 Web ページの外側のシェルのようなものです。たとえば、タイトルのフォントや色を変更したり、タイトルに背景画像や境界線を追加したりします。コンテンツの外観を変更するこれらすべてのことをプレゼンテーションと呼びます。
3. JavaScript は、Web ページで特殊効果を実現するために使用されます。例: マウスがポップアップドロップダウンメニュー上に移動したとき。または、マウスをテーブルの上に移動すると、テーブルの背景色が変わります。トップニュース（ニュース写真）もローテーションで掲載します。アニメーションやインタラクションは一般的に JavaScript を使用して実装されることがわかります。
次のコードは CSS の効果を示しています。HTML は Web ページの要素を表すために使用され、CSS は要素の位置、サイズ、色、フォントなど、要素の表現力を高めます。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
< title > HTML と CSS の関係</ title >
<スタイルタイプ= "text/css" >
h1{
フォントサイズ:19px;
色:#930;
テキスト配置:中央;
}
</スタイル>
</ヘッド>
<本文>
< h1 >こんにちは世界！ </ h1 >
</本文>
</html>

（1）コードの8行目はウィンドウのテキストサイズに影響します。
（２）コードの９行目はウィンドウのテキストの色の変更に影響します。
（３）１０行目はウィンドウテキストの中央揃えの変更に影響します。

1.3 HTMLタグを理解する

さまざまな Web ページがありますが、それらはすべて HTML タグで構成されています。以下は簡単な Web ページです。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
< title > HTML タグを理解する</ title >
</ヘッド>
<本文>
< h1 >勇気</ h1 >
< p >私が小学3年生のとき、まだ内気な少女でした。間違った答えをしたら先生に叱られるのではないかと恐れて、授業中に先生の質問に答える勇気がありませんでした。私は先生の質問に答える勇気が一度もありませんでした。学校主催の行事に参加する勇気がありません。 </p>
< p > 3年生の2学期に、私たちのクラスで公開授業がありました。先生はとても簡単な質問をしました。クラスの多くの生徒が、私より成績がずっと悪い生徒も含めて手を挙げて、「やります、やります」と言いました。周りを見回しましたが、手を挙げなかったのは私だけでした。 </p>
<画像画像出典: http://img.imooc.com/52b4113500018cf102000200.jpg >
</本文>
</html>

効果は以下のとおりです。

この Web ページの HTML コンポーネントを分析します。
（１）「勇気」はウェブページの記事のタイトルです。<h1></h1>はタイトルタグであり、ウェブページ上のコードは<h1>勇気</h1>と書かれています。
（２）「小学３年生の頃は・・・入会する勇気がなかった。」はウェブページの記事内の段落であり、<p></p>は段落タグである。ウェブページ上のコードは、<p>3 年生の頃は...参加する勇気がありませんでした。 </p>
（３）ウェブページ上の少女の写真はimgタグで完成します。ウェブページ上のコードは<img src="1.jpg">と書かれています。

1.4 タグ構文

1. タグは、< や > などの英語の山括弧 < と > で囲まれます。
2. HTML 内のタグは通常、開始タグと終了タグに分かれてペアで表示されます。終了タグには開始タグよりも / が 1 つ多くあります。
3. ラベル構造の概略図は次のとおりです。

4. ラベルの例:

（１）<p></p>
（２）<div></div>
（３）

5. タグはネストできますが、順序は一貫している必要があります。たとえば、<p> が <div> 内にネストされている場合、</p> は </div> の前に配置する必要があります。下の図の通りです。

6. HTML タグは大文字と小文字を区別しません。<h1> と <H1> は同じですが、ほとんどのプログラマーが小文字を使用するため、小文字を使用することをお勧めします。
7. テスト: Web ページのコードはありますが、9 行目がありません。以下を追加してください。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
<title>タグの構文</title>
</ヘッド>
<本文>
< h1 >このチュートリアルでは、HTML を使用して Web サイトを作成する方法を学びます</ h1 >
< p >個々の要素に特別なスタイルを適用する必要がある場合は、インラインスタイルを使用できます。
</本文>
</html>

1.5 html/head/body HTMLファイルの基本構造を理解する

HTML ファイルの構造を学習します。HTML ファイルには独自の固定構造があります。

XML/HTML コードコンテンツをクリップボードにコピー

<html>
<ヘッド> ... </ヘッド>
<本文> ... </本文>
</html>

コードの説明:
1. <html></html> はルートタグと呼ばれ、すべての Web ページタグは <html></html> 内にあります。
2. <head> タグはドキュメントのヘッダーを定義するために使用され、すべてのヘッダー要素のコンテナーとなります。ヘッダー要素には、<title>、<script>、<style>、<link>、<meta> などのタグが含まれます。ヘッダータグについては、次のセクションで詳しく説明します。
3. <body> タグと </body> タグの間のコンテンツは、<h1>、<p>、<a>、<img> などの Web ページコンテンツタグなど、Web ページのメインコンテンツです。ここのタグ内のコンテンツがブラウザーに表示されます。

次のコードの HTML ファイル構造は、タグ <html> と </html> が欠落しているため不完全です。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
< title > HTML ファイルの基本構造を理解する</ title >
</ヘッド>
<本文>
< h1 >このセクションでは、HTML ファイルの基本構造について学習します</ h1 >
</本文>

1.6 ヘッドタグ

•タグの役割: ドキュメントのヘッダーには、ドキュメントのタイトルなど、ドキュメントのさまざまなプロパティと情報が記述されます。ほとんどのドキュメントヘッダーには、実際にはコンテンツとして読者に表示されないデータが含まれています。
• ヘッドセクションには次のタグを使用できます。

XML/HTML コードコンテンツをクリップボードにコピー

<ヘッド>
<タイトル> ... </タイトル>
<メタ>
<リンク>
<スタイル> ... </スタイル>
<スクリプト> ... </スクリプト>
</ヘッド>

•<title> タグ: <title> タグと </title> タグの間のテキストは、Web ページのタイトル情報であり、ブラウザーのタイトルバーに表示されます。 Web ページのタイトルタグは、ユーザーと検索エンジンに Web ページの主なコンテンツを伝えるために使用されます。検索エンジンは、Web ページのタイトルを通じて Web ページのテーマをすばやく判断できます。各 Web ページの内容は異なり、各 Web ページには一意のタイトルが必要です。
たとえば、図に示すように、<title> タグの内容「hello world」がブラウザのタイトルバーに表示されます。

XML/HTML コードコンテンツをクリップボードにコピー

<ヘッド>
<タイトル>こんにちは世界</タイトル>
</ヘッド>

1.7 HTMLコードのコメントを理解する

コードコメントの役割: プログラマーがコードの目的をマークするのに役立ちます。しばらく経ってから、書いたコードを振り返ると、コードの目的をすぐに思い出すことができます。コードコメントは、プログラマーが以前のコードの目的を思い出すのに役立つだけでなく、他のプログラマーがプログラムの機能をすばやく理解するのにも役立ち、複数の人が Web ページコードの開発で共同作業を行うことが容易になります。
文法:

次のコードの 8 行目と 12 行目はコメントコードですが、結果ウィンドウには表示されないことがわかります。

XML/HTML コードコンテンツをクリップボードにコピー