前のページソースコードで、私はしばしばそのような記述を見ました：
<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タグが表示される前に、このページに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 / AttachEventを変更する必要があります。または、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ユーザーであろうと、あなたが選択できる多くの優れた編集者があります：
私たちのほとんどが書いている最初のページを振り返ると、私たちは間違いなく深刻な分裂を見つけるでしょう。通常、初心者の本能は、Paragraphを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フレームワークは、熟練した開発者向けに設計されており、多くの時間を節約できます。