HTML5 Migration

ຍ້າຍຈາກ 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>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>
<div id="content">
<h2>News Section</h2>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html>

ທ້າທາຍຕົວເອງ

ປ່ຽນເປັນ HTML5 Doctype

ການດັດແກ້ຂໍ້ມູນ doctype ສໍາລັບ HTML4 doctype:

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

ການດັດແກ້ doctype ສໍາລັບ HTML5:

<!DOCTYPE html>

ທ້າທາຍຕົວເອງ

ປ່ຽນເປັນ HTML5 ວັດຄວາມ

ການດັດແກ້ຂໍ້ມູນການວັດຄວາມຈາກ HTML4:

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

ປ່ຽນເປັນ HTML5:

<meta charset="utf-8">

ທ້າທາຍຕົວເອງ

ການເພີ່ມ shiv

ບັນດາບັນດາບາດີ້ຫຼັກທັງໝົດສະໜັບສະໜູນບົດສະຫຼັກ HTML5.

ນອກຈາກນັ້ນ，ທ່ານສາມາດ "ສອນ" ບັນດາບັນດາບາດີ້ເກົ່າຫຼີກວ່າ ທີ່ຈະຈັດການບົດສະຫຼັກ "ບໍ່ຮູ້".

shiv ທີ່ເພີ່ມເພື່ອສະໜັບສະໜູນ Internet Explorer:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

ທ້າທາຍຕົວເອງ

ຄຳເຫັນ:ການອ່ານຫຼາຍກ່ຽວກັບ shiv ໃນການສະໜັບສະໜູນ HTML5 ຕົວເລື່ອງ.

ການເພີ່ມ CSS ສໍາລັບບົດສະຫຼັກ HTML5

ບັນດາ 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;
}
ທີ່ຈະປະບວນກັບ CSS ບັນດາບົດລະບຽບດຽວກັນ ສໍາລັບບົດສະຫຼັກ HTML5:
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>

ການປ່ຽນ id="header" ແລະ id="footer" ຂອງ <div> ອົງການ:

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</div>

ແຕ່ງໃຫ້ງານວິທະຍາສາດ HTML5 <header> ແລະ <footer>：

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>

ທ້າທາຍຕົວເອງ

ແຕ່ງໃຫ້ HTML5 <nav>

ປ່ຽນອັນດັບ <div> ທີ່ id="menu":

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</div>

ແຕ່ງໃຫ້ງານວິທະຍາສາດ HTML5 <nav>：

<nav>
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</nav>

ທ້າທາຍຕົວເອງ

ແຕ່ງໃຫ້ HTML5 <section>

ປ່ຽນອັນດັບ the <div> ທີ່ id="content":

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

ແຕ່ງໃຫ້ງານວິທະຍາສາດ HTML5 <section>：

<section>
.
.
.
</section>

ທ້າທາຍຕົວເອງ

ແຕ່ງໃຫ້ HTML5 <article>

ປ່ຽນອັນດັບ <div> ທີ່ class="post":

<div class="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

ແຕ່ງໃຫ້ງານວິທະຍາສາດ HTML5 <article>：

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

ທ້າທາຍຕົວເອງ

ລຶບອີກນັ້ນທີ່ “ບໍ່ຕ້ອງການ” ອັນດັບ:

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">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<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>Monday Times</h1>
</header>
<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>
<section>
<h2>News Section</h2>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html>

ທ້າທາຍຕົວເອງ

<article> <section> 与 <div> 之间的差异

在 HTML5 标准中，<article> <section> 与 <div> 之间的差异很小，令人困惑。

在 HTML5 标准中，<section> 元素被定位为相关元素的块。

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

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

如何理解呢？

在上面的例子中，我们曾使用 <section> 作为相关 <articles> 的容器。

但是，我们也能够把 <article> 用作文章的容器。

下面是一些不同的例子：

中的 <article>：
<article>
<h2>ກຸງທີ່ມີຊື່ສຽງ</h2>
<article>
<h2>ລອນດອນ</h2>
<p>ລອນດອນແມ່ນເມືອງຫຼວງຂອງອັງກິດ. ມັນເປັນເມືອງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວສະຫະລາຊະອານາຈັກ,</p>
ພ້ອມດ້ວຍເຂດເມືອງຫຼວງທີ່ມີປະຊາກອນຫຼາຍກວ່າ 13 ລ້ານຄົນ.</p>
</article>
<article>
<h2>ປັດກະສາຍ</h2>
<p>ປັດກະສາຍແມ່ນຫຼວງແລະເມືອງຫຼວງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວຝຣັ່ງ.</p>
</article>
<article>
<h2>ກຸງໂຕກຽວ</h2>
<p>ກຸງໂຕກຽວແມ່ນຫຼວງຂອງຍີ່ປຸ່ນ, ສູນກາງຂອງເຂດເມືອງຫຼວງໂຕກຽວ,</p>
ແລະເປັນເຂດເມືອງຫຼວງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວໂລກ.</p>
</article>
</article>

ທ້າທາຍຕົວເອງ

<article> ແບບ <div>：</article>
<article>
<h2>ກຸງທີ່ມີຊື່ສຽງ</h2>
<div class="city">
<h2>ລອນດອນ</h2>
<p>ລອນດອນແມ່ນເມືອງຫຼວງຂອງອັງກິດ. ມັນເປັນເມືອງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວສະຫະລາຊະອານາຈັກ,</p>
ພ້ອມດ້ວຍເຂດເມືອງຫຼວງທີ່ມີປະຊາກອນຫຼາຍກວ່າ 13 ລ້ານຄົນ.</p>
</div>
<div class="city">
<h2>ປັດກະສາຍ</h2>
<p>ປັດກະສາຍແມ່ນຫຼວງແລະເມືອງຫຼວງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວຝຣັ່ງ.</p>
</div>
<div class="city">
<h2>ກຸງໂຕກຽວ</h2>
<p>ກຸງໂຕກຽວແມ່ນຫຼວງຂອງຍີ່ປຸ່ນ, ສູນກາງຂອງເຂດເມືອງຫຼວງໂຕກຽວ,</p>
ແລະເປັນເຂດເມືອງຫຼວງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວໂລກ.</p>
</div>
</article>

ທ້າທາຍຕົວເອງ

<article> ແບບ <section> ແບບ <div>：</article>
<article>
<section>
<h2>ກຸງທີ່ມີຊື່ສຽງ</h2>
<div class="city">
<h2>ລອນດອນ</h2>
<p>ລອນດອນແມ່ນເມືອງຫຼວງຂອງອັງກິດ. ມັນເປັນເມືອງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວສະຫະລາຊະອານາຈັກ,</p>
ພ້ອມດ້ວຍເຂດເມືອງຫຼວງທີ່ມີປະຊາກອນຫຼາຍກວ່າ 13 ລ້ານຄົນ.</p>
</div>
<div class="city">
<h2>ປັດກະສາຍ</h2>
<p>ປັດກະສາຍແມ່ນຫຼວງແລະເມືອງຫຼວງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວຝຣັ່ງ.</p>
</div>
<div class="city">
<h2>ກຸງໂຕກຽວ</h2>
<p>ກຸງໂຕກຽວແມ່ນຫຼວງຂອງຍີ່ປຸ່ນ, ສູນກາງຂອງເຂດເມືອງຫຼວງໂຕກຽວ,</p>
ແລະເປັນເຂດເມືອງຫຼວງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວໂລກ.</p>
</div>
</section>
<section>
<h2>ປະເທດທີ່ມີຊື່ສຽງ</h2>
<div class="country">
<h2>ອັງກິດ</h2>
<p>ລອນດອນແມ່ນເມືອງຫຼວງຂອງອັງກິດ. ມັນເປັນເມືອງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວສະຫະລາຊະອານາຈັກ,</p>
ພ້ອມດ້ວຍເຂດເມືອງຫຼວງທີ່ມີປະຊາກອນຫຼາຍກວ່າ 13 ລ້ານຄົນ.</p>
</div>
<div class="country">
<h2>ຝຣັ່ງ</h2>
<p>ປັດກະສາຍແມ່ນຫຼວງແລະເມືອງຫຼວງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວຝຣັ່ງ.</p>
</div>
<div class="country">
<h2>ຍີ່ປຸ່ນ</h2>
<p>ກຸງໂຕກຽວແມ່ນຫຼວງຂອງຍີ່ປຸ່ນ, ສູນກາງຂອງເຂດເມືອງຫຼວງໂຕກຽວ,</p>
ແລະເປັນເຂດເມືອງຫຼວງຫຼາຍຄົນທີ່ຫຼາຍທົ່ວໂລກ.</p>
</div>
</section>
</article>

ທ້າທາຍຕົວເອງ