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

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

1 HTML入門

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE HTML >   
  2. <html>   
  3.      <ヘッド>   
  4.          <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8" >   
  5.          < title >初めてのウェブページを作る</ title >   
  6.      </ヘッド>   
  7.      <本文>   
  8.          < h1 >こんにちは世界</ h1 >   
  9.      </本文>   
  10. </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 コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE HTML >   
  2. <html>   
  3.      <ヘッド>   
  4.          <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8" >   
  5.          < title > HTML と CSS の関係</ title >   
  6.          <スタイル タイプ= "text/css" >   
  7. h1{
  8. フォントサイズ:19px;
  9. 色:#930;
  10. テキスト配置:中央;
  11. }
  12.          </スタイル>   
  13.      </ヘッド>   
  14.      <本文>   
  15.          < h1 >こんにちは世界! </ h1 >   
  16.      </本文>   
  17. </html>   
  18.   

(1)コードの8行目はウィンドウのテキストサイズに影響します。
(2)コードの9行目はウィンドウのテキストの色の変更に影響します。
(3)10行目はウィンドウテキストの中央揃えの変更に影響します。

1.3 HTMLタグを理解する

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

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

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

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

1.4 タグ構文

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

4. ラベルの例:

(1)<p></p>
(2)<div></div>
(3)


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

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

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

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>   
  2.      <ヘッド> ... </ヘッド>   
  3.      <本文> ... </本文>   
  4. </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 コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE HTML >   
  2.   
  3.      <ヘッド>   
  4.          <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8" >   
  5.          < title > HTML ファイルの基本構造を理解する</ title >   
  6.      </ヘッド>   
  7.      <本文>   
  8.          < h1 >このセクションでは、HTML ファイルの基本構造について学習します</ h1 >   
  9. </本文>   
  10.   


1.6 ヘッドタグ

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <ヘッド>   
  2.      <タイトル> ... </タイトル>   
  3.      <メタ>   
  4.      <リンク>   
  5.      <スタイル> ... </スタイル>   
  6.      <スクリプト> ... </スクリプト>   
  7. </ヘッド>   

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <ヘッド>   
  2.      <タイトル>こんにちは世界</タイトル>   
  3. </ヘッド>   


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

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

<!--コメントテキスト-->

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE HTML >   
  2. <html>   
  3.      <ヘッド>   
  4.          <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8" >   
  5.          < title > HTML コードコメント</ title >   
  6.      </ヘッド>   
  7.      <本文>   
  8.          <!--オンライン相談開始-->   
  9.          <div>   
  10.              < p >登録相談もワンストップ! <   href = "#" >登録コンサルタントに相談する</ a > </ p >   
  11.          </div>   
  12.          <!--オンライン相談終了-->   
  13.      </本文>   
  14. </html>   

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

元のアドレス: http://blog.csdn.net/qq_17416741/article/details/51416313

<<:  JS を使用した簡単な雪効果の例の詳細な説明

>>:  非常に実用的なMySQL関数の包括的な概要、詳細な例の分析チュートリアル

推薦する

リバースプロキシ設定を実装するためのユニバーサルnginxインターフェース

1. プロキシサーバーとは何ですか?プロキシ サーバーは、クライアントが要求を送信すると、それを直接...

React Native APPのアップデートに関する簡単な説明

目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...

MySQL タイムブラインドインジェクションの 5 つの遅延方法

MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...

Windows での MySQL の詳細なインストール手順と基本的な使用方法

目次1. MySQLをダウンロードする2. MySQLをインストールする3. MySQL の基本的な...

Ubuntu は、Mysql+Keepalived の高可用性実装 (デュアルアクティブ ホットスタンバイ) を構築します。

Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...

HTML+CSSプロジェクト開発経験概要(推奨)

ここ数日ブログを更新していませんでした。簡単な HTML+CSS プロジェクトを終えたところです。数...

Dockerをクリーンアンインストールする方法の詳細な説明

まず、サーバー環境情報: アンインストールの理由:しばらくするとホストマシンのディスクが100%にな...

CSSを使用して円形の波効果を実現する

モバイル デバイスでは、金額を表示するために円形の波グラフィックがよく使用されます。最初は、この効果...

CentOS 7.x に ZSH ターミナルをインストールする方法

1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...

JavaScript コードベースをよりクリーンにする 5 つの方法

目次1. 短絡や条件文の代わりにデフォルトのパラメータを使用する2. 複数の条件の処理3. スイッチ...

Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法

1. セットアップを始める次のコード関数を簡単に紹介します。 ref 関数を使用して変数の変更を監視...

WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します

目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...

高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...

nginx + セカンダリドメイン名 + https サポートを使用する

ステップ1: Alibaba Cloudプライマリドメイン名にセカンダリドメイン名を追加する2 番目...