W3C標準理解

概念:W3C標準  

中文名:萬維網聯盟,外文名:World Wide Web Consortium          

萬維網聯盟標準不是某一個標準,而是一些列標準的集合。網頁主要有三部分組成:結構(Structure)、表現(Presentation)、行爲(Behavior)。

對應的標準也有三方面:結構化標準主要包括XHTML和XML,表現標準語言主要包括CSS、行爲標準主要包括(如W3C DOM)、ECMAScript等。這些標準大部分是W3C起草發佈,也有一是其他標準組織制定的標準,比如ECMAScript(European Computer Manufacturers Association)的ECMAScript的標準。

 

目的:爲什麼要遵循標準

用一個程序語言來說,我們是轉換器........adapter,我們想方設法讓我們的頁面、我們的程序能夠支持所有瀏覽器,能夠滿足儘可能多的用戶。我們要滿足所有的用戶,即使做不到,我們也要滿足我們技術範圍之內的所有用戶。

目標:一個標準的製作的網站,讓你壓根感覺不到跟標準有關。

受衆: 所有UI設計師、技術工程師、運行維護人員。

標準規範

1、 需要聲明(DOCTYPE)

DOCTYPE(document type)文檔類型的簡寫,用來說明你用的XHTML或者HTML是什麼版本。其中DTD叫文檔類型定義,裏面包含了文檔的規則,瀏覽器就根據你定義的DTD來解釋你頁面的標識,並展現出來。要建立符合標準的網頁,DOCTYPE聲明是必不可少的關鍵組成部分;除非你的XHTML確定了一個正確的DOCTYPE,否則你的標識和css都不會生效。 有過度的(Transitional)、嚴格的(strict)、框架的(frameset)。

參考https://blog.csdn.net/erdfty/article/details/81364064

2、需要定義語言編碼

<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
注:如果忘記了定義語言編碼,可能會出現頁面亂碼現象。

3、JavaScript定義

Js必須要用<script language="javascript" type="text/javascript">來開頭定義,以保證在不支持js的瀏覽器上直接顯示出來。

4、CSS定義

CSS必須要用<style type=“text/css”>開頭來定義,爲保證各瀏覽器的兼容性,在寫CSS時請都寫上數量單位,例如:錯誤:.space_10{padding-left:10} 正確:.space_10 {padding-left:10px}

5、使用註釋

正確的應用等號或者空格替換內部的虛線。<!--這裏是註釋============這裏是註釋-->

6、所有標籤的元素和屬性名字都必須使用小寫

與HTML不一樣,XHTML對大小寫是敏感的,<title>和<TITLE>是不同的標籤。XHTML要求所有的標籤和屬性的名字都必須使用小寫。

6、所有屬性值必須用引號括起來("" '')雙引號或單引號

7、把所有特殊符號用編碼表示

空格爲&nbsp; 、小於號(<)&lt、大於號(>)&gt、和號(&)&amp等。

8、所有屬性必須有屬性值

XHTML規定所有屬性都必須有個值,沒有值就是重複本身。

9、所有的標記都必須有相應的結束標記

雙標記:<div></div> 單標記:<img />

10、所有的標記都必須合理嵌套

<p><b></p></b>必須修改爲:<p><b></b></p> 

11、圖片添加有意義的alt屬性 

圖片加載失敗時可以用alt屬性表明圖片內容。同理添加文字鏈接的title屬性,幫助顯示不完整的內容顯示完整。

12、在form表單中增加label,以增加用戶友好度

<form>
 
    <labelfor="firstname">first name: </label>
 
    <inputtype="text" id="firstname"/>
 
</form>


以上是規範標準,結論:1、標籤規範可以提高搜索引擎對頁面的抓取效率,對SEO(搜索引擎優化)很有幫助。

2、儘量使用外鏈css樣式表和js腳本。是結構、表現和行爲分爲三塊,符合規範。同時提高頁面渲染速度,提高用戶的體驗。

3、樣式儘量少用行間樣式表,使結構與表現分離,標籤的id和class等屬性命名要做到見文知義,標籤越少,加載越快,用戶體驗提高,代碼維護簡單,便於改版

參看:https://www.w3cschool.cn/xuexiw3c/xuexiw3c-standards.html

 

注:JQuery不符合W3C標準

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章