html5の新機能は何ですか？ html5の新機能まとめ

HTML5 が HTML の 5 番目の大きな変更であることは誰もが知っています。つまり、大きな変更であるため、必ず新しい機能が追加されます。 HTML5 の新機能は何ですか? 次の記事ではhtml5の新機能についてまとめていきます。

まず、html5 が何を意味するのかを知っておく必要があります。html5 についてあまり知らない場合は、次の記事を参照してください。 html5 とは何ですか? html5って何に使うの？ さて、html5 の具体的な定義が分かったところで、html5 の新機能を見てみましょう。

html5の新機能は何ですか?

1. HTML5 の新機能: ペイント用の Canvas 要素

Canvas 要素は、Web ページ上にグラフィックを描画するために使用され、キャンバスのすべてのピクセルを制御できます。 Canvas には、パス、長方形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>

svg について話しましょう: svg は、2 次元のベクター グラフィックスを記述するために使用されるグラフィックス形式です。

svg には 3 つの用途があります:

1. Web ページに画像として svg を直接配置します。

2. svgはアニメーションを実現します。

3. SVG 画像のインタラクションとフィルター効果。

手順:

(1) Canvas は JavaScript を通じて 2D グラフィックを描画します。

(2) キャンバスはピクセルごとにレンダリングされます。

(3) キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

(4) svg は、XML を使用して 2D グラフィックスを記述する言語です。

(5) svg は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。

(6) svg では、描画された各グラフィックはオブジェクトとみなされます。 svg オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。

キャンバスと SVG の詳細については、以下を参照してください: HTML5 キャンバス および HTML5 インライン SVG

2. html5 の新機能: よりリッチで強力なフォーム

html5 には複数の新しいフォームがあります入力入力タイプ。これらの新機能により、入力制御と検証が向上します。

html5 は次のフォーム要素も追加します。

: ユーザーを認証するための信頼できる方法を提供します。タグはフォームで使用されるキー ペア ジェネレーター フィールドを指定します。

: 計算やスクリプト出力など、さまざまなタイプの出力に使用されます。

HTML5 新しいフォーム属性:

プレースホーダー属性: ユーザーが値を入力する前に、入力フィールドに短いプロンプトが表示されます。つまり、入力ボックスの共通のデフォルト プロンプトは、ユーザーが入力すると消えます。

必須属性: ブール型属性です。入力が必要な入力フィールドは空にすることはできません

pattern 属性: 要素の値を検証するために使用される正規表現を記述します。

min 属性と max 属性: 要素の最小値と最大値を設定します。

step 属性: 入力フィールドの有効な数値間隔を指定します。

高さと幅の属性: 画像タイプの タグの画像の高さと幅。

autofocus 属性: ブール値の属性です。ページの読み込み時にフィールドが自動的にフォーカスを取得するように指定します。

複数属性: ブール型属性です。 要素内で複数の値を選択できることを指定します。

3. html5 の新機能: メディアのビデオ要素とオーディオ要素

1. html5 は、オーディオ ファイルを再生するための標準を提供します。つまり、

<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

手順:

(1) control 属性は、再生、一時停止、および音量コントロールを追加するために使用されます。

(2) の間に、ブラウザがサポートしていない

(3)

以上がhtml5の新機能は何ですか？ html5の新機能まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。