html在线转移,HTML5迁移
从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迁移相关推荐
- 贝壳金服 TiDB 在线跨机房迁移实践
2019独角兽企业重金招聘Python工程师标准>>> 作者介绍 : 李振环,贝壳金服数据基础架构负责人,目前负责数据平台和企业级数据仓库开发. 公司介绍 贝壳金服是专注居住场景的金 ...
- 威联通nas怎么更换大硬盘_QNAP NAS在线RAID组态迁移及在线RAID容量扩充教程
QNAP NAS 在线 RAID 组态迁移及在线 RAID 容量扩充教程 现代企业的新挑战 现代企业所面对的挑战是如何选择一个真正稳定且可靠的 Turbo NAS 以集中储存数据, 并提高部门间之工作 ...
- 微信对话在线生成器html5源码
微信对话在线生成器html5源码的软件特点是: 一:操作简单,下载源码后双击 index.html 即可运行,不需要服务器 二:可以设置外观设置,手机状态栏,包括电量.时间.标题.背景等信息 三:可以 ...
- html5在线api,HTML5 历史记录API
HTML5 历史记录API HTML5历史记录API的使用方法,在线实例演示HTML5历史记录API如何使用.浏览器的兼容性.语法定义及它的属性值详细资料等. HTML5历史记录API使您可以通过Ja ...
- html检测用户在线离线,HTML5 --- navigator.onLine 离线检测(示例代码)
navigator.onLine,是一个属性,返回浏览器的联网状态.主要用于查看你是否连接上了互联网. 在正常联网的情况下会返回true,没有联网即离线的状态下返回false. 一旦浏览器的联网状态发 ...
- html5做在线音乐,html5实现在线响应式音乐播放器
大概很早的时候就有想法做一个音乐播放器玩玩,以前可能还考虑过做APP,大一的时候第一个html的静态页面也是做的音乐网站,想想,大概小时候比较喜欢音乐吧.然而,现在入了前端大坑,就用h5做一个耍耍好了 ...
- 分享一个在线的HTML5元素在线测验 : HTML5 Element Quiz
日期:2011/12/07 来源:GBin1.com 今天在公司的网站上发现的一个在线HTML5元素的在线测试,大家有兴趣可以挑战一下,有点小BT.Enjoy! 在线测验 转载于:https://w ...
- html5 在线摄像头,HTML5在线摄像头使用
HTML5在线摄像头应用 最近在搞一个考试系统,系统要求要有随机拍照的功能,并且摄像头能够收到js的控制.在线摄像头嘛,就那两种实现的方式:cab或者flash. 暂且不论本人从没学过的flash(事 ...
- h5在线制作html5,在线制作HTML5多媒体作品的技巧
HTML5多媒体作品以其对各种平台的兼容而见长,目前已获得了广泛的应用.如果我们需要制作自己的HTML5多媒体作品,一个方便之选就是利用现成的在线制作工具"百度H5". 首先访问& ...
最新文章
- C#项目中关于多个程序集下App.config文件的问题
- YOLOv3在OpenCV4.0.0/OpenCV3.4.2上的C++ demo实现
- application.yml如何显示成小叶子图标
- 一個全世界最珍貴的故事(轉載)
- 安装Wamp时出现无法启动此程序,因为计算机中丢失MSVCR110.dll的解决方法
- APP视觉稿该怎么切图和标注
- css 单行/多行文字垂直居中问题
- 每日一题（23）——malloc与free（四）
- C语言（CED）编写程序，求sum=1*1*1+2*2*2+3*3*3+4*4*4+5*5*5+····+n*n*n
- 关于二手交易用户指南怎么写_让用户拍案叫绝文案怎么写？试试这3个方法
- MongoDB 教程七: MongoDB和PHP结合开发
- java Clob转CLOB_Java获取Oracle中CLOB字段转换成String
- 【人脸识别】Center Loss详解
- iPhone 12发布前夜：富士康奖励万元招不到人，有工人国庆连轴转
- ionic 富文本编辑样式后，前台不能回显样式
- erc20钱包下载_Newdex实用贴：如何把ERC20上的KEY转换到Newdex交易
- chrome快速进入扩展页
- 2020下半年6级高频词汇整理
- word转03版本公式变成图片_word2013公式编辑器_Word 2013保存的时候突然发现公式变成图片怎么办？_word文档打字的时候...
- sql语句中分组和排序（group by、order by、rank）