HTML5 是新一代的網頁標準，其中包含了許多新功能和標籤，使得網頁開發更加便捷、靈活、豐富。在網頁開發中，圖片是不可或缺的元素。 HTML5 提供了一些新的圖片設定方法，本文將介紹一些常見的圖片設定方式。
一、img 標籤設定圖片
在HTML4 中，我們使用以下方式來在網頁中新增圖片：
<img src="image.jpg" alt="This is an image">
在HTML5 中，該方法仍然適用，但也有一些新的選項可供使用。以下是一些常見的 img 標籤屬性：
src 屬性用於指定映像檔的 URL，它是最基本的 img 屬性。如果沒有指定該屬性，圖像元素將不會顯示。
alt 屬性用於為圖像提供替代文字。當圖像無法被顯示時，alt 屬性的文字將作為替代品顯示。如果您的圖像是網頁的必要成分，則應另外提供一些具體資訊。
例如：
<img src="image.jpg" alt="This is an image of a flower">
title 屬性用於為圖像提供附加說明。當滑鼠懸停在圖像上時，title 屬性的文字將作為提示文字顯示。
例如：
<img src="image.jpg" alt="This is an image" title="This image is taken by me">
width 和 height 屬性用來指定影像的寬度和高度。指定寬度和高度可以幫助瀏覽器更快呈現網頁，也可以讓網頁佈局更直覺。
例如：
<img src="image.jpg" alt="This is an image" width="500" height="300">
二、canvas 標籤繪製圖片
#canvas 是一個 HTML5 標籤，用於在網頁中繪製圖像或其他畫作。 canvas 讓開發者直接繪製圖片和圖形，使得網頁中的圖片不再受到前端工具的限制，可以自由繪製和編輯。
下面是一個使用 canvas 繪製圖像的範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
image.src = 'image.jpg';
</script>
</body>
</html>在上面的範例中，我們首先建立了一個 canvas 元素，並指定了一個 ID。然後，我們使用 JavaScript 來取得該 canvas 元素，並將其上下文設為 2D（getContext('2d')）。接著，我們建立一個影像對象，並在影像載入完成後使用 drawImage() 方法將其繪製在 canvas 上。
三、svg 標籤繪製向量圖
SVG（Scalable Vector Graphics）是一種基於 XML 的標記語言，用於描述二維圖形和動畫。 HTML5 允許我們使用 SVG 標籤來繪製向量圖形。
下面是一個使用 SVG 標籤繪製向量圖的範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Example</title>
</head>
<body>
<svg width="500" height="500">
<image x="0" y="0" width="100%" height="100%" href="image.svg"></image>
</svg>
</body>
</html>在上面的範例中，我們建立了一個 SVG 元素，指定了寬度和高度。接著，我們建立了一個 image 元素，並使用 href 屬性指定了圖片的 URL。將圖像添加到 SVG 元素中，它將自適應 SVG 元素的大小，並且可以透過 CSS 樣式進行進一步的調整和裝飾。
總結
以上是 HTML5 中常見的設定圖片的方式。 img 標籤是最常見的方式，它提供了基本的圖像顯示功能，同時也支援一些自訂屬性。 canvas 標籤則允許我們使用 JavaScript 直接繪製和操作圖像，繪製過程更加靈活。而 SVG 標籤則用於繪製向量圖形和動畫。選擇合適的方式為網頁添加圖片，可以使頁面更加豐富多彩。
以上是html5設定圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
