站文章怎么添加圖片?在進(jìn)行網(wǎng)站優(yōu)化時(shí),站內(nèi)文章的質(zhì)量很重要,其中除了需要撰寫高質(zhì)量的內(nèi)容,注意關(guān)鍵詞的密度布局這些,添加圖片也具有一定的優(yōu)化作用,有利于提升用戶的體驗(yàn)。那么如何在文章中添加圖片呢?
通常,在網(wǎng)站文章中添加圖片有手動(dòng)、半手動(dòng)和自動(dòng)這三種方法。
手動(dòng)添加圖片就是手動(dòng)點(diǎn)擊添加本地的圖片,這種方式的效率較低,而且需要自己找尋合適的圖片;半手動(dòng)添加圖片就是先處理好圖片并命名,打包上傳到服務(wù)器,然后利用工具批量插入圖片在服務(wù)器中的地址,找到圖片存儲(chǔ)文件夾,記錄其路徑,這樣文章發(fā)布時(shí)就避免手動(dòng)查找圖片,比純手動(dòng)添加效率高;自動(dòng)添加圖片就是利用插件來實(shí)現(xiàn)。有一些CMS程序中會(huì)有很多插件是可以使用的,如果沒有圖片添加的相關(guān)插件,可以找人開發(fā)一個(gè)。這個(gè)插件主要實(shí)現(xiàn)的功能是,按照指定的圖片作為底部圖層,而后在圖片上自動(dòng)生成文字,并且是以文章標(biāo)題為準(zhǔn),這樣這篇文章就有了專屬圖片。當(dāng)然,進(jìn)一步優(yōu)化就是實(shí)現(xiàn)不同文章位置插入圖片。這樣做的好處是,如果底層圖片沒有版權(quán),而且文字可以商用,也就避免了侵權(quán)的麻煩。
了解完如何在文章中添加圖片,對(duì)于添加的圖片還有一些問題是需要注意的。
在處理圖片時(shí),需要先確定圖片的正確大小,等上傳后發(fā)現(xiàn)尺寸不對(duì)再去修改是很浪費(fèi)時(shí)間的,而圖片太大會(huì)拖累網(wǎng)站的加載速度,這一點(diǎn)是需要注意的。另外,還需要考慮網(wǎng)站支持格式的問題,通常是jpg、png比較好。
搜索引擎是無法識(shí)別圖片的,必須用html標(biāo)簽中的alt標(biāo)簽屬性來識(shí)別,因此給圖片添加Alt標(biāo)簽是必不可少的操作,這有利于蜘蛛抓取。
圖文結(jié)合的文章能增加用戶的閱讀體驗(yàn),但是太多的圖片會(huì)有反效果,因此一篇文章中的一兩張圖片就足夠了。另外要注意,圖片太多也會(huì)拖累網(wǎng)站的加載速度,所以要控制圖片的數(shù)量,不僅是和文字要有一個(gè)平衡點(diǎn),還有和網(wǎng)站結(jié)構(gòu)也要有一個(gè)平衡點(diǎn)。
在文章中添加圖片當(dāng)然不是隨意添加的,應(yīng)該為該頁面配備符合主題的相關(guān)圖片,要注意網(wǎng)站圖片和網(wǎng)站內(nèi)容的相關(guān)聯(lián)性。
關(guān)于網(wǎng)站文章怎么添加圖片及圖片添加要注意的問題,我們就討論到這里,以上內(nèi)容僅供參考。對(duì)于網(wǎng)站圖片優(yōu)化的細(xì)節(jié)大家一定要多多注意,最好希望這篇能對(duì)大家進(jìn)行網(wǎng)站優(yōu)化有幫助。
維網(wǎng)和其它網(wǎng)絡(luò)類型最大的區(qū)別就是它在網(wǎng)頁上可呈現(xiàn)豐富多彩的色彩和圖像,還可以播放音頻、視頻,及把圖像作為鏈接使用。
網(wǎng)絡(luò)上流行的圖片格式主要有jpg、jpeg、png、gif等,以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮,是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會(huì)造成任何品質(zhì)的損失,且壓縮率高,支持動(dòng)畫效果,很適合互聯(lián)網(wǎng)平臺(tái),但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片,通常用來保存超過256色的圖片格式。JPEG壓縮過程會(huì)對(duì)一些圖像數(shù)據(jù)造成損失,這部分損失不影響圖片顯示,一般人眼是看不出來差異的。損失數(shù)據(jù)越多,圖片就越不清晰。
3、png格式
png是一種非破壞性的網(wǎng)頁圖像文件格式,它以最小的方式壓縮圖片且不造成圖片數(shù)據(jù)損失。它不僅支持像gif大部分優(yōu)點(diǎn),還支持48 bit的色彩,跨平臺(tái)的圖像亮度控制,更多層的透明度設(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>
一幅動(dòng)畫圖像:
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請(qǐng)注意,插入動(dòng)畫圖像的語法與插入普通圖像的語法沒有區(qū)別。</p>
</body>
</html>
效果如下:
替換文本屬性(Alt)
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。
<img src="boat.gif" alt="Big Boat">
當(dāng)瀏覽器無法載入圖像時(shí),替換文本屬性可告訴讀者他們失去的信息。此時(shí),瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣,這樣有助于更好地顯示信息,并且對(duì)于那些使用純文本瀏覽器的人來說是非常有用的。
圖像寬度和高度屬性
如下代碼,在網(wǎng)頁中插入一個(gè)寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />
圖片超鏈接
如下代碼,在網(wǎng)頁中對(duì)一個(gè)圖片進(jìn)行超鏈接設(shè)置,點(diǎn)擊這張圖片就會(huì)跳轉(zhuǎn)到其它頁面。
<a href="頁面路徑"><img src="/i/ct_netscape.jpg" /></a>
除了對(duì)整個(gè)圖片進(jìn)行超鏈接設(shè)置外,還可以將圖像劃分成不同區(qū)域進(jìn)行鏈接設(shè)置,比如一張地圖中給每個(gè)省份圖形進(jìn)行超鏈接。
圖像熱區(qū)鏈接,使用usemap 屬性通過#name指定到名叫name的map元素上,map定義了每個(gè)熱區(qū)點(diǎn)擊區(qū)域形狀、大小、坐標(biāo)等。
area標(biāo)簽的 shape 屬性有三種,rect 方形,circle 圓形,poly 多邊形。coords 屬性定義坐標(biāo)點(diǎn)位置,相對(duì)于圖片左上角位置。
示例代碼:
<!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)擊小行星會(huì)打開對(duì)應(yīng)的圖片。
到此網(wǎng)頁中使用圖片已經(jīng)大體介紹了,自己親手寫下,會(huì)加深印象,感謝關(guān)注。
上篇:前端入門——html 超鏈接
下篇:前端入門——html 如何在網(wǎng)頁中使用視頻音頻
了執(zhí)行Javascript,需要在HTML文件內(nèi)以特定的方式書寫JavaScript的代碼,JavaScript的書寫方法有多種,其執(zhí)行的流程也各不相同:
此種嵌入方法無法操作<script>之后的DOM元素。因?yàn)?lt;script>之后的DOM元素還未構(gòu)造,因此在<script>標(biāo)簽內(nèi)就無法取得位于其后的DOM元素。
此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行,async可以異步執(zhí)行。
此種嵌入方法在頁面讀取完后再對(duì)其執(zhí)行,所以可以對(duì)所有的DOM元素操作。
<body onload="alert('hello')">
window.onload = function(){alert('hello');};
當(dāng)window.onload事件觸發(fā)時(shí),頁面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成了。
//window.onload不能同時(shí)編寫多個(gè)。
//以下代碼無法正確執(zhí)行,結(jié)果只輸出第二個(gè)。
window.onload = function(){
alert("test1");
};
window.onload = function(){
alert("test2");
};
//$(document).ready()能同時(shí)編寫多個(gè)
//結(jié)果兩次都輸出
$(document).ready(function(){
alert("Hello World");
});
$(document).ready(function(){
alert("Hello again");
});
window.onload和body中onload也有些許區(qū)別:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script language="javascript">
window.onload = haha;
function haha(){console.log("window.onload");}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}</script>
</head>
<body onload="console.log('bodyonload');">
<div id="div1">a</div>
</body>
</html>
在IE10和FireFox下,結(jié)果為 :
"DOMContentLoaded"
"bodyonload"
說明body中的onload會(huì)覆蓋window.onload
在chrome下,結(jié)果為:
DOMContentLoaded
window.onload
bodyonload
然后,如果把javascript代碼移到最下面,結(jié)果又會(huì)是什么樣呢?
chrome和IE10、FireFox的結(jié)果竟然是一樣的:
DOMContentLoaded
window.onload
IE 10、Fire Fox可以理解,window.on load和body中的 on load 誰在下面就是誰覆蓋誰,只會(huì)執(zhí)行后面的那個(gè)。
onload方法可能需要等待時(shí)間,而本方法可以在完成HTML解析后發(fā)生的事件,減少等待時(shí)間。
在chrome、IE10和FireFox中,執(zhí)行結(jié)果是:DOMContentLoaded然后才是onload的輸出。所以說一般情況下,DOMContentLoaded事件要在window.onload之前執(zhí)行,當(dāng)DOM樹構(gòu)建完成的時(shí)候就會(huì)執(zhí)行DOMContentLoaded事件。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery2.js"></script>
<script language="javascript">
window.onload = haha;
function haha(){console.log(document.getElementById("div1"));}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}
</script>
</head>
<body>
<div id="div1">a</div>
</body>
</html>
如果你是個(gè)jQuery使用者,你可能會(huì)經(jīng)常使用$(document).ready();或者$(function(){}),這都是使用了DOMContentLoaded事件
5.1 使用原生js方法
動(dòng)態(tài)創(chuàng)建script標(biāo)簽,并指定script的src屬性
function loadJs(url, callback) {
var script = document.createElement('script');
script.type = "text/javascript";
if (typeof(callback) != "undefined") {
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
}
} else {
script.onload = function() {
callback();
}
}
}
script.src = url;
document.body.appendChild(script);
}
loadJs("test.js", function() {
alert('done');
});
還可以使用同樣的原理動(dòng)態(tài)加載css文件,只不過插入的的父節(jié)點(diǎn)是head標(biāo)簽。
5.2 使用document.write/writeln()方式
該種方式可以實(shí)現(xiàn)js文件的動(dòng)態(tài)加載,原理就是在重寫文檔流,這種方式會(huì)導(dǎo)致整個(gè)頁面重繪。
document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");
需要注意的是特殊字符的轉(zhuǎn)義。
5.3 使用jQuery
使用getScript(url,callback)方法實(shí)現(xiàn)動(dòng)態(tài)加載js文件
$.getScript('test.js',function(){
alert('done');
});
-End-
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。