HTML5のヒント1:今日のテクノロジー開発の速度は驚くべきものです。注意していない場合は、それに追いつくことができない場合があります。 HTML-HTML5の新世代の開発は、私たちに新しい驚きをもたらし続けています。この記事を通じて、いくつかのHTMLテクニックを紹介します。
1。新しいドキュメントタイプ(Doctype)
<!doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
面倒で覚えていない上記のXHTMLドキュメントタイプをまだ使用していますか?まだそうである場合は、新しいHTML5ドキュメントタイプに切り替える時が来ました。
<!doctype html>
今では、そのような単純なキャラクターだけが必要です。 (注:Doctype宣言は、HTMLファイルの最初の行に表示する必要があります。)
2。グラフィック(図)要素
次のコードを使用して画像をマークすることを検討していますか?
<mg src = path/to/image alt = about image/>
<p>火星の画像。 </p>
上記のコードは、パラグラフマークと画像要素で単純に包まれているため、シンプルでセマンティックな方法でグラフのタイトルに関連付けることはできません。HTML5は<図>要素を導入することでこれを改善します。 <figcaption>要素と組み合わせて使用すると、グラフィックタイトルとグラフィックをペアリングできます。コードは次のとおりです。
<図>
<img src = path/to/image alt = about image/>
<figcaption>
<p>これは何か面白いもののイメージです。 </p>
</figcaption>
</図>
3。<small>を再定義します
<small>要素を使用して、ロゴに密接に関連する字幕を作成できることがわかります。ただし、HTML5がこの使用法を変更し、<small>要素が再定義されているか、より適切に再定義されているため、小さな単語や他のサイドノート(Webサイトの下部にある著作権通知など)を表すために使用されます。
4.これ以上のスクリプトまたはリンクタイプは必要ありません
ほとんどの場合、以下のコードのようなリンクとスクリプトタグにタイプのプロパティをまだ追加しています。
<link rel = styleSheet href = path/to/styleSheet.css type = text/css/>
<script type = text/javascript src = path/to/script.js> </script>
HTML5では、これは不要になりました。これは、これらの2つのラベルがそれぞれスタイルとスクリプトを表すことを意味します。したがって、すべてのタイプ属性を削除できます。コードは次のとおりです。
<link rel = styleSheet href = path/to/styleSheet.css/>
<スクリプトsrc = path/to/script.js> </script>
5.引用符を使用するか使用しないか
覚えておいてください、HTML5はXHTMLとは異なり、気に入らない場合は属性を引用符で包む必要はありません。ただし、引用符を使用することでより快適に感じることができると思われる場合、もちろん問題はありません。
<p class = myclass id = someid>反応器を起動します。
6.コンテンツを編集可能にします
HTML5の非常に強力な機能の1つはコンテンツ可能です。これは、名前が示すように、ユーザーが要素(子要素を含む)に含まれるテキストコンテンツを編集できるようにすることです。シンプルなタスクリストやWikiベースのサイトなど、幅広い用途があり、その利点の1つは、ローカルストレージを利用することです。
<!doctype html>
<html lang = en>
<head>
<メタcharset = utf-8″>
<title>無題</title>
</head>
<body>
<h2> to-doリスト</h2>
<ul contentedable = true>
<li>メカニカルキャブドライバーを壊します。 </li>
<li>放棄された工場へのドライブ
<li>自己のビデオを見る</li>
</ul>
</body>
</html>
または、5番目のトリックが言っているように、このように(引用なしで)コードを9行目に書くこともできます。
<ul contentedable = true>
7。電子メール入力
電子メールタイプを適用して入力の形式を指定すると、有効な電子メールアドレス構造に準拠する文字列入力のみを許可するようにブラウザにコマンドできます。組み込みのフォームの確認はまもなく到着しますが、これに完全に頼ることはできません。古いブラウザはこの電子メールの種類を理解していません。通常のテキストボックスに戻るだけです。
<!doctype html>
<html lang = en>
<head>
<メタcharset = utf-8″>
<title>無題</title>
</head>
<body>
<form action = method = get>
<ラベル= email>電子メール:</label>
<入力ID =電子メール名=電子メールタイプ=電子メール />
<ボタンタイプ=送信>フォームを送信</button>
</form>
</body>
</html>
ブラウザがサポートし、サポートしていない要素と属性に関しては、すべてのブラウザが現在それほど信頼できないことを知っておく必要があります。たとえば、Operaは、名前属性を指定した場合にのみ電子メールの確認をサポートします。ただし、プレースホルダー属性をサポートしていません(以下で説明するように)。最後に、この形式の検証を使用できますが、あまり頼らないでください。