HTML5迁移 HTML5迁移|HTML5

HTML5迁移指定如何从HTML4迁移到HTML5。让我们看一下如何将HTML4页面转换为HTML5页面而内容或结构上没有任何问题。
表：

在HTML4中	在HTML5中
< div id =“ header”>	< header>
< div id =“ menu”>	< nav>
< div id=” content” >	< section>
< div class =“ article”>	< 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.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; } < /style> < /head> < body> < div id="header"> < h1> srcmini Times< /h1> < /div> < div id="menu"> < ul> < li> Tutorials< /li> < li> Technology< /li> < li> Blog< /li> < /ul> < /div> < div id="content"> < h2> Tutorials Section< /h2> < div class="article"> < h2> Tutorial1< /h2> < p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.< /p> < p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.< /p> < /div> < div class="article"> < h2> Tutorial2< /h2> < p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.< /p> < p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.< /p> < /div> < /div> < div id="footer"> < p> ? 2018 srcmini Times. All rights reserved.< /p> < /div> < /body> < /html>

立即测试
将HTML4文档类型更改为HTML5文档类型HTML4 Doctype语法：

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

【HTML5迁移】HTML5 Doctype语法：

< !DOCTYPE html>

例：

< !DOCTYPE html> < html lang="en"> < head> < meta http-equiv="Content-Type" content="text/html; charset=utf-8"> < title> HTML5< /title> < style> 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; } < /style> < /head> < body> < div id="header"> < h1> srcmini Times< /h1> < /div> < div id="menu"> < ul> < li> Tutorials< /li> < li> Technology< /li> < li> Blog< /li> < /ul> < /div> < div id="content"> < h2> Tutorials Section< /h2> < div class="article"> < h2> Tutorial1< /h2> < p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.< /p> < p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.< /p> < /div> < div class="article"> < h2> Tutorial2< /h2> < p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.< /p> < p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.< /p> < /div> < /div> < div id="footer"> < p> ? 2018 srcmini Times. All rights reserved.< /p> < /div> < /body> < /html>