HTML ページ出力で従うべきいくつかの原則の要約

1. DOCTYPE は必須です。ブラウザは宣言した DOCTYPE に基づいてページのレンダリングルールを決定します。宣言しないと、ブラウザによって表示効果が異なる場合があります。
2. ページで使用されるエンコーディングを示すために、<title> の前に <meta> タグを追加します。そうしないと、一部のブラウザでページタイトルが文字化けして表示される場合があります。
3. <style> は <head> タグ内に配置する必要があります。そうしないと、ダウンロードが完了する前にページの見栄えが悪くなり、ブラウザは <style> のコンテンツをダウンロードした後にページを再レンダリングする必要があり、ユーザーエクスペリエンスに影響します。
4. CSS で式の使用を避けるようにしてください。そうでない場合、ページコンテンツが変更されるたびに (たとえば、JavaScript によって要素が動的に追加または削除されたり、ブラウザーウィンドウのサイズが変更されたりするたびに)、ブラウザーは式の値を再計算します。別の方法としては、JavaScript を使用して window.onload でスタイルを動的に決定して確認する方法があります。ユーザー側のリソースも大切にすべきです。
5. JavaScript を使用してページ要素の表示効果を変更する場合は、className 属性を使用して変更してみてください。特に複数のプロパティを一度に変更する場合は、element.style.color = "#ff0000" のようなステートメントの使用を避けるようにしてください。これを行う理由は 2 つあります。メンテナンスを容易にし、クライアントリソースを節約するためです。 className が変更された場合は、ページを一度だけ再レンダリングする必要がありますが、style 属性が変更された場合は、毎回再レンダリングする必要があり、コストが非常に高くなります。
6. <script /> タグは </body> タグの直前に配置する必要があります。ブラウザが <script> 内のコンテンツをダウンロードする際、他のコンテンツ（画像、フラッシュ、<script> 以降の HTML ドキュメントなど）は同時にダウンロードされません。外部スクリプトファイルが多すぎると、ユーザーは我慢できなくなり、ページが表示されるまで待ち続ける可能性があります。
簡単な例:

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>デモンストレーション</title>
<meta name="キーワード" content="テスト、デモンストレーション" />
<link rel="スタイルシート" type="text/css" href="common.css" />
<スタイルタイプ="text/css">
.test{境界線:1px 実線 #ff0000;}
.dom{幅:200px;高さ:100px;}
.notdom{幅:202px;高さ:102px;}
</スタイル>
</head>
<本文>
<div id="main" class="test"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(関数(){
$.support.boxModel の場合{
$("#main").addClass("dom");
}それ以外{
$("#main").addClass("notdom");
}
});
</スクリプト>
</本文>
</html>

簡単な追加:
HTML は適切に記述されており、標準を満たしています。
UTF-8 エンコーディングを使用することをお勧めします。
http://zh.wikipedia.org/zh-cn/Gb2312
gb2312 には 6,000 以上の漢字しか含まれておらず、「镕」という文字は含まれていません。
Windows メモ帳は GBK でエンコードされており、20,000 を超える中国語文字が含まれています。
UTF-8 には 10 個のグローバル文字が含まれています。
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />

<<: VueのTodoListケースの詳しい説明

>>: Windows 上の Docker にさまざまなソフトウェアをインストールする詳細なプロセス