標籤：固定 w3c 顯示 mil 添加 關聯 splay oat 標題
6.1 將映像作為Web頁面的前景元素
使用img元素，就可以在Web頁面中添加映像。img是image的縮寫。只需在img元素中添加src（source的縮寫）屬性，並為該屬性設定相應的值，就可以將映像顯示在Web頁面上。
1 <img src="photo.jpg"> <!-- img是空元素，因此無對應的結束標記 -->
src屬性的值應該包含檔案的正確路徑名和位置。
如果想使用的映像與當前HTML頁面不在同一個檔案夾中，那麼需要告訴瀏覽器映像位於哪一個檔案夾中。例如，如果映像位於比當前HTML頁面所在目錄高一級的檔案夾中，則應該使用src=“../photo.jpg”，其中../告訴瀏覽器在尋找影像檔之前，先上移一層目錄。
如果想引用另一個Web網站中的圖片，首先必須獲得該映像所有者的許可，然後可以使用src=“www.websitename.com/images/photo.jpg”這樣的方式來引用該圖片，器中URL就是其它網站像的完整名稱。
6.1.1 指定映像的高度和寬度
在Web頁面中添加幾張圖片後，你可能會注意到在瀏覽器顯示頁面之前，頁面中的映像有時會導致瀏覽器等待數秒的時間。這是因為瀏覽器不知道映像的尺寸，實際上某些瀏覽器在顯示Web頁面之前將一直等待，直到所有映像都下載完畢。
因此，通過img標記中的height和width屬性，告訴瀏覽器圖片的尺寸，就可以協助瀏覽器加快顯示Web頁面的速度。
1 <img src="photo.jpg" width="391px" height="274px">
還可以使用height和width屬性改變映像在頁面上顯示的尺寸。瀏覽器將根據新指定的尺寸來重新繪製該映像。W3C並不建議這樣做——因為這可能會拖慢Web頁面的顯示速度，還可能導致映像喪失正確的長寬比。按照在Web頁面中需要的尺寸來建立映像，這樣做才是最好的。
6.1.2 為映像提供替換文本和標題
使用<img>標記中的alt屬性，可以為映像設定一個替換文本。
alt屬性的值是一段文本，它將顯示在一個代替圖片位置的方框之中，當瀏覽器無法找到該映像，或者將瀏覽器設定為不顯示映像時，將顯示該方框以代替映像。
1 <img src="art-turtle" height="600" width="412" alt="drawing of a turtle">
除了alt屬性之外，在<img>標記中添加title屬性也是一個好主意。在瀏覽器無法載入映像的情形時，在靠近滑鼠指標的提示方框中要顯示重要的資訊。此外，title屬性不僅可以添加到<img>標記之中，還可以添加到連結和其它頁面元素之中。title屬性的作為是為使用者提供一個快速提示，簡單地解釋頁面元素的內容。
6.1.3 將映像連結到Web網站上的其它內容
可以使用文本短語作為連結的標籤，以便讓使用者單擊連結。還可以使用映像作為連結的標籤，它既可以帶一個文字標籤，也可以不帶任何文字標籤。
要將整幅圖片作為連結，只需在<img>左右添加<a>和</a>即可。
1 <a href="www.baidu.com"><img src="art-turtle" height="600" width="412" alt="drawing of a turtle" title="Drawing of a turtle"></a>
6.1.4 添加圖片標題
在HTML5之前，並沒有一個簡單的辦法可以通過語義方式為實際的映像定義一個圖片標題。幸運的是，在HTML5中可以使用figure元素和figcaption元素來實現。
1 <figure>2 <img src="fabric-banner.jpg" alt="Fabric banner">3 <figcaption>4 Fabric banner handmade by the women of Nueva Imagen5 </figcaption>6 </figure>
除了映像之外，還可以使用figure和figcaption元素為其它元素定義關聯的標題。假如建立了一個提供參考資訊表，並想將其放在一個較大的文字區塊中。可以將該表或其它圖表放在一個figure元素中，然後該figure元素添加一個figcaption元素以定義一個解釋該圖表的標題。
6.2 為前景圖片定義樣式
6.2.1 映像邊框
在新的HTML規範中，W3C取消了img中的border屬性，建議使用樣式表來調整邊框的顯示，樣式表對邊框提供了更多的控制能力。
與邊框有關的樣式表屬性：
樣式表為設定邊框的各個屬性提供了強大的功能，既可以將邊框的4條邊作為一個整體進行設定，也可以分別對每一條邊進行設定。要單獨設定某一條邊，只需簡單地在邊框屬性中添加該邊的名稱即可（top、right、bottom或者left）。
1 .headsot{2 border-style:double;3 border-left-style:none;4 border-right-style:none;5 border-width:10px;6 border-left-width:0px;7 border-right-width:0px;8 border-color:#c00;9 }
6.2.2 浮動
當在一個文字區塊中添加映像時，有時希望改變映像的對齊，使映像不再簡單地顯示在文本的上面或下面，而是浮動在文字資料流之中。即採用CSS的float屬性，並將其值設定為left或right即可。
（1）浮動文本中的圖片
float屬性的作用是告訴瀏覽器，將被浮動元素放在最靠近的指定瀏覽器邊緣的位置，然後浮動其餘的頁面內容。換句話說，內容將自動地沿著設定了左浮動（left-floated）圖片的右側進行流動，或者沿著設定了右浮動（right-floated）圖片的左側進行流動。float屬性可能的取值包括：left、right和none。
1 <img src="photo.jpg" style="float:left;">
（2）清除浮動
有時會遇到這種情況，即實際上需要停止或清除浮動。假如想將較長的文本拆分為兩個段落，然後只讓第一個段落包圍著映像。第二個段落仍然佔據整個頁面的寬度。要實現這種布局，必須在第二個段落中使用clear屬性來“清除浮動”。clear屬性可能的取值為：left、right、both和none。
1 <p style="clear:left;">Remaining paragraph of text.</p>
（3）浮動圖片組
假如頁面中包含很多映像，如果所有映像都具有相同尺寸，那麼使用float屬性可以很容易地讓瀏覽器自動將這些映像顯示在頁面同一行上（in line）。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 figure{ 8 float: left; 9 }10 figure figcaption{11 text-align: center;12 font-family: ‘微軟雅黑‘;13 }14 </style>15 </head>16 <body>17 <figure>18 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px">19 <figcaption>金木</figcaption>20 </figure>21 <figure>22 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px">23 <figcaption>金木</figcaption>24 </figure>25 <figure>26 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px">27 <figcaption>金木</figcaption>28 </figure>29 </body>30 </html>
6.2.3 內邊距和外邊距
還可以將padding屬性和margin屬性應用於映像，以定義圍繞著映像內邊距和外邊距，可以聲明一條邊、兩條邊和三條邊或四條邊的邊距。
1 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px" style="margin: 100px;">
1 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px" style="padding: 100px;">
6.2.4 置中
使元素左外邊距和右外邊距完全相等就可以實現置中的效果，前提必須是告訴瀏覽器將映像作為一個區塊層級元素處理。在CSS中，區塊層級元素將自動填滿整個可用空間。因此，如果將映像設定為一個區塊層級元素，則它的外邊距將自動擴充，直到遇到瀏覽器視窗的邊緣。
1 img.centered{display:block; margin-left:auto; margin-right:auto;}
6.3 將映像作為Web頁面的背景元素
在Web頁面中映像還有另一個角色，即作為Web頁面的背景圖片。即在body元素的樣式聲明中，添加background-image屬性：
1 body{background-image:url("piture.jpg");}
在樣式表中背景屬性有一個巨大的好處，即可以將背景映像應用於所有的頁面元素，從段落、列表到表格中的儲存格，都可以採用與定義body元素背景相同的辦法進行定義。
1 p{background-image:url("piture.jpg");}
通過在頁面樣式表中添加background-attachment屬性，可以強制背景映像保持靜止。
當把background-attachment屬性的值設定為fixed時，背景映像將保持固定狀態。
當把background-attachment屬性的值設定為scroll時，背景映像將隨著頁面的滾動而滾動。
與之類似，還可以使用background-repeat屬性，告訴瀏覽器是否重複顯示背景映像。background-repeat屬性可能的取值為：
1 body{2 background-image: url("f://img/test2.jpg");3 background-repeat: no-repeat;4 background-attachment: fixed;5 }
[HTML/HTML5]6 使用映像
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
