HTMLを教える記事

アーティストになるつもりがない場合は、開発者として HTML を読んで、必要に応じて簡単な変更を加えるだけで済みます。以下の私の考え方に従ってください。この記事は HTML を理解するのに役立つことを保証します。もちろん、読みながら自分で試してみると、より深い理解が得られます。では、始めましょう: (以下の記号はすべて英語で入力されています)

1. HTMLの基本ルール

<html>

<ヘッド>

<title>私のウェブページ</title>

…………………………..

</head>

<本文>

………………。

</本文>

</html>

ほぼすべての Web ページはこの形式に従います。これは Web ページに必要なタグです。各タグは < > 内に配置され、</ > で終わりますが、省略記号の代わりに多くの乱雑なものが追加されますが、これが私たちが目にするコンテンツです。

上記のコードをメモ帳にコピーし、.html ファイルとして保存して Web ページを作成します。

次に、メモ帳で開き、<body> の間に「Home」という単語を追加して保存し、開いて次の画像を確認します。

html

次に、ホームページの前後にタグ <a> を追加して <a href=”#”>ホームページ</a> に変更し、保存して効果を確認します。

それはインターネットでよく見かけるハイパーリンクでしょうか?ここで「ホーム」をクリックしても何も変わりません。空のリンクを追加したからです。ですから、鉄は熱いうちに打て、というわけです。前の方法に従ってページを作成し、b.html として保存し、上記の「#」を b.html に置き換えて、ページを開いて「ホーム」をクリックします。ページ b にジャンプするでしょうか? (もちろん、ページ a とページ b は同じディレクトリにある必要があります。) ここまでで、Web ページ上のすべての機能が <a> などのさまざまなタグによって実装されていることを理解できたはずです。これらのタグの機能を覚えておくだけで十分です。

2. Webページの構造

インターネットを閲覧するときに注意してみると、ウェブページは実際には図に示すようにブロックに分割されています。
html

もちろん、これはあくまでも大まかな構造です。必要に応じて、多くのブロックに分割することができます。ブロックに分割する主な目的は、側面を変更し、それぞれの表現スタイルを決定することです。

これは主に <div></div> タグによって実現されます。「ホームページ」に <div> タグを追加してみます。

<div>

<a href=”b.html”>ホームページ</a>

</div>

保存してもう一度開いてみてください。効果はどうですか?

変更前と同じですか? いくつか変更を加えてみましょう:

操作中は、マークした領域が青い背景で表示されます。

<div></div> ブロックをたくさん追加すると、Web ページを 8 つの部分に分割して、各ブロックに必要なものを配置できます。

もちろん、多くの <div> は style="" を追加します。これらのスタイル設定が類似している場合、それぞれを設定するのは面倒です。通常は、これらのスタイルを別の .css ファイル (Web ページ内の各タグの表示スタイルを制御する) に配置し、必要な場所で呼び出します。以下で試してみましょう。

新しいメモ帳を作成し、名前を c.css に変更して開き、次のように記述します。

#ヘッダー{幅:200px;高さ:100px;境界線スタイル:solid;}

そしてa.htmlで削除します

次に、</head>の前に<link rel="stylesheet" type="text/css" href="c.css" />を追加します。

それは c.css ファイルを導入することです。 CSS を別のファイルに配置する利点は、このスタイルが多くの場所で参照されている場合、この 1 か所を変更するだけですべてが変更されることです。そうでない場合は、各場所を手動で変更する必要があり、後でメンテナンスを行うのに不便です。

最後に、a.htmlの<div>を<div id=header>に変更します。

効果は以前と同じですか？

ここまでくれば、もう「詩は書けなくても暗唱できる」はずです。この記事は主に、HTML の一般的な理解と HTML が何であるかを知ることを目的としています。まだ取り上げていないタグがたくさんあります。そのためには、Web デザインに関する本を見つけて読んで覚える必要があります。

<<: CSS の border 属性と display 属性の使い方の簡単な分析

>>: 自動同期テーブル構造のMySql開発

HTMLを教える記事

時間のかかるMySQLレコードのSQL例の詳細な説明

MySQL 5.7 のインストールと設定の詳細な手順

js を使用してウォーターフォール効果を実現する

動的および静的分離を実装するための Nginx サンプルコード

CSS における重要なカスケード概念の詳細な説明

Vue シングルファイルコンポーネントの実装

Dockerコンテナ内の設定ファイルの変更の実装

CSS の 4 つのインポート方法と優先順位の簡単な分析

MySQL 5.5 で範囲パーティションを追加および削除する例

この記事ではJavaScriptのガベージコレクションの仕組みを説明します

推薦する

MySQL サーバー IO 100% 分析および最適化ソリューション

Windows 10 での MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します

要素UIポップアップコンポーネントをカプセル化する手順

MySql クイック挿入数千万の大規模データの例

Windows Server 2019 のインストール (グラフィカルチュートリアル)

Vue3.0 ルーティング自動インポート方法の例

CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード

JavaScript の新しい要素トラバーサルプロパティを使用して子要素をトラバースする方法を学びます

mysql8.0 パスワードを忘れた場合の修正とネットコマンドのサービス名が無効になる問題

MySQL 5.7.17 でパスワードを忘れた場合の対処方法

CentOS SVN サーバーで複数のプロジェクトを管理する方法

コードレイン効果を実現するJavaScriptキャンバス

Vueバインディングオブジェクトと配列変数を変更した後にレンダリングできない問題の解決策

Linux での MySql centos7 のバイナリコンパイルとインストールに関するチュートリアル