從HTML4遷移到HTML5

本章講述如何從 HTML4 遷移 到 HTML5.

本章演示了如何把一個HTML4頁面轉換為HTML5頁面，而不破壞原始的內容和結構。

你可以采用相同的方法，從XHTML遷移到HTML5.

典型 HTML4

典型 HTML5

一個典型的 HTML4 頁面

HTML4

body {

font-family: Verdana,sans-serif;

font-size: 0.9em;

}

div#header, div#footer {

padding: 10px;

color: white;

background-color: black;

}

div#content {

margin: 5px;

padding: 10px;

background-color: lightgrey;

}

div.article {

margin: 5px;

padding: 10px;

background-color: white;

}

div#menu ul {

padding: 0;

}

div#menu ul li {

display: inline;

margin: 5px;

}

Monday Times

• News
• Sports
• Weather

News Section

News Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.

News Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.

© 2016 Monday Times. All rights reserved.

修改為HTML5文檔類型

修改 doctype:

修改為 HTML5 doctype:

修改為 HTML5 編碼

修改 encoding 信息:

修改為 HTML5 encoding:

添加HTML5Shiv

所有現代瀏覽器都支持新的HTML5語義元素. 外，您還可以“教”舊瀏覽器如何處理“未知元素”.

然而，IE8和之前瀏覽器版本，不允許未知元素樣式. 因此，使用HTML5Shiv來實現

添加 HTML5Shiv:

HTML5Shiv 盡在 HTML5 瀏覽器支持

修改HTML5語義元素

現存的CSS包括 元素的 id和class樣式

body {

font-family: Verdana,sans-serif;

font-size: 0.9em;

}

div#header, div#footer {

padding: 10px;

color: white;

background-color: black;

}

div#content {

margin: 5px;

padding: 10px;

background-color: lightgrey;

}

div.article {

margin: 5px;

padding: 10px;

background-color: white;

}

div#menu ul {

padding: 0;

}

div#menu ul li {

display: inline;

margin: 5px;

}

使用HTML5的語義元素替換CSS樣式

body {

font-family: Verdana,sans-serif;

font-size: 0.9em;

}

header, footer {

padding: 10px;

color: white;

background-color: black;

}

section {

margin: 5px;

padding: 10px;

background-color: lightgrey;

}

article {

margin: 5px;

padding: 10px;

background-color: white;

}

nav ul {

padding: 0;

}

nav ul li {

display: inline;

margin: 5px;

}

最后，修改元素為HTML5語義元素：

Monday Times

• News
• Sports
• Weather

News Section

News Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.

News Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.

? 2014 Monday Times. All rights reserved.

和

之間的區別

這是一個令人困惑的(缺乏)在HTML5標準差, 在 和

之間.

在HTML5標準里面, 元素被定義為相關元素的塊.

元素被定義為一個完整的、獨立的相關元素塊.

元素定義為子元素的塊.

如何解釋?

在上面的例子中, 我們使用 作為相關的容器.

但是, 我們也使用作為其他article的容器.

以下是一些不同的例子:

在 里面:

Famous Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.

在 里面:

Famous Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.

在里面 ， 在 里面:

Famous Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.

Famous Countries

England

London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

France

Paris is the capital and most populous city of France.

Japan

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.

總結

以上是生活随笔為你收集整理的html在线转移,HTML5迁移的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。