あなたが知らなかったかもしれない別の7つのHTML5機能

良い一日!



私たちは皆、HTML5とその機能について十分に耳にしました。 たとえば、誰もが聞いているオーディオビデオの要素。 しかし、これにもかかわらず、誰もが知っているわけではないタグがいくつかあり、最近まで私はそれを知りませんでした。 これが私があなたと共有したいことです。





この機能またはその機能が動作するブラウザを確認するには、 「使用できますか 」にアクセスすることをお勧めします。




オートフォーカス



autofocus属性を使用すると、テキストフィールドやボタンなどの任意の要素にフォーカスを切り替えることができます。 ページが完全に読み込まれた後、要素にフォーカスが設定されます。 以前は、JavaScriptを使用してこのような機能を実装する必要がありましたが、今ではHTML5があり、これを非常に迅速かつ簡単に行うことができます。



例。



<input autofocus="autofocus" />
      
      







ダウンロードする



ダウンロード属性を使用すると、ダウンロードしたファイルの名前を設定できます。 サーバー側でこれを行う必要はありません。 たとえば、hello.jsというファイルがあり、READMEとして簡単に保存できます。 すべてが非常に簡単に行われます。ダウンロード属性は、ファイルへのパスを設定するhref属性とともに使用されます。



例。



 <a href="hello.js" download="README"></a>
      
      







先読み



prefetch属性により、ブラウザは、面倒で長いダウンロードを待つのではなく、リンクをクリックするとすぐに表示するために必要なページをプリロードできます。 たとえば、記事はいくつかの部分に分割されます(各部分は独自のページにあります。/Page1および/ page2)。 これで、最初のページを読んでいる間に2番目のページを事前に読み込むことができます。 これは非常に簡単です。



例。



 <link rel="prefetch" href="/page2">
      
      







隠された



ご想像のとおり、 hidden属性はページ上の要素を隠すために使用されます。 この属性は、 入力要素のtype属性の隠し値と同じ役割を持っています。 私たちは皆、ユーザーが見る必要のないデータを保存するために保存された隠しテキストフィールドを覚えています。 さて、 hidden属性を使用すると、 任意の要素を非表示にできます。



例。



 <div hidden="hidden">, !  ,      ... :(</div>
      
      







スペルチェック



spellcheck属性を使用すると、データを入力するときにスペルエラーをチェックできます。 この属性は、すべての入力(読み取り、テキストフィールド)および編集可能なdiv(誰も覚えていない場合はcontenteditable div)で機能します。



例。



 <input type="text" spellcheck="true">
      
      







データリスト



datalistタグを使用すると、エンドユーザーがテキストをフィールドに入力するときに単語の選択肢を提案できます。 たとえば、サブスクライバーが使用しているモバイルオペレーターのトピックに関する調査を実施したいと考えています。 彼が何と呼ばれているかを覚えておらず、名前の最初の文字だけを覚えている場合は、利用可能なすべてのオプションを提供できます。



例。



 <input list="provlist" name="list" > <datalist id="provlist"> <option value=""> <option value=""> <option value=""> <option value="2"> <option value=""> </datalist>
      
      







出力



出力要素は、画面にデータを表示する機能を提供します。 任意のタイプのデータを出力するのに役立ちます。 たとえば、電卓であるWebアプリケーションを作成しました。 結果をページに出力するために使用できる出力要素。



例。



 <output>,   </output>
      
      







私はそれについてすべて考える



HTML5は、間違いなくハイパーテキストマークアップ言語の開発における新しい段階です。 いくつかの完全に役に立たない要素を提供するという事実にもかかわらず、同じ出力を通常のdivに簡単に置き換えることができ、古いIE7で式の評価結果が表示されるかどうかを心配する必要はありません。 そのzashashnikには、たとえばautofocusdatalistなど、いくつかの便利な機能が保存されています。 この場合、HTML5はクライアント側のプログラマーの作業を容易にします。JavaScriptで独自の松葉杖を実装する代わりに、1行または2行で優れた機能を取得できます。



それだけです じゃあね!



All Articles