[03]HTML/HML 5タグ-イメージタグ、ハイパーリンク

📌 タグのタイプ

テキストタグ:テキストを表示または強調表示するためのタグ

.

メディアラベル:画像、ビデオ、およびオーディオを表示するためのラベル

.

ハイパーリンク:ラベル

は移動リンクの機能を提供する

入力/出力フォーム関連ラベル:table、ビューのフォーマットまたはコスト入力フォームを作成するためのラベル

.

1.イメージタグimg

ファイル名は英語小文字で保存され、imgなどの英語フォルダを作成して個別に管理されます.

のロード速度を考慮すると、容量の少ないファイルが使用されます.解像度は72 pxで、スマートフォンを使わずに直接保存した画像です.

画像ラベル<img>または<img />はインラインラベルであり、ラベルを閉じる必要はない.

🎨 画像ファイルの種類(変更中) .jpg：背景が不透明な画像 .png：背景が透明な画像 .svg:バックグラウンドイメージ

🎨 画像タグのその他のプロパティ <img src=「パス/url」alt=「テキストの置換」> src=画像タグ「」をWebページにリンクするソースの場所を指定するために必要なプロパティです。画像ファイルのパスまたはurlを入力 alt=""画像が表示されない場合に表示される置換テキスト(画像の置換テキスト)。ネットワークのアクセス性を考慮すると、これは必須のプロパティです。

🎨 画像ソースのパスの指定 絶対パス:構造全体の位置を表示します。 <!-- ルートフォルダ/最上位フォルダ(/)に基づいてパスを決定--> <img src=“/img/google.png”alt=“googlego”> 相対パス:<img>ファイルを含む現在のhtmlドキュメントから移動 <!-- 親フォルダ(.../)にimgが存在する場合--> <img src="./img/cat 4.jpg"alt="猫の写真"> <img src="./cat 4.jpg"alt="猫の写真"> <!-- imgが同じフォルダ(./)にある場合--> <img src="./cat 3.jpg"alt="猫の写真"> <img src=「cat 3.jpg」alt=「猫の写真」><!--ファイル名のみ--> <!-- サブフォルダにimgが含まれている場合--> <img src=「img/cat 1.jpg」alt=「猫の写真」><!--サブフォルダ名/ファイル名--> <img src="img/sub/cat 2.jpg"alt="猫の写真"><!--サブフォルダ名/サブフォルダ名/ファイル名--> 外部srcを読み込む場合 <!-- 画像があるURL->を入力 <img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png「alt=」DAUM「ロゴ」>

🎨 画像にコメントを表示する<figure>、<figcaption>タグ <figure>~</figure>コメント記事を表示するターゲットをタグでグループ化 <figcaption>~</figcaption>figcaptionタグ間にコメント記事を表示 <figure> <figcaption>画像のタイトルを指定します</figoction> <img src=「パスイメージ」alt=「テキストの置換」> <img src=「パスイメージ」alt=「テキストの置換」> <img src=「パスイメージ」alt=「テキストの置換」> </figure> グラフィックとfigcatipnはHTML 5に追加されたタグで、古いブラウザでは使用できない場合があります。CanI Useでサポートされているか確認します。

2.ハイパーリンクa

アンカータグは、異なるWebページを移動したり、Webページ内で特定の場所に移動したりするために使用されます.

ハイパーリンク <a href=「移動するページまたはurl」> href=「」Hypertext REFerenceリンクのプロパティを指定します。空のリンクまたは一時リンクに移動する場合は、#を入力し、他のドメイン接続時にhttp://またはhttps://を入力します。 target=blankリンクをクリックしたときに表示されるブラウザウィンドウを開きます。 デフォルトはselfで、新しいウィンドウ/タブを開くとblankです。 タイトル=説明リンクにマウスを置くと、ツールチップに次の文が表示されます。

⚓aラベルは様々な状況で使用できます <!-- リンク値に内容がない場合は--> <!-- 私のパソコンが表示されました。この機能はIEのみで動作し、クロム上でx--> <a href="">リンク値にコンテンツがない場合、</a> <!-- #のみの場合--> <!--# means ID.リンクをクリックして上部にジャンプ--> <a href="#">#しか指定されていない場合、</a> <!-- 内部リンクを指定した場合--> <!-- #コンテンツを含むページの下部に移動します--> <a href="#content">内部リンクが指定されている場合、</a><br> <div id=「content」>内部リンクが起動し、スクリプトが移動しました。</div> <!-- ユーザー名が存在しない場合--> <a href="#none">存在しないIDが含まれている場合、</a><br>

📖 REFERENCE

Can I Use

(図書)メンターシリーズHTML 5+CSS 3