HTML5の一般的なテクノロジーの紹介

divタグとspanタグ

<div> ... </ div>タグは、HTMLドキュメントの分割またはセクションを定義します。このタグは、ブロックレベルの要素を組み合わせて、これらの要素をスタイルシートでフォーマットできるようにするためによく使用されます。これにより、CSSスタイルを通じてさまざまなパフォーマンス効果（外観）が得られます。

<span> ... </ span>は、ドキュメント内のインライン要素を分離してスタイルの変更を容易にするために使用されます。CSSスタイルを通じてさまざまなパフォーマンス効果を提供します。CSSを使用して、<span>に含まれるテキストのスタイルを設定できます。

ラベルのコンテンツを区切ると、スタイルを変更するのに便利です。

簡単な例を以下に示します

<!DOCTYPE html> <!-- html5标准网页声明 -->
<html>
<head>
    <meta charset=utf-8" />
    <title>第一个网页</title>
</head>
<body>
    我编写的<span style="color:#F00">第一个网页。</span> 
    <div style="color:#0000FF">
         <h3>这是一个在 div 元素中的标题。</h3>
         <p>这是一个在 div 元素中的文本。</p>
    </div>
</body>
</html>

ファイル名divタグとspanタグを付けてサンプル.htmlとして保存し、ブラウザーで開いて次のように表示します。

divタグとspanタグは、CSSでよく使用されます。

[CSSとは

CSS（Cascading Style Sheets）は、Webページの要素の表示方法を設定するために使用されます。カスケードスタイルシートの配置（CSS-P）は、CSSの拡張機能であり、Webページまたはウィンドウ内のあらゆるものの位置を制御するために使用できます。位置（位置、配置方法）によって、DIVtagの配置方法が決まります。

位置構文：

位置：パラメータ

それらの中で、一般的なパラメータは次のとおりです。

static：特別なポジショニングはありません。オブジェクトはHTMLポジショニングルールに従います

絶対：オブジェクトをドキュメントストリームからドラッグし、左、右、上、下、およびその他の属性を使用して絶対位置を設定します。カスケードは、cssz-index属性によって定義されます。現時点では、オブジェクトには余白はありませんが、パディングと境界線はあります

相対：オブジェクトはスタックできませんが、左、右、上、下などの属性に基づいて、通常のドキュメントフローでオフセットされます。

詳細については、CSSクイックスタートhttps://blog.csdn.net/cnds123/article/details/112976663を参照してください。

】

DIVラベル機能：テキスト、グラフィック、表などの配置を設定します。テキスト、グラフィック、テーブルなどをDIVに入れると、「DIVブロック」、「DIV要素」、「CSSレイヤー」、または単に「レイヤー」と呼ばれることがあります。

例1.この例では、div要素にいくつかのテキストとボタンが含まれており、styleタグを使用してdivのスタイルを設定し、headタグに入れてから、div {}を使用してスタイル情報を中括弧で囲んでいます。

ソースコードは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
              div {width:200px; background:#D8FBD6; border:3px dotted black; padding:8px;}
        </style>
    </head>
    <body>
        <div>
            你好！我的朋友。
            <button>ABC</button>
        </div>
    </body>
</html>

divタグのファイル名でexample.htmlとして保存し、ブラウザで開いて次のように表示します。

ポップアップウィンドウの実現におけるDIVの適用

ポップアップウィンドウは、多くの場合、Webサイト/ Webページ作成のログインと登録に使用されます。ポップアップレイヤーウィンドウとは、ボタンをクリックすると小さなウィンドウがポップアップすることを意味します。コンテンツがページのサイズ以下である限り、ポップアップレイヤーを設定する手間をかけずに使用できます。ジャンプページ。

実現の基本原則：

まず、デフォルトでポップアップウィンドウを非表示にし、ユーザーがボタンやリンクをクリックしたり、リンク上でマウスカーソルを移動したりするなどのアクションを実行したときにウィンドウを表示します。また、ウィンドウを閉じる機能が必要です。

簡単な例を以下に示します

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹框例子</title>
    <style>
    .popPosition {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    #pop-container {
        display: none;
        z-index: 999;
    }
    /*遮盖层*/
    #cover-tier {
        background-color: #D9D9D9;
        opacity: 0.5;
    }
    /*弹出层*/
    #pop-tier {
        width: 550px;
        height: 350px;
        border: 5px solid #C3C3C3;
        background-color: #fff;
        margin: auto;
        text-align: center;
    }
    /*关闭弹出层窗口*/
    #close-pop {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <div>
        <button id="btn">点击显示弹出层窗口</button>
        <div id="pop-container">
            <div id="cover-tier" class="popPosition"></div>
            <div id="pop-tier" class="popPosition">
                <i id="close-pop">&#10006;</i>  <!-- 关闭符号-->
                <p>这里是弹出层窗口内容部分</p>
                <hr>
                <p>你好</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    function temp(id) {
        return document.getElementById(id);
    }
    // 点击按钮出现弹出层窗口
    temp('btn').onclick = function() {
        temp('pop-container').style.display = 'block';
    }
    // 点击右上角X弹出层窗口隐藏
    temp('close-pop').onclick = function() {
        temp('pop-container').style.display = 'none';
    }
    </script>
</body>
</html>

.htmlという名前のファイルとして保存され、ブラウザで開いて次のように表示されるポップアップウィンドウの簡単な例：

HTML5の一般的なテクノロジーの紹介

HTML5の一般的なテクノロジーの紹介

おすすめ