HTML5遷移-4.5HTML5

從 HTML4 遷移至 HTML5

本章講解如何從一張典型的 HTML4 頁面遷移至典型的 HTML5。

成都創新互聯公司主要從事成都網站建設、網站制作、網頁設計、企業做網站、公司建網站等業務。立足成都服務漢陽,十載網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:028-86922220

本章演示如何把一張已有的 HTML4 頁面轉換為 HTML5 頁面，在不破壞如何原始內容和結構的情況下。

注釋：您可以使用相同的技巧從 HTML4 以及 XHTML 遷移至 HTML5。

典型的 HTML4 典型的 HTML5 <div id="header"> <header> <div id="menu"> <nav> <div id="content"> <section> <div id="post"> <article> <div id="footer"> <footer>

典型的 HTML4 頁面實例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>HTML4</title><style> body {font-family:Verdana,sans-serif;font-size:0.8em;} div#header,div#footer,div#content,div#post {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;} div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;} div#content {background-color:#ddd;} div#menu ul {margin:0;padding:0;} div#menu ul li {display:inline; margin:5px;}</style></head><body><div id="header"> <h1>Monday Times</h1></div><div id="menu"> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul></div><div id="content"><h2>News Section</h2><div id="post"> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p></div><div id="post"> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p></div></div><div id="footer"> <p>© 2014 Monday Times. All rights reserved.</p></div></body></html>

更改為 HTML5 Doctype

修改文檔類型，從 HTML4 doctype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

修改為 HTML5 doctype：

<!DOCTYPE html>

更改為 HTML5 編碼

修改編碼信息，從 HTML4：

改為 HTML5：

添加 shiv

所有現代瀏覽器都支持 HTML5 語義元素。

此外，您可以“教授”老式瀏覽器如何處理“未知元素”。

為 Internet Explorer 支持而添加的 shiv：

注釋：請在 HTML5 瀏覽器支持中閱讀更多有關 shiv 的知識。

為 HTML5 語義元素添加 CSS

請看已有的 CSS 樣式：

div#header,div#footer,div#content,div#post { border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}div#header,div#footer { color:white;background-color:#444;margin-bottom:5px;}div#content { background-color:#ddd;}div#menu ul { margin:0;padding:0;}div#menu ul li { display:inline; margin:5px;}Duplicate with equal CSS styles for HTML5 semantic elements:header,footer,section,article { border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}header,footer { color:white;background-color:#444;margin-bottom:5px;}section { background-color:#ddd;}nav ul { margin:0;padding:0;}nav ul li { display:inline; margin:5px;}

更改為 HTML5 <header> 和 <footer>

把 id="header" 和 id="footer" 的 <div> 元素：

修改為 HTML5 語義元素 <header> 和 <footer>：

更改為 HTML5 <nav>

把 id="menu" 的 <div> 元素：

<div id="menu"> <ul> <li>News</li> <li>Sports</a></li> <li>Weather</li> </ul></div>

修改為 HTML5 語義元素 <nav>：

<nav> <ul> <li>News</li> <li>Sports</a></li> <li>Weather</li> </ul></nav>

更改為 HTML5 <section>

把 id="content" 的 the <div> 元素：

修改為 HTML5 語義元素 <section>：

更改為 HTML5 <article>

把 class="post" 的所有 <div> 元素：

<div class="post"> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p></div>

修改為 HTML5 語義元素 <article>：

<article> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p></article>

刪除這些“不再需要的”樣式：

典型的 HTML5 頁面

最后您可以刪除 <head> 標簽。HTML5 中不再需要它們：

實例 <!DOCTYPE html><html lang="en"><title>HTML5</title><meta charset="utf-8"><style>body { font-family:Verdana,sans-serif;font-size:0.8em;}header,footer,section,article { border:1px solid grey; margin:5px;margin-bottom:15px;padding:8px; background-color:white;}header,footer { color:white;background-color:#444;margin-bottom:5px;}section { background-color:#ddd;}nav ul { margin:0;padding:0;}nav ul li { display:inline; margin:5px;}</style><body><header> <h1>Monday Times</h1></header><nav> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul></nav><section><h2>News Section</h2><div id="post"> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p></div><div id="post"><h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p></div></section><footer> <p>© 2014 Monday Times. All rights reserved.</p></footer></body></html>

<article> <section> 與 <div> 之間的差異

在 HTML5 標準中，<article> <section> 與 <div> 之間的差異很小，令人困惑。

在 HTML5 標準中，<section> 元素被定位為相關元素的塊。

<article> 元素被定義為相關元素的完整的自包含塊。

<div> 元素被定義為子元素的塊。

如何理解呢？

在上面的例子中，我們曾使用 <section> 作為相關 <articles> 的容器。

但是，我們也能夠把 <article> 用作文章的容器。

下面是一些不同的例子：

<article> 中的 <article>：<article><h2>Famous Cities</h2><article><h2>London</h2><p>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.</p></article><article><h2>Paris</h2><p>Paris is the capital and most populous city of France.</p></article><article><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></article></article> <article> 中的 <div>：<article><h2>Famous Cities</h2><div class="city"><h2>London</h2><p>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.</p></div><div class="city"><h2>Paris</h2><p>Paris is the capital and most populous city of France.</p></div><div class="city"><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></div></article> <article> 中的 <section> 中的 <div>：<article><section><h2>Famous Cities</h2><div class="city"><h2>London</h2><p>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.</p></div><div class="city"><h2>Paris</h2><p>Paris is the capital and most populous city of France.</p></div><div class="city"><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></div></section><section><h2>Famous Countries</h2><div class="country"><h2>England</h2><p>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.</p></div><div class="country"><h2>France</h2><p>Paris is the capital and most populous city of France.</p></div><div class="country"><h2>Japan</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></div></section></article>

當前名稱：HTML5遷移-4.5HTML5
當前URL：http://www.js-pz168.com/article1/dghhdod.html

成都網站建設公司_創新互聯，為您提供移動網站建設、網站排名、品牌網站設計、企業網站制作、網站建設、定制網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

久久99久久人婷婷精品综合_超碰aⅴ人人做人人爽欧美_亚洲电影第三页_日韩欧美一中文字暮专区_波多野结衣的一区二区三区_婷婷在线播放_人人视频精品_国产精品日韩精品欧美精品_亚洲免费黄色_欧美性猛交xxxxxxxx

HTML5遷移-4.5HTML5