近幾日多用了點心在工作室小站——悠然天空工作室(L-SKY.STUDIO)上面，以前一直不重視它主要是因為客戶幾乎都是來自線下，弄個小站的目的僅僅是給自己一個空間，“為所欲為”罷了!回到家20多天了，前期一直在弄團隊博客——青裝營銷策劃機構，百度已經開始收錄了，希望過年這段時間大家也別放松，多多給力才好!
這幾天給工作室的后臺添加了在線生成Robots.txt文件和在線訪客這兩個功能，測試了一段時間發(fā)現(xiàn)各家蜘蛛大神來我這里還是比較勤快的，尤其是雅虎中國和百度，不過基本上都是首頁，內鏈的比較少。前幾天在寫蜘蛛爬行記錄功能的時候，一不小心把百度和谷歌兩家的蜘蛛關在門外了，搞的平日2天一更新的快照到現(xiàn)在都5天了還不更新!為了吸引蜘蛛大大們的照顧，重新把前臺的代碼翻了出來，結合《搜索引擎優(yōu)化的一些規(guī)則》一文里面的要點對代碼整體進行了優(yōu)化。請注意：我下面要說的其實并不是SEO優(yōu)化，如果你想學習SEO優(yōu)化、營銷策劃等知識，請移步我們的團隊博客——青裝營銷策劃機構，那里絕對有你想要的一切!
這次我做的站內優(yōu)化重中之重其實就是下面一點：
代碼語義化
代碼語義化，絕對算得上一個老生常談的問題了。百度一下，你會發(fā)現(xiàn)大把的關于代碼語義化的文章。那么，為什么要語義化代碼?其實我們知道html里面的每一個標簽都有它自己的特定意義，而語義化這些標簽的意思，就是要我們在適當的位置使用合適的標簽，以此達到更好的讓人和機器(這里說的機器可以理解為搜索引擎的蜘蛛大神們)都一目了然。更多信息請前往我們的團隊博客了解……
如何在適當的位置使用合適的標簽?
這是一個簡單的理解邏輯。比如，h1~h6標簽是用于標題類的;ul是用于無序列表的;ol是用于有充列表的;dl是用于定義列表的;em，strong標簽是用來強調的…說白了，HTML標簽的每個英文釋義決定了它的語義(本文后面，我會放一份常用HTML標簽的英文釋義對照表供參考)。
什么樣的代碼才可以讓人和機器都能一目了然?
檢查HTML頁面是否語義化最好的方法，便是去掉頁面的CSS鏈接，看網頁結構是否井然有序，頁面是否仍然有很好的可讀性。為什么可以這么說?大家都知道瀏覽器都有默認的樣式(推薦使用Chrome的Web Developer Tools for Chrome 插件，或者Firefox的Web Developer 插件)，比如h1~h6，會有加粗/字號依次減小、上下邊距的默認樣式，ul、ol、dl都有默認的項目符號，strong默認有加粗的樣式…所以，同樣的頁面，語義化良好的HTML可以在頁面CSS去掉的情況下依然有良好的表現(xiàn)。
還有一點，好的語義化編碼，對搜索引擎有更好的友好性。搜索蜘蛛是不認識你的CSS的，但它能識別HTML標簽。
下面是一個簡單的例子：
通過上面的簡單的示例和沒有任何CSS定義情況下的效果圖，該明白了兩者的區(qū)別了吧。如果你在學習HTML5，它的header、footer、sidebar、article等元素都是新增的語義化標簽.
HTML編碼語義化是邁向高質量前端開發(fā)的一步。即更好的遵循Web標準，也能讓你頁面在去掉樣式后依然井然有序。關于語義化更多更詳細的介紹，可以自行Google或閱讀阿當的《Web前端開發(fā)修煉之道》 第三章。
附: 標簽語義中英文對照表(刪除線為html5不支持的標簽)
如果無視標簽語義和默認樣式，所有標簽都用div，其實也是可以寫出來視覺效果很好的頁面，只要你靈活運用CSS。但是那樣的話雖然視覺上達到了要求，但是整個頁面一點語義都沒有，搜索引擎還是看不懂。所以，要記住：
結構(html)才是重點，樣式(css)是用來修飾結構的。所以，要先確定html，確定標簽，再來選用合適的css。
一般來說，所有的標簽都會有一個默認的樣式，所以一個簡單的判斷網頁標簽語義是否良好的方法就是：去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性。
另外，值得重點提及的是h標簽，h標簽的語意是標題，搜索引擎對這個標簽比較敏感，特別是h1和h2。一個語義良好的頁面，h標簽應該是完整有序沒有斷層的。也就是說，要h1，h2，h3，h4這樣推下來，不要h1，h3，h4，漏掉h2。一個結構良好的網頁，h標簽可以組織起一個網頁的大綱。
本文由悠然白鹿原創(chuàng) 轉載請保留原文地址：，歡迎加入，青裝營銷策劃交流群共同交流學習：36936294
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
