為什么圖片一定要設置width和height？一定要了解的！

果頁面有使用img標簽，那么img很建議設置width和height。目的是為了在網速差或者其它原因加載不出圖片的時候，保證布局不會亂。如下栗子，一個很普通的布局。

但是萬一出現什么情況，圖片加載不出來的話，建議的處理方式是第一種，顯示一張默認圖片，即使不顯示默認圖片，也讓圖片有一個占位的作用，保證布局不會亂！

如果圖片加載不出，img又沒有設置width和height的話，就會像下面這樣，布局亂了！

注意：

PC站，建議在img標簽的屬性設置width和height。這樣避免加載不出css而錯位。
手機站，建議用css設置img的width和height，因為手機站要做適配，在屬性設置width和height不靈活，比如使用rem布局，在屬性那里設置不了width和height。
如果圖片不固定，但是有一個max-width和max-height，那么建議在img的父元素設置width和height。img根據父元素的width和height設置max-width和max-height。

業在網站建設時，很多同時也做了手機端的網站，為了豐富網站的版面和內容，給網站添加了大量的圖片做美化。

網站的圖片是一個網站能給用戶最直觀的信息表現，而對于搜索引擎而言，蜘蛛在隨機抓取網站圖片時候的識別能力還沒有那么強。

如果文字很少，圖片很多也會給手機端網站SEO優化帶來一定的困難。

西安完美信息

不過，隨著搜索引擎算法的不斷成熟，現在百度也能抓取網站的圖片，

例如：網站的LOGO、以及和文章主題相關的圖片等等。

西安完美信息總結出了以下六種方法，協助我們優化網站和手機端的圖片，以達到優化友好，迅速被錄入的作用。

一、不要盜用圖片盡量原創

盡量自己做圖片，有很多免費的圖片素材，我們可以通過拼接，做出我們需要的圖片。

在平時工作的時候，發現和自己網站相關的圖片可以先保存下來，在本地做出分類和標記。

網站需要圖片的時候，看看相關的圖片，自己著手做一個圖片。這是一個長期積累的過程，隨之時間的增加，自己的素材量也會越來越大。熟練了再做圖片就得心應手了。

再這里特別要注意，現在很多圖片是有版權的，一點不要去使用那些有版權的圖片，不然不光會侵權，還會讓搜索引擎降低對你網站的信任值。

二、網站圖片保存路徑

這個問題很多站長都沒有注意，圖片在傳到到網站的時候，盡量把圖片保存在一個目錄下面，

或者根據網站欄目做好相應的圖片目錄，上傳的時候路徑要相對固定，方便蜘蛛抓取，蜘蛛在訪問到這個目錄的時候就會“知道”這個目錄里面保存的是圖片;

圖片文件命名最好使用一些有規律的或者意義的方法，可以使用時間、欄目名稱或者網站名稱來命名。

例如：SEO優化下面的圖片可以使用“SEOYH2018-12-26-36”這種命名，前面“SEOYH”是SEO優化的簡拼，中間是時間，最后是圖片的ID。

為什么要這么做呢?

其實這樣是培養搜索引擎蜘蛛抓取習慣，方便將來更快的識別網站圖片內容。讓蜘蛛抓的順心了，網站被收錄的幾率就增加了，何樂而不為呢!

三、圖片周圍要有相關文字

文章的開頭就說了，網站圖片是能把信息直接呈現給用戶一個方法，搜索引擎在抓取網站內容的時候，也會檢測這篇文章是否有配圖、視頻或者表格等等，

這些都是可以增加文章分數值的元素，其他的幾個形式暫時不表，這里我們只說說關于圖片周圍相關文字的介紹。

西安完美信息

首先圖片周邊文字要與圖片本身內容相符，例如你的文章說的是做網站優化，里面配圖是一道菜譜的圖片，這不是掛羊頭賣狗肉么?

用戶的訪問感會極差，搜索引擎通過相關算法識別這張圖片以后，也會覺得圖文不符，給你差評哦。

所以，每篇文章最少要配一張相應的圖片，而且在圖片的周圍要出現和你網站標題相關的內容。不但能幫助搜索引擎理解圖片，還可以增加文章的可讀性、用戶體驗友好度以及相關性。

四、圖片添加alt、title標簽

許多站長在添加網站圖片時可能沒有留意這些細節，有的可能覺得麻煩，希望大家千萬別有這種想法，這是大錯特錯的。

搜索引擎抓取網站圖片的時候，atl標簽是它首先抓取的，也是識別圖片內容最重要的核心因素之一，圖片的alt屬性是直接告訴搜索引擎這是啥網站圖片，以及這張要表達什么意思;

title標簽是用戶指向這張圖片的時候，會顯示的提示內容，這是增加用戶體驗度和增加網站關鍵詞的一個小技巧。

西安完美信息

還有就是這兩個屬性，會給有閱讀障礙的訪問者提供訪問的便利，例如：有盲人在訪問你網站的時候，他看不到屏幕上的內容，可能是通過讀屏軟件來閱讀的，如果有alt屬性，軟件會直接讀出alt屬性里的文字，給他們的訪問提供方便。

五、圖片的大小和分辨率

盡管兩者看起來有些相同，但還是有很大的差別，相同大小的圖片，分辨率更高的話，網站最終體積也會越大。這一點大家要搞清楚。

網站的上的圖片，一直以來都提倡用盡量小的圖片，去最大化呈現內容。為什么要這樣呢?

因為小尺寸的圖片會加載的更快，不會讓訪問者等待太久，特別是手機訪問的時候，由于手機上網速度和流量的限制，用戶更愿意訪問能立即打開的頁面，小尺寸圖片就更有優勢了。

在這里我們盡量做好平衡，在圖片不失真的情況下，尺寸最好盡量的小。

現在有很多在線給圖片瘦身的工具，各位站長可以去嘗試一下，把網站的圖片適當的壓縮一下，一方面可以減少你服務器帶寬的壓力，另外還能給用戶有流暢的體驗。

六、手機端自動適應

很多站長都遇到過網站在電腦訪問圖片顯示很正常，可是從手機端就會出現錯位等等情況，這就是大尺寸的圖片給不同尺寸的終端造成錯位和顯示不全的情況。

西安完美信息

其實這個問題很好解決，在添加圖片的時候寬高最好不要使用絕對大小，使用百分比就解決了。

具體說，CSS代碼不能指定像素寬度：width:xxxpx;只能指定百分比寬度：width:xx%;或者width:auto就可以了。

這樣做的目的也是為了讓百度的移動蜘蛛抓取的時候有個良好的體驗，這也是為了更符合百度移動落地頁體驗。

以上介紹了在網站SEO優化如何抓取手機網站圖片的一些技巧，其實本質就是為了給用戶更好的訪問體驗。

你做網站的時候本著這個目的，相信搜索引擎一定會青睞你的網站。

者：Isabella

博客：https://www.jianshu.com/u/e8ffabd1fca9

先看我

移動端（Android/iOS）開發的小伙伴，是不是覺得不需要學習web開發了？不能因為是web相關內容的而望而旋走是不是？畢竟大家都是大前端的，互相了解才能師夷長技以制夷對不對？（霧）

移動開發不等于只有app開發，所有的技術浪潮都可以融入到移動開發體系中。作為前端工程師，無論是對頁面的實現方式要求高大上，表現形式的完美，還是性能的極致，都是我們不斷追求的目標。

由于前端技術棧的不斷更新，效率提高，同樣的前端人數，能完成比以前更多的職責范圍。在不少企業，1個優秀的前端工程師就能搞定Web和移動端的開發，甚至負責一部分后端。移動端的同學還不趕緊上web的車？

css和html的關系？

既然總是先看臉，那就開始CSS的表演吧~

在Android開發中，都在xml里寫app的布局，那web中的html和css，到底是什么關系呢？

看圖比較直觀：

在web中，HTML是骨架，CSS是皮膚，JavaScript是肌肉。

而如果用一扇門比喻三者之間的關系：HTML是門的門板，CSS是門上的油漆或者花紋，JavaScript則是門的開關。

現在認真認識下CSS~

了解CSS

CSS的官方名字叫做層疊樣式表，他的出現是為了解決內容和表現分離的問題，一般存放在 .css 文件里。

CSS的出現，拯救了混亂的HTML，讓網頁的形式更加豐富多彩。

它最大貢獻就是：讓HTML從樣式中解脫苦海，實現了HTML專注去做結構呈現。而樣式交給CSS后，你完全可以放心地早點洗洗睡了！

如果JavaScript是網頁的魔法師，那么CSS就是網頁的美容師。

論美容師的重要

理論上講它可以規定網頁的一切表現，位置、顏色、大小、距離…設計稿上的所有效果都可以借助它一一呈現，但是在實際應用中配合功能和性能以及各方面的要求，導致設計師的構想并不一定能夠完整表達。

各類布局，都是為了美觀，而布局之美，根本是要理解透盒子模型，熟悉各種布局。

沒有一種東西是絕對好的，只有不斷地進步。

Remember that.

CSS組成與規則

組成：

兩個主要部分：選擇器，一條或者多條聲明。

樣式規則：

使用HTML時，需要遵從一定的規范。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，具體格式如下：

理論比較枯燥，看實際來感受下css的魅力吧！

怎樣用css實現下面布局效果呢？

九宮格圖

從上圖我們可以分析出如下需求：

圖片大小自適應；
圖片個數不同時，圖片按照指定方式排列；
圖片相鄰處有1px空白間隙。

以圖6為例，

來看如何用css一步一步實現效果。

float！

最容易想到的，也是最簡單的方案，就是 float 布局：

圖片大小自適應：寬度百分比，高度使用 padding-top 百分比
圖片個數不同時，圖片按照指定方式排列：使用 nth-child 偽類指定不同情況下的元素大小
圖片相鄰處有1px空白間隙：使用 border-box + border模擬邊框

<div class="float">
<div class="item">1</div>
...
<div class="item">6</div>
</div>

.float {
overflow: hidden;
}
.item {
float: left;
padding-top: 33.3%;
width: 33.3%;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
}
.item:nth-child(1) {
padding-top: 66.6%;
width: 66.6%;
}
.item:nth-child(2), .item:nth-child(3), .item:nth-child(6) {
border-right: 0 none;
}
.item:nth-child(1), .item:nth-child(2) {
border-top: 0 none;
}

但實際效果并不理想，如下圖：

float布局效果

可以看到 float 布局不能做到真正的流體布局。至少width要自己去算百分比。它的優點是DOM結構十分簡單，缺點是容易出現空白間隙錯位，優缺點都十分明顯，它更適用于js計算的版本。

還有誰？flex！

flex，即伸縮布局盒模型（Flexible Box）

可以將 flex 布局下的元素展示在同一水平、垂直方向上；
可以支持自動換行、換列；
可以指定 flex 布局下的元素如何分配空間，可以讓元素自動占滿父元素剩余空間；
可以指定 flex 布局下的元素的展示方向，排列方式

使用 flex 布局與 float 布局不同的地方在于，移動端目前主要還是-webkit-box，因此圖片個數不同時，我們需要使用不同的html，組合出不同的塊。

flex布局上下劃分

使用傳統css文檔流自上而下的方式來劃分，稱為上下劃分，如下圖:

上面一塊包含左側1個2/3的大塊，右側2個1/3的小塊，下面一塊則是3個1/3的小塊。

我們指定2/3的大塊寬度是66.6%，1/3的小塊寬度是33.3%（實際可以使用-webkit-box-flex來分配，這里為了下面的計算方便）。

主要實現：

<div class="wrap-box wrap-6">
<div class="flex-inner">
<div class="flex-box1 flex-item"></div>
<div class="flex-box2">
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</div>
<div class="flex-inner">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</div>

.wrap-box {
display: -webkit-box;
}

.flex-inner {
-webkit-box-flex: 1;
display: -webkit-box;
}

.flex-item {
-webkit-box-flex: 1;
position: relative;
}
.wrap-6 {
-webkit-box-orient: horizontal;
}
.wrap-6 .flex-inner {
-webkit-box-flex: 0;
-webkit-box-orient: vertical;
}
.wrap-6 .flex-inner:first-child {
width: 66.6%;
}
.wrap-6 .flex-inner:last-child {
width: 33.3%;
}
.wrap-6 .flex-item {
padding-top: 100%;
}
.wrap-6 .flex-box2 .flex-item {
padding-top: 50%;
}
.wrap-6 .flex-box2 {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.wrap-6 .flex-inner:first-child,
.wrap-6 .flex-box2 .flex-item:first-child {
margin-right: 1px;
}
.wrap-6 .flex-box1,
.wrap-6 .flex-inner:last-child .flex-item:first-child,
.wrap-6 .flex-inner:last-child .flex-item:nth-child(2) {
margin-bottom: 1px;
}

實現效果：

中間那條豎空白間隙錯位了，為什么？按照預期我們上面塊左側寬度66.6%，下面塊左側寬度33.3% + 33.3%，兩個寬度應該相等才對。

然而我們忽略了flex一個重要特性，子元素會自動占滿父元素剩余空間，這時子元素寬度計算受flex控制，下面塊的3個子元素寬度計算并非一定是相等的，會有些許差異，此時66.6% != 33.3% + 33.3%。

怎么破！別急，冷靜下來重新思考如何劃分。

flex左右劃分

問題在于豎間隙涉及到的左右側寬度計算不穩定，既然如此，我們可以考慮依據豎間隙左右劃分，排除不穩定因素，如下圖：

這樣就解決了豎間隙錯位問題，但我們依然有所擔心，中間的橫間隙會錯位嗎？我們來算一下。

整體父元素寬度確定，為W；整體父元素高度由子元素撐開，不確定；

左側大塊高度：左側flex父元素寬度（W * 66.6%） * 100% = W * 66.6%；

左側小塊高度：左側flex父元素寬度（ W * 66.6%） * 50% = W * 33.3%；

右側小塊高度：右側flex父元素寬度（ W * 33.3%） * 100% = W * 33.3%。

依然是66.6%與33.3% + 33.3%的等式，但這次高度計算會受 flex 影響嗎？

不會，因為此時整體父元素的高度是不確定的，是由子元素內容撐開的，flex的高度也是由子元素來撐開的。

最終 66.6% === 33.3% + 33.3%。

實際效果：

Perfect~

css是不是很好用？

這篇的概念先介紹這么多了，后續再做深入學習~

參考文檔：

Flex布局的基本概念https://juejin.im/post/5c0731e951882516da0e373d
我就是要用CSS實現http://www.alloyteam.com/2016/01/let-see-css-world

與內容相關聯文章：

蘋果手機不能在中國銷售了！那iOS開發豈不是。。。
你真的認識View嗎？
分頁加載哪家強？Paging 來幫忙！

等等，先別走！「碼個蛋」又有活動了！參與活動不但可以培養自己的好習慣，還能拿到「碼個蛋」IP系列專屬獎品，速度要快...

今日問題：

移動端的小伙伴上web的車了嗎？

留言格式：

打卡x 天，答：xxx。

告訴你一個小技巧：

只需3步，你將不會錯過任何一篇文章！

在線咨詢

上一篇：用css制作頭像漸變邊框
下一篇：ffmpeg RSTP基于Html5視頻監控直播工業設備健康度檢測應用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

為什么圖片一定要設置width和height？一定要了解的！

注意：

蘋果手機不能在中國銷售了！那iOS開發豈不是。。。

你真的認識View嗎？

分頁加載哪家強？Paging 來幫忙！

您的項目需求