HTML5 迁移

从HTML4迁移到HTML5

这章完整的讲解了怎么从HTML4页面迁移到HTML5页面.

这章展示了怎么从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>星期一时报</h1>
</div>

<div id="menu">
  <ul>
    <li>新闻</li>
    <li>体育</li>
    <li>天气</li>
  </ul>
</div>

<div id="content">
<h2>新闻部分</h2>

<div id="post">
  <h2>新闻文章</h2>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
</div>

<div id="post">
  <h2>新闻文章</h2>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
</div>

</div>

<div id="footer">
  <p>&amp;版权; 2014 星期一时报. All rights reserved.</p>
</div>

</body>
</html>

转换为HTML5文档类型

改变文档类型,从HTML4转换:

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

转换为HTML5类型:

例子

<!DOCTYPE html>

转换为HTML5编码

改变编码信息,从HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

转换为HTML5:

例子

<meta charset="utf-8">

阅读关于HTML5浏览器支持章节.

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

给HTML5语义元素复制相等的CSS样式:

例子

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>

改变<div>元素的id="header"和id="footer:"

<div id="header">
  <h1>星期一时报</h1>
</div>
.
.
.
<div id="footer">
  <p>&amp;copy; 2018 21xrx. All rights reserved.</p>
</div>

改为HTML5语法<header>和<footer>元素:

例子

<header>
  <h1>星期一时报</h1>
</header>
.
.
.
<footer>
  <p>&copy; 2018 21xrx. All rights reserved.</p>
</footer>

转换为HTML5的<nav>

转换带有id="menu"的<div>元素:

<div id="menu">
  <ul>
    <li>新闻</li>
    <li>运动</li>
    <li>天气</li>
  </ul>
</div>

改为HTML5的<nav>元素:

例子

<nav>
  <ul>
    <li>新闻</li>
    <li>运动</li>
    <li>天气</li>
  </ul>
</nav>

换成HTML5的<section>

替换带有id="content"的<div>元素:

<div id="content">
.
.
.
</div>

替换为HTML5的<section>元素:

例子

<section>
.
.
.
</section>

替换为HTML5的<article>

替换所有带有class="post"的<div>元素:

<div class="post">
  <h2>新闻文章</h2>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
</div>

替换为HTML5的<article>元素:

例子

<article>
  <h2>新闻文章</h2>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
</article>

删除不再用的<style>元素:

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页面:

最终你可以移除<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>星期一时报</h1>
</header><nav><ul><li>新闻</li><li>运动</li><li>天气</li></ul></nav><section>
<h2>新闻部分</h2><article> <h2>新闻文章</h2>
 <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
 <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
 <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
</article><article><h2>新闻文章</h2> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
 <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
 <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容.</p>
</article></section><footer> <p>&copy; 2018 星期一时报. All rights reserved.</p></footer></body></html>

<article>,<section>和<div>之间区别

在HTML5标准里,<article>,<section>和<div>它们之间有一些混淆.

在HTML5标准里,<section>元素被定义为相关的块元素.

<article>元素被定义为完整的且独立的相关块元素.

<div>元素被定义为子元素的块元素.

怎么来解释它们呢?

在上面的例子中,我们用<section>元素作为<article>的容器.

但是,我们也可以用<article>作为文章的容器.

下面是一些不同的例子:

<article>包含<article>

<article>

<h2>知名城市</h2>

<article>
<h2>上海</h2>
<p>上海,简称“沪”或“申”,是中国共产党的诞生地,中华人民共和国直辖市、国家中心城市、
超大城市,国际经济、金融、贸易、航运、科技创新中心和综合交通枢纽,首批沿海开放城市.
上海地处长江入海口,
是长江经济带的龙头城市、G60科创走廊核心城市.隔东中国海与日本九州岛相望,南濒杭州湾,
北、西与江苏、浙江两省相接.</p>
</article>

<article>
<h2>成都</h2>
<p>成都是四川省省会,简称蓉,别称蓉城、锦城,副省级市,特大城市,位于四川盆地西部,
成都平原腹地,境内地势平坦、河网纵横、物产丰富、农业发达,属亚热带季风性湿润气候.</p>
</article>

<article>
<h2>深圳</h2>
<p>深圳,简称“深”,别称“鹏城”,是中国四大一线城市之一,广东省省辖市、
计划单列市、副省级市、国家区域中心城市、超大城市,国务院定位的全国经济中心城市和国际化城市、
国家创新型城市、国际科技产业创新中心、全球海洋中心城市、国际性综合交通枢纽,中国三大全国性金融中心之一..</p>
</article>

</article>

<article>包含<div>:

<article>

<h2>知名城市</h2>

<div class="city">
<h2>上海</h2>
<p>上海,简称“沪”或“申”,是中国共产党的诞生地,中华人民共和国直辖市、国家中心城市、超大城市,
国际经济、金融、贸易、航运、科技创新中心和综合交通枢纽,首批沿海开放城市.
上海地处长江入海口,是长江经济带的龙头城市、G60科创走廊核心城市.</p>
</div>

<div class="city">
<h2>成都</h2>
<p>成都是四川省省会,简称蓉,别称蓉城、锦城,副省级市,特大城市,
位于四川盆地西部,成都平原腹地,境内地势平坦、河网纵横、物产丰富、农业发达,属亚热带季风性湿润气候.</p>
</div>

<div class="city">
<h2>深圳</h2>
<p>深圳,简称“深”,别称“鹏城”,是中国四大一线城市之一,广东省省辖市、计划单列市、
副省级市、国家区域中心城市、超大城市,国务院定位的全国经济中心城市和国际化城市、
国家创新型城市、国际科技产业创新中心、全球海洋中心城市、国际性综合交通枢纽,中国三大全国性金融中心之一.</p>
</div>

</article>

<article>包含<section>,<section>包含<div>:

<article>

<section>
<h2>知名城市</h2>

<div class="city">
<h2>上海</h2>
<p>上海,简称“沪”或“申”,是中国共产党的诞生地,中华人民共和国直辖市、国家中心城市
、超大城市,国际经济、金融、贸易、航运、科技创新中心和综合交通枢纽,首批沿海开放城市..</p>
</div>

<div class="city">
<h2>深圳</h2>
<p>深圳,简称“深”,别称“鹏城”,是中国四大一线城市之一,广东省省辖市、计划单列市、
副省级市、国家区域中心城市、超大城市,国务院定位的全国经济中心城市和国际化城市、
国家创新型城市、国际科技产业创新中心、全球海洋中心城市、国际性综合交通枢纽,
中国三大全国性金融中心之一.</p>
</div>

<div class="city">
<h2>成都</h2>
<p>成都是四川省省会,简称蓉,别称蓉城、锦城,副省级市,特大城市,
位于四川盆地西部,成都平原腹地,境内地势平坦、河网纵横、物产丰富、农业发达.</p>
</div>
</section>

<section>
<h2>知名国家</h2>

<div class="country">
<h2>英国</h2>
<p>大不列颠及北爱尔兰联合王国（United Kingdom of Great Britain and Northern Ireland）,
简称“英国”（United Kingdom）,本土位于欧洲大陆西北面的不列颠群岛,被北海、英吉利海峡、凯尔特海、
爱尔兰海和大西洋包围.</p>
</div>

<div class="country">
<h2>法国</h2>
<p>法兰西共和国（法语：République française,英语：French Republic）,简称“法国”（France）,
是一个本土位于西欧的半总统共和制国家,海外领土包括南美洲和南太平洋的一些地区.</p>
</div>

<div class="country">
<h2>日本</h2>
<p>日本国（日语：にっぽんこく、にほんこく,英语：Japan）,简称“日本”,
位于东亚、国名意为“日出之国”,领土由北海道、本州、四国、九州四个大岛及7200多个小岛组成,
总面积37.8万平方公里.主体民族为大和族,通用日语,总人口约1.26亿.</p>
</div>
</section>

</article>

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索