コードを整然と保つための 11 のルール-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

コードを整然と保つための 11 のルール

Apr 05, 2017 pm 05:09 PM

コードルール

Web ページを書くことは家を建てることと同じで、家が倒れないように基礎をしっかりと作ります。 Web ページを作成する場合にも同様に、優れた CSS は同様に優れた HTML にのみ存在するため、日常の制作においては優れた HTML 構造が多くの利点をもたらします。、これは達成できましたか？一緒に写真を見てみましょう:

上の図は 2 つのコードを示しています。最初のコードだけを気に入っていただけると思います。少なくともその構造については触れませんが、2 番目のコードについてはどうでしょうか。一見ダメなコードに見えるコード、嫌われてしまうコード。では、どうすれば良いコード、きれいなコードを書くことができるのでしょうか?今後コードを書くときに次の 12 の原則を守ることができれば、コードの品質は確実に向上し、作成したコードは誰からも愛されるようになります。

1. DOCTYPEのステートメント

何かをうまく実行したい場合は、それを実行するためにどのような権限が必要かを最初に知る必要があります。「DOCTYPE」ステートメントと同様に、HTML4.01 を使用するか XHTML1.0 を使用するか、または現在の HTML5 が厳密な機能を提供するかを議論する必要はありません。バージョンまたは移行バージョン、これらは私たちが書くコードを十分にサポートできます:

現在のレイアウトはテーブルレイアウトなしでも適切なレイアウトを作成できるため、下位互換性を確保するために、遷移タイプを使用せずに厳密な「DOCTYPE」を使用することを検討できます。

<!DOCTYPE HTML>

この知識についてさらに詳しく知りたい場合は、次をクリックしてください:

W3C: Web ドキュメントで使用する推奨 DTD
適切な DOCTYPE でサイトを修正してください!
移行 DOCTYPE はもうやめてください

2. 文字セットとエンコードされた文字

各ページの先頭で、<head> に文字セットを設定します。ここではすべて「UTF-8」を使用します

&lt;meta charset=&quot;UTF-8&quot; /&gt;

ログイン後にコピー

。そして、私たちが通常ページに書くとき、「&」のような記号に遭遇することが多いので、次のように「&」をページに直接書かないでください:

これを実現するには、コード内で文字エンコーディングを使用する必要があります。たとえば、コード内で「&」を「&」に置き換える必要があります。

この知識についてさらに詳しく知りたい場合は、次をクリックしてください:

ウィキペディア: UTF-8
文字コードの問題に関するチュートリアル
拡張 ASCII テーブル

3. コードのインデントを修正する

ページ編集では、コードのインデントが正しいかどうかは Web サイトの機能には影響しませんが、インデントの原則が標準化されていない場合、コードを読む人は非常に怒るでしょう。そのため、コードのインデントが正しいと Web サイトの機能が向上します。コードの読みやすさ。標準的なプログラムのインデントはタブ文字 (またはいくつかのスペース) である必要があります。よりわかりやすくするために、記事の冒頭の図を見てみましょう。または、それを読んだ後に次の図を見てください。将来的にはどのように使用するかがわかります。人々が楽しく読めるコードの書き方:

言うまでもなく、以下のコードは誰もが気に入るはずです。これは単なる習慣の問題ですが、他の人や自分自身のためにも、最初からしっかりと行うことをお勧めします。この側面の概要については、「HTML TIDY を使用して Web ページをクリーンアップする」も参照してください。

4. CSS スタイルと Javascript スクリプトを外部リンクします

ページに CSS スタイルを記述する方法は数多くありますが、その中にはスタイルをページの「<head>」に直接記述する方法もあります。これはマークアップを台無しにするだけでなく、非常に悪い習慣になります。これらのスタイルも、この HTML ページにのみ適しています。したがって、ページを変更する必要がある場合は、スタイルファイルを変更するだけで、後続のページもこれらのスタイルにリンクできるように、CSS を分離して外部に保存する必要があります。下の写真に示すように:

上で話しているのは単なるスタイルです。実際、JavaScript スクリプトは CSS スタイルと同じです。写真とテキストで最終的に表現したいことは、「Web ページを作成するときは、CSS スタイルと JavaScript スクリプトを別のファイルに配置し、リンクを通じてこれらのファイルを参照するようにしてください。これの最大の利点は、はい、それです」スタイルとスクリプトの管理と変更に便利です」

。 5. ラベルのネストを修正する

HTML を記述するときは、HTML の記述を完了するために常にタグの階層的なネストが必要になります。しかし、これらの HTML のネストには特定のルールがあります。詳しく説明するには、いくつかの章を使用する必要がある場合があります。今日私がここで言いたいのは、HTML を書くときに次のような重大な間違いを犯すべきではないということです:

たとえば、上の図の構造は、「<a>」の中に「<h1>」を入れることができないことに注意してください。インライン要素内に要素を置くことはできません。上記はほんの一例ですが、みなさんも日常の制作においてこのようなスーパーミスをしないようにと願うばかりです。

6.不要なタグを削除します

まず、例のスクリーンショットを見てみましょう:

上の図は明らかにナビゲーションメニューの生成です。上の例では、リスト「ul#bigBarNavigation」をラップする「p#topNav」があり、「p」リストと「ul」リストは両方ともブロック要素です。ここで「ul」をラップするために使用されている「p」はまったく効果がありません。「p」の登場はWebページを作る上で大きなメリットをもたらしてくれましたが、普段はそこまで細かいところまで気にする必要はないのではないでしょうか？もしあなたもそのような経験をしたことがあれば、今日から、私たちはそのような間違いを修正するために協力します。

ラベルの正しい使用方法については、興味があればクリックしてください: 膿瘍: その正体とその治し方

7. より良いネーミングを使用する

ここで言う名前付けとは、ページ内の関連する要素のクラス名または ID 名を定義することです。たとえば、要素に赤いフォントが付いている場合、それに「赤」を追加したり、レイアウトに「」と書いたりする習慣があります。 left-sidebar」などですが、この要素が「赤」で定義されていて、顧客が数日後に「青」を要求した場合はどうなるか考えたことはありますか?つまり、当時の「左サイドバー」というサイドバーは、左側ではなく右側に置きたかったのです。このように、これまでのネーミングには全く意味がなかったとも言えます。下の写真を表示:

次に、私がコードを理解できるだけでなく、他の人もコードを簡単に理解できる適切な名前を定義することが非常に重要です。たとえば、「mainNav」、「subNav」、「footer」などの適切な名前を定義します。 . 、彼は何が関係しているかを説明することができます。悪い点は上記の通りです。

これについて詳しく知りたい場合は、次をクリックしてください:

CSS クラスと ID 名の標準化
CSS のヒント #2: CSS の構造命名規則
CSSコーディング: 命名規則におけるセマンティックなアプローチ
CSS の命名規則とコーディングスタイル

8. CSSのバージョンを残す

メニューをデザインするとき、すべてのメニューオプションのテキストをすべて大文字にする必要がある場合がありますが、通常は HTML タグ内で直接大文字に設定しますか?もしそうなら、将来のスケーラビリティを高めるために、HTML ですべて大文字に設定しないほうが良いと思います。CSS を使用してこれを実現することです。

9. <body>のクラス名またはID名を定義します

Web ページを作成するときに、Web ページ全体が同じレイアウトと構造を使用している、つまり、ページのレイアウトで同じ構造と同じクラス名が使用されている、というような問題に遭遇したことがあるかどうかはわかりません。上司は、顧客の要望に応えて、サイドバーとメインコンテンツの間でページのレイアウトを交換する必要があると言いました。現時点では、レイアウトを変更するためだけにページ全体の構造を変更する必要はありません。そのため、ページの「<body>」に特別なクラス名または ID 名を定義するのが良いでしょう。望むことを簡単に達成できるということ。この方法を以前に使用したことがあるかどうかはわかりません:

「<body>」の一意のクラスと ID 名を定義することは、上記のようなレイアウトの変更に役立つだけでなく、ページの特定の部分を実装するのに役立つ場合があるという非常に強力な機能です。特殊効果は他のページのパフォーマンスには影響しません。なぜこのような機能があるのかは説明するまでもありませんが、誰もが知っていると思います。各ページのコンテンツは「<body>」の子孫要素であるためです。

この知識についてさらに詳しく知りたい場合は、次をクリックしてください:

CSS の制御と具体性を高めるために身体を識別します

ケーススタディ: body クラスを使用したスタイルの再利用

10. コードを確認してください

人は必ず間違いを犯します。コードを書くときも同じです。たとえば、要素のタグを閉じるのを忘れたり、必要な属性を書き忘れたりすることがあります。たとえどんな悲惨な結果をもたらしたとしても、与えられない失敗もあるでしょうが、それはあなたに予測できない間違いももたらすでしょう。したがって、コードの作成が完了したら、コードを検証することをお勧めします。検証済みのコードは常に未検証のコードよりも優れています:

コードを効果的に検証するために、コードの完成に役立つ関連ツールまたはブラウザプラグインを使用できます。コードにエラーがない場合、W3C 検証ツールは目の前に緑色のテキストを表示します。作成したコードが W3C 標準に耐えられることが改めて証明されるため、非常に興奮します。

この知識についてさらに詳しく知りたい場合は、次をクリックしてください:

W3C マークアップ検証サービス

XHTML-CSS バリデータ

無料のサイトバリデータ (1 ページだけでなく、サイト全体をチェックします)

11. 論理シーケンス

これはまれなエラー状況です。ページを作成するときに誰もが論理的な順序を崩さないと思うからです。言い換えれば、可能であれば、最初にヘッダーを記述し、次に本文を記述するなど、Web サイトの論理的な順序を設定することが最善です。、最後にフッターです。もちろん、フッター部分がコードのサイドバーの上にある場合があります。これは、それが Web サイトのデザインのニーズに最も適しているためである可能性がありますが、他の方法で実装する必要があります。フッターをページの最後に配置し、特定のテクニックを使用してデザインのニーズを満たすようにします:

上記では、きれいな HTML コードを書き始めるためのいくつかの方法について説明しました。プロジェクトの初めからこれは非常に簡単ですが、既存のコードを修正する必要がある場合は、多かれ少なかれ困難になります。私が上で述べたことは、主に、適切でクリーンな HTML コードを記述し、それを忠実に書く方法を学ぶ方法を説明するためです。この記事を読んだ後、ゼロから始めて、次のプロジェクトできれいな HTML コードを書くことにこだわっていただければ幸いです。

関連ドキュメント: 最も一般的な HTML タグの間違い 10 選

英語のソース: コードをクリーンに保つための 12 の原則

以上がコードを整然と保つための 11 のルールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。