免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

通過html代碼給網頁添加圖片需要注意的事項

2022-04-02    分類: 網站建設


看看今天互聯網上的任何一個網站,你都會發現它們有一些共同之處。其中一個特點就是圖片被廣泛應用。正確的圖片給網站的展示增加了太多的東西,其中的一些圖片,如公司的標志,非常有助于品牌提升以及營銷業績提升等。若要向網頁中添加圖像、圖標或圖形,需要在網頁的HTML代碼中使用該<img>標簽,放在HTML中希望圖形顯示的位置。雖然說起來簡單,但是如果不借助一些html文本編輯器或者成熟的cms管理系統,向網站添加圖片就必須用到html代碼。如果你已經掌握基礎的html和css編程知識,又想用程序給我網站添加圖片,那就不得不掌握通過html代碼給網頁添加圖片需要注意的事項。
圖像屬性
查看上面的HTML代碼,您將看到元素包含兩個屬性。它們中的每一個都是圖像所必需的。
第一個屬性是“src”。這就是您想要在頁面上顯示的圖像文件。在我們的示例中,我們使用名為“logo.png”的文件。這是Web瀏覽器在呈現站點時顯示的圖形。您還會注意到,在此文件名之前,我們添加了一些附加信息“/image/”。這是文件路徑。初始正斜杠告訴服務器查看目錄的根目錄。然后,它將查找名為“image”的文件夾,最后查找名為“logo.png”的文件。使用名為“圖像”的文件夾存儲站點的所有圖形是一種非常常見的做法,但您的文件路徑將更改為與您的站點相關的任何內容。
第二個必需的屬性是“alt”文本。這是在圖像由于某種原因無法加載時顯示的“替換文本”。此文本在我們的示例中顯示為“Company Logo”(公司徽標),如果圖像加載失敗,將顯示此文本。為什么會這樣?各種原因:
  • 文件路徑不正確,不正確的文件名或拼寫錯誤。
  • 傳輸誤差,文件已從服務器中刪除。
這些只是為什么我們指定的圖像可能會丟失的幾種可能性。在這些情況下,將顯示我們的ALT文本。Alt文本也被屏幕閱讀器軟件用來向視力受損的訪問者“讀取”圖像。因為他們看不到像我們這樣的圖像,所以本文讓他們知道圖像本身是什么。這就是為什么ALT文本是必需的,為什么它應該清楚地說明什么是圖像!
一個常見的誤解是ALT文本是為了搜索引擎的目的。這不是真的。雖然搜索引擎確實會閱讀這些文本來確定圖像是什么(請記住,他們也不能“看到”您的圖像),但是您不應該只為了吸引搜索引擎而編寫Alt文本。作者清除為人類準備的ALT文本。如果您還可以將一些關鍵字添加到吸引搜索引擎的標簽中,這很好,但始終要確保ALT文本通過說明圖像對于任何看不到圖形文件的人來說是什么,從而達到其主要目的。
其他屬性
IMG標簽還有另外兩個屬性,當您在Web頁面上放置圖形時,您可能會看到這兩個屬性-寬度和高度。例如,如果您使用所見即所得編輯器(比如Dreamweaver),它會自動為您添加此信息。這里有一個例子:
“寬度”(Width)和“高度”(Height)屬性告訴瀏覽器圖像的大小。然后,瀏覽器知道要在布局中分配多少空間,并且可以在圖像下載時轉到頁面上的下一個元素。在HTML中使用此信息的問題是,您可能并不總是希望您的圖像以該大小顯示。例如,如果您有一個響應網站,其大小根據訪問者屏幕和設備大小而變化,則您還希望您的圖像具有靈活性。如果您在HTML中聲明固定大小是什么,您將發現很難用響應式CSS媒體查詢來覆蓋它。因此,為了保持樣式(CSS)和結構(HTML)的分離,建議您不要向HTML代碼中添加寬度和高度屬性。

特別說明

如果您關閉了這些大小調整說明,并且沒有在CSS中指定大小,那么瀏覽器將以默認的本機大小顯示圖像。

網頁標題:通過html代碼給網頁添加圖片需要注意的事項
標題來源:http://m.newbst.com/news28/145228.html

成都網站建設公司_創新互聯,為您提供外貿網站建設電子商務移動網站建設微信公眾號云服務器面包屑導航

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

搜索引擎優化