web語義化

 

第一部分，什麼是語義化？其實簡單說來就是讓機器能夠讀懂內容。

Web語義化是指使用語義恰當的標籤，使頁面有良好的結構，頁面元素有含義，可以讓人和搜索引擎都容易理解。

1. 咱們可讓機器的理解能力愈來愈接近人類，人能看懂、聽懂的東西，機器也能理解；
2. 咱們應該在發佈內容的時候，就用機器可讀的、被普遍承認的語義信息來描述內容，來下降機器處理 Web 內容的難度（HTML 自己就已是朝這個方向邁出的一小步了）

3.  

5. 小提示：h1擁有最高的權值，在一個頁面中最好指使用1個h1來突出你的內容，太多的h1會分散其整個頁面的權重，對搜索引擎也是很是的不友好。

第二部分，web語義化的做用

1）利於機器識別，方便SEO；

2）代碼簡潔明瞭，利於閱讀和維護，方便之後擴展

3）利於團隊協做，減小出錯概率，使工做有個統一標準；

第三部分，如何實現代碼語義化

一、 首先要知道Web中的經常使用標籤有哪些，知道每一個標籤的具體含義和應用場合。這些知識網上有不少資料，好比 菜鳥教程 和 w3cSchool 。這裏補充一下， Code Guide 上有很全面的代碼書寫規範，建議你們也去看看 

2. 其次，本身多實踐。在敲代碼的時候，多想一想每一個地方的結構是否都符合Web語義化。在練習中不斷加深對Web語義化的理解和應用。 

3. 最後，多去模仿一些網站的代碼，看看別人設計的代碼是如何作到Web語義化的，多吸收別人的經驗和方法。

 

第四部分，寫html代碼時須要注意什麼？

1.)儘量少的使用無語義的標籤div和span；

　　2.)在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；

　　3.)不要使用純樣式標籤，如：b、font、u等，改用css設置。

　　4.)須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；

　　5.)使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；

　　6.)表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；

7.)每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。

8）圖片加alt屬性 寬  高

9）a連接加title屬性

第五部分，CSS類命名的語義化VS結構化方式

通常而言，CSS類名的語義化聲明方式應當考慮你的頁面中某個相對元素的」用意」，獨立於它的」定位」或確切的特性(結構化方式)。像left-bar, red-text, small-title…這些都屬於結構化定義的例子。

讓咱們看看下面這個例子:

　　…而如今咱們想把頁面中的元素調換一下位置，若是你使用的是結構化方式(1)，那麼你就要把全部CSS類名從新進行定義，由於它們的位置變了。在佈局(3)中，咱們看到元素都倒轉了: right-bar 如今成了 「left-bar」，而 left-content 成了 「right-content」。若是你使用語義化方式則避免了此類問題。

 

　　換句話說，使用語義化方式的話，你在修改網站佈局的時候能夠僅僅修改相關CSS類的屬性便可，而不用修改它們的類名了，若是網站的代碼很龐大，這將節省大量的時間。

關於語義化的一些建議:

　　在開始以前，我想推薦兩種簡單的編寫較好的CSS代碼的指導方針:

1. 爲CSS類名定義的時候，儘可能使用小寫字母，若是有兩個以上的單詞，在每一個單詞之間使用」-「符或單詞首字母大寫(第一個單詞除外)。如:」main-content」或」mainContent」。
2. 優化CSS代碼，僅建立關鍵主要的CSS類並從新爲子元素使用符合HTML標準的標籤(h1, h2, p, ul, li, blockquote,…)，例如,不要使用這種哦你那個方式:

<div class=」main」>
    <div class=」main-title」>…</div>
    <div class=」main-paragraph」>…</div>
</div>

而要這樣寫:

<div class=「main」>
    <h1>…</h1>
    <p>…</p>
</div>

三欄佈局中使用語義化方式的例子

　　讓咱們來經過這個簡單的例子講解一下如何爲經典的三欄佈局使用語義化方式命名:

　　　使用語義化方式爲CSS命名能夠像這樣:

#container{…}
/*—- Top section —-*/
    #header{…}
    #navbar{…}
    /*—- Main —-*/
    #menu{…}
    #main{…}
    #sidebar{…}
    /*—- Footer —-*/
    #footer{…}

1. Container
   「#container」 就是將你頁面中的全部元素包在一塊兒的部分，這部分你還能夠命名爲: 「wrapper「, 「wrap「, 「page「.
2. Header
   「#header」 是網站頁面的頭部區域，通常來說，它包含網站的logo和一些其餘元素。這部分你還能夠命名爲:」top「, 「logo「, 「page-header」 (或 pageHeader).
3. Navbar
   「#navbar「等同於橫向的導航欄，是最典型的網頁元素。這部分你還能夠命名爲:「nav」, 「navigation」, 「nav-wrapper」.
4. Menu
   「#Menu」區域包含通常的連接和菜單，這部分你還能夠命名爲: 「sub-nav 「, 「links「.
5. Main
   「#Main」是網站的主要區域，若是是博客的話它將包含你的日誌。這部分你還能夠命名爲: 「content「, 「main-content」 (or 「mainContent」)。
6. Sidebar
   「#Sidebar」 部分能夠包含網站的次要內容，好比最近更新內容列表、關於網站的介紹或廣告元素等…這部分你還能夠命名爲: 「sub-nav「, 「side-panel「, 「secondary-content「.
7. Footer「#Footer」包含網站的一些附加信息，這部分你還能夠命名爲: 「copyright「.