翻訳者から
これらの推奨事項を喜んで読み、翻訳を提供します。
はじめに
このガイドでは、HTMLおよびCSSコードのフォーマットとフォーマットのルールについて説明します。 その目標は、コードの品質を改善し、コラボレーションとインフラストラクチャサポートを促進することです。
これは、 HTML 、 CSS 、およびGSSを使用するファイルの作業バージョンに適用されます。
コードの全体的な品質が保持されている場合、任意のツールを使用してコードのコンパイルまたは難読化を最小限に抑えることができます。
一般的な設計ルール
プロトコル
ページにリソースを含めるときにプロトコルを指定しないでください。もちろん、これらのファイルが両方のプロトコルでアクセス可能な場合、画像または他のメディアリソース、スタイルファイル、またはスクリプトへのリンクでは、プロトコルの名前（ http：、 https :)を省略します。
プロトコルが存在しないため、リンクが相対的になり、異なるプロトコルからのリソースの混合が防止され、ファイルサイズがわずかに小さくなります。
非推奨：
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
:
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
:
.example {
background: url(http://www.google.com/images/example);
}
:
.example { background: url(//www.google.com/images/example); }
.
.
:
<ul>
<li>
<li>
</ul>
:
.example { color: blue; }
.
: , , ( /CDATA), , ( ).
:
<A HREF="/"></A>
:
<img src="google.png" alt="Google">
.
diff.
:
<p>?_
:
<p> .
UTF-8 ( BOM).
, UTF-8 (BOM).
HTML <meta charset="utf-8">. ss-: UTF-8 .
( , , , : XHTML, HTML CSS (.).)
, .
, : , , .
( , , . HTML CSS . )
TODO.
TODO. , @@.
( ) : TODO().
, : TODO: .
:
{# TODO(Ivan Ivanov): #}
<center></center>
:
<!-- TODO: -->
<ul>
<li></li>
<li></li>
</ul>
HTML
HTML5.
HTML5 (HTML ) html-: <!DOCTYPE html>.
( HTML text/html. XHTML, application/xhtml+xml (.), . )
HTML
HTML.HTML , , , .
W3C HTML validator (.) .
— . HTML HTML.
:
<title></title>
<article>
:
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<article> .</article>
HTML , .
( “”) : , p , a ..
, .
:
<div onclick="goToRecommendations();">All recommendations</div>
:
<a href="recommendations/">All recommendations</a>
.
: , , canvas. (alt), .
. , @alt. .
( alt , , CSS, alt="")
:
<img src="spreadsheet.png">
:
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
, .
(), () () .
, HTML, HTML . , , , — .
, .
. HTML- .
:
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML </h1>
<p> - , :
<u>HTML - !!1</u>
<center> , ,
. </center>
:
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1> CSS </h1>
<p> , - :
HTML
<p> !
-
-.-, —, ”, ☺, , (UTF-8)
— HTML ( < &) “” ( ).
:
: “&eur;”.
:
: “€”.
. ( )
. HTML5 (.) .
( , , , -. , , , ).
:
<!DOCTYPE html>
<html>
<head>
<title> - .</title>
</head>
<body>
<p>.</p>
</body>
</html>
:
<!DOCTYPE html>
<title>-!</title>
<p>-
'type'
type .type ( - CSS) ( JavaScript).
type HTML5 text/css (.) text/javascript (.) . .
:
<link rel="stylesheet" href="//www.google.com/css/maia.css"
type="text/css">
:
<link rel="stylesheet" href="//www.google.com/css/maia.css">
:
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
type="text/javascript"></script>
:
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
HTML
, .
(CSS display), .
.
( - , li . [ . .] .
:
<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
:
<ul>
<li>
<li>
<li>
</ul>
:
<table>
<thead>
<tr>
<th scope="col">
<th scope="col">
<tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>
CSS
CSS
CSS-., - , , CSS .
W3C CSS (.) .
— . CSS …
.
, , , …
, , , , .
— , . “.”
.
:
/* : */
#yee-1901 {}
/* : */
.button-green {}
.clear {}
:
/* : */
#gallery {}
#login {}
.video {}
/* : */
.aux {}
.alt {}
, , , .
, , .
.
:
/* */
#navigation {}
.atr {}
:
/* */
#nav {}
.author {}
() .
( -), .
(.).
:
/* */
ul#example {}
div.error {}
:
/* */
#example {}
.error {}
, .
CSS (.) ( font), , .
.
:
/* */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
:
/* */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
0
.
:
margin: 0;
padding: 0;
0
“0” .0 -1 1.
:
font-size: .8em;
("", '') url().
:
@import url(//www.google.com/css/go.css);
.
.
:
/* */
color: #eebbcc;
:
/* */
color: #ebc;
. ( )
, , , ( ) . .
. .
:
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
.
, , , .
:
/* : “demo” “image” */
.demoimage {}
/* : */
.error_status {}
:
/* */
#video-id {}
.ads-sample {}
, CSS “”— .
CSS-, . , . , , , . , .
CSS
.
, , .
. , , ( -moz --webkit)
:
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
.
.(.), , .
:
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
.
.
:
.test {
display: block;
height: 100px
}
:
.test {
display: block;
height: 100px;
}
.
( ) , .
:
h3 {
font-weight:bold;
}
:
h3 {
font-weight: bold;
}
.
.
:
a:focus, a:active {
position: relative; top: 1px;
}
:
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
.
.
:
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
CSS
. ( )
. .
:
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}
, , , . , . , .
, , , , .
, , , .
, . .
, Google , , , , , , .
.