亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

HTML影像

一般我們用到的就是插入圖片,將圖片多為背景,再者將圖片當(dāng)作連結(jié)。牽涉到的標(biāo)籤就是< img> 接下來(lái)我們就動(dòng)手開(kāi)始寫(xiě)一個(gè)HTML檔案加深了解 首先我們用瀏覽器在網(wǎng)頁(yè)上下載幾張圖片(放到和HTML檔案一個(gè)資料夾中)供後面使用。

1.先設(shè)定一張圖片為網(wǎng)頁(yè)背景圖片

在body屬性中加入background屬性加入背景圖片

QQ截圖20161011091200.png

#2.舉例插入一張圖片寫(xiě)法如下

#<img src="路徑加檔名">

插入圖片以後:?

QQ截圖20161011091631.png

這時(shí)我們可以看出,字體和圖片的低端是對(duì)其的,下面我們就來(lái)調(diào)整下對(duì)其方式

3.新增屬性調(diào)整圖片的對(duì)其方式

#在< img>標(biāo)籤中加入align屬性,調(diào)整對(duì)其。 相對(duì)習(xí)題的上下可以加的參數(shù)有bottom、middle、top,預(yù)設(shè)就是我們剛看見(jiàn)的bottom 相對(duì)字體左右可加的參數(shù)有right,left預(yù)設(shè)為right

下面我們直接來(lái)比較下:

<html>
<head>
    <title>image test</title>
    </head>
    <body background="./qwe.gif">
    <p>let's have an example<img src="./julizi.png"></p>
    <p> align top<img src="./julizi.png" align="top" ></p>
    <p>align middle<img src="./julizi.png" align="middle"></p>
    <p>align left<img src="./julizi.png" align="left" ></p>
    </body>
</html>

QQ截圖20161011091656.png

4.調(diào)整插入圖片尺寸?

大多數(shù)的尺寸都沒(méi)有那麼合適,直接插入以後會(huì)破換整體頁(yè)面的效果。所以在插入圖片時(shí),很有必要控制其尺寸,這是很容易辦到的,就孩子需要在< img>標(biāo)籤中加入width height 兩個(gè)屬性。 那我們順勢(shì)就控制下上面的那幾副圖吧

width="80" height="80"

QQ截圖20161011091717.png

(當(dāng)然,我還會(huì)調(diào)整了字體大?。?/p>

5.創(chuàng)建圖像映射

在這之前我們動(dòng)手試驗(yàn)過(guò)將圖片作為鏈接來(lái)使用,觸發(fā)鏈接的方式就是點(diǎn)擊圖片的任何地方都可以連結(jié)到跳轉(zhuǎn)地址,有時(shí)我們需要實(shí)現(xiàn),點(diǎn)擊圖片的不同地方跳到不同的地方。意思就是,一張圖片我們可以建立一個(gè)有可供點(diǎn)擊區(qū)域的圖像地圖,其中每個(gè)區(qū)域就是一個(gè)超連結(jié)。牽涉到的標(biāo)籤就是< map>標(biāo)籤,用來(lái)指定圖片,< area>用來(lái)指定超連結(jié)區(qū)域

<img src="xx.jpg" usemap="#mp"/>  
<map name="mp" id="mp">  
    <area>
    ...
    ...
    ...
    </area>  
</map>

這裡以一張圖片作為地圖, 在< area>標(biāo)籤中我們會(huì)涉及到shape ,coords, href屬性,分別用來(lái)指定超鏈接區(qū)域形狀,超鏈接區(qū)域坐標(biāo),還有超鏈接跳轉(zhuǎn)地。

這是具體實(shí)現(xiàn)內(nèi)容

<html>
<head>
    <title>image test</title>
    </head>
    <body background="./qwe.gif">
    <p>tap the li zi </p>
    <img src="./julizi.png" usemap="#lizi"/>
    <map name="lizi">
     <area shape="rect" coords="50,10,100,60" href="img.html" target="_blank"
    </map>  
    </body>
</html>

然後,當(dāng)我們點(diǎn)擊小松鼠舉起的栗子,你就會(huì)看見(jiàn)跟多栗子?

QQ截圖20161011091743.png

shape屬性的值可以是:rect(矩形)、circle(圓形)、poly(多邊形)和default(整個(gè)影像區(qū)域)。這裡採(cǎi)用的是矩形。

coords屬性對(duì)於矩形而言,coords有4個(gè)值,分別用逗號(hào)隔開(kāi),表示矩形區(qū)域左上角x座標(biāo)、左上角y座標(biāo)、右下角x座標(biāo)和右下角y座標(biāo),這裡取得座標(biāo)的方式,就用截圖工具幫忙就好。

繼續(xù)學(xué)習(xí)
||
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body background="https://img.php.cn/upload/course/000/000/004/5839303f92197305.jpg"> <h3>圖像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果圖像小于頁(yè)面,圖像會(huì)進(jìn)行重復(fù)。</p> </body> </html>
提交重置程式碼