ホームページ >ウェブフロントエンド >htmlチュートリアル >基本的な HTML_html/css_WEB-ITnose を説明する記事

基本的な HTML_html/css_WEB-ITnose を説明する記事

WBOY
WBOYオリジナル
2016-06-24 11:42:571008ブラウズ

HTML は、Web ページの作成を学習するための基礎です。美しい Web ページとレイアウトは、いくつかの HTML コードで構成されています。この記事を読んだ後は、HTML をさらに理解し、さらに練習することができます。

アーティストになることに専念していない場合は、開発者として HTML を読み、必要に応じて簡単な変更を加えることができます。この記事が HTML を理解するのに役立つように、以下の私の考えに従ってください。もちろん、理解が深まるように、読む過程で自分で試してみることをお勧めします。では、始めましょう: (以下の記号はすべて英語で入力されています)

1. HTML の基本ルール

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

b2386ffb911b14667cb8f0f91ea547a7My webpage1e761dc98eb986ab050b3ef26106aaba

6c04bd5ca3fcae76e30b72ad730ca86d

……………….

36cc49f0c466276486e50c850b7e4956

f7a6c0ebd3c598294e85a5404e002c4c で終わります。多くの厄介な要素が追加されました。それが私たちが目にしたものです。

上記のコードをメモ帳にコピーし、.html ファイルとして保存します。試してみてください。

次に、メモ帳モードで開き、6c04bd5ca3fcae76e30b72ad730ca86d の間に「Homepage」を追加します。 2 つの単語を保存し、もう一度開くと、次の画像が表示されます:

次に、ホームページの前後にマーク 3499910bf9dac5ae3c52d5ede7383485 を追加して、c7edcd5438aed4fd08cf917afe0c61c0Homepagee704aa3b4fb32c91fc6aa1e04be1fba8 を保存して、効果を見てみましょう?

それらは、私たちがインターネットをサーフィンしているときによく見るハイパーリンクですか?ここで「ホーム」をクリックしても変化はありません。追加した空の接続はアイロンが熱いうちに打つためです。前の方法に従ってページを作成し、b.html として保存し、上の「#」を b.html にして開き、ホームページをクリックするとページ b にジャンプします。 (もちろん、ページ a と b は同じディレクトリに存在する必要があります。) ここまでで、実際には、Web ページ上のすべての機能が、必要な場合に 3499910bf9dac5ae3c52d5ede7383485 と同様の異なるタグによって実装されていることを理解する必要があります。これらのタグの機能を覚えておいてください。

2. Web ページの構造

インターネットをサーフィンするときに注意してみると、Web ページは実際には図のようにブロックに分かれています

もちろん、これは大まかな構造にすぎず、分割することもできます。必要に応じて多くのブロックに分割します。 ブロックは主にアスペクトを変更し、それぞれのプレゼンテーション スタイルを決定するために使用されます。

これは主に dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68 タグを「ホームページ」に追加してみましょう: dc6dce4a544fdca2df29d5ac0ea9906b

384fb46b1da9f783b06a43d5f8a0d394ホームページ5db79b134e9f6b82c0b36e0489ee08ed

16b28748ea4df4d9c2150843fecfba68
保存して開いてみてください。

変更前と同じですか? いくつかの変更を加えてみましょう:

984dc8e3dcbc1e45f504ffe8663a8578

が実行されています。マークした領域は青い背景で表示されます。

dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68 ブロック (笑) をたくさん追加して、Web ページを 8 つの部分に分割し、各ブロックに必要なものを入れることができます。

もちろん、多くの dc6dce4a544fdca2df29d5ac0ea9906b は を追加します。これらのスタイル設定が似ている場合、通常、スタイルを別の .css ファイル (コントロール Web ページ) に入れるのは面倒です。 (各タグの表示スタイル) を選択し、呼び出す必要がある場所で呼び出しを行ってみましょう

新しいメモ帳を作成し、名前を c.css に変更して開き、次のように記述します。

#header{width: 200px; height:100px;border-style:solid;}

それを a.html で削除します

然后再</head>前加入 <strong><link rel="stylesheet" type="text/css" href="c.css" /></strong>
也就是将c.css这个文件引入进来。将css放入单独的文件好处是:如果很多地方都引用了这个样式,我们只要修改这一个地方,就全部都变化了,不然我们得手动修改每一处,不利于后期维护。

最後に、a.html の dc6dce4a544fdca2df29d5ac0ea9906b を 4491e45d6f8c93b3d740a42a3cd9ca89 に変更します

その効果それは前と同じではありませんか?

この時点では、「詩の作り方を知らなくても詠唱できる」ようになっているはずです。この記事は主に、HTML の全体的な理解と何が起こっているかを知ってもらうことを目的としています。これについては、Web デザインの本を見つけて読んで覚える必要があります。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。