文章出處

img

  <img>表示image圖像,從技術上講,<img>標簽并不會在網頁中插入圖像,而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的占位空間。

【必須屬性】

  1、src:地址

  2、alt:圖像替代文本,供探索引擎抓取使用

【可選屬性】

  1、height:圖像高度

  2、width:圖像寬度

  3、ismap:為圖像定義為服務器端圖像映射

  4、longdesc:與alt屬性類似,提供多于1024字符的長文本描述

  5、usemap:為圖像定義客戶端圖像映射 usemap = "#<map>元素的name或id屬性"

<img src="test.jpg" alt="測試圖片" width="100" height="100">

  6、srcset:指定圖片的地址和對應的圖片質量。屬性格式:圖片地址 寬度描述w 多個資源之間用逗號分隔。對于srcset里面出現了一個w單位,可以理解成圖片質量。如果可視區域小于這個質量的值,就可以使用,當然,瀏覽器會自動選擇一個最小的可用圖片。但是,會發現隨著瀏覽器窗口寬度變大,圖片也在不斷變大

  [注意]瀏覽器會自動匹配最佳顯示的圖片,如果大圖既然緩存了就用大圖了,再縮小也不會變成小圖了

<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w">

  7、sizes:用來設置圖片的尺寸零界點,主要跟響應式布局打交道。屬性格式:媒體查詢 寬度描述(支持px),多條規則用逗號分隔

  [注意]如果加上sizes屬性,會發現,隨著瀏覽器寬度變大,圖片一直保持其初始尺寸。所以,應該sizes和srcset兩個屬性配合使用

<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w" sizes="(max-width:300px) 300px, (max-width:500px) 500px,800px">

  8、crossorigin:使得在canvas中使用圖片資源時可以突破跨越限制

<img alt="plane" src="test.jpg" crossorigin="anonymous">

 

figure

  <figure>元素代表一段獨立的內容,經常與說明(caption)<figcaption> 配合使用,并且作為一個獨立的引用單元。figure通常用來插入圖片,但它也可以是一段代碼、圖片、音樂或者視頻

【默認樣式】

margin: 16px 40px;

 

figcaption

  figcatption用來定義figure元素的標題,且應該位于figure元素的第一個或最后一個子元素的位置。figure中只能包含一個figcaption

<figure>
    <img src="abc.jpg" alt=""/>
    <figcaption>
        Website analytics for test...
    </figcaption>
</figure>

 

map

  <map> 與 <area>屬性一起使用來定義一個圖像映射

  [注意]<img>中的usemap屬性可引用<map>中的id或name屬性(取決于瀏覽器),所以應同時向<map>添加id和name屬性。

 

area

  <area>用來定義圖像熱區,<area>總是嵌套在<map>標簽中

【必須屬性】

  1、alt:替代文本

【可選屬性】

  1、coords:定義可點擊區域的坐標

  2、href:定義此區域的目標URL

  3、nohref:排除某個區域(html5中已廢棄)

  4、shape:定義區域的形狀

    a、圓形(circ/circle) coords= "x,y,r" x,y是圓心坐標;r是半徑

    b、多邊形(poly/polygon) coords = "x1,y1,x2,y2,x3,y3……" x,y是多邊形每個頂點的坐標

    c、矩形(rect/rectangle) coords = "x1,y1,x2,y2" x1,y1是左上角坐標;x2,y2是右下角坐標

            d、全部區域default(默認)

  [注意]<area>標簽采用"先來先得"的順序,如果區域有重疊,以先出現的<area>為準

<img src="jihe.jpg" alt="幾何圖形" width="600" height="220" usemap="#map">
<map name="map" id="map">
  <area shape="rect" coords="35,38,150,158" href="line4.html" alt="四邊形">
  <area shape="poly" coords="175,109,193,44,268,41,296,109,233,151" href="line6.html" alt="六邊形">
  <area shape="poly" coords="315,81,330,58,356,40,387,37,411,52,430,79,433,108,418,132,389,153,357,154,333,137,315,108" href="line12.html" alt="12邊形">
  <area shape="circle" coords="512,95,60" href="line0.html" alt="圓形">
</map>


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()