整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
站文章怎么添加圖片？在進(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)系。
