HTMLシリーズ(4)：images_html/css_WEB-ITnoseを編集する-htmlチュートリアル-php.cn

HTMLシリーズ(4)：images_html/css_WEB-ITnoseを編集する

WBOY

リリース： 2016-06-24 11:25:25

オリジナル

1277 人が閲覧しました

1. 画像の基本概念

1. ベクター画像: ファイルの占有容量は少なく、解像度に関係なく、拡大しても画像は歪みません。グラフィックデザイン、テキストデザイン、ロゴデザイン、レイアウトデザインなどに適しています。

2. ビットマップ: ピクセルで構成されており、ファイルが大きいため、ズームインまたはズームアウトすると画像が歪みます。

3. 非可逆圧縮画像: 圧縮プロセスで特定の機密情報が失われることを許可します。 JPEG と JPG は、非可逆圧縮で処理される最も一般的な画像形式です。

4. ロスレス圧縮画像: 画像上の各ピクセルのデータ情報を記録し、特別なアルゴリズムを使用してファイルサイズを圧縮します。 PNG は、可逆圧縮を使用する最も一般的な画像形式です。

5. 一般的な形式の画像: JPEG/JPG は、Web ページで一般的な画像形式であり、24 ビットで単一のビットマップを保存し、色の変化のある画像や 256 色を超える画像に適しています。、透明度とアニメーションはサポートしませんが、インターレースをサポートします。 GIF には最大 256 色が含まれ、透明性と複数のアニメーションフレームをサポートしており、漫画、ロゴ、グラフィックス、または透明な領域を含むアニメーションに適しています。 PNG は最大 32 ビットカラーをサポートし、トゥルーカラーとパレットをサポートし、完全なアルファ透明度をサポートし、アニメーションをサポートし、インターレースをサポートします。

2. 画像を挿入する

img 要素は、Web ページに画像を埋め込みます。技術的には、タグは Web ページに画像を挿入するのではなく、Web ページから画像をリンクします。タグは、参照された画像のプレースホルダーを作成します。タグには、src 属性と alt 属性という 2 つの必須属性があります。 alt 属性は、指定された URL 画像の読み込みに失敗した場合に、定義されたテキストを表示します。

画像にタイトルが必要な場合は、figure と figcaption を使用して、タイトル付きの画像を意味的に表現できます。

タグは、個々のストリームコンテンツ (画像、チャート、写真、コードなど) を指定します。要素を結合するために使用される、H5 の新しいタグです。 figcaption は要素グループにタイトルを追加します。figcaption は、figure 要素の最初または最後の子要素に配置する必要があります。

Figure 要素のコンテンツはメインコンテンツに関連している必要がありますが、削除してもドキュメントフローに影響はありません。

注: IE8 以前のバージョンは Figure をサポートしていません。

3. 画像のキャッシュ

大量の画像を含むページの読み込み速度を向上させ、ユーザーエクスペリエンスを向上させるには、画像をダウンロードするのが最善です。まずローカルでブラウザをキャッシュさせます。一般的に使用されるメソッドは、JS の Image オブジェクトです:

 1 <script> 2     function loadImage(url,callback) { 3         var img=new Image();//创建一个Image对象，实现图片预下载 4  img.src=url; 5         if (img.complete) {//如果图片已经存在于浏览器缓存，直接调用回调函数 6  callback.call(img); 7             return;//直接返回，不用再处理onload事件 8  } 9  img.onload=function() {//图片下载完成时异步调用callback函数10  callback.call(img);//将回调函数的this对象替换为Image对象11  }12  }13 </script>

ログイン後にコピー

画像が一度ロードされた後にその画像に対する別のリクエストがある場合、ブラウザはすでに写真をキャッシュしているため、別のリクエストを開始せず、画像を直接取得しません。画像をキャッシュにロードします。

IV. エリアマッピング

クリッカブルエリアを含む画像マッピング:

1 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />2 3 <map name="planetmap" id="planetmap">4   <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />5   <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />6   <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />7 </map>

ログイン後にコピー

注: エリア要素は常にマップ要素内にネストされます。 area 要素は、イメージマップ内のエリアを定義します。の usemap 属性は、の id または name 属性を参照できるため、id 属性と name 属性の両方をに追加する必要があります。

タグは、イメージマップ内の領域を定義します (注: イメージマップは、クリック可能な領域のある画像を指します)。

各形状の適切な値を以下に示します:

円: Shape="circle", coords="x,y,r"

ここで、x と y は円の中心の位置を定義します。 (「0 ,0」は画像の左上隅の座標です)、r は円の半径 (ピクセル単位) です。

Polygon:shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

「x,y」座標の各ペアは、ポリゴンの頂点 ("0 , 0" は画像の左上隅の座標です)。三角形を定義するには少なくとも 3 セットの座標が必要です。高緯度のポリゴンではさらに多くの頂点が必要です。多角形は自動的に閉じられるため、エリア全体を閉じるためにリストの最後にある最初の座標を繰り返す必要はありません。