整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          網(wǎng)站文章怎么添加圖片,有哪些問題要注意?

          站文章怎么添加圖片?在進(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比較好。

          給圖片添加Alt標(biāo)簽

          搜索引擎是無法識(shí)別圖片的,必須用html標(biāo)簽中的alt標(biāo)簽屬性來識(shí)別,因此給圖片添加Alt標(biāo)簽是必不可少的操作,這有利于蜘蛛抓取。

          所添加圖片的數(shù)量

          圖文結(jié)合的文章能增加用戶的閱讀體驗(yàn),但是太多的圖片會(huì)有反效果,因此一篇文章中的一兩張圖片就足夠了。另外要注意,圖片太多也會(huì)拖累網(wǎng)站的加載速度,所以要控制圖片的數(shù)量,不僅是和文字要有一個(gè)平衡點(diǎn),還有和網(wǎng)站結(jié)構(gòu)也要有一個(gè)平衡點(diǎn)。

          所添加圖片相關(guā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>

          創(chuàng)建圖像熱區(qū)鏈接

          除了對(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í)行的流程也各不相同:

          1 <script>標(biāo)簽嵌入

          此種嵌入方法無法操作<script>之后的DOM元素。因?yàn)?lt;script>之后的DOM元素還未構(gòu)造,因此在<script>標(biāo)簽內(nèi)就無法取得位于其后的DOM元素。

          2 讀取外部JavaScript文件

          此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行,async可以異步執(zhí)行。

          3 onload嵌入

          此種嵌入方法在頁面讀取完后再對(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è)。

          4 DOM ContentLoaded嵌入

          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 動(dòng)態(tài)載入JavaScript文件

          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-


          主站蜘蛛池模板: 一区二区三区视频观看| 亚洲熟女一区二区三区| 国产一区二区高清在线播放| 国产主播福利一区二区| 国偷自产Av一区二区三区吞精 | 97一区二区三区四区久久| 亚洲一区二区三区在线播放| 国偷自产视频一区二区久| 国产乱码一区二区三区四| 无码人妻精品一区二区三区东京热| 一区二区三区在线观看视频| 韩国精品福利一区二区三区| 无码人妻啪啪一区二区| 无码人妻精品一区二区三区99性| 无码人妻久久一区二区三区| 亚洲综合国产一区二区三区| 一区二区三区日本电影| 精品一区二区三区视频| 国产一区二区三区四| 无码精品人妻一区| 精品成人av一区二区三区| 久久精品一区二区三区中文字幕 | 麻豆AV无码精品一区二区| 成人区精品一区二区不卡亚洲| 亚洲一区二区三区久久久久| 日本一区二区三区爆乳| 亚洲av永久无码一区二区三区| 无码国产精品一区二区免费虚拟VR | 国产一区二区三区电影| 免费人妻精品一区二区三区| 天码av无码一区二区三区四区| 日韩有码一区二区| 中文字幕在线无码一区| 一区二区三区四区免费视频 | 国产免费av一区二区三区| 一区二区免费电影| 国产精品美女一区二区三区| 精品人伦一区二区三区潘金莲| 国产怡春院无码一区二区| 国产在线精品一区二区不卡| 精品国产一区二区三区不卡|