HTML 初心者のための 15 のベスト プラクティス_HTML/Xhtml_Web ページ制作

以下は HTML 初心者向けの 30 のベスト プラクティスです。参考までに全員に共有します。具体的な内容は次のとおりです

1. ラベルを閉じたままにしておきます

以前は、次のようなコードをよく見かけました (注釈: これは何年前のことですか...):

XML/HTML コードコンテンツをクリップボードにコピー

1. <li>ここにテキストがあります。
2. <li>ここに新しいテキストがあります。 <
3. li>わかりますね 外装パッケージの UL/OL ラベルが欠落しており (意図的か非意図的かはわかりません)、LI ラベルも閉じ忘れられていることに注意してください。今日の基準からすると、これは明らかに悪い習慣であり、100% 避けるべきです。とにかくタグは閉じたままにしておきます。そうしないと、HTML タグを検証するときに問題が発生する可能性があります。

より良い方法

XML/HTML コード

コンテンツをクリップボードにコピー

<

ul
1. > <
2. li>ここにテキストが入ります。リ> <
3. li>ここに新しいテキストがあります リ> <
4. li>わかりますね。リ>
5. ul>
2. 正しいドキュメント タイプを宣言します

著者は以前から多くの CSS フォーラムに参加しており、ユーザーが問題に遭遇したときは、まず次の 2 つのことを行うようにアドバイスします。

1. CSS ファイルにエラーがないことを確認します。 2. 正しい doctype が追加されていることを確認します

DOCTYPE は HTML タグの前に表示され、ブラウザーがページを正しく解析できるように、ページに HTML、XHTML、または両方の混合が含まれているかどうかをブラウザーに伝えます。

通常、次の 4 つのドキュメント タイプから選択できます。

XML/HTML コード

コンテンツをクリップボードにコピー

1. >
4. >
7. >
10. >

このような文書の種類の使用に関するアドバイスに関しては、これまでとは異なる法則が適用されます。多くの人が HTML4.01 標準の使用を選択しています。 選択マニュアルの基本は、これは真の適切なソフトウェアではないため、よく検討して目的のインストールを選択する必要があるということです。

3.永远不要使用内联样式

当你在埋头書代网時、常塺手または偷懒の加上点行内css代码を通過する可能性があります、就像蠷:

XML/HTML コード复制コンテンツ到剪贴板

1. <p スタイル="color: red;" >このテキストを赤くして、本当に目立つようにし、人々に注目してもらいます。 p>

これは、依然として問題ではないと考えられますが、一般的なコードの実践では問題です。

コードを書き込む際、コンテンツ構造が完了する前に、形式のコードを追加する必要はありません。

このようなコード形式は、ネットワークの一種です。 — Chris Coyier

より良い方法は、ペイント部分を完了した後、この P の形式を外部形式のファイル内に置くことです。

建议

XML/HTML コード

复制コンテンツ到剪贴板

#someElement
1. > p { 色: 赤;     
2. }

4.すべての外部cssファイルをhead标签内に配置します

プロセス上、CSS 形式のテーブルはどこにでも組み込むことができますが、HTML の構文はネットワークのヘッドマークに組み込まれるため、ページの埋め込み速度が速くなる可能性があります。 雅虎の公開過程で、ヘッドマークに式テーブルが挿入され、これによりトップページが徐々に汚染される可能性があるため、ネットワークの読み込み速度が速くなる可能性があることがわかりました。

XML/HTML コード

复制コンテンツ到剪贴板

1. <頭>
2. <タイトル>私の好きなトウモロコシの種類タイトル>
3. <リンク rel="スタイルシート" タイプ="text/css" メディア ="画面" href="path/to/file.css" />
4. <リンク rel="スタイルシート" タイプ="text/css" メディア ="画面" href="path/to/anotherFile.css" />
5. 頭>

5.javascript文件を底部に放出

ルールに従ってください。つまり、ユーザーの画面に表示されるのが最も早い速度で表示されます。

普及している JS ファイルが特定の機能 (ポイント ボタン イベントなど) を実行するだけの場合は、それを本体の底部に取り込むのが最適な方法です。

建议

JavaScript コード复制コンテンツ到剪贴板

1. これで、私の好きなトウモロコシの種類がわかりましたね。 

        
2.      
3.      
4.      
5.     

6.永続的に内部JavaScriptを使用する必要はありません。1996年終了ではありません！

何年も前から、JS コードを HTML ダイアログに直接追加するという方法もありました。過剰な認証は必要ありませんが、このような方法でコードを外部 JS ファイルに移し、「addEventListener /attachEvent」を使用してイベント プロバイダを追加することはあまり必要ありません。 jquery 等のフレームは、「クリック」メソッドを使用する必要があるだけです。

JavaScript コード复制コンテンツ到剪贴板

1. $('a#moreCornInfoLink').click(function() {
2. alert('トウモロコシについてもっと知りたいですか?');
});

7. 開発中に検証する

Web ページ制作を始めたばかりの場合は、Web Developer Toolbar をダウンロードすることを強くお勧めします (Chrome ユーザーは自分で App Store を検索してください。つまり、ユーザーはそれを使用できない可能性があります)。コーディングプロセス中にいつでも「HTML 標準検証」と「CSS 標準検証」を使用します。 CSS を学ぶのがとても簡単な言語だと思っているなら、それはあなたを殺します。コードが甘いと、ページが抜け穴だらけになり、問題が絶えなくなります。検証、検証、再検証を繰り返すのが良い方法です。

8. ファイアバグをダウンロードします

Firebug は間違いなく Web 開発に最適なプラグインです。JavaScript をデバッグできるだけでなく、ページ タグの属性と位置を直感的に理解することもできます。さっそくダウンロードしてみましょう。

9. Firebug を使用します

著者の観察によると、ほとんどのユーザーは Firebug の機能の 20% しか使用していません。これは本当に無駄です。このツールを体系的に学ぶのに数時間費やしたほうがよいでしょう。半分の使用で 2 倍の結果が得られると思います。努力。

10. タグ名は小文字にしてください

理論的には、HTML では大文字と小文字が区別されません。たとえば、次のように何でも記述できます。

XML/HTML コード

コンテンツをクリップボードにコピー

<
1. DIV>
2. <P>トウモロコシについての興味深い事実があります。< /P>
3. DIV>

しかし、このように書かない方が良いです。大きな文字を入力しても意味がありません。コードが醜くなります。

提案

XML/HTML コード

コンテンツをクリップボードにコピー

<
1. div>
2. <p>トウモロコシについての興味深い事実があります。< /p>
3. div>

11. H1 ～ H6 タグを使用します

ウェブページでは 6 つのタグをすべて使用することをお勧めしますが、ほとんどの人は最初の 4 つだけを使用しますが、最もよく使用される H には、デバイスの使いやすさ、検索エンジンの使いやすさなど、多くの利点があります。すべての P タグを H6 に置き換えるのもよいでしょう。

XML/HTML コード

コンテンツをクリップボードにコピー

<
1. h1>これはトウモロコシに関する非常に重要な事実です。h1>
2. <h6>小さいながらも重要なトウモロコシの事実がここにあります。h6>

12.順序なしリスト (UL) を使用してナビゲーション メニューをラップします

通常、Web サイトにはナビゲーション メニューがあり、次のように定義できます:

XML/HTML コードコンテンツをクリップボードにコピー
1. <div id="nav" >
2. <a href="#" >ホーム a>
3. <a href="#" >a> >
4. <a href="#" >連絡先 a>
5. div>
美しいコードを書きたい場合は、この方法を使用しないことをお勧めします。

UL レイアウト ナビゲーション メニューを使用する理由? ——ULは定義リストのために生まれたからです

次のように定義するのが最善です:

XML/HTML コード

コンテンツをクリップボードにコピー

1. <ul id="nav" >
2. <リ><a href="#">ホーム a>リ>
3. <リ><a href="#">について a>リ>
4. <リ><a href="#">連絡先 a>リ>
5. ul>

15. IE の対処方法を学ぶ

IE はフロントエンド開発者にとって常に悪夢でした。

CSS スタイル シートが基本的に完成している場合は、IE 用に別のスタイル シートを作成できます。これにより、これは IE でのみ有効になります。

CSS コードコンテンツをクリップボードにコピーします

これらのコードの意味は次のとおりです: このコードは、ユーザーのブラウザが IE6 以下の場合にのみ有効です。 IE7 を含める場合は、「[if lt IE 7]」を「[if lte IE 7]」に変更します。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

このウェブサイトの声明

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