HTMLを教える記事
|
アーティストになるつもりがない場合は、開発者として HTML を読んで、必要に応じて簡単な変更を加えるだけで済みます。以下の私の考え方に従ってください。この記事は HTML を理解するのに役立つことを保証します。もちろん、読みながら自分で試してみると、より深い理解が得られます。では、始めましょう: (以下の記号はすべて英語で入力されています) 1. HTMLの基本ルール <html> <ヘッド> <title>私のウェブページ</title> ………………………….. </head> <本文> ………………。 </本文> </html> ほぼすべての Web ページはこの形式に従います。これは Web ページに必要なタグです。各タグは < > 内に配置され、</ > で終わりますが、省略記号の代わりに多くの乱雑なものが追加されますが、これが私たちが目にするコンテンツです。 上記のコードをメモ帳にコピーし、.html ファイルとして保存して Web ページを作成します。 次に、メモ帳で開き、<body> の間に「Home」という単語を追加して保存し、開いて次の画像を確認します。 次に、ホームページの前後にタグ <a> を追加して <a href=”#”>ホームページ</a> に変更し、保存して効果を確認します。 それはインターネットでよく見かけるハイパーリンクでしょうか?ここで「ホーム」をクリックしても何も変わりません。空のリンクを追加したからです。ですから、鉄は熱いうちに打て、というわけです。前の方法に従ってページを作成し、b.html として保存し、上記の「#」を b.html に置き換えて、ページを開いて「ホーム」をクリックします。ページ b にジャンプするでしょうか? (もちろん、ページ a とページ b は同じディレクトリにある必要があります。) ここまでで、Web ページ上のすべての機能が <a> などのさまざまなタグによって実装されていることを理解できたはずです。これらのタグの機能を覚えておくだけで十分です。 2. Webページの構造 インターネットを閲覧するときに注意してみると、ウェブページは実際には図に示すようにブロックに分割されています。 もちろん、これはあくまでも大まかな構造です。必要に応じて、多くのブロックに分割することができます。ブロックに分割する主な目的は、側面を変更し、それぞれの表現スタイルを決定することです。 これは主に <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 属性の使い方の簡単な分析
推薦する
Docker に ElasticSearch 6.x をインストールする詳細なチュートリアル
まず、イメージをプルします（またはコンテナを作成するだけで、自然にプルされます）。 docker p...
デザイン理論: なぜ私たちは間違った場所を見ているのでしょうか?
数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...
フロントエンドの面接の質問の最も包括的なコレクション
HTML+CSS 1. WEB 標準と W3C の理解と知識<br /> タグを閉じ、小...
MySQL の選択、挿入、更新バッチ操作ステートメントのコード例
プロジェクトでは、データを操作するためにバッチ操作ステートメントが必要になることがよくあります。バッ...
React Nativeでaxiosを使用してネットワークリクエストを行う方法
フロントエンド開発では、Ajax、jQuery ajax、axios、fetch など、データ要求を...
CSS3に基づいてiPhoneを描く
結果：実装コードhtml <div class='iphone'> &l...
異なるページ間のJavaScriptデータ転送（URLパラメータ取得）
Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページ...
my.cnf (my.ini) 重要なパラメータの最適化設定手順
MyISAM ストレージエンジンMyISAM ストレージ エンジンは、書き込みよりも読み取りが多く、...
HTML要素を非表示にするいくつかの方法
1. CSSを使用するコードをコピーコードは次のとおりです。スタイル="display:n...
MySQL マルチマスターと 1 スレーブのデータバックアップ方法のチュートリアル
概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...
Linuxのtimeコマンドの使い方の詳しい説明
1. コマンドの紹介時間は、コマンドの実行に費やされた時間や関連するシステム リソース、その他の情報...
DOCTYPE宣言の機能と使い方の詳しい説明
1. ブラウザのレンダリングモードとdoctype一部の Web ページは標準に従って作成されていま...
7つの基本的なXHTMLコーディングルールの概要
1. すべてのタグには対応する終了タグが必要です以前の HTML では、<p> や &l...
Tomcat Nativeを使用してTomcat IO効率を向上させる方法の詳細な説明
目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...
フレームセットを使用して複雑なページレイアウトを実装するためのテクニックの概要
コードをコピーコードは次のとおりです。 <html> <!--混合フレームレイアウ...