ອະນຸມັດ ແລະ ຄວາມຕາມທາງ HTML(5)

ຂັ້ນຕອນ HTML 代码约定

ນັກພັດທະນາ web ເປັນຫຼາຍຫຼາຍບໍ່ແນ່ນອນກັບວິທະຍາທີ່ມີການຈັດການ ແລະວິທະຍາທີ່ໃຊ້ໃນ HTML.

ໃນລະຫວ່າງປີ 2000 ຫາ 2010, ບັນດານັກພັດທະນາ web ຈຳນວນຫຼາຍໄດ້ປ່ຽນຈາກ HTML ຫາ XHTML.

ຜ່ານ XHTML, ນັກພັດທະນາຕ້ອງຂຽນວິທະຍາທີ່ມີການຈັດການຢ່າງສະຫຼາດ.

HTML5 ຈະອະນຸຍາດຢ່າງອັນຕະລາຍຫຼາຍໃນການກວດສອບວິທະຍາ.

ຜ່ານ HTML5, ທ່ານຕ້ອງສ້າງ:ການປະຕິບັດທີ່ດີ, ອຸປະກອນວິທະຍາ, ແລະຂັ້ນຕອນວິທະຍາ..

ສະຫຼາດທີ່ມີການຮັກສາ.

ການນຳໃຊ້ຈຸດວິທະຍາທີ່ມີເຫດຜົນສຳຄັນ, ອາດຈະເຮັດໃຫ້ບັນດາຄົນອື່ນໄດ້ເຂົ້າໃຈແລະໃຊ້ HTML ຂອງທ່ານຫຼາຍຫຼາຍ.

ໃນອະດີດ, ບັນດາເຄື່ອງໝູງວິທະຍາ XML ອາດຈະຕ້ອງອ່ານ HTML ຂອງທ່ານ.

ນຳໃຊ້ວິທະຍາສາກົນທີ່ມີການຈັດການຢ່າງສະຫຼາດ 'ຄິດຫຼັງ XHTML' ອາດຈະສະເທືອນຫຼາຍຫຼາຍ.

ບັນທາງ:ກະຈາຍການວາງຈຸດວິທະຍາສາກົນຢ່າງສະຫຼາດ, ຊັງ, ພັນ, ແລະຂະແໜງຂະໜາດຢ່າງດີ.

ກະຈາຍສະຖານະຂອງເອກະສານຢ່າງຕໍ່ເນື່ອງ:

ກະຈາຍສະຖານະຂອງເອກະສານຢູ່ເບື້ອງຕົ້ນຂອງເອກະສານຢ່າງຕໍ່ເນື່ອງ:

<!DOCTYPE html>

ຖ້າທ່ານຕິດຕາມພາສານິຍົມຊ້ອນຫຼາຍ, ທ່ານສາມາດໃຊ້:

<!doctype html>

ກະຈາຍພາສານິຍົມຊ້ອນສັນຍາບັນ:

HTML5 ອະນຸຍາດໃຫ້ໃຊ້ພາສານິຍົມປົກກະຕິຫຼາຍຊ້ອນໃນຊື່ສັນຍາບັນ.

ພວກເຮົາແນະນຳໃຊ້ພາສານິຍົມຊ້ອນສັນຍາບັນ:

  • ຊື່ນິຍົມປົກກະຕິຫຼາຍຫຼາຍ:
  • ນັກພັດທະນາບໍ່ຄົງຄິດຈະໃຊ້ພາສານິຍົມຊ້ອນ (ເຊັ່ນໃນ XHTML).
  • ພາສານິຍົມອາດດິນບາງຫຼາຍຫຼາຍຫຼາຍ:
  • ພາສານິຍົມອາດດິນບາງຫຼາຍຫຼາຍ:

ບໍ່ດີຫຼາຍ:

<SECTION> 
  <p>This is a paragraph.</p>
</SECTION>

ບໍ່ດີຫຼາຍ:

<Section> 
  <p>This is a paragraph.</p>
</SECTION>

ບໍ່ມີຄວາມບໍ່ດີ:

<section> 
  <p>This is a paragraph.</p>
</section>

ປິດທັງໝົດປະກອບສັນຍາບັນ HTML:

ໃນ HTML5, ທ່ານບໍ່ຈຳເປັນປິດທັງໝົດປະກອບສັນຍາບັນ (ເຊັ່ນ <p> ປະກອບສັນຍາບັນ).

ພວກເຮົາແນະນຳປິດທັງໝົດປະກອບສັນຍາບັນຫຼັກ HTML:

It looks bad:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

It looks good:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

Closing empty HTML elements

In HTML5, it is optional to close empty elements.

It is allowed:

<meta charset="utf-8">

It is also allowed:

<meta charset="utf-8" />

The slash (/) is required in XHTML and XML.

If you expect XML software to access your page, it is a good idea to keep this habit.

Use lowercase attribute names

HTML5 allows mixed-case attribute names.

We recommend using lowercase attribute names:

  • Mixed attribute names are not good
  • Developers are accustomed to using lowercase attribute names (such as in XHTML)
  • Lowercase attribute names are cleaner in some cases
  • Lowercase attribute names are easier to write

It looks bad:

<div CLASS="menu">

It looks good:

<div class="menu">

Quoted attribute values

HTML5 allows unquoted attribute values.

We recommend that the attribute value be quoted:

  • If the attribute value contains a value, then it must be quoted
  • Mixed styles are absolutely bad
  • Quoted values are easier to read

This attribute value is invalid because it contains spaces:

<table class=table striped>

This is valid:

<table class="table striped">

Required attributes

Always use for images alt Attribute. This attribute is important when the image cannot be displayed.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Always define the image size. This will reduce flicker because the browser will reserve space for the image before it loads.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spaces and equal signs

The spaces on both sides of the equal sign are legal:

<link rel = "stylesheet" href = "styles.css">

However, less space is easier to read: But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

ຫຼືການຫຼີກລ່ຽງການຍັງແລະການຍັງແຕ່ບານ:

ບໍ່ສະບາຍກັບການອ່ານລະບົບ HTML ທີ່ມີຄວາມຍຸດຕິທຳຜ່ານການໝູນວາງທາງຊ້າຍລຸ່ມວາງກັບ HTML:

ບໍ່ຕ້ອງໃຊ້ຄວາມຈໍາເປັນຂອງຈາກການເພີ່ມກັບສິ່ງທີ່ສັ້ນຫຼືກ່ຽວຂ້ອງ:

ຍັງແລະການຍັງແຕ່ບານ

ບໍ່ຕ້ອງໃຊ້ການເພີ່ມຍັງແລະການຍັງແຕ່ບານກັບຂັ້ນບໍ່ມີຄວາມຈໍາເປັນ:

ເພື່ອຢູ່ມາການອ່ອນບອກ, ໃຫ້ເພີ່ມການທີ່ບໍ່ມີຄວາມຈໍາເປັນຂອງຈາກການເພີ່ມຍັງແລະການຍັງແຕ່ບານກັບຂັ້ນໃນສິ່ງທີ່ໃຫຍ່ຫຼືທາງຄວາມຄິດຫຼືທາງຄວາມຄິດ:

ເພື່ອຂະຫຍາຍຄວາມອ່ອນບອກ, ໃຫ້ເພີ່ມການຍັງແລະການຍັງແຕ່ບານສອງບານ. ບໍ່ຕ້ອງໃຊ້ TAB:

ບໍ່ຕ້ອງໃຊ້ການທີ່ບໍ່ມີຄວາມຈໍາເປັນຂອງຈາກການເພີ່ມຍັງແລະການຍັງແຕ່ບານກັບຂັ້ນ. ບໍ່ຕ້ອງໃຊ້ການເພີ່ມຍັງແລະການຍັງແຕ່ບານກັບຂັ້ນໃນສິ່ງທີ່ສັ້ນຫຼືກ່ຽວຂ້ອງ:

ບໍ່ຈຳເປັນ:

<body>
  <h1>Famous Cities</1>
  <h2>Tokyo</h2>
  <p>
    ຕູຣາວໂອກີ້ເປັນນະຄອນຫຼວງຂອງຍີ່ປຸ່ນ, ສູນກາງຂອງເຂດຫຼວງນະຄອນຕູຣາວໂອກີ້:
    ແລະສະຖານທີ່ຂອງມີປະຊາກອນຫຼາຍທີ່ສຸດໃນໂລກ.
    ມັນເປັນສະຖານທີ່ຂອງລັດຖະບານຍີ່ປຸ່ນ ແລະບັນດາຫຼັກຂອງຫຼວງນະຄອນຫຼວງຍີ່ປຸ່ນ.
    ແລະສະຖານທີ່ຂອງຄອບຄົວຍຸດຕະມະສັງກະບານຍີ່ປຸ່ນ.
  </p>
</body>

ດີຫຼາຍ:

<body>
<h1>Famous Cities</1>
<h2>Tokyo</h2>
<p>
ຕູຣາວໂອກີ້ເປັນນະຄອນຫຼວງຂອງຍີ່ປຸ່ນ, ສູນກາງຂອງເຂດຫຼວງນະຄອນຕູຣາວໂອກີ້:
ແລະສະຖານທີ່ຂອງມີປະຊາກອນຫຼາຍທີ່ສຸດໃນໂລກ.
ມັນເປັນສະຖານທີ່ຂອງລັດຖະບານຍີ່ປຸ່ນ ແລະບັນດາຫຼັກຂອງຫຼວງນະຄອນຫຼວງຍີ່ປຸ່ນ.
ແລະສະຖານທີ່ຂອງຄອບຄົວຍຸດຕະມະສັງກະບານຍີ່ປຸ່ນ.
</p>
</body>

ການສະແດງຕາຕະລາງ:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  <tr>
</table>

ການສະແດງຕາຕະລາງ:

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

ຈະລຶບ <html> ແລະ <body>?

ໃນມາດຕະຖານ HTML5 ການລຶບ <html> ແລະ <body> ອັດຕາມຂະໜາດລະບຸນຫຼັກ.

ວິທະຍານທີ່ລົງມາດັງໃຫ້ຈະກວດກາ HTML5:

ຄວາມຍາວ

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

亲自试一试

ພວກເຮົາບໍ່ຂໍ້ສະເໜີການລຶບ <html> ແລະ <body> ອັດຕາມຂະໜາດລະບຸນຫຼັກ.

<html> ເປັນອັດຕາການສົມມຸດຂອງຂໍ້ຄວາມ. ມັນເປັນການບໍ່ມີຄວາມຜິດພາດໃນການລະບຸດດັບມະນາການຂອງຂໍ້ຄວາມ.

<!DOCTYPE html>
<html lang="en-US">

ສຳລັບການຫຼິ້ນສຳລັບຜູ້ທີ່ມີຄວາມສາມາດ (ການອ່ານວິທະຍຸຈໍານວນ) ແລະ ການຄົ້ນຫາເຄືອງຄົ້ນຫາ ການຖະແຫຼງດດັບມະນາການວ່າຫຼັກການ.

ການລຶບ <html> ຫຼື <body> ສາມາດເຮັດໃຫ້ DOM ແລະ XML ຟອມການບໍ່ສາມາດ.

ການລຶບ <body> ຈະເປັນການບໍ່ອາດດີໃນບັນດາບັນນາທິການເກົ່າ (IE9).

ຈະລຶບ <head>?

ໃນມາດຕະຖານ HTML5 ອັດຕາມເປັນການລຶບ <head> ອັດຕາມຂະໜາດລະບຸນຫຼັກ.

ໂດຍຜົນຕໍ່າຂອງມັນການຈະນຳເອົາຂໍ້ມູນທັງໝົດທີ່ຢູ່ກ່ອນ <body> ໄປເຂົ້າໃນ <head> ອັດຕາມຂະໜາດລະບຸນຫຼັກ.

ຜ່ານການລຶບ <head> ອັດຕາມເປັນການຫຼຸດຄວາມຄິດຂອງ HTML:

ຄວາມຍາວ

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

亲自试一试

ບັນທາງ:ສຳລັບນັກພັດທະນາເວັບໄຊ ການລົບພາສາງຕົວແມ່ນບໍ່ຮູ້. ການສ້າງກົດລະບຽບຕ້ອງໃຊ້ເວລາ

ຂໍ້ມູນ

<title> ແມ່ນຕ້ອງການໃນ HTML5. ການສ້າງປະເພດຄວາມມີຄວາມມີຄວາມມີຄວາມມີຄວາມ

<title>HTML5 Syntax and Coding Style</title>

ເພື່ອຮັບປະກັນການອະທິບາຍຢ່າງຖືກຕ້ອງ ແລະ ການບັນທຶກທີ່ຖືກກະຕຸ້ນໂດຍການຄົ້ນຫາຄົ້ນພົບ ການສະແດງປະເພດ ແລະ ຄວາມບັນຍາຍຂອງມີຢູ່ໃນເອກະສານຫຼັງຈາກນັ້ນ

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

ຄຳໃສ່ HTML

ກົດລະບຽບທີ່ສັ້ນສວຍຄວາມຄົງຄວາມຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງ

<!-- This is a comment -->

ກົດລະບຽບທີ່ຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງ

<!-- 
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

ກົດລະບຽບທີ່ຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງ

ກົດລະບຽບ

ນຳໃຊ້ພາສານິວຊະຍາບັນທີ່ພຽງພໍໃຫ້ເຊື່ອມຕໍ່ສະແນນ (ບໍ່ຕ້ອງມີປະເພດທາງດ້ານ type)

<link rel="stylesheet" href="styles.css">

ກົດລະບຽບທີ່ສັ້ນສວຍສາມາດປິດສະໜອງໃນເຄື່ອງບ້ານອັນດຽວ

p.into {font-family:"Verdana"; font-size:16em;}

ກົດລະບຽບທີ່ຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງຄວາມຍາວຄວາມຄົງ

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • ການເປີດອອກແລະຄຳເລືອກຕັ້ງຢູ່ໃນເຄື່ອງບ້ານອັນດຽວ
  • ນຳໃຊ້ອາກາດຫຼັງຈາກການເປີດອອກ
  • ນຳໃຊ້ຄວາມຫຼັງສອງຄວາມ
  • ນຳໃຊ້ຄຳແນະນຳ ຕໍ່ສະໜອງທຸກຈຳນວນ (ລວມທັງສຸດທ້າຍ) ດ້ວຍຄຳແນະນຳ ຕາມທີ່ມີອາກາດ
  • ນຳໃຊ້ອາກາດຫຼັງຈາກຄຳແນະນຳຄະແນນສຽງ ຫຼື ສຽງສັດ
  • ນຳໃຊ້ຄະແນນສຽງສັດຫຼັງຈາກການຕິດຕໍ່ທຸກຈຳນວນ (ລວມທັງສຸດທ້າຍ)
  • ນຳໃຊ້ຄຳແນະນຳຂອງການບັນຍາຍໃນຄຳສັບທີ່ບັນຍາຍມີອາກາດ
  • ການປິດສະໜອງອອກຫຼັງຈາກສຽງອາກາດໃໝ່
  • ຫຼີກລ່ຽງບໍ່ໃຫ້ຈຳນວນຄຳສັບເປັນຫຼາຍກວ່າ 80 ຄັ້ງ

ບັນທາງ:ການເພີ່ມອາກາດຫຼັງຈາກຄຳແນະນຳຄະແນນສຽງ ຫຼື ສຽງສັດ ແມ່ນຕາມກົດຂອງການຂຽນທຸກສິ່ງ

ການເອົາ JavaScript ເຂົ້າໃນ HTML

请使用简单的语法来加载外部脚本（type 属性不是必需的）：