h5 の 28 個の新機能を詳しく紹介

Figure

要素は

と

を使用して キャプション付きの画像を表現します

<figure> 
<img src=”path/to/image” alt=”About image” /> 
<figcaption> 
<p>This is an image of something interesting. </p> 
</figcaption> 
</figure>

3. 再定義されました

ウェブサイトの下部にある著作権ステートメントなどの小さなレイアウト

4. リンクおよびスクリプト タグの type 属性を削除します

HTML5 では、属性を引用符で囲む必要は厳密には必要ありません閉じられていませんが、引用符と終了タグを追加することをお勧めします 6. コンテンツを編集可能にするには、contenteditable 属性を追加するだけです
7. 入力のタイプを電子メールに設定すると、ブラウザーが検証します。もちろん、この入力が電子メール タイプであるかどうかにかかわらず、バックエンドにも対応する検証が必要です8。この入力属性の意味は、使用する必要がないことです。プレースホルダー効果を実現するための JavaScript 9 . ローカル ストレージ

ローカル ストレージを使用すると、現在、ほとんどのブラウザーがこれをサポートしており、使用する前に window.localStorage が存在するかどうかを確認できます。 10. セマンティックヘッダーとフッター
11. その他の HTML5 フォーム機能
12. IE と HTML5 デフォルトでは、新しい HTML5 要素はインラインでレンダリングされますが、次のメソッドを使用してブロックでレンダリングすることができます。
残念ながら、IE はこれらのスタイルを次のように修正できます:

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

13。hgroup は、

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

などのタイトルのグループをグループ化するためにヘッダーで使用されます。 required 入力が必要かどうかを定義する属性です。

<header> 
<hgroup> 
<h1> Recall Fan Page </h1> 
<h2> Only for people who want the memory of a lifetime. </h2> 
</hgroup> 
</header>

または

<input type=”text” name=”someInput” required>

15 のように宣言できます。オーディオのサポート HTML5 は オーディオ
をレンダリングするためにサードパーティのプラグインに従う必要はなくなりましたが、一部の互換性処理を提供する必要があります。

<input type=”text” name=”someInput” required=”required”>

など
17. ビデオのサポート
オーディオと同様に、

<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>

21. 属性のサポートを検出します

Modernizr に加えて、いくつかの属性がサポートされているかどうかを単純に検出することもできます。

<audio autoplay=”autoplay” controls=”controls”> 
<source src=”file.ogg” /><!–FF–> 
<source src=”file.mp3″ /><!–Webkit–> 
<a href=”file.mp3″>Download this file.</a> 
</audio>

22. マーク要素 テキストを選択すると、HTML 上の JavaScript のマークアップ効果は次のようになります。
23.

を使用する場合

HTML5 には非常に多くの要素が導入されていますが、それでも p を使用する必要がありますか?これより良い要素がない場合は p を使用できます。 24. HTML5 をすぐに使用したいですか?

2022 年まで待つ必要はありません。すぐに使用できます。

25. HTML5 ではないもの

1)SVG 2)CSS3
3)Geolocation

4) クライアントストレージ

5) Web ソケット26. データ属性

<video controls preload> 
<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” /> 
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” /> 
<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p> 
</video>

CSS で使用:

<style> 
h1:hover:after { 
content: attr(data-hover-response); 
color: black; 
position: absolute; 
left: 0; 
} 
</style> 
<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>

27. Output元素

元素用来显示计算结果，也有一个和label一样的for属性
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值

<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”"> 
input[type=range]:before { content: attr(min); padding-right: 5px; 
} 
input[type=range]:after { content: attr(max); padding-left: 5px;}

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

以上がh5 の 28 個の新機能を詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。