通過html代碼給網(wǎng)頁添加圖片需要注意的事項

2022-04-02 分類：網(wǎng)站建設(shè)

看看今天互聯(lián)網(wǎng)上的任何一個網(wǎng)站，你都會發(fā)現(xiàn)它們有一些共同之處。其中一個特點就是圖片被廣泛應(yīng)用。正確的圖片給網(wǎng)站的展示增加了太多的東西，其中的一些圖片，如公司的標(biāo)志，非常有助于品牌提升以及營銷業(yè)績提升等。若要向網(wǎng)頁中添加圖像、圖標(biāo)或圖形，需要在網(wǎng)頁的HTML代碼中使用該<img>標(biāo)簽，放在HTML中希望圖形顯示的位置。雖然說起來簡單，但是如果不借助一些html文本編輯器或者成熟的cms管理系統(tǒng)，向網(wǎng)站添加圖片就必須用到html代碼。如果你已經(jīng)掌握基礎(chǔ)的html和css編程知識，又想用程序給我網(wǎng)站添加圖片，那就不得不掌握通過html代碼給網(wǎng)頁添加圖片需要注意的事項。

圖像屬性

查看上面的HTML代碼，您將看到元素包含兩個屬性。它們中的每一個都是圖像所必需的。

第一個屬性是“src”。這就是您想要在頁面上顯示的圖像文件。在我們的示例中，我們使用名為“l(fā)ogo.png”的文件。這是Web瀏覽器在呈現(xiàn)站點時顯示的圖形。您還會注意到，在此文件名之前，我們添加了一些附加信息“/image/”。這是文件路徑。初始正斜杠告訴服務(wù)器查看目錄的根目錄。然后，它將查找名為“image”的文件夾，最后查找名為“l(fā)ogo.png”的文件。使用名為“圖像”的文件夾存儲站點的所有圖形是一種非常常見的做法，但您的文件路徑將更改為與您的站點相關(guān)的任何內(nèi)容。

第二個必需的屬性是“alt”文本。這是在圖像由于某種原因無法加載時顯示的“替換文本”。此文本在我們的示例中顯示為“Company Logo”(公司徽標(biāo))，如果圖像加載失敗，將顯示此文本。為什么會這樣？各種原因：

文件路徑不正確，不正確的文件名或拼寫錯誤。
傳輸誤差，文件已從服務(wù)器中刪除。

這些只是為什么我們指定的圖像可能會丟失的幾種可能性。在這些情況下，將顯示我們的ALT文本。Alt文本也被屏幕閱讀器軟件用來向視力受損的訪問者“讀取”圖像。因為他們看不到像我們這樣的圖像，所以本文讓他們知道圖像本身是什么。這就是為什么ALT文本是必需的，為什么它應(yīng)該清楚地說明什么是圖像！

一個常見的誤解是ALT文本是為了搜索引擎的目的。這不是真的。雖然搜索引擎確實會閱讀這些文本來確定圖像是什么(請記住，他們也不能“看到”您的圖像)，但是您不應(yīng)該只為了吸引搜索引擎而編寫Alt文本。作者清除為人類準(zhǔn)備的ALT文本。如果您還可以將一些關(guān)鍵字添加到吸引搜索引擎的標(biāo)簽中，這很好，但始終要確保ALT文本通過說明圖像對于任何看不到圖形文件的人來說是什么，從而達到其主要目的。

其他屬性

IMG標(biāo)簽還有另外兩個屬性，當(dāng)您在Web頁面上放置圖形時，您可能會看到這兩個屬性-寬度和高度。例如，如果您使用所見即所得編輯器(比如Dreamweaver)，它會自動為您添加此信息。這里有一個例子：

“寬度”(Width)和“高度”(Height)屬性告訴瀏覽器圖像的大小。然后，瀏覽器知道要在布局中分配多少空間，并且可以在圖像下載時轉(zhuǎn)到頁面上的下一個元素。在HTML中使用此信息的問題是，您可能并不總是希望您的圖像以該大小顯示。例如，如果您有一個響應(yīng)網(wǎng)站，其大小根據(jù)訪問者屏幕和設(shè)備大小而變化，則您還希望您的圖像具有靈活性。如果您在HTML中聲明固定大小是什么，您將發(fā)現(xiàn)很難用響應(yīng)式CSS媒體查詢來覆蓋它。因此，為了保持樣式(CSS)和結(jié)構(gòu)(HTML)的分離，建議您不要向HTML代碼中添加寬度和高度屬性。

特別說明

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

網(wǎng)頁標(biāo)題：通過html代碼給網(wǎng)頁添加圖片需要注意的事項
標(biāo)題來源：http://www.aaarwkj.com/news28/145228.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、移動網(wǎng)站建設(shè)、微信公眾號、云服務(wù)器、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

相對搜索引擎收錄而言，網(wǎng)站的關(guān)鍵詞排名與許多內(nèi)容更新時間有關(guān) 2022-04-02
從設(shè)計角度看為什么人們會放棄購物車 2022-04-02
網(wǎng)站鏡像的一些知識 2022-04-02
網(wǎng)站外鏈優(yōu)化的15個方法 2022-04-01
淺析無人機該如何建設(shè)自己的網(wǎng)站呢 2022-04-01
虛擬現(xiàn)實造型語言 2022-04-01
一個網(wǎng)站轉(zhuǎn)化率是至關(guān)重要的 2022-04-01
建設(shè)網(wǎng)站都需要什么？你需要知道的都在這里! 2022-04-01

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

通過html代碼給網(wǎng)頁添加圖片需要注意的事項