Style Guide at Code Convention ng HTML(5)

HTML kodigo kasunduan

Ang mga web developer ay madalas na hindi sigurado sa estilo ng kodigo at syntax na gagamitin sa HTML.

Sa panahon ng 2000 hanggang 2010, maraming web developer ang nagpalit mula sa HTML tungo sa XHTML.

Sa pamamagitan ng XHTML, ang mga developer ay dapat sumulat ng wastong 'magandang format' na kodigo.

Ang HTML5 ay mas bukas sa pag��bukas ng kodigo sa pag��bukas ng kodigo.

Sa pamamagitan ng HTML5, kailangan mong lumikha ng iyong sarilingPinakamahusay na kasanayan, pamamaraan at kasunduan ng kodigo。

Intelligente at may pananalig sa hinaharap

Ang logikal na paggamit ng estilo ay madadaling maunawaan at gamitin ng iba ang iyong HTML.

Sa hinaharap, ang mga programang tulad ng XML reader ay maaaring kailanganang basahin ang iyong HTML.

Gamitin ang magandang format ng syntax na katulad ng XHTML, upang maging mas matalino.

Mga puna:Pangalagaan na manatiling malinaw, maayos, malinis at may magandang format ang iyong estilo.

Gamitin ang tamang uri ng dokumento

Pangalagaan na palaging ideklara ang uri ng dokumento sa unang linya ng iyong dokumento:

<!DOCTYPE html>

Kung ang iyong pangkaraniwang tag ay maliliit na titik, maaari mong gamitin:

<!doctype html>

Gamitin ang maliliit na titik na pangalan ng elemento

Ang HTML5 ay nagbibigay ng pahintulot na gamitin ang paghahalo ng malaki at maliliit na titik sa pangalan ng elemento.

Naniniwala kami na dapat gamitin ang maliliit na titik na pangalan ng elemento:

  • Ang paghahalo ng malaki at maliliit na titik na pangalan ay hindi maganda
  • Ang mga developer ay nagsasagawa ng pangalang maliliit na titik (halimbawa, sa XHTML)
  • Ang maliliit na titik ay mas malinis na magiging malinis
  • Ang maliliit na titik ay mas madali sa pagsulat

Hindi masyadong mabuti:

<SECTION> 
  <p>Itong paragrapo.</p>
</SECTION>

Napakasama:

<Section> 
  <p>Itong paragrapo.</p>
</SECTION>

Hindi masyadong masama:

<section> 
  <p>Itong paragrapo.</p>
</section>

Isara ang lahat ng HTML na elemento

Sa HTML5, hindi mo kailangang isara ang lahat ng elemento (halimbawa, ang elemento <p>).

Naniniwala kami na dapat isara ang lahat ng mga HTML na elemento:

Hindi maganda ito:

<section>
  <p>Ang paglalarawan ng isang paragrapo.
  <p>Ang paglalarawan ng isang paragrapo.
</section>

Ginaganda ito:

<section>
  <p>Itong paragrapo.</p>
  <p>Itong paragrapo.</p>
</section>

Pagtutulak ng walang laman na HTML element

Sa HTML5, ang pagtutulak ng walang laman na HTML element ay可选的。

Pinalalampasan din ito:

<meta charset="utf-8">

Pinalalampasan din ito:

<meta charset="utf-8" />

Ang likod na slash (/) ay kinakailangan sa XHTML at XML.

Kung umaasa ka sa XML software na makapasok sa iyong pahina, mas mabuti kung ito ay magiging kaayusan.

Gamitin ang maliliit na pangalan ng propyetyo

HTML5 ay pinapayagan ang paghahalo ng mga pangalan ng propyetyo na may mixed na kapistahan.

Rekomendamos na gamitin ang maliliit na pangalan ng propyetyo:

  • Ang paghahalo ng pangalan ng propyetyo ay lubhang hindi maganda
  • Ang mga developer ay magiging maginhawa sa paggamit ng maliliit na pangalan ng propyetyo (katulad ng sa XHTML)
  • Ang maliliit na pangalan ng propyetyo ay mas napapangit na nagsasalaysay
  • Ang maliliit na mayorya ng mga pangalan ng propyetyo ay madaling isulat

Hindi maganda ito:

<div CLASS="menu">

Ginaganda ito:

<div class="menu">

Magdagdag ng salita sa halaga ng propyetyo

HTML5 ay pinapayagan ang mga halaga ng propyetyo na walang inilalagong salita.

Rekomendamos na magdagdag ng salita sa halaga ng propyetyo:

  • Kung ang halaga ng propyetyo ay mayroong halaga, dapat gamitin ang salita
  • Ang paghahalo ng estilo ay lubhang hindi maganda
  • Ang halaga na may inilalagong salita ay mas madaling basahin

Ang halaga ng propyetyo ay hindi lehitimo dahil mayroon itong espasyo sa loob ng halaga:

<table class=table striped>

Ganito ay lehitimo:

<table class="table striped">

Mandahang Atributo

Mag-define palagi ng imahe sa paggamit ng alt Atributo. Mahalaga ito kapag ang imahe ay hindi makakita.

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

Mag-define pa lang ng laki ng imahe palagi. Ganito ay makakabawas sa pagkabagabag, dahil ang browser ay mag-i-allocate ng espasyo para sa imahe bago ito magaload.

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

Espasyo at pagkakapareho

Ang espasyo sa tabi ng pagkakapareho ay lehitimo:

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

Ngunit ang simpleng espasyo ay mas madaling basahin But space-less is easier to read, and groups entities better together:

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

Iwasan ang mahabang linya ng kodigo

Kapag gumagamit ng HTML editor, ang pagbabasa ng HTML kodigo sa pamamagitan ng pagpaliliko ng kanan at kanan ay hindi maginhawa.

Mag-iwasan mo ang pagiging higit sa 80 na character ng bawat linya ng kodigo.

Walang laman na mga linya at indendasyon

Huwag magdagdag ng walang dahilan na walang laman na mga linya.

Para mapabuti ang pagbabasa, magdagdag ng walang laman na mga linya upang hatiin ang malalaking o pilosopikong bloke ng kodigo.

Para mapabuti ang pagbabasa, magdagdag ng dalawang espasyo ng indendasyon. Huwag gumamit ng TAB.

Huwag gumamit ng hindi kinakailangang walang laman na mga linya at indendasyon.

Hindi kinakailangan:

<body>
  <h1>Pangunahing Siyudad</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo ang kapital ng Hapon, ang sentro ng Malawakang Tokyo Area,
    at ang pinakamaraming populasyon na metropolitan area sa mundo.
    Ito ang lugar ng gobyerno ng Hapon at ang Imperial Palace,
    at ang tahanan ng Hapones Imperial Family.
  </p>
</body>

Mas mahusay:

<body>
<h1>Pangunahing Siyudad</h1>
<h2>Tokyo</h2>
<p>
Tokyo ang kapital ng Hapon, ang sentro ng Malawakang Tokyo Area,
at ang pinakamaraming populasyon na metropolitan area sa mundo.
Ito ang lugar ng gobyerno ng Hapon at ang Imperial Palace,
at ang tahanan ng Hapones Imperial Family.
</p>
</body>

Halimbawa ng table:

<table>
  <tr>
    <th>Pangalan</th>
    <th>Desisyon</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Desisyon ng A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Desisyon ng B</td>
  <tr>
</table>

Halimbawa ng listing:

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

Mawawala ang <html> at <body>?

Sa HTML5 standard, maaaring mawala ang <html> at <body> tags.

Ang sumusunod na code ay para sa HTML5 na pagtutustusan:

Mga halimbawa

<!DOCTYPE html>
<head>
  <title>Pamagat ng Pahina</title>
</head>
<h1>Itong pamagat.</h1>
<p>Itong paragrapo.</p>

亲自试一试

Hindi namin inirekomenda na alisin ang <html> at <body> tags.

Ang <html> elemento ay ang pangunahing elemento ng teksto. Ito ang pinakamagandang lugar para sa pagtatalaga ng wika ng pahina.

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

Ang pag-deklara ng wika ay mahalaga para sa mga aplikasyon na may accessibilidad (screen readers) at mga search engine.

Ang pag-alisin ng <html> o <body> ay maaaring pumukaw sa DOM at XML software.

Ang pag-alisin ng <body> ay magiging maling resulta sa lumang browser (IE9).

Mawawala ang <head>?

Sa HTML5 standard, ang <head> tag ay maaaring mawala din.

Pangkaraniwan, ang browser ay magdadagdag sa lahat ng elemento bago ang <body> sa default na <head> elemento.

Sa pamamagitan ng pag-alisin ng <head> tag, madaling mapabawas ang kumplikasyon ng HTML:

Mga halimbawa

<!DOCTYPE html>
<html>
<title>Pamagat ng Pahina</title>
<body>
  <h1>Itong pamagat.</h1>
  <p>Itong paragrapo.</p>
</body>
</html>

亲自试一试

Mga puna:Para sa mga web developer, ang pag-iwas ng tag ay hindi kilala. Ang pagtatatag ng patakaran ay nangangailangan ng panahon.

Metadata

Ang elementong <title> ay kinakailangan sa HTML5. Isagawa ang makabuluhang mga pamagat sa pagsisikap.

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

Para masigurado ang tama na pagpaliwanag, at ang tama na pag-ayos ng search engine index, itakda ang paglalarawan ng wika at character encoding sa unang panahon sa dokumento:

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

Komento ng HTML

Ang maikling puna ay dapat isulat sa isang linya, at magdagdag ng isang pagkakatulad pagkatapos ng <!-- at bago ang -->:

<!-- This is a comment -->

Ang mahabang puna, na tumatagal ng ilang linya, ay dapat isulat sa hiwalay na linya sa pamamagitan ng <!-- at -->:

<!-- 
  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.
-->

Ang mahabang puna ay mas madaling mapansin kapag sila ay pinagindot na may dalawang pagkakatulad.

Style Sheet

Gumamit ng simpleng sintaksis sa pagkakakonekta ng style sheet (ang attribute na type ay hindi kinakailangan):

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

Ang maikling patakaran ay maaaring kompresihin sa isang linya, tulad nang ito:

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

Ang mahabang patakaran ay dapat hatiin sa ilang linya:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Ilagay ang bukas na pungo at ang selector sa parehong linya
  • Gumamit ng pagkakatulad bago ang bukas na pungo
  • Gumamit ng dalawang character na pagkakasusuka
  • Gumamit ng pahaba ng kumita kasama isang pagkakatulad sa bawat katangian at halaga
  • Gumamit ng pagkakatulad sa bawat kumita o pahaba ng kumita
  • Gumamit ng pahaba ng kumita sa bawat pares ng halaga ng katangian (kasama ang huling isa)
  • Gumamit lamang ng mga salita ng pagkakabungad para sa mga halaga na naglalaman ng pagkakatulad
  • Ilagay ang puno ng pagsasara sa bagong linya, walang pagkakatulad bago ito
  • Iwasan ang pag-over 80 na character sa bawat linya

Mga puna:Ang pagdagdag ng pagkakatulad sa paghahalata ng kumita o pahaba ng pahaba, ay isang pangkaraniwang patakaran sa pagpili ng pagsusulat.

Mag-loading ng JavaScript sa HTML

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

<script src="myscript.js">

通过 JavaScript 访问 HTML 元素

使用“不整洁”的 HTML 样式的后果，是可能会导致 JavaScript 错误。

这两个 JavaScript 语句会产生不同的结果：

var obj = getElementById("Demo")
var obj = getElementById("demo")

亲自试一试

如果可能，请在 HTML 中使用（与 JavaScript）相同的命名约定。

请访问 JavaScript 样式指南。

使用小写文件名

大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：

不能以 london.jpg 访问 London.jpg。

其他 web 服务器（微软，IIS）对大小写不敏感：

能够以 london.jpg 或 London.jpg 访问 London.jpg。

如果使用混合大小写，那么您必须保持高度的一致性。

如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏您的网站。

为了避免这些问题，请始终使用小写文件名（如果可以的话）。

文件扩展名

HTML 文件名应该使用扩展名 .html（而不是 .htm）。

CSS 文件应该使用扩展名 .css。

JavaScript 文件应该使用扩展名 .js。