w3c 規范原味解讀 - 1 介紹

說明

解讀不是翻譯,因此不會逐句涵蓋 w3c 的官方文檔,我本意將站在一個初學者的角度,將需要注意的地方記錄下來,同時站在一個實用主義者角度,將工作中不常用,但與標準差異較大的理解記錄下來,主要意圖是記錄自己的理解,和幫助日后索引與查詢,如果讀者希望地毯式理解 w3c 標準,建議逐字閱讀 w3c 官方英文文檔。

HTML

the Hypertext Markup Language 超文本標記語言

HTML 乍一看可能給人感覺到一些荒謬,因為其規范是在幾十年間,許多不同背景的開發者共同貢獻的,很多地方可能無法很全局的把握。

為了簡化難度,沒有暴露多線程的特征給開發者,HTML 和 DOM API 也被設計為無法檢測是否有其它腳本正在同時運行。就算是 webWorker,其實現原理可以認為是在同一個瀏覽器上下文序列化執行所有腳本。

Tag

< > / 構成,某些標簽可以不閉合,比如 <br>

標簽可以嵌套,比如:

<p>This <em>is <strong>correct</strong>.</em></p>

但不能交叉嵌套:

<p>This is <em>very <strong>wrong</em>!</strong></p>

Attribute

如果屬性值不包含空格、" ' ` = < > ,就可以不用雙引號,以下寫法都是正確的:

<!-- empty attributes -->
<input disabled>
<input disabled="">
<input disabled=""/>

<!-- attributes with a value -->
<input name=address>
<input name='address'>
<input name="address">

拓展機制

HTML 提供了很多方法拓展語義,確保使用安全的方法拓展語義,保證不會產生副作用,例如:

  • class 可以被瀏覽器廣泛支持
  • data - * 屬性可以確保不被瀏覽器使用,安全的傳遞數據
  • 使用 <meta name="" content=""> 描述頁面數據
  • 通過 rel="" 定義鏈接類型
  • <script type =""> 可以定義自定義數據類型,通過本地或者服務器在頁面嵌入原生數據
  • 使用 embed 嵌入插件,比如 flash
  • 使用 js 拓展功能

解析

HTML 標記在瀏覽器被解析成 DOM 樹,存儲在內存中。包括的節點類型:DocumentType,Element,Text,Comment,以及不常見的 ProcessingInstruction。

例如:

<!DOCTYPE html>
<html>
 <head>
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
</html>

會被解析為:

image
image

可以看到文字雖然沒有被標簽包裹,但在 DOM 樹中與標簽一樣會生成 #text 節點。不過 #text 節點比預期的要多,因為代碼中包含很多空格與換行,不過,所有 <head> 之前的空白會被忽略,所有 </body> 之后的空白都會被提前到 </body> 的結尾處。

任何 DOM 節點都可以被嵌入的 script 腳本操控。

事件觸發

dom的回調,比如 img 標簽的 onLoad,雖然是異步事件,但可能在 dom 渲染過程中觸發,因此如下的 js 監聽可能不會生效:

 [站外圖片上傳中……(2)]
 <!-- the 'load' event might fire here while the parser is taking a
      break, in which case you will not see it! -->
 <script>
  var img = document.getElementById('games');
  img.onload = gamesLogoHasLoaded; // might never fire!
 </script>

XHTML

是 HTML 的變體,因為使用了 XML 語法。XHTML 是 XML 的應用程序。

如果文檔以 text / html MIME 類型傳輸,瀏覽器會作為 HTML 類型處理,目前使用 html 5.0 版本的規范,也就是 "HTML 5"。

如果使用 XML MIME 類型,例如 application / xhtml + xml 時,會被瀏覽器視為 XML 文檔,使用 XHTML 5.0 版本的規范,稱為 "XHTML 5"。與 HTML 5 的區別是,XHTML 5 對 HTML 標簽語法檢查的更嚴格,細小的語法錯誤都會阻止文檔渲染,比如 XHTML 中的 DOM 語法不允許 noscript 標簽,也不允許 --> 的注釋。

CSS

Cascading Style Sheets 層疊樣式表
讓呈現樣式與結構分離。

HTML 內聯的樣式屬性因為不利于維護,增大文件體積,已經逐漸廢棄,例如 <font color=""> ,僅保留了 style 屬性。

WebFonts

在網頁使用字體,無需在系統安裝,正在打造的網頁字體通用標準是: WOFF

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • 之前通過深入學習DOM的相關知識,看了慕課網DOM探索之基礎詳解篇這個視頻(在最近看第三遍的時候,準備記錄一點東西...
    微醺歲月閱讀 4,508評論 2 61
  • 格式后期處理。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,145評論 0 17
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,837評論 18 139
  • 1、 記得剛上大學,搬到新寢室的時候,一開寢室門,一個胖子四仰八叉的躺在對門的床鋪上,胖胖的身軀把小床占得滿滿當當...
    皓月轉廊閱讀 525評論 0 3