HTML分割タグ

8152 ワード

HTMLタグは除算タグと呼ばれます.このタグはHTMLドキュメントの分割またはセクションを作成します.これは空のコンテナとして使用すると、CSSでスタイルを作成することができますまたはJavascriptを操作します.
Webページの特定のデータや関数の特定のセクションを作成するのに役立つので、タグは主にWeb開発で使用されます.それはブロックレベルの要素です.デフォルトでは、ブラウザは常にタグの前後に改行を置きます.
注意:タグの中にタグを使用しないでください.なぜなら、段落が入力された時点で、段落が壊れてしまうからです.
推定読書時間:6分

文法

除算タグには、開始タグと終了タグの両方が含まれます.これらの2つのタグの間に内容が書き込まれます.


<div> Create your content here...</div>

HTMLタグの特徴 th, td{ padding: 20px; }

PHP HTMLのタグを使用します.
コンテンツ内容、流動量、可憐内容
PHPではコンテンツの流れを許容します.
△タグ省略なし.
PHPでは、ストリームの内容を受け入れるHTML要素や( WAWWG HTMLで)
無意味アリアの役割
アリアの役割を許可している
チェンインターフェース

HTMLタグのサンプル

HTML分割タグのサンプルです.


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <div> Tag</title>
  </head>
  <body>
    <h2> Example of HTML <div> Tag </h2>
    <div style="background-color:#dff0d8">
    <p>Welcome to our website. Here is the example of HTML <div> tag.</p>      
    <p>This is the sample paragraph.</p>
    </div>
  </body>
</html>

結果:

結果

フレックスボックス

フレックスボックスは、行や列の項目をレイアウトするための一次元レイアウト方法です.これは、コンテナ内の項目の配置、方向、順序、サイズを制御するために使用されます.

HTMLタグを持つフレックスボックスのサンプル


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        align-items: center;
        width: 100%;
        height: 200px;
        background-color: #43156D;
      }
      .flex-container > div {
        width: 35%;
        height: 60px;
        margin: 5px;
        border-radius: 3px;
        background-color: #D2B0F2;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

結果:

結果

CSS FloatプロパティをHTMLタグで使用します。

CSS Floatプロパティは、コンテナをWebページに配置する場所を定義します.これにより、要素は次のように表示されます.

CSS Floatプロパティを使用したHTMLタグのサンプル


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <div> Tag</title>
    <style>
      .content {
        overflow: auto;
        border: 2px solid #666;
      }
      .content div {
        padding: 10px;
      }
      .content a {
        color: darkgreen;
      }
      .blue {
        float: right;
        width: 40%;
        background-color: #D2B0F2;
      }
      .green {
        float: left;
        width: 30%;
        background-color: #EDFA84;
      }
    </style>
  </head>
  <body>
<h3>Example of HTML div tag</h3>
    <div class="content">
      <div class="blue">
        <p><b>This is the first paragraph</b></p>
        <a href="#">This is some hyperlink inside <div> tag.</a>
        <ul>
          <li>List item 1</li>
          <li>List item 2</li>
        </ul>
      </div>
      <div class="green">
        <p>This is some paragraph inside div tag.</p>
        <ol>
          <li>List item 1</li>
          <li>List item 2</li>
        </ol>
      </div>
    </div>
  </body>
</html>

結果:

結果

負のマージンを持つHTMLタグ:

Begenceプロパティは、HTMLドキュメントの周囲のスペースを定義します.負のマージンは、HTMLドキュメントの静的または浮動要素の両方に適用できます.

例:


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .content div {
        padding: 2%;
      }
      .content a {
        color: darkblue;
      }
      .main-content {
        width: 30%;
        margin-left: 32%;
      }
      .blue {
        width: 25%;
        margin-top: -5%;
        background-color: #D2B0F2;
      }

    </style>
  </head>
  <body>
    <div class="content">
      <div class="main-content">
        <h1><a href="#">This is some hyperlink inside div tag.</a></h1>
      </div>
      <div class="blue">
        <h2>Heading 2</h2>
        <a href="#">This is some hyperlink inside div tag.</a>
        <ul>
          <li>List item 1</li>
          <li>List item 2</li>
        </ul>
      </div>
          </div>
  </body>
</html>

結果:

結果

タグの相対+絶対位置

特定の要素に相対的な位置を指定する場合は、相対位置と位置の組み合わせを使用できます.

例:


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .content { 
        position: relative; 
        height: 200px;
        border: 1px solid #666;
      }
      .content div { 
        position: absolute; 
        width: 35%; 
        padding: 20px; 
      }
      .blue { 
        right: 20px;
        bottom: 0;
        background-color: #7FFFD4; 
      }
      .green { 
        top: 10px; 
        left: 15px; 
        background-color: #87CEEB; 
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>This is some paragraph inside div tag.</p>
      </div>
      <div class="green">
        <p>This is some paragraph inside div tag.</p>
      </div>
    </div>
  </body>
</html>

結果:

結果

属性

除算タグは、グローバルな属性とイベント属性をHTMLでサポートします.
th, td{ padding: 20px; }
属性
値
説明
タイトル
この属性は、用語の上でマウスをホバリングするとき、定義項の省略形を指定します.

タグのスタイリングメソッド

次のプロパティーを使用してHTML分割タグをスタイルできます.

スタイルのプロパティ-タグのテキストの視覚的な重み/強調/サイズ CSSのフォントスタイル-このCSSプロパティは、通常の、斜体、斜め、初期、継承などのテキストのフォントスタイルを設定するのに役立ちます。 CSSフォントファミリー-このCSSプロパティは、選択された要素の1つ以上のフォントファミリー名またはジェネリックファミリ名の優先順位付きリストを指定します。 CSSのフォントサイズ-このCSSプロパティは、フォントのサイズを設定するのに役立ちます。 CSSフォントウェイト-このCSSプロパティは、フォントが太字であるか太いかどうかを定義するために使用します。 CSSテキスト変換-このCSSプロパティは、テキストケースと資本化を制御します。このCSSプロパティは、テキストの装飾線、テキストの装飾色、テキストの装飾スタイルなどのテキストに追加された装飾を指定します。タグのテキストを着色するスタイルこのCSSプロパティは、テキストコンテンツと装飾の色を指定します。このCSSプロパティは、要素の背景色を設定するのに役立ちます。タグのテキストレイアウトスタイルこのCSSプロパティは、テキストブロック内の最初の行のインデントを指定するために使用されます。このCSSプロパティは、表示されていないオーバーフローされたコンテンツがどのようにユーザーに通知されるべきかを記述するのに役立ちます。 CSSホワイトスペース-このCSSプロパティは、要素内の空白がどのように扱われるかを説明します。 CSSの単語ブレイク-このCSSプロパティは、行が壊れている場所を決定します。タグの他のプロパティー CSSのテキストの影-このCSSプロパティは、テキストに影を追加するのに役立ちます。 CSS text align last -このCSSプロパティはテキストの最後の行の位置を設定します。このCSSプロパティは、線の高さを定義します。 CSS文字間隔-このCSSプロパティは、テキスト内の文字/文字間の空白を決定するのに役立ちます。このCSSプロパティは、すべての単語の間隔を指定します。ブラウザサポート: ブラウザサポート関連記事 HTMLの定義タグのHTML HTMLタグの基本的なHTML定義と実際の世界のHTMLコードタグのHTMLのタグ郵便HTML分割タグが最初にシェアポイントアンカーに登場しました。

Reference

この問題について(HTML分割タグ), 我々は、より多くの情報をここで見つけました https://dev.to/anchorshare/html-div-division-tag-3ifi

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

コアJavaScript第4章第1部(コールバック関数)

emulate_booleansをモデルごとに有効にする