Webページの生産WebJX記事はじめに：10の実用的なHTML5コードスニペットは、間違いなく収集する必要があります。
HTML5は、Webテクノロジーの開発における重要なマイルストーンです。フロントエンドの開発のために、将来開発中に頻繁に再利用する必要があるコードを見つけることができれば、あなたは拒否しないと思います。以下は、注意深く収集した10を超えるHTML5コードスニペットです。私はあなたがそれを好きになると信じています！
HTML5の最も簡単なテンプレート新しいHTML5プロジェクトを開始する必要がある場合は、間違いなく最も簡単なテンプレートが必要になります。これは非常にシンプルで明確なHTML5テンプレートです。誰もがそれを好きになると思います！
<！doctype html><html>
<head>
<メタcharset = utf-8>
<title>無題</title>
<！ - [lt ie 9]>
<スクリプトsrc => </script>
<！[endif] - >
</head>
<body>
Webの主なコンテンツ
</body>
</html>フォームGoogleマップを取得します
これが非常に簡単なコードです。ユーザーを使用して場所を入力し、Googleマップの場所を取得します。これは、連絡先フォームの生成に非常に適しています。
<form action = method = get target = _blank><ラベル= saddr>場所を入力</label>
<入力型=テキスト名= saddr />
<入力タイプ=非表示名= DADDR
Value = 350 5th Ave New York、NY 10018（Empire State Building） />
<入力タイプ=送信値=取得方向 />
</form> base64エンコードされた1x1サイズの空白のGIFファイル
私は個人的には、この透明なブランクGIFを使用することをお勧めしませんが、2013年でさえ、多くの人がまだそれを使用しています。たぶんあなたもこの方法を使用するのが好きです。
<img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAP///yH5BAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7> Regular Form Verification Email入力検証には、HTML5で通常のフォームを使用できます。
<入力タイプ=テキストデータ= Your-Flash-File.swf幅= 0高さ= 0>
<param name = movie value = your-flash-file.swf />
<param name = quality value = high/>
</object>フィルムとフォールバックをサポートします
HTML5で最も便利なもう1つの機能は、ビデオファイルを簡単に埋め込むことができるビデオタグです。ただし、多くの古いブラウザはそれをサポートしていないため、次のコードが非常に便利です
<ビデオ幅= 640高さ= 360コントロール><ソースSrc = __ビデオ__。mp4 type = video /mp4 />
<ソースSrc = __ビデオ__。ogv type = video /ogg />
<オブジェクト幅= 640高さ= 360タイプ=アプリケーション/x-shockwave-flash
データ= __フラッシュ__。swf>
<param name = movie value = __ flash __。swf />
<param name = flashvars value = controlbar = over＆amp;
画像= __ポスター__。jpg＆amp; file = __ビデオ__。mp4 />
<img src = __ビデオ__。jpg width = 640 height = 360 alt = __ title__
タイトル=ビデオ再生機能はありません。下のビデオをダウンロードしてください />
</object>
</video> iPhone通話＆SMSリンク
Appleは、iPhoneで電話とテキストリンクを作成するための非常に便利な方法を紹介しています。コードは次のとおりです。
<a href = tel：1-408-555-5555> 1-408-555-5555 </a><a href = sms：1-408-555-1212>新しいSMSメッセージ</a> HTML5の自動データ充填機能
Datalist Elementsを使用すると、HTML5を使用すると、一連のデータを使用して自動充填機能を生成できます。サードパーティのJSコードやクラスライブラリを使用する必要はありません！
<入力名= Frameworksリスト= FrameWorks /><Datalist ID = FrameWorks>
<オプション値= Mootools>
<オプション値= moobile>
<オプション値= dojo toolkit>
<オプション値= jQuery>
<オプション値= yui>
</datalist>ファイルは直接ダウンロードできます<！
<a href =/files/adlafjlxjewfasd89asd8f.pdf
ダウンロード= cosons.pdf>経費レポートをダウンロード</a>古いバージョンのブラウザIE6をクラッシュさせます
IE6は中国で非常に使用されていることを知っておく必要があります。 WebアプリケーションまたはWebサイトでIE6をサポートしていない場合は、このコードを追加すると、ユーザーがIE6、Heheをアップグレードすると思います。
<style>*{position：relative} </style> <table> <input> </table>