ホームページ  >  記事  >  ウェブフロントエンド  >  HTML+CSS_html/css_WEB-ITnose

HTML+CSS_html/css_WEB-ITnose

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

Web サイト開発を行う人なら誰でも、HTML が Web 開発の基礎であり、CSS が Web ページの美しさをデザインするためによく使用されるレイアウト手法であることを知っています。さらに、jsp も php も html なしでは存在できません。 HTMLタグ:

1.

4. 1244aa79a84dea840d8e55c52dc97869引用符9c3e8ae475e7f023c5ba43842c1b434e

5.b8a712a75cab9a5aded02f74998372b4長文引用1aee16100a65d522474e4de7ff568f4a

6.208700f394e4cf40a7aa505373e0130b住所情報f6b6163991889e046b98f3ad8b2fe548

7.e3d145aa672e9228aae518d1f5745e33単一行のコードcb7f63c61d15e98d31310b21f464ee76

8.e03b848252eb9375d56be284e690e873複数行のコードbc5574f69a0cba105bc93bd3dc13c4ec

9.cbc88fa5983e8ae4659d16d577b9773a5から番号付けを開始4b6cf3227ea6e6b6b69ffed1519b3ca2

10. d30201f02a672ba81b5b9a41900651c6: 検索エンジンを使用して表を理解する機能です

11.f5d188ed2c074f8b944552db028f98a163bd76834ec05ac1f4c0ebbeaafb0994表タイトルテキスト37eb775bb5a9e6f3d094e96a76117fe8f16b1740fad44fb09bfe928bcc527e08

12. aタグのtarget="_blank":新しいページで開きます

13. aタグのタイトル="マウスをスライドさせたときにテキストを表示します"

14. 932cb546cffdd4eb553b94cd0dbc2fc0

15. テキストラベル: 1d22c89da1cb7e28a51e2c11593ec448

16. stry: スタイルタグ

17. メールタグ:

18. ドロップダウンリストでは、221f08282418e2996498697df914ce4e タグに multiple="multiple" 属性を設定して、複数の選択操作を実行することもできます。 Windows の場合、複数選択機能。オペレーティング システムでは、複数のオプションを選択するときに、Ctrl キーを押しながらクリック (Mac では Command キーを押しながらクリック) することで、複数のオプションを選択できます。

19. ラベル label は、ユーザーに特別な効果を与えるものではありません。その機能は、マウス ユーザーの使いやすさを向上させることです。このコントロールは、ラベル内のテキストをクリックするとトリガーされます。つまり、ユーザーがクリックしてラベルを選択すると、ブラウザは自動的にラベルに関連するフォーム コントロールにフォーカスを移します (ラベルに関連するフォーム コントロールが自動的に選択されます)。

<form>  <label for="male">男</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">女</label>  <input type="radio" name="sex" id="female" />  <label for="email">输入你的邮箱地址</label>  <input type="email" id="email" placeholder="Enter email"></form>

これは、HTML でよく使用されるタグの概要です。これらのタグは、一般的に使用され、覚えにくいものです。 CSSの基礎知識を一緒に復習しましょう。

2. CSS:

1. CSS スタイル: インライン、埋め込み、外部

2. CSS セレクターは次のように分かれています: A. タグ セレクター: body{} B. クラス セレクター: .setGreen{}C. #setGreen{}D. ユニバーサル セレクター: *{}

3. テキスト レイアウト:

フォント ファミリー: "宋体";

フォントの太さ: ボールド;

text-decoration:line-through;strikethrough

letter-spacing: 1.5em; 文字間隔、文字間隔

4. インライン > 埋め込み > 外部、埋め込み > という前提条件があります。 CSS スタイルの位置は外部スタイルの後ろにある必要があります。たとえば、右側のコード エディタでは、f87a5964fcebb93d98ebca11ba9d357b コードは 080b747a20f9163200dd0a7d304ba388...531ac245ce3e4fe3d50054a55f265927 の前にあります。 ; コード(実際にはこれも開発中に書かれています)。興味のある友達は試してみて、順序を逆にして、優先順位が変わるかどうかを確認してください。実際、要約すると、これは近接性の原則 (設定されている要素に近いほど優先度が高くなります) です。

5. 疑似クラスセレクター: さらに興味深いのは、疑似クラスセレクターと呼ばれる理由です。これにより、HTML に存在しないタグ (タグの特定の状態) のスタイルを設定できるようになります。たとえば、マウスを置いたときのラベル要素のフォントの色を設定します (a:hover{color:red;})。

6. グループ化セレクター: HTML 内の複数のラベル要素に同じスタイルを設定したい場合は、グループ化セレクター (,) を使用できます。次のコードは、コード エディターで h1 タグと spam タグのフォントを設定します。色は赤です: h1,span{color:red;} これは次の 2 行のコードに相当します: h1{color:red;}span{color:red;}

7. ルール重みの値: ラベルの重みは 1 、クラス セレクターの重みは 10、ID セレクターの重みは最大 100 です。たとえば、次のコード:

p{color:red;} /*重みは1です*/
p scan{color:green;} /*重みは1+1=2です*/
.warning{color:white;} /*重みはis 10*/
p scan.warning{color:purple;} /*重みは1+1+10=12*/
#footer .note p{color: yellow;} /*重みは100+10+ 1=111*/
注: 別の特別な重みがあります。継承にも重みがありますが、それは非常に低いものもあります。そのため、継承の重みが最も低いことが理解できます。

8. 要素の分類: CSS レイアウトを説明する前に、事前にいくつかの知識を知っておく必要があります。 CSS では、HTML 内のラベル要素は、一般的にブロック要素、インライン要素 (インライン要素とも呼ばれます) の 3 つの異なる種類に分類されます。インラインブロック要素。

一般的に使用されるブロック要素は次のとおりです:

dc6dce4a544fdca2df29d5ac0ea9906b、e388a4556c0f65e1904146cc1a846bee、4a249f0d628e2318394fd9b75b4636b1...4e9ee319e0fa4abc21ff286eeb145ecc、c34106e0b4e09414b63b2ea253ff83d6、ff6d136ddc5fdfeffaf53ff6ee95f185、5c69336ffbc20d23018e48b396cdd57a、f5d188ed2c074f8b944552db028f98a1 ;、208700f394e4cf40a7aa505373e0130b、b8a712a75cab9a5aded02f74998372b4、ff9c23ada1bcecdd1a0fb5d5a0f18437

一般的に使用されるインライン要素は次のとおりです:

3499910bf9dac5ae3c52d5ede7383485、45a2772a6b6107b401db3c9b82c049c2、0c6dc11e160d3b678d68754cc175188a、5a8028ccc7a7e27417bff9f05adf5932、f7c19910d264195e9261be8bcb602d9a、2e1cf0710519d5598b1f0f14c36ba674、1244aa79a84dea840d8e55c52dc97869、b7f90f73cad438258bf67e62f79b2113、f3a85e1241a187c5ac462d886e9a968b、ffbe95d20f3893062224282accb13e8f

一般的に使用されるインラインブロック要素は次のとおりです。

a1f02c36ba31691bcfe87b2722de723b、d5fd7aea971a85678ba271703566ebfd

9. HTML では、dc6dce4a544fdca2df29d5ac0ea9906b、e388a4556c0f65e1904146cc1a846bee、4a249f0d628e2318394fd9b75b4636b1、ff9c23ada1bcecdd1a0fb5d5a0f18437、ff6d136ddc5fdfeffaf53ff6ee95f185 および 25edfb22a4f469ecb59f1190150159c6 がブロックレベルの要素です。インライン要素に display:block を設定すると、要素がブロック レベルの要素として表示されます。

10. HTMLでは、45a2772a6b6107b401db3c9b82c049c2、3499910bf9dac5ae3c52d5ede7383485、2e1cf0710519d5598b1f0f14c36ba674、d5fd7aea971a85678ba271703566ebfd、a1f02c36ba31691bcfe87b2722de723b、8e99a69fbe029cd4e2b854e244eab143、907fae80ddef53131f3292ee4f81644bが代表的なインライン要素です。インライン)要素。もちろん、display:inline コードを使用してブロック要素をインライン要素として設定することもできます。

11. inline-block 要素は、inline 要素と block 要素の両方の特性を持ちます。コード display:inline-block は、要素を inline ブロック要素に設定します。 (css2.1 の新機能)、

さて、HTML と CSS の基本的な知識をまとめました。あなたの学習に少しでも役立つことを願っています。

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