ホームページ > 記事 > ウェブフロントエンド > HTML 初心者のための 15 のベスト プラクティス
HTML 初心者のための 15 のベスト プラクティス
- 高洛峰オリジナル
- 2017-02-24 10:27:341375ブラウズ
以下は HTML 初心者向けの 30 のベスト プラクティスです。参考までに皆さんに共有します。具体的な内容は次のとおりです
1. タグは閉じたままにしてください
以前は、次のようなコードをよく見かけました (注釈: どれだけ長いか)前はこれでした Ah...):
<li>Some text here. <li>Some new text here. <li>You get the idea.
外箱の UL/OL ラベルが欠落していることに注意してください (意図的か非意図的かは誰にもわかりません)。また、LI ラベルを閉じるのを忘れていました。今日の基準からすると、これは明らかに悪い習慣であり、100% 避けるべきです。とにかくタグは閉じたままにしておきます。そうしないと、HTML タグを検証するときに問題が発生する可能性があります。
より良い方法
<ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul>
2. 正しいドキュメントタイプを宣言する
著者は以前から多くの CSS フォーラムに参加しており、ユーザーが問題に遭遇した場合には、最初に次の 2 つのことを行うよう提案しています。
1.エラーがないことが保証されています。
2. 正しい doctype が追加されていることを確認します
DOCTYPE は、ページに HTML、XHTML、または両方の混合が含まれているかどうかをブラウザーに伝え、ブラウザーがそれを正しく解析できるようにします。
通常、選択できるドキュメント タイプは 4 つあります:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
どのドキュメント タイプ宣言を使用するかについては、さまざまな意見があります。一般に、最も厳密な宣言を使用することが最良の選択であると考えられていますが、調査によると、ほとんどのブラウザはこの宣言を解析するために通常の方法を使用するため、多くの人が HTML4.01 標準の使用を選択します。ステートメントを選択する際の重要な点は、それが本当に自分に適しているかどうかです。そのため、プロジェクトに適したステートメントを選択するには、それを総合的に考慮する必要があります。
3. インライン スタイルは絶対に使用しないでください
コードの作成に没頭していると、このように、何気なくまたは怠惰に小さなインライン CSS コードを追加することがよくあります
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>
これは便利で問題がないようです。ただし、これはコーディングの実践における間違いです。
コードを記述するときは、コンテンツ構造が完成するまでスタイル コードを追加しないことをお勧めします。
このコーディング方法はゲリラ戦のようなもので、非常に模倣的なアプローチです。 ——Chris Coyier
より良いアプローチは、タグ部分を完成させた後、外部スタイルシートファイルでこの P のスタイルを定義することです。
お勧め
#someElement > p {
color: red;
}
4. すべての外部 CSS ファイルを head タグ内に配置します
理論的には、CSS スタイル シートをどこにでも導入できますが、HTML 仕様では、Web ページの head タグに CSS スタイル シートを導入することを推奨しています。ページのレンダリング速度。
Yahoo の開発プロセス中に、head タグにスタイル シートを導入すると、ページが段階的にレンダリングされるため、Web ページの読み込みが高速化されることがわかりました。 —— ySlow Team
<head> <title>My Favorites Kinds of Corn</title> <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> </head>
5.javascript ファイルは一番下に配置されます
覚えておくべき原則の 1 つは、ページをできるだけ早くユーザーの前に表示することです。スクリプトがロードされると、スクリプトが完全にロードされて実行されるまで、ページのロードが一時停止されます。したがって、ユーザーの時間はより多く浪費されることになります。
JS ファイルに特定の機能 (ボタンのクリック イベントなど) を実装するだけでよい場合は、本文の下部に自由に導入してください。これが間違いなく最良の方法です。
アドバイス
<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>
6. インライン JavaScript は絶対に使用しないでください。もう 1996 年ではありません。
何年も前には、JS コードを HTML タグに直接追加する方法がまだありました。これは、シンプルなフォト アルバムで特によく見られます。基本的に、「onclick」イベントがタグに付加され、その効果は一部の JS コードと同等です。あまり説明する必要はありませんが、このメソッドは使用しないでください。コードを外部 JS ファイルに転送してから、「addEventListener /attachEvent」を使用してイベント リスナーを追加する必要があります。または、jquery などのフレームワークを使用して、単に「クリック」メソッドを使用します。
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});
7. 開発と検証を同時に行う
Web ページの制作に携わり始めたばかりの場合は、Web 開発者ツールバーをダウンロードすることを強くお勧めします (Chrome ユーザーは自分でアプリ ストアで検索してください。ユーザーは使用できない場合があります)、コーディングを開始します。プロセス中いつでも「HTML 標準検証」と「CSS 標準検証」を使用します。 CSS を学ぶのがとても簡単な言語だと思っているなら、それはあなたを殺します。コードが甘いと、ページが抜け穴だらけになり、問題が絶えなくなります。検証、検証、再検証を繰り返すのが良い方法です。
8. firebug をダウンロードします
Firebug は間違いなく Web 開発に最適なプラグインです。JavaScript をデバッグできるだけでなく、ページ タグの属性と位置を直感的に理解することもできます。さっそくダウンロードしてみましょう。
9. firebug を使用する
著者の観察によれば、ほとんどのユーザーは Firebug の機能の 20% しか使用していませんが、これは本当に無駄です。このツールを体系的に学ぶのに数時間費やしたほうが良いでしょう。半分の労力で 2 倍の結果が得られます。
10. タグ名は小文字にしてください
理論的には、HTML は大文字と小文字を区別しません。たとえば、次のように記述できます。ただし、このように記述しないのが最善です。役に立ちません。大きな文字を入力すると、コードが醜くなります。
推奨
<DIV> <P>Here's an interesting fact about corn. </P> </DIV>
11. H1-H6 タグを使用する
ほとんどの人は Web ページで 6 つすべてを使用することをお勧めします。最初の 4 つは、最もよく使用される H です。デバイスの使いやすさ、検索エンジンの使いやすさなど、多くの利点があります。P タグを H6 に置き換えてもよいでしょう。
<div> <p>Here's an interesting fact about corn. </p> </div>
12. 順序なしリスト (UL) を使用してナビゲーション メニューをラップします
通常、Web サイトにはナビゲーション メニューがあり、次の方法で定義できます:
<div id="nav"> <a href="#">Home </a> <a href="#">About </a> <a href="#">Contact </a> </div>
如果你想书写优美的代码，那最好不要用这种方式。
为什么要用UL布局导航菜单？ ——因为UL生来就是为定义列表准备的
最好这样定义：
<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
15.学习如何应对IE
IE一直以来都是前端开发人员的噩梦！
如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]-->
这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。
以上就是本文的全部内容，希望对大家学习有所帮助。
更多HTML初学者适用的十五条最佳实践相关文章请关注PHP中文网！