ホームページ > 記事 > ウェブフロントエンド > HTMLで重要かつ難しいタグを使用する方法

HTMLで重要かつ難しいタグを使用する方法

王林転載: 2021-02-18 09:47:232320ブラウズ

この記事を書く理由は、最近フロントエンドの知識を勉強しているため、今後の復習を容易にするために、いくつかの重要なタグの使用法を特別に整理したためです。

1. タグの使用法

他の Web ページ、ファイル、同じページ内の場所、電子メールアドレス、またはその他の URL へのハイパーリンクを作成します。 aタグは非常によく使われるタグですが、その使い方はよく理解されていないことが多いと思います。

属性:

の href の値は、URL (できれば //google.com の形式で記述) パス (/a/b) にすることができます。 /c,index.html) 疑似プロトコル (js コード、メール、携帯電話番号) ID は、ページの特定の部分にジャンプするためによく使用されます

a のターゲット値:

1組み込み名:

_blank (新しいページを開きます) _top (トップページを開きます。iframe と併用する必要があります) _parent (上位レベルのページを開きます) _self (現在のページが読み込まれます) 、この値がデフォルトです)

2. プログラマが自分で名前を付けます:

ウィンドウの名前 (指定したウィンドウで開くようにウィンドウの名前を指定できます)指定された iframe でのダウンロードを開くための iframe の名前

この機能はページをダウンロードすることですが、これは一般的には使用されません。

2. img タグの使用法

関数: get リクエストを送信し、画像を表示します

属性:

alt: 画像の代替テキストを定義します。 image 説明 height: 画像の高さ width: 画像の幅 src: 画像の URL、この属性は a1f02c36ba31691bcfe87b2722de723b 要素に必須です。

レスポンシブライティング:

たとえば、max-width: 100%

置換可能な要素:

は置換可能な要素です。その表示プロパティのデフォルト値はインラインですが、デフォルトの解像度は埋め込まれた画像の元の幅と高さによって決定されるため、インラインブロックのように動作します。のボーダー/ボーダー半径、パディング/マージン、幅、高さなどの CSS プロパティを設定できます。ベースラインはありません。つまり、インライン書式設定コンテキストでvertical-align:baselineを使用すると、画像の下部がコンテナのテキストのベースラインに揃えられます。

3. table タグの使用法

表形式のデータ、つまり 2 次元のデータテーブルで表現される情報を表します。これは比較的単純です

#(学習ビデオ共有:

html ビデオチュートリアル)

以下はサンプルコードです

  <caption>Color names and values</caption>
  <tbody>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsla(180, 90%, 64%, 1)</code></td>
      <td><code>rgba(81, 246, 246, 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsla(38, 90%, 65%, 1)</code></td>
      <td><code>rgba(246, 188, 87, 1)</code></td>
    </tr>
  </tbody>
</table>

属性:

align : この列挙プロパティは、ドキュメントに含まれるテーブルをどのように配置するかを指定します。次の値があります: left、表は文書の左側に表示されます; center、表は文書の中央に表示されます; right、表は文書の右側に表示されます

border: テーブルの境界線のサイズを定義します。 0 に設定すると、フレーム属性が空に設定されることを意味します。 1 に設定すると、テーブルには 1 ピクセルの境界線が付きます。

**cellpadding:**この属性は、テーブルのセルの内容と境界線の間のスペースを定義します。

**cellspacing:**このプロパティ (パーセントまたはピクセル) は、2 つのセル間のスペースのサイズを定義します。

**width:**このプロパティは、テーブルの幅を定義します。幅はピクセルまたはパーセンテージ値で、幅のパーセンテージ値がテーブルコンテナーの幅として定義されます。

border-collapse: Collapse merge borders

border-spacing: 0; 境界線の間隔は 0 に設定されます

table { テーブルレイアウト: 自動; 境界崩壊: 崩壊; 境界線の間隔: 0; }

4. その他の感想

難しいことはありませんが、覚えることが多く、注意が必要です。頑張ってください。！！

——————テキスト情報の一部は MDN および Hungry Man Valley から提供されています

HTMLで重要かつ難しいタグを使用する方法

関連記事