HTML-Embedded content

1.<img>

<img src="img/a.jpg" alt="이미지 없음">
<img src="img/a.jpg" alt="">
<img src="img/a.jpg" alt="스크린 리더가 읽어야 하는 문구">```

1）scr（ソース）の設定

shift+space barをクリックして画像ファイルパスを作成し、簡単にパスを見つけることができます。

2)alt(置換テキスト)の設定

(キャラクタ)-画像が表示されない場合はテキストを表示-スクリーンリーダーが読み取るコンテンツ-検索エンジンによる最適化(SEO)

❗️バッジなどの無意味な画像はalt=""(alt乱発Xですが、altは常に指定する必要があります)に設定してください。

3）反作用画像src set

複数の画像を表示する場合は、ブラウザを適切な画像を選択するように設定します。

ブラウザでは、Xディスクリプタデバイスのピクセルの密度に基づいて、開発者コンソールウィンドウから他の画像に通知ピクセルの密度がロードされます。デバイスPixelRatioを入力して表示

📌 解釈:1 pxが2画素の場合logo 1。png/3画素面logo 2。pngの表示

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

w叙述者ソースはpx>wで表され、空白幅はそれぞれ300 px、500 px、700 pxであり、ブラウザに通知される

サイズに応じてビューポートを設定し、UI内の画像のサイズをブラウザに通知します。

📌 表示が960 px未満の場合は画像250 px、620 px未満の場合は画像150 px

<img
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
sizes="(min-width: 960px) 250px,
			 (min-width: 620px) 150px,
			 300px"
src="a.png"
alt="test">```
<br>

🟣 w叙述者とx叙述者を併用(X)🟣srcプロパティを設定する必要があります!!src setはEIには適用されませんので、srcで表示する必要があります🟣 src setプロパティを使用する場合は、Web規格に適合するためにsizesプロパティを指定する必要があります。🟣 sizeプロパティはcssのsizeプロパティよりも優先されるため、コラボレーション中にルールを事前に議論する必要があります。🟣 詳細については、次を参照してください。https://velog.io/@heumheum2/srcset-sizes

2. <picture>

<ピクチャ>は、<ソース>および<img>の各ディスプレイに基づいて画像を選択し、画面に基づいて画像サイズを調整する/<ピクチャ>は、画像自体を変更することもできます。

Media❗<pict>は、media属性に基づいて<ource>の画像を<img>タグのsrc要素に入れるフォーマットなので、<img src=">を入れる必要があります

<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>``` 

上からtype sourceフォーマットを順次適用してブラウザに適した画像フォーマットimgを選択することを最後の手段とするが、imgタグには使用しない

💜漸進的な改善方法💜(互換性のあるイメージタイプの選択)従来のテクノロジー環境で実行されていた機能を基本的に実現し、最新のテクノロジーを使用した環境で最新のテクノロジーを提供し、より良いユーザー体験を提供する方法

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

💜画像フォーマット💜

3. <iframe>

htmlに別のhtmlを追加する場合は、height、weight(デフォルト:heightは150 px、widthは300 px)の一般的なビデオを使用するように設定する必要があります。youtubeビデオをロードする際にiframeを使用するのは、バックドアの作成を許可する情報盗み手段である可能性があります。

frameborder:枠線(0-1)、allowをCSSで置き換える:iframeで許可されている機能を指定allowfullscreen:100 autoplayをフルスクリーンでサポート:設定を無効にする(設定時のミュート設定)❗-ユーザーは突然大きな声で不快になる可能性があります。トラフィックオーバーロード-rame、オーディオ、ビデオに注意が必要な場合

<iframe width="1280" height="720" src="https://www.youtube.com/embed/-iuX3r8PSzU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

4. <audio>

Controls:音楽ファイル制御コントロールを表示autoplay:自動再生(Chromeなどのブラウザポリシーを使用してX>jsの代替を実行)loop:音楽繰返し<audio>サブラベルに設定することもできます

<audio src="폴더/파일명" controls autoplay loop ></audio>

<audio controls>
  <source src="flow.ogg" type="audio/ogg">
  <source src="flow.mp3" type="audio/mpeg">
</audio> 

5.<video>

ビデオ再生ラベル

[プリロード設定]-none:プリロードX、最小トラフィック-matedat:プリロードX、プリインポートメタデータ(ex-ビデオ長)-auto:ビデオプリロード

タイプをsourceに設定できます(ブラウザがサポートする適切なフォーマットを指定します)

  
  <video src="batman.mp4" controls autoplay loop width="450" height="300"></video>
  
  
<video controls poster="batman.jpeg" preload="auto" width="450" height="300">
	<source src="batman.mp4" type="video/mp4">
	<source src="batman.ogv" type="video/ogg">
	<source src="batman.webm" type="video/webm">
	<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="batman">
</video>