對W3C標準，對錶現與數據分離、Web語義化等有深入理解

看了好多微博總結了一下概念，首先先介紹一下W3C

啥是W3C不是wc，這個創建於 1994 年的組織，其宗旨是經過促進通用協議的發展並確保其通用型，以激發 web 世界的所有潛能，

指萬維網聯盟（World Wide Web Consortium）一個很牛x的組織。

代碼標準 w3c官網也能夠借鑑w3school對W3C的理解

W3C的標準不是某一個標準，而是一系列標準的集合。

由於網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。

因此W3C對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行爲標準主要包括對象模型（如W3C DOM）、ECMAScript等。

下面是w3c官網詳細的介紹：讓你更通俗易懂的瞭解w3c的標準

 

結構標準語言

1.標籤的書寫，須要開始和結束。單便籤除外；
2.塊級元素不能放在p標籤裏面。li內能夠包含div標籤；
3.塊元素裏面能夠放在塊和內聯，特殊的 p和 h1—h6裏面不要放塊元素，li和div能夠放不少。由於這兩個標籤，自己就有容器的屬性；
4.內聯裏面要放內聯，不要放塊；
5.結構與表現分離；
6.命名必定要規範；

表現標準語言

css的書寫，首先要儘量使用外部引入的方式，由於結構層儘量的減小表現層的代碼過多出現。達到分離的目的。css的選擇器有哪些，那些屬性能夠繼承，那些不能夠繼承。他們之間的優先級是怎麼樣的。怎麼用最簡潔的css代碼表達設計者的想法，而不僅是實現設計者的想法就沒事了。咱們要的是代碼簡潔，代碼過多，反而讓瀏覽器解析不少，浪費時間。

行爲標準

主要是javascript中的知識。好比DOM、ECMAScript。使用javascript中的標準，便可。通常對於用戶的行爲，或者說頁面上的動態效果的一些特殊實現，咱們能夠會考慮到使用javascript來進行書寫，可是代碼的可複用性，模塊化。變量，做用域。

 

表現與數據分離：

表現：顧名思義，就是表達出來的現象，在前端來看，就是html+css，就是日常所看到的的網頁的架子； 
數據：通常是從後端數據庫或從哪爬過來的數據，而後在前臺顯示出來，便是網頁中各個結構上的內容；

說到這，你會有疑問了，其實就是MVC。0.0

實現表現與數據分離的好處與代價是什麼？ 
好處：模塊化 –> 容易測試 –> 下降bug頻率； 
壞處：程序結構複雜，比較耗時，上手有學習曲線；

什麼樣的狀況下須要用到這種思想？ 
須要：項目具備明顯的數據需求，好比要與不少Service交互，業務流程複雜，表單不少； 
不須要：項目是典型的靜態信息展現型頁面，或是微型的內部app，或是產品idea驗證時期的MVP；

如何有效的實踐這種思想？ 
學習開發 –> 學習測試 –> 學習「測試驅動開發」 –> 學習真正的開發； 
不會測試而誇誇其談表現與數據分離的人，你離他們要遠一點，哪天項目搞砸了，別連累到你；

　　

web語義化

在廣義方面
對於當前的 Web 而言，HTML 是聯繫大多數 Web 資源的紐帶，也是內容的載體。在 Web 被剛剛設計出來的時候，Tim Berners-Lee 可能不會想到它如今會達到的規模以及深刻到咱們生活的那麼多方面。也許起初的想法很簡單：用來發布 Web 內容和資源的索引，方便人們查看。

可是隨着 Web 規模的不斷擴大，信息量之大已經不在人肉處理的範圍以內了。這個時候人們開始用機器來處理 Web 上發佈的各類內容，搜索引擎就誕生了。再後來，人們又設計了各類智能程序來對索引好的內容做各類處理和挖掘。因此讓機器可以更好地讀懂 Web 上發佈的各類內容就變得愈來愈重要。

其實 HTML 在剛開始設計出來的時候就是帶有必定的「語義」的，包括段落、表格、圖片、標題等等，但這些更多地只是方便瀏覽器等 UA 對它們做合適的處理。但逐漸地，機器也要藉助 HTML 提供的語義以及天然語言處理的手段來「讀懂」它們從網上獲取的 HTML 文檔，但它們沒法讀懂例如「紅色的文字」或者是深度嵌套的表格佈局中內容的含義，由於太多已有的內容都是專門爲了可視化的瀏覽器設計的。面對這種狀況，出現了兩種觀點：

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

在代碼編譯方面
最初的HTML中如h1~h六、thead、ul、ol等標籤，經過標籤的語義，最初設計的想法，來達到語義化的要求。如標題、表頭、無序、有序列表，搜索引擎很好的利用了這些語義化標籤抓取內容

後來，最初定義的HTML語義化標籤，不足以實現對Web頁面各個部分的功能或位置描述，因此Web前端人員利用HTML標籤的id和class屬性，進一步對HTML標籤進行描述，如對頁腳HTML標籤添加如id=」footer」或者class=」footer」的屬性（值），以「無聲」的方式在不一樣的前端程序員或者先後端程序員間實現交流。

制定HTML5的W3C組織採用了諸如header、footer、section等語義化標籤，來進行頁面佈局的設計想法，彌補了採用id=」header」或者class=」section」等。

更深層次的語義化，是本身在團隊合做的過程當中，對於須要聲明的變量和class，id。儘量使用彼此能理解的英文。這樣減小合做的成本，加快合做的效率。

實現表現與數據分離的優勢和缺點：
       優勢是： 模塊化 --> 容易測試 --> 下降bug頻率
       缺點是：程序結構複雜，比較耗時，上手有學習曲線
應用場景：
       項目具備明顯的數據需求，好比要與不少Service交互，業務流程複雜，表單不少
非應用場景：
      項目是典型的靜態信息展現型頁面，或是微型的內部app，或是產品idea驗證時期的MVP。

大概就總結這些，稍微瞭解就好，祝願各位大牛早日財務自由