超簡單網頁圖片

Ⅰ 最簡單的HTML製作之如何在網頁中插入圖片

<img>標簽即可以實現：

<imgsrc="圖片文件地址"alt="圖片文件描述">

<img>標簽支持的屬性

這個元素支持 全局 屬性。

• align

• 已廢棄於 HTML4.01和HTML5，我們使用vertical-align 這一個 CSS 屬性來替代

• 屬性聲明了圖像相對於它周圍上下文的對齊。

• alt

• 這個屬性定義了描述圖像的替換文本。用戶將看到這個顯示，如果圖像的地址是錯誤的，或該圖像不在支持的格式列表中，或者如果圖像還沒有被下載。

  使用說明：省略這個屬性表明該圖像不是內容的關鍵部分，但沒有等效的文本可用。把這個屬性設置為空字元串，表明該圖像不是內容的關鍵部分。非可視化瀏覽器在渲染的時候可能會忽略它。

• border

• 已廢棄HTML4.01與 HTML5，我們使用border這一個 CSS 屬性來替代

• 屬性聲明了圖像周圍的邊框寬度。

• crossorigin （HTML5）

• 這個屬性表明是否必須使用CORS 完成相關圖像的抓取。啟用CORS的圖像在<canvas>元素中可以重復使用而不會被污染。允許的值有：

• anonymous

• 執行一個跨域的請求（比如，有Origin:HTTP header）。但是沒有發送證書（比如，沒有cookie，沒有X.509 證書，沒有HTTP 基本的授權認證）。如果伺服器沒有給源站證書（沒有設置Access-Control-Allow-Origin:HTTP頭），圖像會被污染而且它的使用會被限制。

• use-credentials

• 一個有證書的跨域請求（比如，有Origin:HTTP header）被發送（比如，a cookie, a certificate, and HTTP Basic authentication is performed）。如果伺服器沒有給源站發送證書（通過 Access-Control-Allow-Credentials: HTTP header），圖像將會被污染，且它的使用會受限制。

當用戶並未顯式使用本屬性時，默認不使用 CORS 發起請求(例如，不會向伺服器發送 HTTP 頭部信息)，用以防止其在<canvas>中的使用。如果無效，默認當做anonymous關鍵字生效。更多信息，請查看CORS 屬性設置。

• height

• 圖像的高度，在HTML5中的單位是 CSS 像素，在HTML 4中可以是像素也可以是百分比。

hspace

已廢棄HTML4.01和HTML5

• 屬性聲明了插入到圖像的左側和右側的空白像素的值。

• ismap

• 這個布爾屬性表示圖像是否是伺服器端map的一部分。如果是， 那麼點擊的精準坐標將會被發送到伺服器。

  使用說明：只有當<img>是href屬性是有效的<a>元素的內聯元素時，這個屬性才被允許使用。

• longdesc

• （HTML 4only）

• 屬性聲明了一個 URL ，描述了要顯示圖像的URL描述，是對alt 屬性文本的補充。

• name

• 已廢棄HTML4.01和HTML5

• 屬性聲明了元素的名字。在HTML 4隻向後兼容。使用id屬性替代。

• sizes

• （HTML5）

• 屬性表示資源大小的以逗號隔開的一個或多個字元串。每一個資源大小包括：

• 一個媒體條件。最後一項一定是被忽略的。

• 一個資源尺寸的值。

資源尺寸的值被用來指定圖像的預期尺寸。當srcset使用 'w' 描述符時，用戶代理使用當前圖像大小來選擇srcset中合適的一個圖像URL。 被選中的尺寸影響圖像的顯示大小（如果沒有CSS樣式被應用的話）。如果沒有設置srcset屬性，或者沒值，那麼sizes屬性也將不起作用。

• src

• 屬性聲明了圖像的 URL，這個屬性對<img>元素來說是必需的。在支持srcset的瀏覽器中，src被當做擁有一個像素密度的描述符1x的候選圖像處理，除非一個圖像擁有這個像素密度描述符已經被在srcset或者srcset包含 '地址'描述符中定義了.

• srcset

• （HTML5）

• 屬性聲明了以逗號分隔的一個或多個字元串列表表明一系列用戶代理使用的可能的圖像。每一個字元串由以下組成：

• 一個圖像的URL。

• 可選的，空格後跟以下的其一：

• 一個寬度描述符，這是一個正整數，後面緊跟 'w' 符號。該整數寬度除以sizes屬性給出的資源（source）大小來計算得到有效的像素密度，即換算成和x描述符等價的值。

• 一個像素密度描述符，這是一個正浮點數，後面緊跟 'x' 符號。

如果沒有指定源描述符，那它會被指定為默認的1x。

在相同的srcset屬性中混合使用寬度描述符和像素密度描述符時，會導致該值無效。重復的描述符（比如，兩個源 在相同的srcset兩個源都是'2x'）也是無效的。

瀏覽器選擇在給出的時間點顯示大部分adequate 圖片。

• width

• 屬性聲明了圖像的寬度，在HTML5中單位是CSS 像素，在HTML 4中可以是像素也可以是百分比。

• usemap

• 屬性聲明了與元素相關聯的的image map的部分 URL（以'#' 開始的部分）。

  使用說明：如果<img>元素是<a>或<button>元素的後代元素則不能使用這個屬性。

• vspace

• 已廢棄HTML4.01和HTML5

• 屬性聲明了插入到圖像的上方和下方的空白像素的數組。













• 支持的圖像格式
  

HTML 標准並沒有給出必須支持的圖像格式的列表，因此每個用戶代理支持一組不同的格式。 一般而言支持以下格式：

• JPEG

• GIF，包括動態的GIFs

• PNG

• APNG

• SVG

• BMP

• BMP ICO

• PNG ICO

• WEBP

與 CSS 的交互

關於 CSS，<img>是一個替換元素。它沒有基線，這意味著當在一個行內格式的上下文中使用vertical-align: baseline 時，圖像的底部將會與容器的基線對齊。

根據它的類型，圖像可能會有一個本徵維數（intrinsic dimension），但這不是一個必要條件：SVG圖像就沒有，而光柵圖像有。

例 1

• <imgsrc="logobrand.png"alt="brand">




例 2：圖像鏈接

• <ahref="/"><imgsrc="logobrand.png"alt="brand"></a>




例3：使用srcset屬性

在支持srcset 的用戶代理中，src屬性是1x候選項。

• <imgsrc="logobrand.png"alt="brand"srcset="logobrandHD.png2x">




例4：使用srcset和sizes屬性

在支持srcset 的用戶代理中，當使用'w' 描述符時，src 屬性會被忽略。當匹配了媒體條件(min-width: 600px)時，圖像將寬200px，否則寬50vw（視圖寬度的50%）。

• <imgsrc="logobrand.png"alt="brand"srcset="logobrand.png200w,brandlogo-400.png400w"sizes="(min-width:600px)200px,50vw">

【圖例】給HTML添加的圖片

Ⅱ PS有哪些免費的素材網站

1、覓元素

覓元素，這是一個擁有海量免摳素材以及高清背景的素材類網站。在這個網站中，免摳素材的分類很豐富，有漂浮元素、裝飾元素、節日元素、手繪/卡通、字體元素、標簽元素、背景元素、圖表元素、動植物元素等等；背景圖的分類、顏色、版式、格式都分得很詳細，找素材超方便。

2、花瓣網

花瓣網，經常找素材的小夥伴肯定對這個網站不陌生，這是一個很多設計師都在用的素材網站，這里的素材分類很豐富。

具體的素材分類有插畫/漫畫、婚禮、女裝/搭配、工業設計、攝影、造型/美妝、手工/布藝、健身/舞蹈、人文藝術、建築設計、生活網路、汽車/摩托、美食、旅行、美女等等；除了素材之外，它還有很實用的採集工具。

3、站酷網

站酷網，可能有些小夥伴對這個網站並不是很熟悉，它雖然看起來很簡單，但它是一個可以下載圖片、視頻、字體、音樂等多種素材的網站。在這里搜索素材非常方便，選擇好素材類型，然後輸入關鍵詞進行搜索即可，很方便。

4、stickpng

Stickpng，這是一個免費提供PNG透明背景圖資源的網站，這個網站上的PNG背景圖都是已經去掉背景的，不需要自己再重新摳背景，下載之後直接就能用，非常方便。它的圖片分類很豐富，有美食、傢具、音樂明星、廚具、假期、游戲、動物、漫畫人物、機器人等等。

5、pngimg

Pngimg，這是一個不需要注冊就可以免費下載免摳透明背景元素圖的網站，這里有大量透明背景圖和剪貼畫，很多設計師經常在這個網站下載免費素材，素材下載之後就可以直接用，簡直太方便了，難怪很多設計師喜歡來這里找素材。

Ⅲ 如何給圖片做個鏈接

可以利用電腦版qq給圖片生成一個鏈接，請參照以下步驟。

1、首先在電腦上打開自己的qq，點擊首頁界面的空間圖標。

Ⅳ 製作網頁可以用什麼軟體

製作網頁可以用如下軟體：

1、Coolsite360。特點有可復制模板，更可任性DIY，無需編程，在線創建，自動適配桌面及移動端。

2、Adobe Dreamweaver。簡稱「DW」，中文名稱 "夢想編織者"，最初為美國MACROMEDIA公司開發，2005年被Adobe公司收購。

3、Flash。是由macromedia公司推出的互動式矢量圖和 Web 動畫的標准，由Adobe公司收購。做Flash動畫的人被稱之為閃客。

4、Fireworks。是由Macromedia推出的一款網頁作圖軟體，軟體可以加速 Web 設計與開發， 是一款創建與優化 Web 圖像和快速構建網站與 Web 界面原型的理想工具。

5、Frontpage。Frontpage，是微軟公司出品的一款網頁製作入門級軟體。FrontPage使用方便簡單，會用Word 就能做網頁，因此相對Dreamweaver等軟體更容易上手。