html要素とイベント分類、ページレイアウト、CSSの構文と導入の方法

HTMLのブロック要素とインライン要素：要素が分かれています

ブロックレベル要素は：ラベル要素は、新しい行が開始または終了となります。【 <H1> <P> <TABLE > 要素は、現在、別の行にタグ}

インライン要素：表示データは、新しい行を開始しません。[ <A> <IMG> <TD> 積まれます]

あなたは、詳細設計を行うために、ページレイアウトビューの全体的な外観を考慮する必要があります。グッドページレイアウトは、よく見て魅力的で、より多くのトラフィックをもたらすことができます。だから、良いページレイアウトは、合理的かつ現実的なページ設定が重要であり、非常に必要です

htmlのイベント：

、特定のアクションが発生し、イベントをサポートする必要性をトリガするために必要な

イベントの多くの種類でHTML、HTML4は、ブラウザ、HTML5をトリガする機能を追加し、それはまた、イベントの多くを追加しました。

たとえば、Windowsのイベントプロパティ

イベントフォーム

イベントのWebページを実現する機能が非常に重要であるために、詳細なイベントタイプおよび属性はW3Cで見ることができます

https://www.w3school.com.cn/tags/html_ref_eventattributes.asp

CSS （カスケーディングスタイルシート）、どのようにページの表示要素を決定

CSSを紹介する3つの方法があります。

図1に示すように、ラインモード

例えば、現在の要素の上に直接書き込むこと、

このモードは、最も高い優先度を持っています

2、内嵌式

で <HEAD> 使用して記録パターン@import に<HEAD> </ HEAD> 例えばアプリケーション間、：

<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
    <メタ文字コード= "UTF-8">
    <タイトル>タイトル</ TITLE>
    <スタイルタイプ= "テキスト/ cssの">
        @importのURL（第2。 CSS）;
    </スタイル>
</ HEAD>
<BODY>
の<divのid = "P">これは</ div>の最初のタイトルである
</ BODY>
</ HTML>

次のようにcssファイルは以下のとおりです。

次のように：

図3に示すように、チェーン外

<リンク> 輸入外部のCSS ファイル、インポート外部スタイル。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
    <メタ文字コード= "UTF-8">
    <タイトル>タイトル</ TITLE>
    <リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの" HREF = "first.css">
</ head>
<body>
<DIV ID = "ハッカー">この</ div>最初のタイトルである
<Pクラス= "中国">これは第二のタイトル</ P>は
</ BODY>
< / HTML>

CSSファイルは次のようです

CSSの構文：

セレクタ { 属性：VALUE1を、項目2 ：値2 ; }

セレクタ

最初のケース：タグ名が他の同様のラベルに影響を与えます

第二の場合：上記のid

<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
    <メタ文字コード= "UTF-8">
    <タイトル>タイトル</ TITLE>
    <スタイルタイプ= "テキスト/ cssの"> 行き内模式
    #hacker {
        色：緑;
        テキスト整列：センター;
    }
        #china {
            色：赤。
            テキスト整列：センター;
        }
    </スタイル>

</ HEAD>
<BODY>
の<divのid = "ハッカー">私はハッカーだ。</ div>
<div要素= "中国"のid>私は中国人だ。</ div>
</ BODY>
</ HTML>

第三の場合：クラス、異なる要素で使用することができます

<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
    <メタ文字コード= "UTF-8">
    <タイトル>タイトル</ TITLE>
    <スタイルタイプ= "テキスト/ cssの">
    .TEST {
        色：赤;
        テキスト整列：センター;
    }
    </スタイル>

</ head>
<body>
<H1 CLASS = "テスト">これは</ H1>最初のタイトルである
<Pクラス= "テスト">これは2番目のタイトルである</ P>
</ body>
</ HTML>

ボックスモード：

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スタイルタイプ= "テキスト/ cssの"> 
        ＃P { 
            背景色： グレー; 
            幅：300ピクセル; 
            ボーダー：ピンク25ピクセル固体; 
            パディング：10pxの; 
            マージン：10pxの; 
        } 
    </スタイル> 
</ head> 
<body> 
<DIV ID = "P">これは最初のタイトルである</ div> 
</ body> 
</ HTML> 
表现为。

html要素とイベント分類、ページレイアウト、CSSの構文と導入の方法

おすすめ