web前端及HTML語義化的理解

標籤：裝置   權重   label   其他   使用   情況   str   平台   web前端   

1.什麼是web前端

　　WEB前端是由網頁設計與製作發展而來的，隨著工作的細化，需要有人完成美工圖到網頁的製作，從而出現了WEB前端開發這個詞。WEB前端開發主要是使用HTML、CSS、JavaScript技術，將美工提供的美工圖轉化為網頁。同時，需要顧及SEO以及背景資料。WEB前端，相當於是一個串連美工、後台以及使用者的中間平台。

2、什麼是HTML語義化？

　　1.)基本上都是圍繞著幾個主要的標籤，像標題（H1~H6）、列表（li）、強調（strong em）等等

　　2.)根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發人員閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

3、為什麼要語義化？

　　1.)為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看；

　　2.)使用者體驗：例如title、alt用於解釋名詞或解釋圖片資訊、label標籤的活用；

　　3.)有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；

　　4.)方便其他裝置解析（如螢幕助讀程式、盲人閱讀器、行動裝置）以意義的方式來渲染網頁；

　　5.)便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

4、寫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關聯起來。

 

 

 

web前端及HTML語義化的理解