⑴ 怎麼在網頁中插入圖片html圖片代碼
代碼如下:
1、<img src="divcss5-logo-201305.gif" width="165" height="60" />
img介紹:
src 後跟的是圖片路徑地址
width 設置圖片寬度
height 設置圖片高度
2、我們在html源代碼中分別插入三張圖片,一張原始大、一張將寬度高度改小小、一張將寬度高度改大。
(1)怎麼在網頁上創造圖片擴展閱讀:
在HTML中出現圖片通常有2種:
1、某元素的背景圖像【絕大多數元素都可以通過background屬性設置其背景圖像】
直接在html中的標簽里設置:
<p style=」background-image:url(xxx.jpg)「>設置一個段落的背景圖像</p>
在CSS上設置html中的 」<p>一個段落</p>「 的背景圖像:
p{ background-image:url(xxx.jpg); }
2、圖像元素img:
<img src="xxx.jpg" alt="這是一個圖像元素">
⑵ 如何在自己的網頁上添加視頻,圖片,,
1、首先,通過TXT文檔,創建一個網頁的基本框架。也就是html、head、body。當然,用dw創建一個網頁文檔,會自動寫入這些代碼。這里,使用的是dw.
2、圖片的格式通過有3種:1)GIF2)JPEG3)PNG GIF最大的好處是可以製作動態圖片。
具體選擇何種格式,看你自己。
其中,.html文件,是我已經創建並保存好的網頁
test.jpg是即將要插入的圖片。
3、其實,最好的目錄架構,是單獨創建一個文件夾,比如img等,將圖片資源放入其中。
筆者之所以這樣,是為了截圖方便。
4、那麼如何插入圖片呢?非常簡單,插入圖片的標記值有一個:「img」標記!請在body中加入如下一行:
<img src="./test.jpg">由src指示圖片的位置
雙擊該網頁運行,便可看到網頁中的圖片了
如何來添加一段視頻呢?其實,方法很簡單,您只需要將以下代碼拷貝到你想顯示的頁面位置或者後台新聞、普通欄目的編輯框的源代碼中,就可以實現網上視頻播放了。
代碼:
<div style=" display:block; width:98%;"><p style="text-align: left"><object id="myPlayer" height="375" width="440" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param value="mms://video.wingsmedia.com.cn/wuan/othersites/123.wmv" name="URL" />
<param value="1" name="rate" />
<param value="0" name="balance" />
<param value="" name="defaultFrame" />
<param value="1" name="playCount" />
<param value="0" name="autoStart" />
<param value="0" name="currentMarker" />
<param value="-1" name="invokeURLs" />
<param value="" name="baseURL" />
<param value="50" name="volume" />
<param value="0" name="mute" />
<param value="1" name="stretchToFit" />
<param value="0" name="windowlessVideo" />
<param value="-1" name="enabled" />
<param value="-1" name="enableContextMenu" />
<param value="0" name="fullScreen" />
<param value="" name="SAMIStyle" />
<param value="" name="SAMILang" />
<param value="" name="SAMIFilename" />
<param value="" name="captioningID" /></object></p> </div>
</div>
針對以上代碼,您只需要修改幾個參數就可以成功了。
height="375" width="440"
這個參數是設置視頻的大小,前面是高度,後面是寬度。它們都是以像素為單位。用戶可以根據實際需要設置其大小。
value="mms://video.wingsmedia.com.cn/wuan/othersites/123.wmv" name="URL"
這個是最主要的內容,就是添加視頻的鏈接。視頻的來源一般有兩種,一個是自己傳到網上的,還有一種是從別人網上拷貝來的鏈接。比如土豆等一些視頻網站。用戶只要有視頻的鏈接地址,替換掉代碼中有下劃線的鏈接地址就可以播放了。
但需要注意的是,視頻的格式一定是wmv格式。
<param value="0" name="autoStart" />
這段代碼是設置視頻是否自動播放。「0」為默認不播放;「1」為頁面打開後自動播放視頻。
⑶ 怎樣在自己的網頁上添加動畫圖片或圖片
可以直接引用圖片的鏈接地址,不過這種方法打開起來會慢很多。
還可以把圖片保存下來,自己修改合適的大小,然後上傳進自己的網頁, 也可以保存到一些網路上的圖片庫里,再把你自己的鏈接地址貼上去就好了
貼圖方法:<IMG SRC="圖片網址" >------這個是按圖片的原本大小貼上去。
<IMG SRC="圖片網址" width=大小 height=大小>-----這個是按你設計的大小貼圖上去。
可以試試。
⑷ 怎麼在HTML網頁上插入圖片
上傳圖片。
有很多免費的圖片寄存服務網站,如Picasa網路相冊、Imgur網站、Flickr相冊或相桶網站等等。仔細閱讀這些網站的相關條款。有些伺服器會削減你的圖片質量。有些網站在遇到很多人瀏覽你的圖片時,會因為它佔用過多的主機寬頻,而撤下你的照片。
有些博客網站允許你使用博客管理工具來上傳你的照片。
如果你有付費的網路主機,可以使用FTP服務將照片上傳到自己的網路站點。推薦您創建一個「圖片」路徑來方便整理、留存你的文件。
如果你想要使用其它網站上的照片,請先詢問該網站的創建者,在獲得授權後方可使用。如果創建者同意的話,先下載圖片,然後再上傳到圖片寄存網站。
如何在HTML中插入圖片
打開需要添加圖片的網頁文檔。
如果你想要在論壇中插入一張圖片,可以在帖子中直接輸入。許多論壇並沒有使用HTML來編輯網頁,而是使用一種自定義的系統來進行編寫。如果方法不適用,請向其它論壇高手尋求幫助。
如何在HTML中插入圖片
以img標簽來開頭。
在網頁的主體部分(即HTML的<body>部分)找到你想要插入圖片的位置。在這里寫下<img>標簽。這是一個空標簽,創建的是被引用圖像的佔位空間。同時在HTML中,<img> 標簽是沒有結束標簽的。您需要將插入的圖片放在兩個尖括弧之中。
<img>
如何在HTML中插入圖片
找到圖片的URL地址。
訪問存放圖片的網頁。右鍵點擊圖片(Mac電腦中自動點選),然後選擇「復制圖片網址」。你也可以點擊「查看圖片」,來在新標簽頁中單獨瀏覽圖片。然後再復制地址欄里的URL地址。
如果你將圖片上傳到自己網站的圖片目錄下,可以通過 /images/此處是你的文件名網址來直接鏈接到圖片。如果這個方法沒有效果,很可能是因為圖片位於其它文件夾路徑中。你可以將它先移動到根目錄,再進行查找。
如何在HTML中插入圖片
⑸ 在html靜態網頁中如何插入背景圖片,急需!!!
用<img> 標簽。
代碼樣式:
<img src="xxx.jpg" width="100px" height="100px" />
代碼說明:
這是在網頁中插入一副圖像,能調整圖像大小,能拉伸圖像,但是不能平鋪圖像,圖像要佔用頁面的空間的,一般情況下,文字不能在這樣的圖像上面。
代碼標簽解釋:
1、<img> 標簽定義圖像。
2、src :要顯示的圖像的 URL(圖片地址)。
3、width:圖片寬度
4、height:定義圖像的高度。
5、px:即像素,1px代表屏幕上一個物理的像素點;
(5)怎麼在網頁上創造圖片擴展閱讀
一、img定義與用法:
1、img 元素向網頁中嵌入一幅圖像。
從技術上講,<img> 標簽並不會在網頁中插入圖像,而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的佔位空間。
2、<img> 標簽有兩個必需的屬性:src 屬性和alt 屬性。
二、必需的屬性:
1、alt text 規定圖像的替代文本。
2、src URL 規定顯示圖像的 URL。
⑹ 如何在網頁上放自己的圖片
隨便找個網站把圖片方上去,比如網路回答問題時有「上傳圖片」,上傳之後,
右鍵單擊圖片,裡面有「復制圖片地址」,點擊,然後找到你說的那個5944網頁,會有一個「顯示源代碼」,勾上,然後就把剛才的地址剪貼上去
⑺ 在網上怎麼製作圖片
推薦三個不錯的可以在線直接進行照片的製作編輯的網站,首先選擇效果,然後把你需要製作的照片按照要求傳上去後它就可以幫你製作了
可牛影像
http://www.keniu.com/slist.php?p=home
美圖秀秀網頁版
http://web.meitu.com/
改圖網:
http://www.gaitu.com/
⑻ 最簡單的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),圖像將會被污染,且它的使用會受限制。
height
圖像的高度,在HTML5中的單位是 CSS 像素,在HTML 4中可以是像素也可以是百分比。
屬性聲明了插入到圖像的左側和右側的空白像素的值。
ismap
這個布爾屬性表示圖像是否是伺服器端map的一部分。如果是, 那麼點擊的精準坐標將會被發送到伺服器。
使用說明:只有當<img>是href屬性是有效的<a>元素的內聯元素時,這個屬性才被允許使用。
longdesc
(HTML 4only)
屬性聲明了一個 URL ,描述了要顯示圖像的URL描述,是對alt 屬性文本的補充。
name
已廢棄HTML4.01和HTML5
屬性聲明了元素的名字。在HTML 4隻向後兼容。使用id屬性替代。
sizes
(HTML5)
屬性表示資源大小的以逗號隔開的一個或多個字元串。每一個資源大小包括:
一個媒體條件。最後一項一定是被忽略的。
一個資源尺寸的值。
src
屬性聲明了圖像的 URL,這個屬性對<img>元素來說是必需的。在支持srcset的瀏覽器中,src被當做擁有一個像素密度的描述符1x的候選圖像處理,除非一個圖像擁有這個像素密度描述符已經被在srcset或者srcset包含 '地址'描述符中定義了.
srcset
(HTML5)
屬性聲明了以逗號分隔的一個或多個字元串列表表明一系列用戶代理使用的可能的圖像。每一個字元串由以下組成:
一個圖像的URL。
可選的,空格後跟以下的其一:
一個寬度描述符,這是一個正整數,後面緊跟 'w' 符號。該整數寬度除以sizes屬性給出的資源(source)大小來計算得到有效的像素密度,即換算成和x描述符等價的值。
一個像素密度描述符,這是一個正浮點數,後面緊跟 'x' 符號。
width
屬性聲明了圖像的寬度,在HTML5中單位是CSS 像素,在HTML 4中可以是像素也可以是百分比。
usemap
屬性聲明了與元素相關聯的的image map的部分 URL(以'#' 開始的部分)。
使用說明:如果<img>元素是<a>或<button>元素的後代元素則不能使用這個屬性。
vspace
已廢棄HTML4.01和HTML5
屬性聲明了插入到圖像的上方和下方的空白像素的數組。
支持的圖像格式
JPEG
GIF,包括動態的GIFs
PNG
APNG
SVG
BMP
BMP ICO
PNG ICO
WEBP
<imgsrc="logobrand.png"alt="brand">
<ahref="/"><imgsrc="logobrand.png"alt="brand"></a>
<imgsrc="logobrand.png"alt="brand"srcset="logobrandHD.png2x">
<imgsrc="logobrand.png"alt="brand"srcset="logobrand.png200w,brandlogo-400.png400w"sizes="(min-width:600px)200px,50vw">
當用戶並未顯式使用本屬性時,默認不使用 CORS 發起請求(例如,不會向伺服器發送 HTTP 頭部信息),用以防止其在<canvas>中的使用。如果無效,默認當做anonymous關鍵字生效。更多信息,請查看CORS 屬性設置。
hspace
已廢棄HTML4.01和HTML5
資源尺寸的值被用來指定圖像的預期尺寸。當srcset使用 'w' 描述符時,用戶代理使用當前圖像大小來選擇srcset中合適的一個圖像URL。 被選中的尺寸影響圖像的顯示大小(如果沒有CSS樣式被應用的話)。如果沒有設置srcset屬性,或者沒值,那麼sizes屬性也將不起作用。
如果沒有指定源描述符,那它會被指定為默認的1x。
在相同的srcset屬性中混合使用寬度描述符和像素密度描述符時,會導致該值無效。重復的描述符(比如,兩個源 在相同的srcset兩個源都是'2x')也是無效的。
瀏覽器選擇在給出的時間點顯示大部分adequate 圖片。
HTML 標准並沒有給出必須支持的圖像格式的列表,因此每個用戶代理支持一組不同的格式。 一般而言支持以下格式:
與 CSS 的交互
關於 CSS,<img>是一個替換元素。它沒有基線,這意味著當在一個行內格式的上下文中使用vertical-align: baseline 時,圖像的底部將會與容器的基線對齊。
根據它的類型,圖像可能會有一個本徵維數(intrinsic dimension),但這不是一個必要條件:SVG圖像就沒有,而光柵圖像有。
例 1
例 2:圖像鏈接
例3:使用srcset屬性
在支持srcset 的用戶代理中,src屬性是1x候選項。
例4:使用srcset和sizes屬性
在支持srcset 的用戶代理中,當使用'w' 描述符時,src 屬性會被忽略。當匹配了媒體條件(min-width: 600px)時,圖像將寬200px,否則寬50vw(視圖寬度的50%)。
【圖例】給HTML添加的圖片
⑼ 怎樣在網頁上放圖片
在網頁上放圖片有兩種方法,
一種是圖片直接引入:
<imgsrc="XXX.jpg(這里是路徑)"title="滑鼠停留時顯示的文字說明"alt="圖片路徑出問題時顯示的文字說明"/>
第二種是把圖片當做背景引入:
<divclass="bg-img"></div>
以上是html,以下是css
.bg-img{
background:url(XXX.jpg)no-repeat00;
}
說明:背景引入,要麼把css寫在類里,要麼把css用style直接用在標簽上:
<divstyle="background:url(XXX.jpg)no-repeat00"></div>
(當我是不專業的辯解吧..因為style直接寫在標簽上很少用,所以不清楚這樣縮寫有沒有問題.. = =)
css內容說明:
background:url(XXX.jpg) no-repeat 0 0;
-- XXX.jpg 明顯就是引入圖片路徑了。如果不用縮寫的話,是這樣子的:background-image:url(XXX.jpg);
-- no-repeat 就是圖片要不要重復顯示,no-repeat:不重復顯示;repeat-x:按X軸方向重復顯示;repeat-y:按Y軸方向重復顯示。如果不用縮寫的話,是這樣子的:backgroung-repeat:...;
-- 0 0 是圖片開始顯示的坐標,不縮寫的話,是這樣子的:background-position:0 0;
具體請到http://www.w3school.com.cn里搜索background進行查看。
⑽ 如何在網頁上創建圖像幻燈片
所謂「超鏈接」是網頁製作中的一個名詞,也就是從當前網頁切換到其他網頁中去的一個入口。隨著超鏈接功能的不斷發展,該功能已被其他應用程序所移植,Powerpoint也具有超鏈接功能。
一、建立同一演示文稿中的超鏈接
建立同一演示文稿中的超鏈接通常有以下三種方法。
方法一:對象法
例如:下面將1張幻燈片中的某個對象超鏈接到第2張幻燈片中。
定位到第1張幻燈片中,選擇用做超鏈接的文本或對象。
切換到「插入」菜單選項卡中,單擊「鏈接」組中的「超鏈接」按鈕,打開「插入超鏈接」對話框,如下圖所示。
在左側「鏈接到」文字的下面,選中「本文檔中的位置」選項,然後在中間「請選擇文檔中的位置」下面,「幻燈片標題」列表,選中第2張幻燈片,單擊「確定」按鈕返回即可。
方法二:動作法
定位到相應的幻燈片中,選擇用做超鏈接的文本或對象。
切換到「插入」菜單選項卡中,單擊「鏈接」組中的「動作」按鈕,打開「動作設置」對話框,如下圖所示。
選中「超鏈接到」選項,然後單擊其右側的下拉按鈕,在隨後出現的下拉列表中,選擇「幻燈片」選項,打開「超鏈接到幻燈片」對話框。
選中要超鏈接到的幻燈片,單擊「確定」按鈕返回到「動作設置」對話框,再單擊「確定」按鈕退出即可。
方法三:動作按鈕法
定位到相應的幻燈片中,切換到「插入」菜單選項卡中,利用「插圖」/「形狀」/「動作按鈕」/「自定義動作按鈕」在幻燈片中拖拉出一個動作按鈕,拖拉結束松開滑鼠後,會彈出「動作設置」對話框。
以下有關超鏈接的設置同方法二中的步驟中的步驟(3)和(4)相同。
超鏈接設置完成後,右擊動作按鈕,在隨後出現的快捷菜單中選擇「編輯文字」選項,進入文字編輯狀態,輸入相應的文字。
設置好按鈕的相關格式並定位到合適的位置上即可。
二、超鏈接到其他演示文稿中
啟動Powerpoint
2007,打開相應的演示文稿,定位到相應的幻燈片中,選擇用做超鏈接的文本或對象。
切換到「插入」菜單選項卡中,單擊「鏈接」組中的「動作」按鈕,打開「動作設置」對話框。
選中「超鏈接到」選項,然後單擊其右側的下拉按鈕,在隨後出現的下拉列表中,選擇「其他Powerpoint演示文稿」選項,打開「超鏈接到其他Powerpoint演示文稿」對話框。
選中要超鏈接到的演示文稿文檔,單擊「確定」按鈕,打開「超鏈接到幻燈片」對話框,如下圖所示。
選中超鏈接放映的起始幻燈片,單擊「確定」按鈕返回到「動作設置」對話框,再單擊「確定」按鈕退出即可。