對於初學者：如何在圖片周圍繪製文字

在本文中，我們將介紹與圖像關聯的HTML和CSS的功能。 您將學習如何將它們插入到HTML文檔中。 另外在文章中，您將找到有關如何更改圖片參數的信息，並使用文字整理圖片周圍的流程。

首先 - 關於插入圖像。 為此，有一個“img”標籤有幾個屬性。 主要的是“src”。 它存儲瀏覽器可以插入圖片的地址。 您可以指定已保存在計算機中的圖像的路徑，或指定到Web資源的鏈接。

下一個重要的屬性對是“寬”和“高”。 它們用於手動調整圖像大小（用於拉伸和壓縮圖像的有用選項）。

接下來，參數“hspace”和“vspace”（從圖像到周圍文本的距離）。 顯然，“空格”是水平縮進，“空格”是垂直的。

標籤具有諸如“alt”和“title”之類的屬性。 他們是相似的，因為他們的目的是描述圖片。 但是，當您將鼠標懸停在圖像上時，“標題”就是寫入的文本，如果圖像加載失敗，則會顯示“alt”屬性的字母值。

大多數標籤中存在幾個更具體的屬性。 這些是“accesskey”，“class”，“id”和“style”。 “Accesskey”指定訪問對象的 鍵盤快捷方式 。 “Class”和“id”是與CSS相關的參數。 它們描述了圖片所屬的類（或其標識符）。 “樣式”是一個文本屬性，允許您指定內置的CSS樣式的圖像。

定義圖像外觀的參數之一是“邊框”。 它確定對象周圍的框架的厚度，可以通過任何正整數（以像素為單位）來指定。

下一個屬性是“對齊”。 它用文本描述圖片周圍的流動。 該參數可以取值為“bottom”，“middle”，“left”，“right”和“top”。 每個值都確定圖片相對於文字的位置。 例如，如果值為“中間”，則圖像的中間將在文本的底部對齊，當“左”時，對象將位於文本的左側。 但這只是設置圖片文本流的一種方法 - HTML。

還有一個強大的工具 - CSS（更多功能）。 通過幫助，您可以更有效地設置標籤的屬性，包括圖片文本周圍的流動。 CSS允許您定義不僅一個特定對象的參數，而且還可以定義所有類似的參數。 例如，如果要指定文檔中所有圖像的縮進等於十個像素，那麼您只需要附加一個帶有單行的CSS文件即可：“img {margin：10px 10px 10px 10px;}”（實際上，不需要引號！）。

而文字左邊的文字，例如左邊的流動設置如下：“img {align：left;}”。

順便說一句，添加CSS代碼不必在文件中寫入。 為此，HTML提供了一個“樣式”標籤，您可以在其中插入CSS代碼。 但它將僅適用於此文檔（如果要將相同的代碼添加到多個HTML文件，那麼應該創建一個單獨的樣式表）。

現在，您可以使用圖像的“稀釋”網站，使用負責此標記的標籤的實用屬性。 隨意在圖片上應用調整大小或文字換行。 沒有圖形組件的網頁是一個相當沉悶的視線，不是嗎？