7.Text-levelの意味テキストに使用されるタグ。

<br>,<wbr>

改行ラベル

は符号化マークではなく改行用マーク

である.

テキストボックスに1行として表示されない場合にのみ使用(適用)

画面ウィンドウの行数を減らす

.

<a href=「パス」>

「a」(アナウンサー)グーグルを作った.

アナウンサーを利用して人々の接続データを収集し、現在の精度の高い検索エンジンを誕生させた.

hrefを使用してパスを指定できます.

sectionsでは、テキストレベルの要素のサブ要素としてパケット内容は使用されませんが、アンカータグ例外のみが使用されます.

の記事にはたくさんのリンクがあるので、

アンカー内にアンカーは追加されません.(サブアイテムとして使用しません.)

アナウンサーの中には内容があってこそ、内容を確認することができます.

target=「blank」では、新しいウィンドウにリンクされたページを表示できます.

<!--현재 페이지에서 https://www.naver.com로 이동-->
<a href="https://www.naver.com">click</a>
<!--새 페이지에서 https://www.naver.com로 이동-->
<a href="https://www.naver.com" target="_blank">click</a>  
<!--같은 폴더에 있는 index.html로 이동-->
<a href="./index.html">click</a>
<!--페이지 내에서 id가 three로 이동-->
<a href="#three">click</a> <!-- 해쉬 링크 -->
<!--같은 폴더에 있는 index.html 다운로드-->
<a href="./index.html" download>click</a>
<!-- 같은 폴더에 있는 hello.hwp로 이동-->
<a href="./hello.hwp">hwp click</a>
<!--같은 폴더에 있는 hello.hwp를 a.hwp라는 이름으로 다운로드-->
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
<!-- 같은 폴더에 있는 hello.pdf로 이동-->
<a href="./hello.pdf">pdf click</a>
<!--같은 폴더에 있는 hello.hwp를 a.pdf라는 이름으로 다운로드-->
<a href="./hello.pdf" download="a.pdf">pdf download click</a>

💡 Internet Exploreはダウンロードをサポートしていません
機能サポートについては、

MDNサイトで確認します.

MDN Web Docs

WCSもよく使われていますが、正式ではないのでエラーメッセージがありますので、

にご注意ください.
W3Schools Free Online Web Tutorials

<b>, <strong>

太字で表示したい場合は

を用いる.

コンピュータはこの点が重要だと考えています

を重ねて使用しません.

<i>, <em>

斜体を表示する

HTML 5以降、専門用語または段落で主に使用される言語または他の言語の表現の部分を表現するために使用される.

ネット小説における人物思想の表現部分に用いられ、何らかの理由でコンテンツと分離する必要がある部分.

斜体を表示

強調の意味強調の意味

の内容で重要な内容を強調します.

ですが、強調するときによく使われます.

何を強調しますか?もしそうなら、ページを企画する人の意図を把握すればいいのです.

<dfn>

は、現在のコンテキストで定義する用語

を表す.

dfnの最近の親ラベルが

、

、である場合、その内容はdfn定義の説明と見なす.

<abbr>

略記

は通常単独で使用されるが、dfnラベルで包むこともできる.

を使用すると、サスペンション時に説明内容が表示されます.

スクリーンリーダーはコンテンツを読めません.

<sup>, <sub>

上付き、下付き

化学記号、数学記号に使用されます.

<span>

は、領域をバンドルするために特別な意味を持たない.

これは

詩のラベルではありません.

divと同様に、最後の手段として使用されるべきである.

スペル時

要素をグループ化する場合、

8.Embedded Content機能要素

<img>

の画像を挿入するための

.

終了フラグなし=サブエレメントとして追加できません.

src(source)

画像位置(パス)を作成する場所です.

引用符のパスは、絶対パスまたは相対パスでなければなりません.
-絶対パス
-相対パス

alt(置換テキスト:オブジェクトテキスト)

画像が非表示の場合に表示される内容(テキスト)

スクリーンリーダーは読むことができます.

すべての画像について説明する必要がありますか?NO.情報が多すぎると、かえって情報の取得に不便をもたらす.

意味のない、装飾的な要素を使わない.

alt値のない画像はリンク名を読み出します.したがって、alt=""がalt値を空にすると、読み込まれません.

反作用画像のsrc set

以上の解像度に対応し、ブラウザは最適な画像のロードを支援します.

x記述子、w記述子、size属性

xの記述者は、デバイスのピクセル密度(ピクセル密度)に基づいて画像をロードするようにブラウザに通知する.

    <img
    width="200px"
    srcset="img/logo_1.png 2x,
            img/logo_2.png 3x
    src="a.jpg"
    alt="test">

💡 開発者画面コンソールウィンドウにwindow.devicePixelRatioを入力すると、ピクセル密度がわかります.

w叙述者は画像の幅を教えてくれた.

デバイスに最適なコンテンツが表示されます.

300w == 300px, 600w == 600px, 700w == 700px

これは、

のパフォーマンスによってロードが異なるためです.

の大きさの写真から、小さな写真の順に作らなければ、正常に動作しません.

    <img
    <!--실제로 보여지는 크키-->
    width="200px" 
    <!--디바이스가 선택가능한 목록-->
    srcset="img/logo_1.png 300w,
            img/logo_2.png 600w,
            img/logo_3.png 700w"
    src="a.jpg"
    alt="test">

💡 インターネットの探索は役に立たない.

sizeプロパティは、視点の条件に従って、UI内の画像のサイズをブラウザに通知します.

htmlだけでメディア反応型処理が可能です.

💡 sizesプロパティを使用する場合、CSSによって画像サイズを制御する方法と競合する可能性があることに注意してください.(CSSスタイルはsizesプロパティより優先されます.)協力するときは、事前に同僚と反応画像をどのように処理するかを共有しなければなりません.

<Picture>

は、「source」要素および「img」要素によって異なる表示またはデバイスに基づいて画像を表示する要素

である.

は、利用可能なフォーマット、使用不可能なフォーマットを区別する上で非常に重要な役割を果たす.

ピクチャにimgがない場合、画面には表示されません.

の画像が表示されているのは『img』です.

<picture>
    <source srcset="babies_large.jpeg" media="(min-width:960px)">
    <source srcset="babies.jpeg" media="(min-width:620px)">
    <img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">
</picture>

メディアのプロパティ

<picture>要素は、media属性の値によって、条件を満たす画像を見つける.条件を満たす<source>要素内のsrcset属性値を検索します.このような構成により、<img>要素がなければ、画像は画面に表示されない.<picture>および<source>要素自体は画像を示さない.

タイプのプロパティ

画像のフォーマットタイプはブラウザで

と表示される.

<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들" type="image/png">
</picture>

💡 ⭐漸進的な改善(非常に重要)
デフォルトでは、従来のテクノロジー環境で実行されていた機能を実装できますが、最新のテクノロジーを使用している環境では、最新のテクノロジーを提供することで、より良いユーザー体験を得ることができます.
💡 ⭐画像フォーマットのタイプ(非常に重要)
GIF(Graphics Interchange Format) :
256色しかないので、色はあまりはっきりしませんが、容量は小さいです.透明度は表示できますが、サイズは制御できません.シャドウも表示できません.アニメーション処理が可能です.
JPG/JPEG (Joint Photographic Expert Group image):
画素が高く、容量は小さいが、透明に処理できない.
PNG (Portable Network Graphics) :
すべての色が表示され、透明な領域を処理できますが、容量が大きいです.
SVG (Scalable Vector Graphics) :
SVG形式のベクトル画像は任意のサイズでレンダリングでき、品質が失われたり低下したりしません.
WebP (Web Picture Format) :
JPEG画像の圧縮率は、JPEG画像に比べて70%と高いが、フォーマットはより良い色をサポートする.それでも、PNGのように透明でGIFのようにアニメーション化できる万能フォーマットです.
AVI(AV 1画像ファイル形式):次世代の画像フォーマットで、WebPのような優れた色、アニメーション、透明度を提供し、容量はJPEG画像の50%に達する.サポートされていないブラウザもたくさんあります.