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

Figure

要素は 24203f2f45e6606542ba09fd2181843a と 614eb9dc63b3fb809437a716aa228d24 を使用して キャプション付きの画像を表現します

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

3. 再定義されました d015d241ae6d34c34210679b5204fe85

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

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 は b97864c2e0ef2353a16c4d64c7734e92 を提供します。オーディオ
をレンダリングするためにサードパーティのプラグインに従う必要はなくなりましたが、一部の互換性処理を提供する必要があります。

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

など
17. ビデオのサポート
オーディオと同様に、39000f942b2545a5315c57fa3276f220 タグはビデオの特定のエンコーディングを指定しないため、ブラウザがサポートするエンコーディングを決定する必要があります。多くの問題が発生します。 Safari と IE は H.264 エンコード形式をサポートし、Firefox と Opera は Theora と Vorbis エンコード形式をサポートします。 HTML5 ビデオを使用する場合は、次を指定する必要があります。ページの読み込み時にビデオをプリロードする必要があるかどうかを決定する必要があります。マークアップで正規表現を直接使用できます

<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. e388a4556c0f65e1904146cc1a846beeを使用する場合

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元素 
be6d67dae90cc1ad6469079e163d0939元素用来显示计算结果，也有一个和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 サイトの他の関連記事を参照してください。