从HTML4迁移到HTML5
本章讲述如何从 HTML4 迁移 到 HTML5.
本章演示了如何把一个HTML4页面转换为HTML5页面,而不破坏原始的内容和结构。
你可以采用相同的方法,从XHTML迁移到HTML5.
典型 HTML4
典型 HTML5
一个典型的 HTML4 页面
HTML4body {
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.