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

HTML圖像

一般我們用到的就是插入圖片,將圖片多為背景,再者將圖片作為鏈接。涉及到的標簽就是< img> 接下來我們就動手開始寫一個HTML文件加深了解 首先我們用瀏覽器在網頁上下載幾張圖片(放到和HTML文件一個文件夾中)供后面使用。

1.先設置一張圖片為網頁背景圖片

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

QQ截圖20161011091200.png

2.舉例插入一張圖片 寫法如下

<img src="路徑加文件名">

插入圖片以后:?

QQ截圖20161011091631.png

這時我們可以看出,字體和圖片的低端是對其的,下面我們就來調整下對其方式

3.添加屬性調整圖片的對其方式

在< img>標簽中加入align屬性,調整對其。 相對習題的上下可以加的參數有 bottom、middle、top,默認就是我們剛看見的bottom 相對字體左右可加的參數有right,left默認為right

下面我們直接來比較下:

<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.調整插入圖片尺寸?

大多數的尺寸都沒有那么合適,直接插入以后會破換整體頁面的效果。所以在插入圖片時,很有必要控制其尺寸,這是很容易辦到的,就孩子需要在< img>標簽中加入width height 兩個屬性。 那我們順勢就控制下上面的那幾副圖吧

width="80" height="80"

QQ截圖20161011091717.png

(當然,我還調整了字體大?。?/p>

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

在這之前我們動手試驗過將圖片作為鏈接來使用,觸發(fā)鏈接的方式就是點擊圖片的任何地方都可以鏈接到跳轉地址,有時我們需要實現,點擊圖片的不同地方跳轉到不同的地方。意思就是,一張圖片我們可以創(chuàng)建帶有可供點擊區(qū)域的圖像地圖,其中每個區(qū)域就是一個超鏈接。涉及到的標簽就是< map>標簽,用來指定圖片,< area>用來指定超鏈接區(qū)域

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

這里以一張圖片作為地圖, 在< area>標簽中我們會涉及到shape ,coords, href屬性,分別用來指定超鏈接區(qū)域形狀,超鏈接區(qū)域坐標,還有超鏈接跳轉地。

這是具體實現內容

<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>

然后,當我們點擊小松鼠舉起的栗子,你就會看見跟多栗子?

QQ截圖20161011091743.png

shape屬性的取值可以是:rect(矩形)、circle(圓形)、poly(多邊形)和default(整個圖像區(qū)域)。這里采用的是矩形。

coords屬性對于矩形而言,coords有4個值,分別用逗號隔開,表示矩形區(qū)域左上角x坐標、左上角y坐標、右下角x坐標和右下角y坐標,這里獲取坐標的方式,就用截圖工具幫忙就好。

繼續(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>如果圖像小于頁面,圖像會進行重復。</p> </body> </html>
提交重置代碼