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を教える記事

reactにおけるstateの略語の詳細な説明

Vue は Websocket カスタマーサービスチャット機能を実装します

MYSQL から MARIADB へのプロジェクト移行に関するチュートリアル

LinuxでのDockerのインストールチュートリアル

面接で聞かれる可能性のあるCSSに関する質問

アイデアのパッケージ化とクラウドサービスへのアップロードにおけるプロジェクトプロセスの分析

CSSに基づいてマウス入力の方向を決定する

Windows Server 2016 AD サーバーをセットアップする手順 (画像とテキスト)

MySql データベースにリモートでログインするにはどうすればよいですか?

MySQL Innodb ストレージ構造と Null 値の保存の詳細な説明

推薦する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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