HTML:图片元素
圖片元素
img元素
image縮寫,空元素
src屬性:source
alt屬性:當(dāng)圖片資源失效時,將使用該屬性的文字替代圖片
img元素和a元素聯(lián)用
img元素和map元素聯(lián)用
map:地圖
map的子元素:area
衡量坐標(biāo)時,為了避免衡量誤差,需要使用專業(yè)的衡量工具: ps、pxcook
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><figure><a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin"><img usemap="#solarMap" src="./img/solar.jpg" alt="這是一張?zhí)栂档膱D片"></a><figcaption><h2>太陽系</h2></figcaption><p>太陽系是以太陽為中心,和所有受到太陽的引力約束天體的集合體。包括八大行星(由離太陽從近到遠(yuǎn)的順序:水星、金星、地球、火星、木星、土星、天王星、海王星)、以及至少173顆已知的衛(wèi)星、5顆已經(jīng)辨認(rèn)出來的矮行星和數(shù)以億計(jì)的太陽系小天體,和哈雷彗星。</p></figure><map name="solarMap"><!--circle圓形圖--><area shape="circle" coords="360,204,48" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank"><!--rect長方形圖--> <area shape="rect" coords="323,282,395,320" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank"><!--poly不規(guī)則圖--><area shape="poly" coords="601,371,645,312,678,338,645,392" href="https://baike.baidu.com/item/%E5%86%A5%E7%8E%8B%E6%98%9F/137498?fr=aladdin" target="_blank"></map> </body></html>img元素和figure元素聯(lián)用
指代、定義,通常用于把圖片、圖片標(biāo)題、描述包裹起來
子元素:figcaption–>標(biāo)題
總結(jié)
- 上一篇: java 有三个班级各四名_有 3 个班
- 下一篇: 现代机械设计极简笔记(8):解析法