HTMLを教える記事

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 style=”幅:200px;高さ:100px;境界線スタイル:solid;” >

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

<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開発

推薦する

Vue の this.$router と this.$route の違いと push() メソッド

公式文書には次のように記されている。ルーターを挿入することで、どのコンポーネントでも this.$r...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

WeChatアプレット仮想リストの応用例

目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...

ページコードの変更の効率を向上させ、HTML言語のコア知識を習得します。

ウェブサイトを構築するとき、HTML 言語は重要ではないと思われるかもしれませんが、実際には、基本的...

Docker データ ストレージ ボリュームの詳細な説明

デフォルトでは、コンテナ データの読み取りと書き込みはコンテナのストレージ レイヤーで行われます。コ...

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

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

mysql 8.0.12 winx64 のダウンロードとインストールのチュートリアル

MySQL 8.0.12のダウンロードとインストールのチュートリアルは参考までに、具体的な内容は次の...

計算機機能を実現するjsバージョン

この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

今日と昨日の 0:00 タイムスタンプを取得する MySQL の例

以下のように表示されます。昨日: UNIX_TIMESTAMP(CAST(SYSDATE() AS ...

MySQL 8.0 における非同期レプリケーションの 3 つの方法について簡単に説明します。

この実験では、空のデータベース、オフライン、オンラインの 3 つのモードで、1 つのマスターと 2 ...

Dockerを使用してAngularプロジェクトをデプロイする方法

Docker を使用して Angular プロジェクトをデプロイする方法は 2 つあります。1 つは...

MySQLでJSONフィールドを操作する方法

MySQL 5.7.8 では json フィールドが導入されました。このタイプのフィールドは使用頻度...

2 つの Linux サーバー間の自動ファイル同期

サーバーB(172.17.166.11)の電源がオンまたは再起動されると、サーバーA(172.17....

MAC 上の MySQL の初期パスワードを忘れた場合の対処方法

MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...

URL を入力すると、バックグラウンドでは具体的に何が起こるのでしょうか?

ソフトウェア開発者は、ネットワーク アプリケーションがどのように動作するかを階層的に完全に理解してい...