1102 TIL img/Semantic Tag

2172 ワード
html テキストリンク

img


Webサイトに画像を追加するには、2つの方法があります.❗️
そのうちの1つ.
  • タグを使用して画像を挿入:
  • 背景-画像
    • に画像を入れる方法
    この2種類です

    タグ画像から始めましょう。


    imgタグを使用する方法はhtmlから直接追加します.
    imgラベルにはwhidhとheightがあり、htmlで直接変更できます.
    しかし、良い符号化習慣のために、cssはいつもstyleである.cssで作成することをお勧めします.

    画像をbackground-imageに入れる方法を見てみましょう。


    これはcssを用いて画像を生成する方法である.
    .bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}
    そうしましょう.
    この2つの方法の違いを説明すると、バックグラウンド画像を適用するためにバックグラウンド画像が使用されます.

    一番違うと言えば、どちらも間違っていると言ったとき


    imgラベルを使用するとaltで画像を知ることができます.でも.
    background-imageを使っていると、何の画像なのか分かりません.より重要なイメージといえば、ラベルを使用し、そうでなければ背景画像を使用します.

    Semantic Tag


    公費支援学院では主にdivで書かれているので、シマンティックラベルは全く知りません.
    意味ラベルとは?
    その名の通り「意味論的」という意味です.

    <header>

  • 上記のはの真下に書かれていますが、
    はにあるため、両者は全く違います.
    は主に接頭辞とタイトルを表すために使用されます.

    • <nav>

  • HTML 5に新しく登場した記号タグで、ナビゲーションと呼ばれています.

    • <section>

  • は、本明細書の内容を含む.<
    をsection>に入れることもできます.

    • <article>

  • でこのコンテンツが分類されている場合は、この
    ラベルに実際のコンテンツを追加します.

    • <aside>

  • サイドバーとも呼ばれ、本文以外の内容を含む記号マークです.主にサイド広告に用いられる.

    • <footer>

  • の画面構造の下部にあります.

    • <div>

  • 上図にはありませんが、CSSスタイルを適用するために、文字や写真などを組み合わせて使用します.
    • 210701開発ログ
    アルゴリズムの問題-ツリーを双方向チェーンテーブルに変換