ジュニアのフロントエンドが高品質のコードを書くにはどうすればよいでしょうか?

1つのHTML
1. DOCTYPEの宣言は基本的に今のH5の世界になっており、ショートカットキーで直接生成できます。
2. 文字セット宣言 (通常は )、スペースなどの記号文字をエスケープすることを忘れないでください -  3. インデントを修正します。ファミリーマートのコードは次のとおりです。インデントが設定されているので、あまり必要なくそのまま使えます
4.cssやjsは外部リンクの使用を重視しているので、各コンポーネントにコンポーネント化されたものを記述することができるようになりました。スキンの変更などのエフェクトを簡単に実現
5. タグのネストを修正する
6. 不要なタグを削除します。たとえば、

は、div と ul が両方ともブロックレベルの要素であるため、意味的には外側の div を削除できます
7. ページ作成時に領域を設定します。 . サイト全体をレイアウトした後、小さな領域のブロックを調整したい場合は、本文または近くの大きな領域のブロックに別のクラス(IDでも可)を直接定義して、スタイル処理を行うことができます
8.これら 2 つを満たせない場合を除き、画像、スタイル、スクリプト、および他のメディア ファイル URL (http:、https:) のプロトコル部分を省略します。例:
9. インデントには 2 つのスペースを使用します (できるだけ均一である必要はありません)。コード形式を実装するには
10. タグ名、属性、属性値には小文字を使用するようにしてください
11. 要素のコンテンツ内の不要なスペースを減らし、コンテンツの末尾にスペースを使用しないでください。
12. 機能を説明する適切なコメントを追加します。
13. TODO を追加して、ToDo 項目をマークします。例:

• Apples
• Oranges

14.h5 ミッドレーンタグは必須ではありません。閉じた形式で、ラベルを直接書き込みます。たとえば、
を
として記述しないでください。キャンバス アニメーションなどのマルチメディア要素は、他のアクセス可能なコンテンツが提供されることを保証します。例：
17. スタイルシートを参照する場合、typeはデフォルトでtext/cssを指定しますが省略可能です。スクリプトを参照する場合、typeはデフォルトでtext/javascriptを指定しますが、省略可能です
18. 属性値には二重引用符を使用します
19. 公開されたコードは圧縮する必要があります

2番目のCSS
1. リセットの使用。各ブラウザのデフォルトの属性値が異なり、互換性を考慮する必要があるため、まずその役割を明確にします。グローバル リセットは非効率なので使用しないでください。
2. 属性の順に、display、margin、padding、positionなど、レイアウトを変更するものを前に書き、それ以外を後ろに書きます(アルファベット順に並べることも可能)
3. 意味のあるidを定義するおよびクラス名を短く明確にします。複数の単語にはコネクタを使用します
4. 大きなブロックで ID を定義し、

...nMultiple などのブロック内の要素を検索してみてください。 content

は検索に使用できます# content .title-color{color:red}
5. font-family: palatino、georgia、serif; font-size: 100%; などの省略された属性を使用します。 : 1.6; font: 100%/1.6 palatino, georgia, serif;
6. 属性値が 0 の場合、padding: 0 15px などの単位を追加しません
7. 値が -1 の間の場合font-size:.8em
のように、1、0 は省略できます。 8. カラー値 color: #eebbcc の代わりに color: #ebc のように 16 進数を使用します
9. 各スタイルはセミコロン (;) で終了します
10セレクターと {} の間、および属性名と属性値の間にはスペースが必要です (コーディング時にフォーマットすることを忘れないでください)
11. 属性値には一重引用符を使用し、URI には引用符を追加しないでください
12. セクションごとにコメントします。すべてのスタイルにコメントする必要はありません (ぼやけやすい場合を除く)
13. 継承をうまく活用し、親要素にスタイルを定義し、子要素はそのスタイルを継承します。継承できる属性 (font-starting、text-starting、line-height など)
14. 表現が存在しない場合は、visibility:hidden の代わりに display:none を使用してみてください。前者はブラウザのメモリを占有しないためです。分析、後者はメモリ内で行われます スペースを作成します
15. @import の使用を避ける
16. 公開されたコードは圧縮する必要があります

以上がジュニアのフロントエンドが高品質のコードを書くにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。