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