హెచ్టిఎంఎల్(5) స్టైల్ గైడ్స్ అండ్ కోడ్ కన్వెన్షన్స్

HTML 代码约定

web 开发者常常不确定在 HTML 中使用的代码样式和语法。

在 2000 年至 2010 年之间，许多 web 开发者从 HTML 转换为 XHTML。

通过 XHTML，开发者不得不编写有效的“格式良好的”代码。

HTML5 在代码验证时会更宽松一点。

通过 HTML5，您必须创建属于自己的最佳实践、样式指南和代码约定.

智能且有未来保证

对样式的合乎逻辑的使用，可以令其他人更容易理解和使用您的 HTML。

在未来，诸如 XML 阅读器之类的程序，也许需要阅读您的 HTML。

使用格式良好的“近似 XHTML 的”语法，能够更智能。

పరిశీలనా కింద ఉంది:请始终保持您的样式智能、整洁、纯净、格式良好。

请使用正确的文档类型

请始终在文档的首行声明文档类型：

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

అన్ని హెచ్ఎంఎల్ ఎలిమెంట్స్ మూసివేయండి

హెచ్ఎంఎల్5 లో, మీరు అన్ని ఎలిమెంట్స్ ను మూసివేయవలసిలేదు (ఉదాహరణకు <p> ఎలిమెంట్).

మేము అనుకుంటున్నాము అన్ని హెచ్ఎంఎల్ ఎలిమెంట్స్ ను మూసివేయాలి:

ఇది చాలా చెడు ఉంటుంది:

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

ఇది చాలా బాగుంది:

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

关闭空的 HTML 元素

在 HTML5 中，关闭空元素是可选的。

允许这样：

也允许这样：

斜杠（/）在 XHTML 和 XML 中是必需的。

如果您期望 XML 软件来访问您的页面，保持这个习惯是个好主意。

使用小写属性名

HTML5 允许大小写混合的属性名。

我们建议使用小写属性名：

  • మిశ్రమైన అంశాలు చాలా చెడు అని ఉంది:
  • డెవలపర్లు క్షుద్ర అంశాలను ఉపయోగించడానికి అభ్యసించారు (ఉదాహరణకు, XHTML లో ఉన్నది)
  • క్షుద్ర అంశాలు చిన్న అంశాలను చదివినది సులభం కాగలదు
  • చిన్న అంశాలను సులభంగా రాయడానికి క్షుద్ర అంశాలు ఉపయోగించబడతాయి (ఉదాహరణకు, XHTML లో ఉన్నది)

ఇది చాలా చెడు ఉంటుంది:

<div CLASS="menu">

ఇది చాలా బాగుంది:

<div class="menu">

అంశం విలువలో కుట్టులు జోడించడం

హెచ్ఎంఎల్5 అనేది కుట్టులేని అంశం విలువలను అనుమతిస్తుంది.

మాకు అంశం విలువలో కుట్టులు జోడించడం నివేదిస్తుంది:

  • అంశం విలువలో మూల్యాన్ని కలిగి ఉన్నప్పుడు అంశాన్ని కుట్టులతో చుట్టబడి ఉంచాలి:
  • మిశ్రమైన శైలులు చాలా చెడు అని ఉంది:
  • అంశం విలువలో కుట్టులు జోడించినది చదివినది సులభం అని ఉంది:

ఈ అంశం మూల్యం ఖాళీ లను కలిగి ఉండటం వలన అది చట్టబద్ధం కాదు:

<table class=table striped>

ఇది చాలా చక్కగా ఉంటుంది:

<table class="table striped">

అవసరమైన అంశం

ఎల్లప్పుడూ చిత్రానికి ఉపయోగించండి alt అంశం. చిత్రం చూపించలేక పోయినప్పుడు ఈ అంశం ముఖ్యం అని ఉంది.

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

ఎల్లప్పుడూ చిత్రం పరిమాణాన్ని నిర్వచించండి. ఇది స్పందనను తగ్గించగలదు, ఎందుకంటే బ్రౌజర్ చిత్రాన్ని లోడ్ చేయడానికి ముందు స్థలాన్ని కేటాయిస్తుంది.

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

ఖాళీ లు మరియు సమతుల్యాన్ని

ఇక్కడ ఖాళీ లు చట్టబద్ధం అని ఉంది:

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

కానీ ఖాళీ లేనిది చదివినది సులభం అని ఉంది: అయితే ఖాళీ లేనిది చదివినది సులభం మరియు అంశాలను మరింత బంధించుకుంటుంది:

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

పొడవైన కోడ్ వరుసలను నివారించండి

హెచ్ఎంఎల్ ఎడిటర్ వాడినప్పుడు, హెచ్ఎంఎల్ కోడ్ ని చదివినది చాలా అసౌకర్యం.

సరిగ్గా, 80 అక్షరాలకు పైగా కోడ్ వరుసలను ఉంచకండి.

ఖాళీ లు మరియు ఇండెంట్ లు

ఎందుకో లేకుండా ఖాళీ లను జోడించకండి.

పఠనికతను పెంచడానికి, పెద్ద లేదా లాజికల్ కోడ్ బ్లాక్ లను వేరు చేయడానికి ఖాళీ లను జోడించండి.

పఠనికతను పెంచడానికి, రెండు ఖాళీలను జోడించండి. టాబ్ ని వాడకండి.

దానికి అవసరం లేని ఖాళీ లను మరియు ఇండెంట్ లను వాడకండి.

అవసరమల్లో లేనిది:

<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> టాగ్‌లను తొలగించాలా?

హెచ్‌ఎంఎల్5 ప్రమాణంలో, <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> టాగ్‌ను తొలగించాలా?

హెచ్‌ఎంఎల్5 ప్రమాణంలో, <head> టాగ్‌ను తొలగించవచ్చు.

ప్రకృతిలో, బ్రాఉజర్ మీ <body> టాగ్ ముందు అన్ని అంశాలను ప్రమాణిక <head> టాగ్‌కు జతచేస్తుంది.

ప్రకృతిలో, మీరు <head> టాగ్‌ను తొలగించినప్పుడు, మీరు హెచ్‌ఎంఎల్ యొక్క కళాదృష్టిని తగ్గించవచ్చు:

ప్రామాణిక

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

స్వయంగా ప్రయోగించండి

పరిశీలనా కింద ఉంది:వెబ్ డెవలపర్లకు, టాగ్లను సరిహద్దు చేయడం వింతగా ఉంటుంది. నియమాలను నిర్మించడానికి సమయం అవసరం ఉంటుంది.

మెటా డాటా

<title> అట్టరిబ్యూట్ హ్ట్మ్ల్‌లో అవసరం. వివరణాత్మకమైన శీర్షికలను తయారు చేయండి ప్రయత్నించండి:

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

హెచ్టిఎంఎల్ కమ్మెంట్స్

చిన్న పరిశీలనాలు ఒక పంక్తిలో రాయండి, మరియు <!-- తర్వాత స్పేస్ జోడించండి, --> మరియు --> ముందు స్పేస్ జోడించండి:

<!-- 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 అక్షరాలకు మించకుండా ఉంచండి

పరిశీలనా కింద ఉంది:కామస్ లేదా సెకండ్ మాక్స్ తర్వాత స్పేస్ జోడించడం అన్ని రకాల రాయకార్డుల సాధారణ నియమం.

హ్ట్మ్ల్‌లో జావాస్క్రిప్ట్ లోడ్ చేయండి

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