Clever Geek Handbook

初心者のコーダー向けの十数のヒント。 パート1

良い一日！



はじめに



私はフリーランサーです。 私は、タイプセッターがどのように、そして何をするかについて本当に考えていませんでした。 私はサーバーサイドをやっていて、友人はタイプセットとコンテンツの詰め込みをしていました。 ごく最近、私は何をどのように試してみたいと思いました。 数日前、私は本当に好きな素材に出会いました。 彼は何をどのように書くかを明確に説明した。 残念ながら、このマニュアルの場所を思い出せなかったため、リンクを張ることはできません。 実際、私のメモへようこそ。





新しいDoctype



あなたはまだこの古い、老朽化し​​た、しわだらけのdoctypeを使用していますか？ 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




もしそうなら、なぜですか？ それでは、HTML5で私たちに届いた新しいdoctypeに移りましょう。 



 <!DOCTYPE html>


正しいdoctype（およびその結果、互換モード）を探すために急ぐ必要はありません。 HTML5を使用すると、心配する必要がなくなり、頭が痛くなりません。 新しいdoctypeが古いブラウザに適合した場合、単純に標準互換モードのままになります。 使い始めて、違いを感じてください！



図形要素



以前にこのマークアップを複数回使用しました： 



  <img src="path/to/image" alt=" ?     !" /> <p>Image of Mars. </p>


しかし、残念なことに、ここには画像にキャプションを追加する簡単な方法がありません。 HTML5標準を開発する際、これを考慮し、 Figure要素を追加することでこの問題を解決しました。 figcaptionと組み合わせることで、タンバリンとの追加のダンスなしで、キャプションまたはキャプションを画像に簡単に割り当てることができます。 このように、例えば： 



  <figure> <img src="path/to/image" alt=" ?     !" /> <figcaption> <p>  -  .</p> </figcaption> </figure>




さらに進みましょう。



スクリプトおよびリンク要素のタイプはこれ以上ありません



以前は、多くの人が次のマークアップを書きました。 



  <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>


これはもう行う必要はありません。 つまり、最初にスタイルを追加してから、スクリプトを実装していました。 さて、これらの奇跡のタイプが明示的に示していない。 



  <link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>




引用符または引用符なし-それが問題です



本当に質問です。 HTML5はXHTMLではありません。 不要な場合は、属性を引用符で囲まないでください。 「水中の魚」のようなコードを感じる場合、恥ずべきことや間違ったことはありません。 



 <p class = myClass id= someId>,  ,   ?</p>




外出先でコンテンツを編集可能にする



HTML5は、Web開発者にとって、これまでにない素晴らしい機会を提供します。 この機能は可変コンテンツです。 ウィキペディアを読んで、著者の1人が間違っていたことに気が付いたと想像してみてください（誰も起こらない）。 この機会を利用して、テキストをタップし、 2回のクリックで文字通り「2回クリック」してこのテキストを修正することができます。 マークアップの例を次に示します。 



  <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> . </li> <li>  . </li> <li>  - ! </li> </ul> </body> </html>




または、スタイルテーブルで実行します。 



  <ul contenteditable = true>




出来上がり：







メール欄



以前は、誰もが通常の入力フィールドを提供し、サーバー側でデータの正確性を確認する必要がありました。 これは、サーバーに不要なリクエストをロードすることなく、クライアント側で実行されます。 古いブラウザ（誰が話しているかは誰でも推測します）が新しいタイプの入力に遭遇すると、通常のテキスト入力のレンダリングを完了するように求められます。 これは非常に簡単です。 たとえば、次のとおりです。 



 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form> </body> </html>




そして、次のようになります。







またはそのように。 Pff ...







このフィールドは、無効な電子メールアドレスを入力したことをすぐに警告します。 すべてが正常な場合（およびIEが常に正常な場合）、データはサーバーに送信されます。



ダークホース別名プレースホルダー



繰り返しになりますが、先ほどJavaScriptで乱暴にスクリプトを作成することで、テキストボックスにヒントを作成しました。 このテキストボックスをクリックすると、プロンプトが消えます。 今日、これを処理する必要はありません。結局のところ、 プレースホルダーがあります。

使用、ご容赦はできません。 このように： 



 <input name="email" type="email" placeholder="  - !" />




そして何？







ヘッダーと地下室



これで、サイトのヘッダーの場所（または同じものである見出し）と地下室の場所を示すために、 IDで庭をフェンスする必要がなくなりました。 そのようなタイプによって： 



  <div id="header"> <p></p> </div> <div id="footer"> <p>  </p> </div>


法的で意味的に有能で、それに応じて有効なビジネスコードを提供します。 そして、なぜだ。 



  <header> 3000   . </header> <footer> -3000  .  . </footer>




サイト上のこれらの要素を一度混同しないようにしてください。 まあ、あなたは決して知らない、何も起こりません。



Internet ExplorerとHTML5-現実またはフィクション



IEの古いバージョンは、HTML5と友達になりたくありません。 殺すものの、現在マイクロソフトに従事しているより。 私たちの仕事は、彼らを友達にすることです。

最初の方法は、JavaScriptとCSSを使用することです。 最初に、新しい要素をスタイルする必要があります。 このように、例えば： 



 header, footer, article, section, nav, menu, hgroup { display: block; }




しかし、残念なことに、IEはこれらのタグを無視する常識 によるトレーニングをまだ受けられません 。 さて、あなたはそれを自分で求めました。 JavaScriptを使用して自分で作成します。 



 document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu");




これですべてです、シド。 これで、私たちの魂が望む場所でこれらのタグを使用できます。 時々この自転車のスペルを繰り返さないために、Remy Sharpは頑固なIEの学習プロセスを簡素化するためにこれを提案しました。 このスクリプトは、次の方法でプロジェクトに含める必要があります。 



 <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->




IEは現在更新中です。既にいくつかのDeveloper Previewバージョンでは、Internet ExplorerでHTML5サポートをテストできます。 はい、はい、あなたは正しいと聞きました-HTML5です。



Hgroup要素



再びセマンティクス。 あなたのサイトにブログカテゴリのブロックがあると想像してください。以下はトピックそのものです。 もちろん、カテゴリのあるブロックをクリックすると、既存のトピックが表示されます。 これらの同じブロックが関係のプロセスにあることに気付くのは簡単です。 はい、はい-アダムス家族 。

これで、セマンティクスレベルで、それを証明できます。 このように： 



  <header> <hgroup> <h1> ... </h1> <h2>     . </h2> </hgroup> </header>




コメントは冗長です。



必須属性



登録フォームがあると想像してください。 必ず入力する必要がある入力フィールドがあることをユーザーに理解させる必要があります。

以前は、これは次のように行われていました。ユーザーがデータを入力し、 「開始」ボタンをクリックしてサーバーに送信し、入力されたデータの形式の有効性を確認するスクリプトが実行されました。必要なフィールドが入力されていない場合、間違い。

現在、これはクライアントのクライアント側で簡単に実行できます。 必要な属性をテキストボックスに追加するだけです 。 たとえば、次のとおりです。 



  <form method="post" action=""> <label for="someInput"> : </label> <input type="text" id="someInput" name="someInput" placeholder="Bill" required> <button type="submit"></button> </form>








私は何ですか？ 私は何もない！



おわりに



このトピックでは、初心者のWebプログラマー、およびより正確なレイアウトデザイナーであるコードの書き方を望み、アドバイスしました。



じゃあね！


More articles:


All Articles