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

Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

CSSとHTMLを組み合わせる4つの方法

docker を使用して hbase をデプロイする方法

フロントエンドアプリケーションのjenkins+gitlab+nginxデプロイメント

MySQL がデータの削除と挿入に非常に時間がかかる問題の解決策

VMWare で Ubuntu を再起動した後、インターネットにアクセスできなくなる問題の解決方法

トラフィックの多いウェブサイト向けのソリューション

Mysql系SQLクエリ文の書き順と実行順を詳しく解説

MySQL テーブル作成外部キーエラーの解決方法

IE ラベル LI テキスト折り返し問題について

推薦する

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

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

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

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

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

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

VMware Workstation のインストールと、外部ネットワークに接続するための WIN10 オペレーティングシステムのインストールのステップバイステップガイド (非常に詳細なチュートリアル)

Linux touch コマンドの使用例

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

Javascript 共通高階関数の詳細

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

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

mysql 簡単な操作例を表示

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

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