最近在讀阿當?shù)摹禬eb前端開發(fā)修煉之道》 ，其中有不少東西值得前端路上的朋友學習。 結合自己日常編碼的一些經(jīng)驗， 我將陸陸續(xù)續(xù)將一些從書中學到的以及自己總結的一些前端方面的技巧分享給大家。
Html語義化， 似乎是一個老生常談的問題。 Google 一下，也有大把關于語義化的文章。 為什么要語義化標簽? 我是這樣認為的:Html的每個標簽都有它特定的意義，而語義化，就是讓我們在適當?shù)奈恢糜眠m當?shù)臉撕灒?以更好的讓人和機器(機器可理解為瀏覽器可理解為搜索引擎)都一目了然。 如果我的解釋不夠明了， 請Google。
如何在合適的位置使用合適的標簽?
這是一個簡單的理解邏輯。 比如， h1~h6標簽是用于標題類的; ul是用于無序列表的; ol是用于有充列表的; dl是用于定義列表的; em，strong標簽是用來強調(diào)的…說白了， Html標簽的每個英文釋義決定了它的語義(本文后面， 我會放一份常用Html標簽的英文釋義對照表供參考)。
什么是讓人和機器都能一目了然?
檢查Html頁面是否語義化最好的方法， 便是去掉頁面的Css鏈接， 看網(wǎng)頁結構是否井然有序， 頁面是否仍然有很好的可讀性。 為什么可以這么說? 大家都知道瀏覽器都有默認的樣式(推薦使用Chrome的Web Developer Tools for Chrome 插件， 或者Firefox的Web Developer 插件)， 比如h1~h6， 會有加粗/字號依次減小、上下邊距的默認樣式， ul、ol、dl都有默認的項目符號， strong默認有加粗的樣式…所以， 同樣的頁面， 語義化良好的Html可以在頁面Css去掉的情況下依然有良好的表現(xiàn)。
還有一點， 好的語義化編碼， 對搜索引擎有更好的友好性。 搜索蜘蛛是不認識你的Css的， 但它能識別Html標簽。
下面是一個簡單的例子:
<!--未語義化-->
<div id="header">
<div class="h1">Mr.Think的博客</div>
<div class="h2">專注Web前端技術,熱愛Php,崇尚簡單生活的凡夫俗子.</div>
</div>
<!--語義化之后-->
<div id="header">
<h1>Mr.Think的博客</h1>
<h2>專注Web前端技術,熱愛Php,崇尚簡單生活的凡夫俗子.</h2>
</div>
通過上面的簡單的示例和沒有任何Css定義情況下的效果圖， 該明白了兩者的區(qū)別了吧。 如果你在學習Html5， 它的header、footer、sidebar、article等元素都是新增的語義化標簽。
Html編碼語義化是邁向高質量前端開發(fā)的一步。 即更好的遵循Web標準， 也能讓你頁面在去掉樣式后依然井然有序。 關于語義化更多更詳細的介紹， 可以自行Google或閱讀阿當?shù)摹禬eb前端開發(fā)修煉之道》 第三章。
附: 標簽語義中英文對照表
下面補充一下
1、什么是html語義化
選擇合適的html標簽，便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
2、為什么要語義化？
為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結構、代碼結構:為了裸奔時好看；
用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網(wǎng)頁；
便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
3、寫HTML代碼時應注意什么？
1. 盡可能少的使用無語義的標簽div和span；
2.在語義不明顯時，既可以使用div或者p時，盡量用p， 因為p在默認情況下有上下間距，對兼容特殊終端有利；
3.不要使用純樣式標簽和規(guī)范不支持的標簽，如：b、font、u、center，strike，menu等，改用css設置。
4.需要強調(diào)的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
5.使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
6.表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；
7.每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯(lián)起來。
8.不要省略某些標簽的屬性，
標簽的alt屬性的作用是當圖片不能正常顯示的時候的替換文字，標簽的title屬性可作為說明信息，并且當鼠標hover時顯示為提示信息。
雅虎一道面試題：
<P> 哥寫的不是HTML，是寂寞。<br><br> 我說：<br>不要迷戀哥，哥只是一個傳說
其中存在的問題：
1.html與xhtml標準的區(qū)別，xhtml有嚴謹?shù)慕Y構，標簽必須關閉，單標簽最后需要添加/來關閉，并且標簽都必須小寫；
2.結構和樣式的分離，不應該使用
來控制樣式，合理設計結構，換行的段落需要為每個段落都添加p，樣式需要利用css實現(xiàn);
3.合理利用標簽，注重標簽語義化，縮略可以用標注，“我”可以用<q>標記；
<blockquote>//代碼參考如下
<p>哥寫的不是<abbr title="Hypertext Markup Language">HTML</abbr>，是寂寞。</p>
<p><cite>我</cite>說：<q>不要迷戀哥，哥只是一個傳說</q></p>
以上就是Html技巧 語義化你的代碼 的詳細內(nèi)容，更多關于Html語義化的資料請關注腳本之家其它相關文章！
來源：腳本之家
鏈接：https://www.jb51.net/web/33912.html
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
