从 HTML4 迁移至 HTML5

本章讲解如何从一张典型的 HTML4 页面迁移至典型的 HTML5。

本章演示如何把一张已有的 HTML4 页面转换为 HTML5 页面，在不破坏如何原始内容和结构的情况下。

注释：您可以使用相同的技巧从 HTML4 以及 XHTML 迁移至 HTML5。

典型的 HTML4 页面

实例

  
Monday Times



  

    
News
    
Sports
    
Weather
  



News Section


  
News Article
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.



  
News Article
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.





  
© 2014 Monday Times. All rights reserved.

运行实例 »

更改为 HTML5 Doctype

修改文档类型，从 HTML4 doctype：

修改为 HTML5 doctype：

运行实例 »

更改为 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

和

把 id="header" 和 id="footer" 的

  
Monday Times

.
.
.

  
© 2016 W3School. All rights reserved.

更改为 HTML5

把 id="menu" 的

元素：

  

    
News
    
Sports
    
Weather
  

修改为 HTML5 语义元素

更改为 HTML5

把 id="content" 的 the

元素：

.
.
.

修改为 HTML5 语义元素

：

.
.
.

运行实例 »

更改为 HTML5

把 class="post" 的所有

元素：

  
News Article
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.

修改为 HTML5 语义元素

：

  
News Article
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.

运行实例 »

删除这些“不再需要的”样式：

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;
}

运行实例 »

典型的 HTML5 页面

最后您可以删除 标签。HTML5 中不再需要它们：

实例

  
Monday Times





News Section


  
News Article
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.



News Article
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.
  
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.

运行实例 »

与

之间的差异

在 HTML5 标准中，

与

之间的差异很小，令人困惑。

在 HTML5 标准中，

元素被定位为相关元素的块。

元素被定义为相关元素的完整的自包含块。

元素被定义为子元素的块。

如何理解呢？

在上面的例子中，我们曾使用

作为相关 的容器。

但是，我们也能够把

用作文章的容器。

下面是一些不同的例子：

 中的 
：



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.

运行实例 »

HTML5 新元素

相关

视频

RELATED VIDEOS

更多

免费

初级 Web前端开发极速入门

219920次学习

收藏

免费

初级 前端入门_HTML5

616946次学习

收藏

免费

初级 30分钟学会网站布局

238440次学习

收藏

免费

初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

初级 JavaScript极速入门_玉女心经系列

709168次学习

收藏

免费

初级 独孤九贱(1)_HTML5视频教程

615934次学习

收藏

免费

中级 独孤九贱(6)_jQuery视频教程

341081次学习

收藏

免费

中级 独孤九贱(7)_Bootstrap视频教程

270827次学习

收藏

免费

初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

• 
  “双 11”期间淘宝霸屏广告频现，杭州市监部门称已展开调查 感谢网友風見暉一、会弹琴的九号、我又改名字了、Geekerwan提供的线索！11月8日消息，据《大众日报》11月6日报道，针对“双11”大促期间淘宝频繁出现霸屏式广告的问题，杭州市余杭区市场监督管理局回应称，已接到相关投诉举报，目前案件已移交至网监分局进行进一步调查。此前多位用户反馈，在使用部分手机应用程序时，仅需轻微触碰屏幕或轻微晃动设备，便会被强制跳转至淘宝“双11”活动页面，严重影响日常使用体验。值得注意的是，早在2021年6月和7月，淘宝就曾因涉及广告违规行为以及未
• 
  长征十一号遥六运载火箭发射成功！ 北京时间11月9日清晨，我国于山东海阳附近海域，使用长征十一号运载火箭，成功将试验三十二号01至03星送入预定轨道。此次任务是长征系列火箭的第606次飞行。
• 
  租车押金黑洞频现，新国标出台整治乱象 11月9日消息，最新修订的《汽车租赁服务规范》国家标准已于今年11月1日起正式施行。这项新标准在规范汽车租赁市场秩序、保障消费者合法权益方面具有重要意义。然而，央视近期调查发现，仍有部分不良商家利用制度漏洞，打着“异地还车”“低价促销”等旗号诱导消费者上当。今年国庆期间，来自四川成都的王先生一家前往新疆自驾旅游时，便遭遇了一起精心策划的“恶意加价”骗局。王先生通过社交平台联系到一个名为“乌鲁木齐汽车租赁”的账号，计划在当地租车出行。对方出示了营业执照（显示为“新疆鸿钧广运汽车运输服务有限公司

更多

• 1

  C++中的std::decay有什么用_C++类型衰减与std::decay应用 std::decay用于模拟函数参数的类型衰减行为，将数组转为指针、函数转为函数指针，并移除引用和cv限定符，常用于泛型编程中标准化类型，提升模板代码的通用性与安全性。

• 2

  html中如何重置_HTML表单重置（reset）功能与数据清空方法

• 3

  CSS伪类:hover和:focus结合使用_交互体验优化技巧

• 4

  c++怎么在运行时动态链接一个函数_C++动态链接技术与运行时函数加载

• 5

  PHP如何获取当前日期和时间_PHP的date函数格式化日期时间详解

• 6

  HTML怎么嵌入外部CSS_HTML嵌入外部CSS的操作指南

• 7

  基于内存消耗的自动缓存淘汰机制实现教程

• 8

  pythonfor循环怎么对文件中的数字求和_pythonfor循环读取文件数字内容并求和的方法

• 9

  CSS盒模型中的padding百分比相对于谁计算_CSS规范说明

精选课程

更多

PHP实战天龙八部之微信支付视频教程

共5课时

17.2万人学习

PHP实战天龙八部之仿爱奇艺电影网站

共49课时

77万人学习

前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列

共43课时

71万人学习

独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程

共89课时

125.1万人学习

热门下载

更多

phpStudy 2018最新版

下载

vc9-vc14（32+64位）运行库合集（链接在下方）

下载

VC9 32位

下载

VC11 32位

下载

php程序员工具箱完整版

下载

VC14 32位

下载

SublimeText3汉化版

下载

Notepad++7.3.1

下载

phpStudy V8.1（Win64位）（已支持php8）

下载