この記事では、HTMLコードを作成するための30のガイドをまとめます。それらを念頭に置いて、HTMLコードを書くプロセスでそれらを柔軟に使用する限り、あなたは間違いなく美しいコードを書いて、できるだけ早くプロの開発者のランクを入力します。
前のページソースコードで、私はしばしばそのような記述を見ました：
<li>some text here.<li>some new text here.<li>you get the idea.たぶん過去には、このような閉鎖されていないHTMLタグを許容できましたが、今日の基準では、これは非常に望ましくなく、100％回避する必要があります。必ずHTMLタグを閉じることに注意してください。そうしないと、検証に合格せず、予期しない問題を引き起こす可能性があります。
このフォームを使用するのが最善です。
<ul><li>some text here. </li><li>some new text here. </li><li>you get the idea. </li></ul>著者は以前に多くのCSSフォーラムに参加しました。ユーザーが問題に遭遇した場合、最初に2つのことをすることを提案します。
通常、選択するドキュメントタイプは4つあります。Doctype定義は、ブラウザにHTML、XHTML、または2つの混合物が含まれているかどうかをブラウザに伝え、ブラウザがタグを正しく解析できるようにします。
1. <!doctype html public -//w3c//dtd html 4.01//en http://www.w3.org/tr/html4/strict.dtd>2. <!doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/loose.dtd>3. <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>4. <!doctype html public -//w3c//dtd xhtml 1.0 strict//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>どのようなドキュメントタイプの宣言を使用するかについて、常に異なる意見がありました。一般に、最も厳格な声明が最良の選択であると考えられていますが、研究では、ほとんどのブラウザがこの声明を通常の方法で解析することが示されているため、多くの人がHTML4.01標準を使用することを選択します。声明を選択する最終行は、それがあなたには本当に適していないということです。そのため、プロジェクトに合った声明を包括的に選択することを検討する必要があります。
コードを書くのに忙しいとき、このように、少し埋め込まれたCSSコードをさりげなく追加または怠zyに追加することがよくあります。
<p style=color: red;>网页设计</p>これは便利で問題ありませんが、コードに問題が発生します。
コードの作成を開始するときは、コンテンツ構造が完了した後にスタイルコードの追加を開始するのが最善です。
このエンコード方法は、非常に模倣アプローチであるゲリラとの戦いのようなものです。 -Chris Coyier
より良いアプローチは、このPのスタイルをStyleSheetファイルで定義することです。
someelement > p {color: red;}理論的には、CSS StyleSheetsをどこにでも紹介できますが、HTML仕様では、ページのレンダリングをスピードアップできるWebページのヘッドタグに導入することをお勧めします。
Yahooの開発プロセス中に、ヘッドタグにスタイルシートを導入すると、Webページの読み込みがスピードアップすることがわかりました。
これにより、ページを段階的にレンダリングできるためです。 - YSLOWチーム
<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>覚えておくべき原則の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>何年も前に、JSコードをHTMLタグに直接追加する方法がありました。特にシンプルなフォトアルバムで非常に一般的です。基本的に、オンクリックイベントがタグに添付され、その効果は一部のJSコードと同等です。議論しすぎる必要はありません。この方法は使用しないでください。コードは外部JSファイルに転送され、その後、タイムリスナーにAddEventListener / AttachVentを変更する必要があります。または、jQueryなどのフレームワークを使用すると、クロック方式が必要です。
$('a#morecorninfolink').click(function() {alert('want to learn more about corn?');});多くの人々は、標準的な検証の重要性と価値を実際に理解していません。著者は、この問題をブログで詳細に分析しました。一言で言えば、標準的な検証はあなたのためであり、あなたがトラブルを引き起こすことではありません。
Webページの制作を始めたばかりの場合は、このWebページ開発ツールバーをダウンロードし、エンコードプロセス中にいつでもHTML標準検証とCSS標準検証を使用することを強くお勧めします。 CSSが非常に簡単に学習しやすい言語だと思うなら、それはあなたを死なせます。複雑なコードにより、ページは抜け穴や問題でいっぱいになります。良い方法は、検証、検証、および検証することです。
FireBugは、Web開発に適した最高のプラグインです。 JavaScriptをデバッグするだけでなく、ページタグのプロパティと場所を直感的に理解することもできます。言うまでもなく、ダウンロードしてください！
著者の観察によると、ほとんどのユーザーはFirebug関数の20％しか使用していません。これは本当に無駄です。このツールをシステムで学ぶことも数時間費やすかもしれません。
FireBugチュートリアル：理論的には、このようにマークをさりげなく書くことができます：
<div><p>here's an interesting fact about corn. </p></div>このように書かないことが最善です。より多くの文字を入れることは役に立たず、それはコードをugいにするでしょう、それは良いことです：
<div><p>here's an interesting fact about corn. </p></div>著者は、これらの6つのタグをすべてWebページで使用することを推奨しています。ほとんどの人は最初の4つのみを使用しますが、最も使用されるHは、デバイスに優しい、検索エンジンフレンドリーなど、多くの利点があります。PタグをH6に置き換えることもできます。
今日、著者はTwitterで議論を開始しました。H1をロゴまたは記事のタイトルで定義する必要がある場合、80％の人々が後者を選択しました。
もちろん、それを使用する方法はあなたのニーズに依存しますが、ブログを設定するときは、記事のタイトルをH1として設定することをお勧めします。これは、検索エンジン最適化（SEO）に非常に有益です。
過去数年にわたって、Yahooのチームはフロントエンド開発で多くの素晴らしい仕事をしてきました。少し前に、彼らはYSLOWと呼ばれるFireBug拡張機能をリリースしました。これは、<Webページを分析し、トランスクリプトを返します。このWebページのすべての側面を慎重に分析し、改善が必要な領域を提案します。それは少し厳しいですが、それは間違いなくあなたを助けます。強くお勧めします-YSLOW！
通常、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>IEは常にフロントエンド開発者にとって悪夢でした！
CSS StyleSheetが基本的に確定している場合、IE用のStyleSheetを作成できます。これは、IEに対してのみ有効になります。
<!--[if lt ie 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->これらのコードの意味は、ユーザーのブラウザがIE6以下の場合、このコードが有効になります。 IE7を含めたい場合は、[Lt IE 7の場合]を[LTE IE 7]に変更します。
あなたがWindowsであろうとMacユーザーであろうと、あなたが選択できる多くの優れた編集者があります：
私たちのほとんどが書いている最初のページを振り返ると、私たちは間違いなく深刻なdivの習慣を見つけるでしょう。通常、初心者の本能は、段落をDIVで包み、ポジショニングを制御するためにより多くのdivを置くことです。 - 実際、これは非効率的で有害なアプローチです。
Webページを書いた後、要素の数を最小限に抑えるために何度も戻って確認する必要があります。
ULをレイアウトリストに使用できる場合は、Divを使用してレイアウトしないでください。
記事を書くための鍵は、ページを削減、削減、削減することであるように、ページを作成することもこの標準に従う必要があります。
画像にAlt属性を追加することの利点は自明です。これにより、画像を無効にしたり、特別なデバイスを使用して王子情報にアクセスしたり、画像検索エンジンに優しいユーザーを使用したりします。
Firefoxは、画像alt属性の表示をサポートしていません。タイトル属性を追加できます。
<img src=cornimage.jpg alt=网页设计title=网页设计/>私はそれを知らずに早朝まで勉強して仕事をすることがよくありますが、これは良い状況だと思います。
私の〜ハ！時間（ヤハウの瞬間、ヤナギの光や悟りの瞬間の瞬間を指します）は通常、夜遅くに起こります。たとえば、この場合はJavaScriptの閉鎖の概念を完全に理解しています。このような素晴らしい瞬間を経験していない場合は、今すぐ試してみてください！
アイドルを模倣することほど速くHTMLを学ぶのに役立つものはありません。最初は、私たちは皆、コピー機を作ってからゆっくりと独自のスタイルを開発する必要がありました。お気に入りのWebサイトページのコードを調査し、それらがどのように実装するかを確認してください。これが専門家にとって唯一の方法です。試してみる必要があります。注：コピーしてコピーするのではなく、コーディングスタイルを学び、模倣してください！
インターネット上のさまざまなクールなJavaScript効果に注意してください。プラグインを使用しているように見える場合は、ソースコードのヘッドタグのファイル名に基づいてプラグイン名を見つけることができ、自分で使用するために使用することを学ぶことができます。
これは、他の企業向けのWebサイトを作成するときに特に必要です。ブロッククオートタグを自分で使用しませんか？その後、ユーザーはそれを使用する可能性があります、あなたはあなた自身を使用しませんか？ユーザーもそうかもしれません。時間をかけて、UL、OL、P、H1-H6、BlockQuotesなどの要素のスタイルを表示し、不作為があるかどうかを確認してください。
翻訳者のメモ：元の英語のタイトルはTwitterを使用することです
現在、Webページに無料で追加できる多くのAPIがあり、これらのツールは非常に強力です。それはあなたが多くの巧妙な機能を実装するのに役立つ可能性があり、さらに重要なことは、あなたがウェブサイトを宣伝するのに役立つことです。
Photoshopは、フロントエンドエンジニアにとって重要なツールです。 HTMLとCSSに熟練している場合は、Photoshopについて詳しく知ることもできます。
一部のHTMLタグはめったに使用されませんが、それでもそれらを理解する必要があります。たとえば、Abbr、Citeなど、緊急事態の場合は学習する必要があります。
インターネットには多くの優れたリソースがあり、コミュニティには多くの専門家が隠されています。ここでは、自分で学び、経験豊富な開発者に尋ねることができます。
CSSリセットはCSSもリセットされます。これは、HTMLタグスタイルまたはデフォルトスタイルをリセットすることを意味します。
また、インターネットでCSSリセットを使用するかどうかについての激しい議論もあり、著者はそれを推奨しています。最初に成熟したCSSリセットを選択してから、ゆっくりと自分に合ったものに進化できます。
簡単に言えば、Web要素をできるだけ調整する必要があります。好きなWebサイトを観察することができ、ロゴ、タイトル、チャート、段落は間違いなく非常に正しいです。そうでなければ、それは混oticとしていて専門的でないように見えます。
HTML、CSS、およびPhotoshopの知識を習得したので、PSDをWebページの写真や背景に変換する方法も学ぶ必要があります。ここに2つの良いチュートリアルがあります。
JavaScriptとCSSには多くの優れたフレームワークがありますが、初心者である場合は、急いで使用しないでください。 CSSを巧みに習得できない場合、フレームワークを使用すると知識システムが混同されます。
CSSフレームワークは、熟練した開発者向けに設計されており、これにより多くの時間を節約できます。