Niko Samの開発者99%が知らない5つの斬新なHTMLタグ!授業のまとめを聞く
授業に出る👉

1. progress & meter

progress

    <progress value="50" max="100"></progress>

meter

<meter value="10" min="0" max="100" low="20" high="65" optimum="15"></meter>

米と進度が悪い
meterは、異なる属性値を設定することで操作の進捗を表すことができますが、進捗は値の状態のみを伝達します.

2. detail & summary

プレイヤーがクリックして情報を表示・非表示にできるモード

<details>
	<summary>클릭 전 볼 수 있는 영역</summary>
	<span>클릭 후에만 표시되는 영역</span>
</details>

cssを使用して、ユーザーがクリックするかどうかに応じてスタイルを変更します.🔖

  	details[open]{
		background-color: #cdedfd;
	}
  	

3.カレンダ、日付セレクタ

input 태그의 type으로 설정 가능. 브라우저마다 UI 다름.

<input type="date"/>
<input type="week"/>
<input type="month"/>
<input type="time"/>

type=dateの場合:
type=週:
type=monthの場合:
type=timeの場合:

4. picture

ユーザのデバイスまたは環境に応じて、異なるバージョンの画像を表示したり、ブラウザが画像フォーマットをサポートしていない場合に異なるフォーマットを提供したりすることができます.
画像ラベルはimgラベル、sourceラベルとともに使用されます.
長所💡
環境に適した画像をダウンロードして表示することで、ページのロード速度を速めることができます.

<picture>
	<source srcset="src/01.jpeg" media="(min-width:1200px)"/>
    <source srcset="src/02.jpeg" media="(min-width:900px)"/>
    <source srcset="src/03.jpeg" media="(min-width:500px)"/>
    <img src="src/04.jpeg" />
</picture>

のメディアサイズの各対応画像は

と表示する.

imgはdefault画像としてマークされています.ブラウザが画像、ソースラベルをサポートしていない場合に使用します.

5. datalist

自動完了(自動完了)、JavaScriptなし🔥 使用可能です.入力によるフィルタ機能を提供します.
注意事項
inputのlistとdatalistのidは同じでなければなりません

<label for="movie">What is your favourite movie?</label>
<input type="text" list="movie-options"/>

<datalist id="movie-options">
  <option value="Dune"/>
  <option value="Dark waters"/>
  <option value="The Artist"/>
  <option value="The Avengers"/>
  <option value="Iron Man"/>
  <option value="Iron Man II"/>
  <option value="Matrix"/>
</datalist>