維網(wǎng)和其它網(wǎng)絡(luò)類型最大的區(qū)別就是它在網(wǎng)頁上可呈現(xiàn)豐富多彩的色彩和圖像,還可以播放音頻、視頻,及把圖像作為鏈接使用。
網(wǎng)絡(luò)上流行的圖片格式主要有jpg、jpeg、png、gif等,以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮,是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會造成任何品質(zhì)的損失,且壓縮率高,支持動畫效果,很適合互聯(lián)網(wǎng)平臺,但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片,通常用來保存超過256色的圖片格式。JPEG壓縮過程會對一些圖像數(shù)據(jù)造成損失,這部分損失不影響圖片顯示,一般人眼是看不出來差異的。損失數(shù)據(jù)越多,圖片就越不清晰。
3、png格式
png是一種非破壞性的網(wǎng)頁圖像文件格式,它以最小的方式壓縮圖片且不造成圖片數(shù)據(jù)損失。它不僅支持像gif大部分優(yōu)點(diǎn),還支持48 bit的色彩,跨平臺的圖像亮度控制,更多層的透明度設(shè)置。
網(wǎng)頁中通過<img>標(biāo)簽插入圖片,語法如下:
<img src="圖片路徑" alt="替換文本" />
具體示例:
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅圖像:
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅動畫圖像:
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請注意,插入動畫圖像的語法與插入普通圖像的語法沒有區(qū)別。</p>
</body>
</html>
效果如下:
替換文本屬性(Alt)
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。
<img src="boat.gif" alt="Big Boat">
當(dāng)瀏覽器無法載入圖像時,替換文本屬性可告訴讀者他們失去的信息。此時,瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習(xí)慣,這樣有助于更好地顯示信息,并且對于那些使用純文本瀏覽器的人來說是非常有用的。
圖像寬度和高度屬性
如下代碼,在網(wǎng)頁中插入一個寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />
圖片超鏈接
如下代碼,在網(wǎng)頁中對一個圖片進(jìn)行超鏈接設(shè)置,點(diǎn)擊這張圖片就會跳轉(zhuǎn)到其它頁面。
<a href="頁面路徑"><img src="/i/ct_netscape.jpg" /></a>
除了對整個圖片進(jìn)行超鏈接設(shè)置外,還可以將圖像劃分成不同區(qū)域進(jìn)行鏈接設(shè)置,比如一張地圖中給每個省份圖形進(jìn)行超鏈接。
圖像熱區(qū)鏈接,使用usemap 屬性通過#name指定到名叫name的map元素上,map定義了每個熱區(qū)點(diǎn)擊區(qū)域形狀、大小、坐標(biāo)等。
area標(biāo)簽的 shape 屬性有三種,rect 方形,circle 圓形,poly 多邊形。coords 屬性定義坐標(biāo)點(diǎn)位置,相對于圖片左上角位置。
示例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點(diǎn)擊太陽或其他行星,注意變化:</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>
效果可參考 https://www.w3cschool.cn/html5/html5-img.html 這里。
可以看到鼠標(biāo)在圖片上點(diǎn)擊小行星會打開對應(yīng)的圖片。
到此網(wǎng)頁中使用圖片已經(jīng)大體介紹了,自己親手寫下,會加深印象,感謝關(guān)注。
上篇:前端入門——html 超鏈接
下篇:前端入門——html 如何在網(wǎng)頁中使用視頻音頻
tml的自學(xué)剛開始的時候是比較難的,因?yàn)閔tml的專業(yè)程度本身就不簡單,而自學(xué)也是一件非常煎熬的事情,但是為了掌握一項生存技能,你必須學(xué)會。
在學(xué)習(xí)html之前首先你要明確的幾點(diǎn)是:
1. 是否明確將來做什么工作,需要掌握哪些技能,不要別人學(xué)你也跟著學(xué),盲目跟風(fēng)
2. 你有沒有系統(tǒng)的學(xué)習(xí)規(guī)劃,規(guī)劃好每天學(xué)什么、學(xué)多長時間。
3. 學(xué)習(xí)方式要選對,很多人在學(xué)習(xí)html的時候就是學(xué)習(xí)方式選錯了,最后的結(jié)果就是學(xué)著學(xué)著就放棄了,學(xué)習(xí)過程種一定要找到學(xué)習(xí)技巧,不會的可以多問問別人,不要自己瞎琢磨,最后什么也沒琢磨出來。
下面小編給大家提供一個曾經(jīng)學(xué)習(xí)過的HTML視頻教程,希望可以幫助到大家,此視頻教程主要講解了HTML基礎(chǔ)語法,內(nèi)容主要包括:HTML概述、W3C概述、B/S架構(gòu)系統(tǒng)原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識點(diǎn)。通過該視頻的學(xué)習(xí)之后,可以開發(fā)基本的網(wǎng)頁,并且可以看懂別人編寫的HTML頁面。
課程學(xué)習(xí)目錄
1.HTML視頻教程:課程內(nèi)容概述
2.HTML視頻教程:BS結(jié)構(gòu)介紹
3.HTML視頻教程:軟件環(huán)境準(zhǔn)備
4.HTML視頻教程:HTML概述
5.HTML視頻教程:我的第一個HTML
6.HTML視頻教程:HTML的基本標(biāo)簽
7.HTML視頻教程:HTML的實(shí)體符號
8.HTML視頻教程:HTML的表格
9.HTML視頻教程:HTML的單元格合并1
10.HTML視頻教程:HTML的單元格合并2
11.HTML視頻教程:thead tbody tfoot
12.HTML視頻教程:背景色和背景圖片
13.HTML視頻教程:HTML圖片img標(biāo)簽
14.HTML視頻教程:HTML超鏈接
15.HTML視頻教程:超鏈接的作用-request和response的概念
16.HTML視頻教程:HTML列表
17.HTML視頻教程:form表單初步
18.HTML視頻教程:用戶注冊表單的實(shí)現(xiàn)
19.HTML視頻教程:下拉列表支持多選
20.HTML視頻教程:form的file控件
完整目錄可以關(guān)注動力節(jié)點(diǎn)Java視頻教程
HTML視頻教程:https://www.ixigua.com/6834413404204040715
dom-to-image是一個js庫,可以將任意dom節(jié)點(diǎn)轉(zhuǎn)換為矢量(SVG)或光柵(PNG或JPEG)圖像。
npm install dom-to-image -S
/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');
所有高階函數(shù)都接受DOM節(jié)點(diǎn)和渲染選項options ,并返回promises。
<div id="my-node"></div>
var node = document.getElementById('my-node');
// options 可不傳
var options = {}
domtoimage.toPng(node, options)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
domtoimage.toBlob(document.getElementById('my-node'))
.then(function (blob) {
console.log('blob', blob)
});
domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
link.href = dataUrl;
link.click();
});
function filter (node) {
return (node.tagName !== 'i');
}
domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
.then(function (dataUrl) {
/* do something */
});
var node = document.getElementById('my-node');
domtoimage.toPixelData(node)
.then(function (pixels) {
for (var y = 0; y < node.scrollHeight; ++y) {
for (var x = 0; x < node.scrollWidth; ++x) {
pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
/* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
}
}
});
Name | 類型 | Default | Description |
filter | Function | —— | 以DOM節(jié)點(diǎn)為參數(shù)的函數(shù)。如果傳遞的節(jié)點(diǎn)應(yīng)包含在輸出中,則應(yīng)返回true(排除節(jié)點(diǎn)意味著也排除其子節(jié)點(diǎn)) |
bgcolor | String | —— | 背景色的字符串值,任何有效的CSS顏色值。 |
height | Number | —— | 渲染前應(yīng)用于節(jié)點(diǎn)的高度(以像素為單位)。 |
width | Number | —— | 渲染前應(yīng)用于節(jié)點(diǎn)的寬度(以像素為單位)。 |
style | Object | —— | object對象,其屬性在渲染之前要復(fù)制到節(jié)點(diǎn)的樣式中。 |
quality | Number | 1.0 | 介于0和1之間的數(shù)字,表示JPEG圖像的圖像質(zhì)量(例如0.92=>92%)。默認(rèn)值為1.0(100%) |
cacheBust | Boolean | false | 設(shè)置為true可將當(dāng)前時間作為查詢字符串附加到URL請求以啟用清除緩存。 |
imagePlaceholder | Boolean | undefined | 獲取圖片失敗時使用圖片的數(shù)據(jù)URL作為占位符。默認(rèn)為未定義,并將在失敗的圖像上引發(fā)錯誤。 |
dom-to-image使用SVG的一個特性,它允許在標(biāo)記中包含任意HTML內(nèi)容。
dom-to-image.js
// Default impl options
var defaultOptions = {
// Default is to fail on error, no placeholder
imagePlaceholder: undefined,
// Default cache bust is false, it will use the cache
cacheBust: false
};
var domtoimage = {
toSvg: toSvg,
toPng: toPng,
toJpeg: toJpeg,
toBlob: toBlob,
toPixelData: toPixelData,
impl: {
fontFaces: fontFaces,
images: images,
util: util,
inliner: inliner,
options: {}
}
};
if (typeof module !== 'undefined')
module.exports = domtoimage;
else
global.domtoimage = domtoimage;
function toJpeg(node, options) {
options = options || {};
return draw(node, options)
.then(function (canvas) {
return canvas.toDataURL('image/jpeg', options.quality || 1.0);
});
}
復(fù)制代碼
function draw(domNode, options) {
return toSvg(domNode, options)
.then(util.makeImage)
.then(util.delay(100))
.then(function (image) {
var canvas = newCanvas(domNode);
canvas.getContext('2d').drawImage(image, 0, 0);
return canvas;
});
function newCanvas(domNode) {
var canvas = document.createElement('canvas');
canvas.width = options.width || util.width(domNode);
canvas.height = options.height || util.height(domNode);
if (options.bgcolor) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = options.bgcolor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
return canvas;
}
}
function toSvg(node, options) {
options = options || {};
copyOptions(options);
return Promise.resolve(node)
.then(function (node) {
return cloneNode(node, options.filter, true);
})
.then(embedFonts)
.then(inlineImages)
.then(applyOptions)
.then(function (clone) {
return makeSvgDataUri(clone,
options.width || util.width(node),
options.height || util.height(node)
);
});
function applyOptions(clone) {
if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
if (options.width) clone.style.width = options.width + 'px';
if (options.height) clone.style.height = options.height + 'px';
if (options.style)
Object.keys(options.style).forEach(function (property) {
clone.style[property] = options.style[property];
});
return clone;
}
}
作者:知其
https://juejin.cn/post/6988045156473634852
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。