關於web語義化

標籤：des   style   c   a   width   strong   

　　最近一直在忙著投簡曆，在投簡曆的時候，發現了一個名詞，叫web語義化，當時不太明白，什麼叫語義化，相信很多人也有我當時的疑問，在這裡我就把我最近學習到的，看到的總結一下，給大家提供一些解釋，希望對大家能有所協助。

　　所謂的web語義化，簡單的解釋下，就是將web的前端代碼寫成搜尋引擎更容易理解的形式，就像人與人通過普通話聊天一樣輕鬆，而不是和一個說方言的人聊天，雖然你大概能明白，但是有些費勁。同樣，一份語義化做的好的前台代碼，讀起來，一樣會是這個效果，舉個例子，很多人寫的前端代碼會是這個樣子：

<table>

　　 <tr>

    　　  <td colspan="2">aaaaa</td>

      </tr>

      <tr>

            <td>bbbb</td>                   <td>Name</td>  此處是作對比使用

            <td>cccc</td>                    <td>Age</td>

      </tr>

      <tr>

            <td>dddd</td>                   <td>biny</td>  此處是作對比用的

            <td>eeee</td>                    <td>23</td>

      </tr>

</table>

　　作為前端程式人員，我相信大家即使沒有頁面顯示也都會明白這個是什麼意思，但是搜尋引擎不明白，它不明白你table中寫的搜尋引擎bbbb或者Name是什麼意思，但是我們程式員能看懂Name是什麼意思，但是如果這個代碼寫的坑一點，就是像我寫的aaaa，bbbb，cccc，dddd那樣，我想，大家一定都懵了吧。不光電腦懵了，我相信哪位童鞋看到這樣的代碼，也都會瘋。所以，我們的代碼寫的既要便於編程人員讀懂，也要便於搜尋引擎讀懂，這便是web語義化的真諦。還是上面的代碼，如果換成這樣的寫法：

<table>

 　　<caption>List</caption>

        <thead>

            <tr>

                <th>Name</th>

                <th>Age</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>biny</td>

                <td>23</td>

            </tr>

        </tbody>

    </table>

　　

我想，如果是這樣的代碼，對於編碼人員咱們可以一眼就看出這是什麼意圖，對於搜尋引擎呢，也可以讀懂這個代碼的含義，而我們不難發現，所謂web語義化就是：用恰當的元素標籤，寫出結構合理，元素含義清楚的web前端代碼！這樣的代碼便於搜尋引擎和人們的理解。

下面是我從網上找的標籤語義，不全，歡迎大家補充！！！

標籤語義對照表

標籤名	英文全拼	中文翻譯
div（無語義）	division	分隔
span（無語義）	span	範圍
ol	ordered list	排序列表
ul	unordered list	不排序列表
li	list item	清單項目
dl	definition list	定義列表
dt	definition term	定義術語
dd	definition description	定義描述
h1~h6	header 1 to header 6	標題1到標題6
p	paragraph	段落
a	anchor	錨
var	variable	變數
pre	preformed	預定義格式
blockquote	block quotation	區區塊引述語
strong	strong	加重
em	emphasized	加重
b	bold	粗體
br	break	換行
font	font	字型
u	underlined	底線
fieldset	fieldset	域集
legend	legend	表徵圖
caption	caption	標題

還有center和font是不介意使用的，至於為什麼不介意使用，大家自己領悟吧，這個我目前解釋不好。

　　好了，關於web語義化，今天就說這麼多，該收拾收拾上課去了，如果再想到什麼，日後補充。如果對本文有什麼意見，請給我留言，謝謝啦，大家互相學習，互相進步！！！！