HTML5和CSS3的時代到來了,新版2011版淘寶網首頁已全部使用HTML5,擁抱變化才是王道。為之漫筆翻譯的很好,看了一遍後,感覺理解了很多,強烈推薦其他做開發的童鞋尤其前端也來看看。
不僅讓我摸清了html4,xhtml1.0, xhtml2.0, html5之間的關系,也理解了為什麼會出現HTML5,同時,加緊推進在項目中應用HTML5。
--------------------------------------------------------------------------------
著名的阿西莫夫機器人三大法則:
機器人不得傷害人類,或袖手旁觀人類受傷害。
機器人必須服從人類命令,除非命令違反第一法則。
機器人必須自衛,只要不違背第一和第二法則。
--------------------------------------------------------------------------------
xhtml1.0與html4.0相同點:
兩個規范的內容是一樣的;
詞匯表是一樣的;
所有的元素是一樣;
所有的屬性也都是一樣的;
xhtml1.0與html4.0唯一不同點:
XHTML 1.0要求使用XML語法(嚴格的編碼風格)
//所有屬性都必須使用小寫字母;
//所有元素也必須使用小寫字母;
//所有屬性值都必須加引號;
//你還得記著使用結束標簽,記著對img和br要使用自結束標簽。
XHTML 1.1與xhtml1.0唯一的變化:
把文檔標記為XML文檔
//XML的錯誤處理模型:解析器如果遇到錯誤,停止解析。
//不能理解XML的浏覽器,用戶直接看不到這個網頁了。
XHTML 2特點(這個規范沒有完成):
仍然使用XML錯誤處理模型,你必須保證以XML文檔類型發送文檔;
有意不再向後兼容已有的HTML的各個版本,開發人員和浏覽器廠商永遠不會支持它。
真正廣泛地應用的設計原理:
發送時要保守;接收時要開放。
//作為專業人士,在發送文檔的時候,我們會盡量保守一些,盡量采用最佳實踐,盡量確保文檔格式良好。
//但從浏覽器的角度說,它們必須以開放的姿態去接收任何文檔。
--------------------------------------------------------------------------------
HTML5
1、2004成立了Web Hypertext Applications Technology Working Group(Web超文本應用技術工作組,WHATWG),完全脫離W3C。
2、W3C在2007年組建了HTML5工作組,在WHATWG工作成果的基礎上繼續開展工作。
--------------------------------------------------------------------------------
HTML5設計原理一:避免不必要的復雜性
代碼如下一、DOCTYPE的寫法:
//HTML 4.01:
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "4/strict.dtd">
//XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "1/DTD/xhtml1-strict.dtd">
//HTML5:
<!DOCTYPE html>//
這種寫法會觸發浏覽器的標准模式。備注:doctype它不是寫給浏覽器看的,Doctype是寫給驗證器看的。讓驗證器按照該doctype來驗證我的文檔。
二、指定文檔的字符編碼的寫法:
代碼如下//HTML 4.01:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
//XHTML 1.0:
<?xml version="1.0" encoding="UTF-8" ?>
//HTML5:
<meta charset="utf-8"/>
備注:此簡短寫法,它不僅適用於最新版本的浏覽器,只要是今天還有人在用的浏覽器都同樣有效。
HTML5其他簡潔寫法:
代碼如下<link href="#" rel="stylesheet"/>
//無需再寫type="text/css",否則那就是重復自己了
<script></script>
//無需再寫使用的腳本語言 type="text/javascript"HTML5設計原理二:支持已有的內容
<img src="foo" alt="bar" />
<p class="foo">Hello world</p>
<img src="foo" alt="bar">
<p class="foo">Hello world
<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello world</p>
<img src=foo alt=bar>
<p class=foo>Hello world</p>
備注:HTML5支持已存在的各種不嚴謹的寫法。
在JavaScript,你可以在每條語句末尾加上分號,但不是必需的,因為JavaScript會自動插入分號……JSlint確實是個非常棒的工具,規范統一JavaScript編碼風格,在團隊項目非常有用。
--------------------------------------------------------------------------------
HTML5設計原理三:解決現實的問題
給整塊內容(含多個塊級元素)加個鏈接
代碼如下//HTML 4.01 XHTML 1.0:
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>
//HTML5:
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
備注:這種寫法其實早就已經存在於浏覽器中了,但以前這樣寫是不合乎規范的,現在我們把標准改了,允許你這樣寫了。
--------------------------------------------------------------------------------
HTML5設計原理四:求真務實
新增語義元素涉及頭部(header)、腳部(footer)、分區(section)、文章(article)……
代碼如下//HTML 4.01 XHTML 1.0:
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>
//HTML5:
<body>
<header>...</header>
<nav>...</nav>
<div id="main">...</div>
<aside>...</aside>
<footer>...</footer>
</body>
備注:新元素section、article、aside和nav代表了一種新的內容模型,一種HTML中前所未有的內容模型——給內容分區。
將新元素作為類的替代品更有價值,因為這些元素在一個頁面中不止可以使用一次,而是可以使用多次,可嵌套使用。
其中最為通用的section,可以說是與內容最相關的一個。而article則是一種特殊的section。Aside呢,是一種特殊的section。最後,Nav也是一種特殊的section。
/
代碼如下/HTML 4.01 XHTML 1.0:
<div class="item">
<h2>...</h2>
<div class="meta">...</div>
<div class="content">
...
</div>
<div class="links">...</div>
</div>
//HTML5:
<section class="item">
<header><h1>.