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

推薦する

MySQLデータのバックアップ方法の選択と考え方

目次1. rsync、cpでファイルをコピーする2. xxxをoutfile構文に選択する3. 遅延...

mysql インストーラ コミュニティ 8.0.12.0 インストール グラフィック チュートリアル

このチュートリアルでは、参考のためにmysqlインストーラコミュニティ8.0.12.0のインストール...

Vue 条件付きレンダリング v-if と v-show

目次1. 動詞-if 2. <template> で v-if を使用する3. キーを使...

デザインにおいて無視できないインタラクティブデザインにおける製品状態の分析

製品デザインのプロセスにおいて、デザイナーは常に写真を非常に美しくすることを好みます。仮想ページのコ...

Linux システムの仮想ホストで Swoole Loader 拡張機能を有効にする方法

特記事項: Swoole 拡張機能のみがインストールされ、サーバーはホストにインストールされません。...

MySQL の instr を使用したファジー クエリ メソッドの紹介

MySQL の内部関数instrを使用すると、従来の like クエリ メソッドを置き換えることがで...

Linux touch コマンドの使用例

Linux touch コマンドの詳細な説明: 1. コマンド機能:ファイルまたはディレクトリの作成...

HTMLでキーワードを強調表示するのに最適なソリューション

最近、プロジェクトに取り組んでいるときに、Web ページ上のキーワードを強調表示する機能に遭遇しまし...

Javascript 共通高階関数の詳細

目次1. 一般的な高階関数1.1、フィルター1.2、地図1.3、減らすHigher Order fu...

MySQL データベースの必須条件クエリ ステートメント

目次1. 基本的な文法2. 条件式によるフィルタリング3. 論理式によるフィルタリング4. あいまい...

MySQLでSQL文がどのように実行されるかの詳細な説明

概要最近MySQL関連の知識を勉強し始めました。学んだ知識ポイントと自分の理解を元に整理して共有しま...

mysql 簡単な操作例を表示

この記事では、例を挙げて mysql show 操作について説明します。ご参考までに、詳細は以下の通...

MySQL でテーブルを削除する 3 つの方法 (要約)

ドロップテーブルドロップはテーブル情報を直接削除するため、最も高速ですが、データを取得することはでき...

HTML は、Web ページの作成者が学習して習得しなければならないものです。

HTML を学ぶメリットは何ですか? 1: ウェブサイトやブログのウェブ構造を簡単に変更できます。...