HTML5は、Webテクノロジーの開発における重要なマイルストーンです。フロントエンドの開発のために、将来開発中に頻繁に再利用する必要があるコードを見つけることができれば、あなたは拒否しないと思います。以下は、注意深く収集した10を超えるHTML5コードスニペットです。私はあなたがそれを好きになると信じています！
新しいHTML5プロジェクトを開始する必要がある場合は、間違いなく最も簡単なテンプレートが必要になります。これは非常にシンプルで明確なHTML5テンプレートです。誰もがそれを好きになると思います！
<！Doctype html> <html> <head> <meta charset = utf-8> <title> untitled </title> <！ - [if lt ie 9]> <script src = http：//html5shim.googlecode.com/svn/trunk/html5.js> </< web </body> </html>
これが非常に簡単なコードです。ユーザーを使用して場所を入力し、Googleマップの場所を取得します。これは、連絡先フォームの生成に非常に適しています。
<フォームアクション= http：//maps.google.com/mapsメソッド= getターゲット= _blank> <label for = saddr>場所</label> <入力タイプ=テキスト名= saddr/> <入力型= daddd = 350
私は個人的には、この透明なブランクGIFを使用することをお勧めしませんが、2013年でさえ、多くの人がまだそれを使用しています。たぶんあなたもこの方法を使用するのが好きです。
<img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAP///yH5BAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7>
入力検証には、HTML5で通常のフォームを使用できます。
<入力タイプ=テキストスタイル= "マージントップ：0px;マージンボトム：15px;パディング：0px;境界線：1pxソリッドRGB（43、153、230）;フォントファミリー：継承;垂直 - 洗浄：ベースライン、ベースライン、カラー：RGB（0）; 1000px; z-index：1000; "> <application/x-shockwave-flash data = your-flash-file.swf width = 0> <param name = movie value = your-flash-file.swf/>
HTML5で最も便利なもう1つの機能は、ビデオファイルを簡単に埋め込むことができるビデオタグです。ただし、多くの古いブラウザはそれをサポートしていないため、次のコードが非常に便利です
<ビデオ幅= 640高さ= 360コントロール> <ソースSRC = __ビデオ__。MP4タイプ=ビデオ /mp4 /> <ソースSRC = __ビデオ__。 name = flashvars value = controlbar = over＆amp; image = __ポスター__。jpg＆amp; file = __ video __。mp4 /> <img src = __ビデオ__。フォントファミリー：27px：rgb（0、0）; HREF = Tel：1-408-555-5555> 1-408-5555-5555 </a> <a href = sms：1-408-555-1212>新しいSMSメッセージ</a>
Datalist Elementsを使用すると、HTML5を使用すると、一連のデータを使用して自動充填機能を生成できます。サードパーティのJSコードやクラスライブラリを使用する必要はありません！
<入力名= FrameWorks List = FrameWorks /> <DataList ID = FrameWorks> <Option Value = MOOTOOLS> <オプション値= MOOBILE> <OPTION値= DOJO ToolKit> <オプション値= jquery> <option値= yui> < /datalist>
<！ - cosons.pdfとしてダウンロードします - > <a href =/files/adlafjlxjewfasd89asd8f.pdfダウンロード= cosons.pdf>あなたの経費レポートをダウンロード</a>
IE6は中国で非常に使用されていることを知っておく必要があります。 WebアプリケーションまたはWebサイトでIE6をサポートしていない場合は、このコードを追加すると、ユーザーがIE6、Heheをアップグレードすると思います。
<style>*{position：relative} </style> <table> <input> </table>